Débuter avec React.js

React.js est un flexible et à base de composants Bibliothèque JavaScript pour construction d'interfaces utilisateur interactives. C'était créé et open-source par Facebook et est utilisé par de nombreuses entreprises de pointe telles que Dropbox, AirBnB, PayPal et Netflix. React permet aux développeurs de créer des applications riches en données qui peut être mis à jour sans douleur par re-rendu que les composants nécessaires.

React est le Voir la couche de la MVC modèle de conception de logiciel, et principalement se concentre sur la manipulation DOM. Comme ces jours-ci tout le monde parle de React, dans cet article, nous examinons comment vous pouvez commencer avec ça.

Installer React

Vous pouvez installer React soit avec le gestionnaire de paquets npm ou par ajout manuel des bibliothèques nécessaires à votre page HTML. C'est recommandé en utilisant React avec Babel cela vous permet de utiliser la syntaxe ECMAScript6 et JSX dans votre code React.

Si tu veux installer React manuellement, les docs officiels recommandent de utiliser ce fichier HTML. Vous pouvez télécharger la page en cliquant sur le bouton Fichier> Enregistrer la page sous… menu dans votre navigateur. Les scripts dont vous aurez besoin (React, React DOM, Babel) seront également téléchargés dans la react-example_files / dossier. Ensuite, ajoutez les balises de script suivantes à la section de votre document HTML:

Au lieu de les télécharger, vous pouvez ajouter les scripts React de CDN ainsi que.

Vous pouvez également utiliser le versions minifiées des fichiers JavaScript ci-dessus:

Si vous préférez installer React avec npm, le meilleur moyen est d'utiliser le Créer une application React Repo Github créé par Facebook Incubator - c’est également la solution recommandée par la documentation de React. En dehors de React, il a également contient Webpack, Babel, Autoprefixer, ESLint et d'autres outils de développement. Pour commencer, utilisez les commandes CLI suivantes:

 npm installer -g créer-réagir-app créer-réagir-application cd my-app npm start

Quand vous êtes prêt, vous pouvez accédez à votre nouvelle application React sur le localhost: 3000 URL:

Si vous voulez en savoir plus sur comment installer React, Vérifiez directive d'installation des docs.

React et JSX

Bien que ce ne soit pas obligatoire, vous pouvez utiliser la syntaxe JSX dans vos applications React. JSX signifie JavaScript XML, et cela transpose en JavaScript normal. Le gros avantage de JSX est qu’il vous permet d'inclure du HTML dans vos fichiers JavaScript, par conséquent, il est plus facile de définir les éléments React.

Voici les choses les plus importantes à savoir sur JSX:

Tags qui commencer par les minuscules (cas du chameau inférieur) sont rendus en tant qu'éléments HTML normaux.
Tags qui commencer par majuscule (haut camel) sont rendus en tant que composants React.
N'importe quel code écrit entre accolades … sont interprétés comme JavaScript littéral.

Si vous voulez en savoir plus sur comment utiliser JSX avec React consultez cette page à partir de la documentation, et pour la documentation JSX par défaut vous pouvez jeter un oeil sur le wiki JSX.

Créer des éléments React

Réagir a architecture à base de composants dans lequel les développeurs créent composants réutilisables afin de résoudre différents problèmes. Un composant React est constitué de plusieurs ou de plusieurs Éléments de réaction qui sont les plus petites unités d'applications React.

Ci-dessous, vous pouvez voir un exemple simple d'élément React qui ajoute un bouton Cliquez-moi à une page HTML. Dans le HTML, nous ajoutons un

conteneur avec le "myDiv" ID qui sera rempli avec l'élément React. Nous créons notre élément React dans un

   Nous rendons notre élément React avec le ReactDOM.render () méthode lequel prend deux paramètres requis, la Élément de réaction () et son conteneur (document.getElementById ('myDiv')). Vous pouvez en lire plus sur comment fonctionnent les éléments React dans le “Éléments de rendu” section des docs.
 Créer des composants
 Composants de réaction sont unités d'interface utilisateur réutilisables et indépendantes dans lequel vous pouvez facilement mettre à jour les données. Un composant peut être constitué d'un ou de plusieurs éléments React. Les accessoires sont entrées arbitraires vous pouvez utiliser pour transmettre des données à un composant. Un composant React fonctionne de manière similaire aux fonctions JavaScript. Chaque fois qu'il est appelé, il génère une sorte de sortie.
 Vous pouvez utiliser soit le syntaxe de fonction classique ou le nouveau Syntaxe de classe ES6 à définir un composant React. Dans cet article, je vais utiliser ce dernier, car Babel nous permet d'utiliser ECMAScript 6. Si vous souhaitez créer un composant sans ES6, consultez la page Composants et accessoires de la documentation..
 Ci-dessous, vous pouvez voir le composant React simple nous allons créer à titre d'exemple. C'est une notification de base que l'utilisateur voit après s'être connecté à un site. Il y a trois données qui vont changer de cas en cas: le nom de l'utilisateur, le nombre de messages et le nombre de notifications, nous les transmettrons comme accessoires.
  
Chaque composant React est une classe JavaScript qui étend la Composant de réaction classe de base. Notre composant s'appellera Statistiques car il fournit à l'utilisateur une statistique de base. Premièrement, nous créer le Statistiques classe avec le la classe Stats prolonge React.Component … la syntaxe, alors nous le rendre à l'écran en appelant le ReactDOM.render () méthode (nous avons déjà utilisé ce dernier dans la section précédente).
  la classe Stats s'étend sur React.Component render () return (  Bonjour this.props.name, vous avez this.props.notifications de nouvelles notifications et this.props.messages nouveaux messages. 
 )  ReactDOM.render ( , document.getElementById ("myStats")); 
 Le premier argument de la ReactDOM.render () méthode consiste à le nom de notre composant React (), et ses accessoires (prénom, notifications, et messages) avec leurs valeurs. Lorsque nous déclarons les valeurs des accessoires, les chaînes doivent être entre guillemets (comme "John Doe") et des valeurs numériques entre accolades (comme 3).
 Notez qu'en raison de JavaScript, nous utilisé nom du cours au lieu de classe afin de passer un attribut de classe à une balise HTML (className = "summary").
 La page HTML correspondante est la suivante:
          
    
 Dans la documentation React, il existe de nombreux autres exemples intéressants sur comment construire et gérer les composants React, et Que savoir de plus sur les accessoires.
 Lectures complémentaires
 Avec React, Facebook introduit un nouveau type de cadre dans le développement frontal qui remet en question le modèle de conception MV *. Si vous voulez mieux comprendre comment cela fonctionne et ce que vous pouvez et ne pouvez pas réaliser avec, voici quelques articles intéressants qui peuvent vous aider:
 Blog de Facebook sur pourquoi ils ont construit React.
 Le blog de Andrew Ray sur le bon et le mauvais de React.
 Codementor sur comment se comparent React et AngularJS.
 L'article de réflexion de FreeCodeCamp sur la question de savoir si MVC est mort sur le front-end.
 L'article de HackerNoon sur comment optimiser les performances liées à React.