Configurer un environnement de réaction, partie 3

Remarquez comment dans le composant nous pouvons créer autant d'éléments que nous aimons en ajoutant plus d'appels à React.createElement (). De plus, les accessoires sont passés dans les composants enfants via un les accessoires Objet JavaScript, accessible ensuite dans les composants via le paramètre function les accessoires.

Ouvrir index.html dans un navigateur pour voir la sortie de React.

Je ne vais pas entrer dans plus de détails ici à propos de React.createElement (), et d’autres rubriques autres que JSX, car la majorité des utilisateurs de React choisissent d’écrire leurs composants à l’aide de JSX. Nous utiliserons JSX pour nos composants React pour le reste de cette série de didacticiels..

Clairement, le manque d'outils tels que Babel limite la facilité avec laquelle il est possible d'écrire le code React complètement à partir de zéro. Il existe de nombreux autres outils dont nous pourrions également tirer parti, tels qu'un ensemble permettant de créer un fichier JavaScript unique à partir de toutes les bibliothèques React requises, ainsi que notre code d'application. Nous découvrirons une meilleure approche dans la section suivante, tout aussi facile à configurer..

Créer une application React

Pour résoudre le problème des configurations manuelles complexes de React, Facebook a présenté create-react-app, un moyen convivial de commencer à développer avec React. Il vous fournit une configuration complète mais ne nécessite aucune configuration manuelle..

Allons-y et installons create-react-app. Tapez le code suivant dans une fenêtre de ligne de commande.

npm installer -g créer-réagir-application

Cela installera create-react-app globalement afin que vous puissiez y accéder depuis n'importe quel répertoire..

Vous aurez besoin de npm installé pour exécuter cette commande et de Node.js pour exécuter create-react-app. Comme NPM est fourni avec Node.js, il vous suffit de télécharger et d'installer la dernière version de Node.js à partir du site officiel..

Nous allons maintenant créer une nouvelle application React appelée mes-premiers-composants. Notez que create-react-app crée automatiquement le dossier contenant votre application. Vous devez donc uniquement vous assurer que vous vous trouvez dans le répertoire dans lequel vous souhaitez créer votre dossier d'application..

Exécutez ces commandes pour créer votre application et exécutez le script de démarrage..

créer-réagir-app cd mes-premiers-composants / npm start

Cela peut prendre une minute ou deux pour que create-react-app complète l'installation. Une fois cela fait, entrez le npm start La commande et une nouvelle fenêtre du navigateur s'ouvriront et, après quelques secondes, votre application React s'affichera..

L'avantage de create-react-app est qu'il inclut un mini-serveur Web et surveille également les fichiers de votre application pour y rechercher des modifications. Chaque fois qu'une modification est apportée, votre application est reconstruite et la fenêtre du navigateur se recharge automatiquement pour afficher votre application mise à jour..

Au cours du processus de configuration automatisée, create-react-app génère plusieurs fichiers, ainsi que les trois dossiers suivants:

• node_modules
• Publique
• src

Pour avoir une idée de la façon dont nous créons des composants et les connectons ensemble au sein d'une application générée create-rea-app, nous allons créer les mêmes composants que ceux avec lesquels nous travaillons jusqu'à présent..

La sortie par défaut de l'application suggère de modifier App.js comme point de départ, ouvrez ce fichier et supprimez les appels d'importation pour le logo et les fichiers CSS, car nous n'en aurons pas besoin. Nous pouvons aussi simplifier la composant, et ajouter dans nos deux composants enfants d'avant.

Votre App.js Le fichier devrait maintenant ressembler à ceci:

importer Réagir, Composant de 'réagir'; La classe App étend le composant render () return ( 
 
Mes premiers composants réactifs!
   
 ) class MyFirstComponent étend Component render () return ( 
this.props.number: Hello de React!
 ) La classe MySecondComponent étend Component render () return ( 
this.props.number: Ma deuxième composante de réaction.
 ) export par défaut App;

Enregistrez vos modifications et create-react-app mettra automatiquement votre application à jour dans le navigateur. Il en résulte le même résultat que précédemment. (Notez que cette fois, il est chargé dans le navigateur via le serveur Web local.)

Mais rendons cela plus modulaire pour s’aligner sur les meilleures pratiques modernes en matière de création d’applications React. Créez deux nouveaux fichiers dans le src dossier nommé MyFirstComponent.js et MySecondComponent.js.

À l'intérieur MyFirstComponent.js, ajoutez le code suivant:

importer Réagir, Composant de 'réagir'; La classe MyFirstComponent étend Component render () return ( 
this.props.number: Hello de React!
 ) export par défaut MyFirstComponent;

Et à l'intérieur MySecondComponent.js, ajouter un code similaire:

importer Réagir, Composant de 'réagir'; La classe MySecondComponent étend Component render () return ( 
this.props.number: Ma deuxième composante de réaction.
 ) export default MySecondComponent;

Enfin, nous devons mettre à jour App.js pour importer les deux composants enfants car ils se trouvent maintenant dans des fichiers séparés:

importer Réagir, Composant de 'réagir'; importer MyFirstComponent à partir de './MyFirstComponent'; importer MySecondComponent à partir de './MySecondComponent'; La classe App étend le composant render () return ( 
 
Mes premiers composants réactifs!
   
 ) export par défaut App;

Cette approche pour structurer votre application React est beaucoup plus modulaire et portable. Cela facilite également le débogage car chaque composant est autonome dans son propre module.

Conclusion

Dans ce didacticiel, nous avons présenté deux méthodes pour configurer React localement: l’approche manuelle et l’outil create-react-app de Facebook..

Créer une application React manuellement à partir de zéro et insérer les dépendances de script directement dans le index.html le fichier est assez inefficace. Au fur et à mesure que votre application évolue et que différentes versions de vos scripts sont publiées, la mise à jour manuelle des scripts deviendra rapidement ingérable. De plus, nous ne pouvons pas utiliser les fonctionnalités ES6, ni écrire nos composants dans JSX.!

L'utilisation de create-react-app, en revanche, est un processus très fluide. Il est installé et initialisé avec quelques commandes. Une fois lancé, create-react-app reconstruit votre application et met à jour la fenêtre du navigateur chaque fois que vous modifiez un fichier de projet. Il s'agit d'un flux de travail vraiment intéressant lors de nombreuses modifications mineures, car il permet d'accélérer le développement d'applications..

Dans le prochain tutoriel, nous allons créer une application React à partir de rien, qui utilise Webpack et Babel pour regrouper et traiter notre application dans un seul fichier JavaScript. Contrairement à create-react-app, où tout est fait pour vous, nous allons configurer manuellement tous les fichiers de configuration, et nous expliquerons pourquoi vous avez choisi cette approche..