1. Introduction à ReactJS
React est récemment un cadre de développement frontal très populaire. React est originaire des projets internes de Facebook, car la société n'était pas satisfaite de tous les cadres MVC JavaScript sur le marché, il a donc décidé d'écrire son propre ensemble pour créer un site Web Instagram. Après l'avoir fait, j'ai constaté que cet ensemble de choses était très utile et qu'il a été ouvert en mai 2013. Parce que l'idée de conception de React est extrêmement unique, elle est révolutionnaire et innovante, avec des performances exceptionnelles, mais sa logique de code est très simple. Par conséquent, de plus en plus de gens commencent à faire attention et à l'utiliser, estimant que c'est peut-être l'outil grand public pour le développement du site Web futur.
Reactjs Adresse du site officiel: http://facebook.github.io/react/
Adresse GitHub: https://github.com/facebook/react
Reactjs Adresse chinoise: http://reactjs.cn/react/docs/getting-started.html
Qu'est-ce que React?
React est une bibliothèque JS développée par des programmeurs exceptionnels travaillant sur Facebook pour développer des interfaces d'interaction utilisateur. Son code source est maintenu par d'excellents programmeurs de Facebook et de la communauté, il a donc une équipe technique très forte derrière elle pour fournir un support technique. React apporte beaucoup de nouvelles choses, telles que la composante, le JSX, le DOM virtuel, etc. Le DOM virtuel qu'il fournit rend nos composants de rendu très rapidement, nous libérant du travail lourd de fonctionnement fréquemment du DOM. Quiconque connaît React sait qu'il se concentre davantage sur la couche V dans MVC. Combiné avec d'autres choses comme le flux, vous pouvez facilement créer des applications puissantes.
2. Caractéristiques ReactJS
1. Dom virtuel
Grâce à l'algorithme DOM Difff, seules les pièces différenciées seront mises à jour sans rendre toute la page, améliorant ainsi l'efficacité
2. Componentialisation
Divisez la page en plusieurs composants, y compris les structures et les styles logiques
Les composants ne contiennent que leur propre logique, qui peut être prédite lors de la mise à jour des composants, ce qui est propice à la maintenance.
La page divise plusieurs composants et peut être réutilisé
3. Flux de données unidirectionnels
Les données sont passées des composants de niveau supérieur aux sous-composants
Données contrôlables
3. Début avec React. Écrivez bonjour, monde. Tout d'abord, comprenons ce qu'est JSX.
L'un des principaux mécanismes de React est les éléments Virtual Dom: Dom virtuels qui peuvent être créés en mémoire. React utilise Virtual Dom pour réduire les opérations sur le DOM réel et améliorer les performances. Semblable au vrai DOM natif, Virtual Dom peut également être créé via JavaScript, par exemple:
var child1 = react.CreateElement ('li', null, 'premier text text'); var child2 = react.CreateElement ('li', null, 'deuxième contenu texte'); var root2 = react.createelement ('ul', {classname: 'my-list'}, child1, child2); react.render (<v> {root2} </div>, document.getElementById ('contener5'));En utilisant ce mécanisme, nous pouvons utiliser JavaScript pour créer une arborescence DOM d'interface complète, tout comme nous pouvons utiliser JavaScript pour créer de vrais DOMS. Cependant, un tel code n'est pas bien lisible, alors React a inventé JSX et a utilisé notre syntaxe HTML familière pour créer un DOM virtuel:
var root = (<ul classname = "my-list"> <li> premier contenu texte </li> <li> Contenu du deuxième texte </li> </ul>); react.render (<v> {root} </div>, document.getElementyid ('Container6'));4. 5 façons de commencer Hello in React
Méthode 1
<div id = "example1"> </ div> <script type = "text / jsx"> react.render (// Direct html <h1 classname = "classn1"> 1 hellow Direct html world </h1>, document.getElementById ('example1')); </cript>Méthode 2
<div id = "example2"> </ div> <script type = "text / jsx"> react.render (// créer élément directement react.createElement ('h1', {className: 'classn2'}, '2 bonjour, créer directement le monde!'), document.getElementByid ('example2'); </ script>Méthode 3
<div id = "example3"> </ div> <script type = "text / jsx"> var createel = react.createClass ({render: function () {// return <h1> hellow component création html world </h1> // return with or without brackets (<h1 classname = 'classn3'> 3 helllow component componse html world world world world world </h1>);}}); react.render (// Créer un élément <Createel />, // ou double support <Createel> </reateel> document.getElementByid ('example3')); </cript>Méthode 4
<div id = "example4"> </ div> <script type = "text / jsx"> var jsxcreateel = react.createClass ({// Créer un rendu jsx directement: function () {return (react.createelement ('h1', {classname: "classn4"}, "4 bonjour, créer dans le mode jsx directement!")}); // Créer un élément dans la méthode des composants react.CreateElement (jsxcreateel, null), document.getElementById ('example4')); </script>Méthode 5
<div id = "example5"> </ div> <script type = "text / jsx"> var hello = react.createClass ({// template Hello Render: function () {return (<span> {this.props.data} </span>)}}); var world = react.createclass ({{TEMPLATE WORLD RENDER RENDER: FUNÉRATION () {react. Stitching </span>)}}); react.Render (// Créer des éléments dans 2 composants de modèle <h1 className = "classn5"> <Hello Data = '5 Hello' /> <World /> </H1>, document.getElementById ('Example5')); </ Script>5. L'image du résultat ci-dessus
Code joint:
<! doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Undled Document </Title> <meta name = "Viewport" contenu = "initial-scale = 1.0, user-scalable = no, maximum-scale = 1, width = Device-width" /> </-head> <body> <style> * {margin: 0; rembourrage: 0;} corps {arrière-plan: # 333;} # box {background: url (loveImg / qioa-fxehfqi8208393.jpg) supérieur de centre sans répétition; Largeur: 550px; Border: 8px solide #ffff; -Webkit-Box-Size: Border-Box; marge: 50px auto;} # example1, # example2, # example3, # example4, # example5 {margin: 20px auto; Largeur: 100%; Contexte: RGBA (255 255 255, .3); rembourrage: 5px 10px; taille de police: 13px; Couleur: # f1f1f1; -webkit-box-size: border-box; } </ style> <div id = "box"> <div id = "example1"> </ div> <script type = "text / jsx"> react.render (// Direct html <h1 classname = "classn1"> 1 hellow Direct html world </ h1>, document.getElementByid ('example1'); </cript> type = "text / jsx"> react.render (// Créer directement élément react.createelement ('h1', {className: 'classn2'}, '2 Bonjour, Créer directement Element World!'), document.getElementyid ('example2')); </ script> <div id = "example"> </ div> <script type = "text / jsx"> var = " Createel = react.createClass ({render: function () {// return <h1> HELLOW composant crée html world </h1> // return with ou sans supports (<h1 classname = 'classn3'> 3 helllow composant crée html world </ h1>);}}); react.render (// create élément </ h1>); <CreateEel> </ CreateEel> document.getElementById ('Example3')); </cript> <div id = "example4"> </div> <script type = "Text / Jsx"> var jsxcreateel = react.CreateClass ({// Create Render dans JSX directement: function () {return (react.CreateElement ('H1', {classname: "classn4"}, "4 bonjour, créer le monde en jsx directement!"))}}); react.render (// Créer un élément dans la méthode des composants react.CreateElement (jsxcreateel, null), document.getElementByid ('example4')); Bonjour = react.createClass ({// Template Hello Render: function () {return (<span> {this.props.data} </span>)}}); var world = react.createClass ({// template world render: function () {return (<pande> et crée de la template mondiale </pan>)}}}} Composants de modèle <h1 classname = "classn5"> <hello data = '5 hello' /> <world /> </h1>, document.getElementByid ('example5')); </script> </div> <script src = "build / react.min.js"> </cript> </ script srcript src = "build / jsxtransformrer.js"> </ script> </ body> </html>Voici quelques connaissances supplémentaires pour vous:
Réagir les termes
Réagir des éléments
Un objet JavaScript représentant des éléments HTML. Ces objets JavaScript sont finalement compilés dans les éléments HTML correspondants.
Composants
Encapsulez les éléments de la réaction, y compris un ou plusieurs éléments de réact. Les composants sont utilisés pour créer des modules d'interface utilisateur réutilisables tels que la pagination, la navigation par barre latérale, etc.
JSX
JSX est une extension de syntaxe JavaScript définie par React, similaire à XML. JSX est facultatif, nous pouvons utiliser JavaScript pour écrire des applications React, mais JSX fournit un moyen plus simple d'écrire des applications React.
Dom virtuel
Virtual Dom est un objet JavaScript qui simule un arbre Dom. React utilise Virtual Dom pour rendre l'interface utilisateur, tout en écoutant des changements de données sur le DOM virtuel et en migrant automatiquement ces modifications vers l'interface utilisateur.