Configurer un environnement de réaction, partie 2

Si vous débutez avec React, il est donc compréhensible que vous souhaitiez simplement coder et manipuler des composants simples pour voir le fonctionnement de React. Vous ne voulez vraiment pas avoir à parcourir un long processus d'installation en premier lieu.

Dans ce tutoriel, je vais vous montrer comment commencer à coder avec React en quelques secondes, en supprimant presque complètement le processus de configuration! Vous allez utiliser CodePen, un éditeur de code en ligne, qui vous permet de commencer à écrire du code React instantanément.

Un effet secondaire utile de l’utilisation des éditeurs de code en ligne est que vous pouvez facilement partager votre travail avec d’autres via une URL unique. Tout ce que vous créez peut également être recherché par d'autres développeurs à la recherche d'exemples basés sur React..

Examinons CodePen et voyons à quel point il est facile de configurer React et de commencer à coder votre première application.!

CodePen

CodePen vous donne accès à trois fenêtres pour éditer HTML, CSS et JavaScript, plus une autre fenêtre pour afficher le rendu. Vous pouvez utiliser CodePen entièrement gratuitement et vous n'avez même pas besoin de vous inscrire pour créer un compte afin de partager votre travail. Toutefois, si vous utilisez le service régulièrement, vous pouvez envisager d'ouvrir un compte pour pouvoir remplir un profil et commencer à constituer un portefeuille..

Chaque nouvelle création dans CodePen est appelée un "stylo". Allez à la page d'accueil et cliquez sur le grand Créer bouton en haut à droite de l'écran, puis Nouveau stylo du menu déroulant.

En fonction de vos paramètres par défaut, les trois éditeurs seront soit à gauche / à droite de la fenêtre principale, soit disposés en haut sur une seule ligne..

La fenêtre de sortie CodePen est mise à jour automatiquement chaque fois que vous tapez dans l’une des fenêtres de l’éditeur. Ceci est facultatif et peut être désactivé via les paramètres du stylet.

Configuration des paramètres

Avant de pouvoir écrire du code React, nous devons importer les scripts de bibliothèque nécessaires et configurer notre processeur JavaScript. Nous utiliserons JSX dans nos composants React, ainsi que certaines fonctionnalités de ES6. Pour être sûr que l'éditeur JavaScript CodePen puisse interpréter notre code, nous avons besoin d'un outil permettant de transformer notre code JSX et ES6 en code standard. JavaScript que tous les navigateurs peuvent exécuter.

Nous utiliserons Babel en tant que compilateur JavaScript. Vous pourrez ainsi utiliser en toute sécurité les dernières fonctionnalités de JavaScript sans vous soucier de la compatibilité du navigateur. La prise en charge supplémentaire de la compilation JSX est un véritable atout, car nous n’avons besoin que d’un seul outil..

Pour activer Babel dans CodePen, nous devons configurer les paramètres de notre stylet. Clique le Réglages bouton dans le menu en haut à droite, puis sur JavaScript dans le Paramètres du stylo boîte de dialogue qui apparaît. Nous pouvons également ajouter les bibliothèques React requises ici aussi.

Clique sur le Ajout rapide liste déroulante et sélectionnez Réagir de la liste. Notez que React est ajouté à la première zone de saisie avec le chemin complet de la bibliothèque spécifiée. Cliquez à nouveau sur la liste déroulante pour ajouter Réagir DOM. Ceci est nécessaire car nous rendons nos composants React au DOM du navigateur..

Enfin, sous la Préprocesseur JavaScript liste déroulante, sélectionnez Babel. Votre Paramètres du stylo Le dialogue devrait maintenant ressembler à ceci:

Les versions exactes des scripts DOM React et React peuvent être légèrement différentes sur votre écran, car CodePen mettra inévitablement à jour la dernière version de temps à autre..

Cliquez sur Fermer pour revenir à l'interface principale de CodePen. Notez que à côté de la JS étiquette dans la fenêtre de l'éditeur JavaScript, une (Babel) Une étiquette a été ajoutée pour rappeler que le code JavaScript sera transmis au compilateur Babel avant son exécution dans le navigateur..

Notre première application React

Dans la fenêtre de l'éditeur HTML CodePen, ajoutez un seul 

 élément. Cela sert d'espace réservé vide que notre application React peut utiliser pour restituer notre composant..

Nous n'avons pas besoin d'ajouter beaucoup de HTML manuellement, car React gère pour nous l'ajout et la mise à jour d'éléments DOM. Nous n’ajouterons aucun code CSS à notre stylo. N'hésitez donc pas à réorganiser les fenêtres pour que l’éditeur JavaScript et la fenêtre de sortie disposent de plus d’espace.

Dans la fenêtre de l'éditeur JavaScript, entrez le code suivant pour ajouter notre premier composant..

La classe MyFirstComponent étend React.Component render () return ( 
Bonjour de React!
 )

C'est à peu près la version la plus basique d'un composant possible dans React. Nous avons utilisé une classe ES6 pour étendre la classe de composants React, qui implémente une rendre() méthode et retourne un élément HTML.

Pour afficher notre composant, nous devons appeler le ReactDOM.render () méthode:

ReactDOM.render ( , document.querySelector ('#app'));

Le premier argument est le composant React que vous voulez rendre, et le second spécifie à quel élément DOM rendre le rendu..

Créons maintenant un autre couple de composants React. Tout d’abord, ajoutez cet extrait de code à la fenêtre HTML:

Ajoutez maintenant une autre définition de composant à la fenêtre JavaScript:

La classe MySecondComponent étend React.Component render () return ( 
Mon deuxième composant de réaction.
 )

La deuxième composante est très similaire à la première, et nous le rendons à la div élément avec identifiant de app2 avec un autre appel à ReactDOM.render ().

ReactDOM.render ( , document.querySelector ('# app2'));

Cependant, il n'est pas très efficace de restituer des composants individuels de cette manière. L’approche actuellement acceptée consiste à définir un composant de niveau supérieur tel que , qui contient tous les autres composants de votre application React. Ensuite, tout ce dont vous avez besoin est un simple appel à RenderDOM.render (), plutôt qu'un appel séparé pour chaque composant.

Nous allons donc refactoriser notre très simple application React pour utiliser cette approche par composant de haut niveau..

Tout d’abord, retirez le

Maintenant, si nous voulions ajouter des informations à  et  mais vous ne voulez pas nécessairement le spécifier dans les définitions de composant? Pour ce faire, nous pouvons transmettre des informations aux composants enfants à partir de composants parents à l'aide d'attributs HTML tels que la syntaxe. Ceci est connu comme les accessoires dans React.

Montrons-le en transmettant des informations de numérotation à nos deux composants imbriqués. Changer la définition être:

La classe App étend React.Component render () return ( 
 
Mes premiers composants réactifs!
   
 )

Nous avons ajouté deux nombre des accessoires qui seront transmis à chaque composant enfant et rendus disponibles via un objet JavaScript. Dans les définitions de composant, nous pouvons accéder aux accessoires via le les accessoires objet comme suit:

La classe MyFirstComponent étend React.Component render () return ( 
this.props.number: Hello de React!
 )

La classe MySecondComponent étend React.Component render () return ( 
this.props.number: Ma deuxième composante de réaction.
 )

Récapitulons rapidement à quel point il était facile de commencer à coder avec React à l'aide de CodePen.

Tout d'abord, nous avons ouvert un nouveau stylet et configuré les paramètres pour ajouter les dépendances de script React et ReactDOM. Nous avons également ajouté le préprocesseur JavaScript de Babel pour compiler nos codes JSX et ES6 en JavaScript standard..

Ensuite, il s’agissait simplement d’ajouter nos composants React à l’éditeur JavaScript. Enfin, pour que nos composants s'affichent dans la fenêtre de sortie, nous avons inséré un

élément en tant que point de montage de notre application React dans la fenêtre de l'éditeur HTML.

Conclusion

En utilisant CodePen, vous pouvez afficher un composant React à l’écran en quelques minutes seulement! Cependant, il a quelques limitations.

Les meilleures pratiques de React moderne pour le développement de React recommandent une approche modulaire, avec chaque composant dans un fichier séparé. Vous ne pouvez pas faire cela avec la version de base de CodePen.

De plus, la fenêtre de sortie de CodePen étant incorporée dans un élément iframe, vous n'avez pas accès aux outils de développement du navigateur React, ce qui est un élément important à prendre en compte lorsque vos applications deviennent plus complexes..

Pour les débutants, cependant, et pour tester rapidement de nouvelles idées d'applications simples, CodePen est un excellent outil de développement de React. Vous pouvez également l'utiliser pour créer un portefeuille en ligne ou créer votre propre mini-bibliothèque de composants React prête à être collée dans d'autres projets. Il existe de nombreux autres éditeurs de code en ligne similaires à CodePen, tels que JSFiddle, JS Bin et bien d'autres..

Dans le prochain tutoriel, nous allons nous concentrer sur la configuration des applications React localement..

Code