Tutoriel React Partie 1: Présentation du cours, React, ReactDOM et JSX Raisons de la popularité

Nous vous présentons les 5 premières leçons du cours de formation pour débutants React . Le cours d'anglais original, composé de 48 leçons, est publié sur la plateforme Scrimba.com. Les capacités de cette plate-forme permettent, tout en écoutant le présentateur, parfois de suspendre la lecture et de manière indépendante, dans la même fenêtre dans laquelle la démonstration est menée, d'expérimenter le code. Le cours nous a paru intéressant, nous avons décidé de le traduire en russe et de le convertir au format des publications traditionnelles.



Nous pensons que ce cours sera utile à tous ceux qui, comme on dit, "ne sait pas comment réagir", mais qui veulent apprendre. En même temps, il faut des efforts et du temps considérables pour transformer ce cours en publications régulières.Par conséquent, avant de prendre une décision finale sur le lancement de ce projet, nous invitons tout le monde à évaluer le cours et à participer à une enquête sur la faisabilité de sa traduction.

Leçon 1. Aperçu du cours et recommandations pour son développement

→ Original

Bienvenue au cours React Fundamentals. Je m'appelle Bob Ziroll, je vais vous expliquer comment créer des projets front-end en utilisant l'un des frameworks web les plus populaires au monde. Je travaille dans le domaine de l'enseignement de l'informatique depuis de nombreuses années, en particulier, maintenant je suis en charge de l'organisation du processus éducatif à V School .

▍À propos du processus d'élaboration du cours

Au fil des années de développement de formations visant à aider tous ceux qui veulent maîtriser rapidement des choses complexes, j'ai développé ma propre approche de l'apprentissage, dont je pense qu'il sera utile de parler.

Pour commencer, je tiens à noter que la façon la plus simple et la plus efficace d'apprendre quoi que ce soit est de ne ménager aucun effort ni temps pour pratiquer. Si vous voulez apprendre à programmer, plus vous commencez tôt à faire quelque chose vous-même et plus vous le faites souvent, plus vous avez de chances de réussir.

Habituellement, lorsque je présente des élèves de V School, je leur donne l'exemple suivant de ma propre vie. Récemment, j'ai été attiré par le travail du bois. J'ai lu des livres, regardé d'innombrables vidéos sur YouTube, m'a donné des outils. Mais je ne pouvais rien faire de digne avant d'avoir ramassé les outils entre mes mains. Seules de nombreuses heures passées à travailler avec une scie et du papier de verre, à coller et visser des pièces m'ont permis de me rapprocher de l'objectif. En fait, le développement de tout est organisé selon le même principe. Vous voulez apprendre à réagir? Écrivez le code.

La plupart des cours de ce cours contiennent des exercices. On s'attend à ce que vous essayiez de les faire vous-même. Si vous, après vous être familiarisé avec la tâche d'un travail indépendant, passez immédiatement à la description de sa solution, alors vous choisirez en fait la manière la plus difficile d'apprendre React. De plus, n'attendez pas qu'on vous propose de pratiquer - prenez l'initiative et essayez tout ce que vous apprenez. Essayez de travailler avec le code vous-même autant que possible. En particulier, lorsque vous maîtrisez un peu React - créez quelque chose qui vous intéresse, vivez tout ce que vous êtes curieux de découvrir. Cela vous permettra d'éviter des problèmes tels que "l' enfer du tutoriel ".

Un autre point important de mon approche est l'entraînement par intervalles et la répétition du matériel couvert. Ce sont les choses les plus importantes qui vous permettent de vous souvenir vraiment de ce que vous apprenez. Il n'est pas recommandé de se précipiter tête baissée dans l'étude du cours. C'est le chemin vers cet enfer très tutoriel. Avec cette approche, vous avez le sentiment d'avoir vraiment appris quelque chose, mais en réalité, vous n'êtes tout simplement pas en mesure de vous souvenir de ce que vous avez «appris».

Par conséquent, en vous déplaçant dans les matériaux, faites des pauses fréquentes. Il ne s'agit pas de pauses périodiques de 5 à 10 minutes, mais de quelque chose de plus ambitieux. Apprenez quelques principes, entraînez-vous à les utiliser, puis faites une pause d'une journée. Lorsque vous reviendrez au cours, il sera très utile de répéter le matériel déjà étudié. Bien sûr, avec cette approche, il faudra plus de temps pour maîtriser le cours, mais cela aura un effet extrêmement bénéfique sur votre apprentissage.
Voyons maintenant brièvement ce que vous apprenez en maîtrisant ce cours.

▍Structure et prérequis

Voici une liste des principaux sujets du cours:

• Les composants. En parlant de React, une discussion sur le concept de composants ne peut être évitée. Les composants de React sont le principal élément de base pour la création d'extraits HTML pouvant être réutilisés. Et presque tout le reste dont nous parlerons est lié à la façon d'utiliser ces composants pour créer des applications Web.
• JSX. Il s'agit d'une extension de syntaxe JavaScript qui vous permet de créer des composants en utilisant les capacités de HTML et JavaScript.
• Stylisation des composants. Le style donne aux composants une apparence attrayante.
• Propriétés et échange de données dans l'application. Les propriétés sont utilisées pour transférer des données entre les composants.
• Condition. Les mécanismes d'état des composants sont utilisés pour stocker et gérer les données dans une application.
• Gestion des événements. Les événements vous permettent d'établir des relations interactives avec les utilisateurs de l'application.
• Méthodes de cycle de vie des composants. Ces méthodes permettent au programmeur d'influencer divers événements qui se produisent avec les composants.
• Téléchargez des données à partir d'API externes à l'aide du protocole HTTP.
• Travaillez avec des formulaires.

Pour être productif dans ce cours, vous devez connaître HTML, CSS et JavaScript (ES6).

Leçon 2. Projets de formation

→ Original

Au terme de ce cours, vous développerez des projets pédagogiques. Jetez un oeil à certains d'entre eux.

Notre premier développement sera une application TODO standard.


Application Todo

Cela peut sembler un peu ennuyeux, mais au cours de son développement, de nombreuses opportunités seront impliquées, dont nous parlerons au cours. Vous pouvez cliquer sur les éléments de la liste des tâches, les marquer comme terminés et voir comment leur apparence change.


Cas marqués dans l'application TODO

Et voici notre projet de cours - un générateur de mèmes.


Générateur de mème

Lorsque vous travaillez avec cette application, les textes sont entrés dans les champs Top Text et Top Text Bottom Text , qui, respectivement, tomberont dans les parties supérieure et inférieure de l'image. En cliquant sur le bouton Gen , le programme sélectionne aléatoirement une image meme dans l'API correspondante et y ajoute du texte. Voici un exemple du fonctionnement de cette application:


Mème prêt

Leçon 3. Pourquoi réagir et pourquoi vaut-il la peine d'apprendre?

→ Original

Pourquoi utiliser React si vous pouvez développer un projet Web en JavaScript pur? Si vous êtes intéressé par le développement Web, vous avez peut-être entendu dire que React vous permet de créer des applications très rapides dont les performances dépassent ce qui est réalisable en utilisant uniquement JavaScript. Ceci est réalisé en utilisant une technologie dans React appelée Virtual DOM. Nous n'entrerons pas dans les détails sur Virtual DOM, si vous voulez mieux connaître cette technologie, vous pouvez regarder cette vidéo.

Pour l'instant, il nous suffit de savoir que Virtual DOM aide les applications Web à s'exécuter beaucoup plus rapidement que si elles utilisaient JS standard. Un autre très grand avantage que React nous offre est la possibilité de créer des composants Web pouvant être réutilisés. Prenons un exemple.

Nous avons un élément de navbar standard de la bibliothèque Bootstrap.


Barre de navigation

Si vous n'avez jamais utilisé Bootstrap auparavant, sachez qu'il s'agit simplement d'une bibliothèque CSS qui offre aux développeurs Web des éléments magnifiquement conçus. Il y a environ quatre douzaines de lignes de code, tout cela semble plutôt lourd, naviguer dans un tel code n'est pas facile. Si vous incluez tout cela dans une page HTML, qui contient déjà beaucoup de choses, le code d'une telle page sera simplement surchargé de différents modèles.

Les composants Web React vous permettent de prendre des extraits de code HTML, de les organiser en tant que composants distincts et, au lieu d'ajouter ces extraits à la page, d'inclure quelque chose comme des balises HTML spéciales dans la structure de la page. Dans notre cas, au lieu d'ajouter quarante lignes de balisage HTML à la page, il suffit d'inclure un composant contenant ce balisage dans sa composition. Nous l'avons appelé MySweetNavbar .


Approche par composants de la formation Web

Vous pouvez nommer un tel composant à votre guise. Comme vous pouvez le voir, la mise en page basée sur les composants est beaucoup plus facile à lire. Le développeur voit immédiatement la structure globale d'une telle page. Dans ce cas, comme vous pouvez le voir dans le contenu de la <body> , il y a une barre de navigation ( MySweetNavbar ) en haut de la page, le contenu principal ( MainContent ) au milieu et un pied de page ( MySweetFooter ) au bas de la page.

De plus, les composants améliorent non seulement la structure du code des pages HTML. Ils peuvent également être réutilisés. Et si plusieurs pages ont besoin de la même barre de navigation? Et si ces panneaux sur des pages différentes sont légèrement différents les uns des autres? Que faire si le même panneau est utilisé sur plusieurs pages et que vous devez y apporter des modifications? Sans utiliser une approche composante, il est difficile de donner des réponses décentes à ces questions et à bien d'autres.

Une autre raison de la popularité de React peut être considérée comme le fait que Facebook développe et supporte cette bibliothèque. Cela, à tout le moins, signifie que React est constamment géré par des programmeurs qualifiés. La popularité de React et le fait que le projet soit open source, publié sur GitHub, signifie également que de nombreux développeurs tiers contribuent au projet. Tout cela nous permet de dire que React, dans un avenir prévisible, vivra et se développera.

En parlant de React, et en particulier de la raison pour laquelle cette bibliothèque mérite d'être explorée, on ne peut s'empêcher de rappeler l'énorme marché du travail associé à cette bibliothèque. Aujourd'hui, les spécialistes de React sont en constante demande. Si vous étudiez React dans le but de trouver un emploi en développement front-end, cela signifie que vous êtes sur la bonne voie.

Leçon 4: Environnement de développement, ReactDOM et JSX

→ Original

Ici, nous allons parler de la façon de créer une application React simple à l'aide de ReactDOM et aborder certains points clés concernant JSX. Mais, avant de commencer à travailler avec le code, parlons de l'endroit où exécuter ce code.

▍ Environnement de développement

Afin d'expérimenter avec React-code, il serait peut-être préférable de déployer un environnement de développement local à part entière. Pour ce faire, vous pouvez vous référer au matériel React.js récemment publié : un guide intuitif pour les débutants , en particulier, à sa section Pratiquer le développement d'applications React. À savoir, pour démarrer les expériences, vous devez créer une nouvelle application à l'aide de create-react-app , puis démarrer le serveur de développement local et commencer à modifier le code. Si nous parlons des exemples les plus simples, leur code peut être entré directement dans le fichier standard index.js , en supprimant le code ou en le commentant.

Le contenu du fichier index.html dans le projet créé par create-react-app correspond à son contenu dans les exemples qui seront fournis dans ce cours. En particulier, nous parlons de la présence sur la page de l'élément <div> avec l'identifiant root .

Une autre option qui convient généralement à certaines expériences très simples consiste à utiliser des plateformes en ligne comme codepen.io. Par exemple, voici un projet de démonstration de l’application React de Dan Abramov. La préparation d'un projet Codepen pour des expériences avec React consiste essentiellement à y connecter les bibliothèques react et react react-dom (cela peut être fait en cliquant sur le bouton Settings en haut de la page, en allant dans la section JavaScript de la fenêtre qui apparaît et en se connectant au projet, après les avoir trouvées avec en utilisant le système de recherche intégré, les bibliothèques nécessaires).

Il est possible que vous, pour l'expérimentation, soyez prêt à utiliser les capacités de Scrimba. Pour ce faire, vous pouvez simplement ouvrir la page de la leçon correspondante. Des liens vers ces pages se trouvent sous les titres avec des numéros et des noms de profession.

▍Premier programme

Il convient de noter que dans nos exemples, nous utiliserons les capacités d'ES6 (ES2015), il est donc fortement conseillé de les parcourir. En particulier, pour importer la bibliothèque react dans le projet, la construction suivante est utilisée:

 import React from "react" 

Et vous pouvez donc importer la bibliothèque react-dom :

 import ReactDOM from "react-dom" 

Nous allons maintenant utiliser la render() ReactDOM pour afficher quelque chose à l'écran:

 ReactDOM.render() 

Si vous décidez d'utiliser un projet créé par create-react-app pour des expériences, son fichier index.js (ouvert dans VSCode) ressemblera maintenant à celui illustré dans la figure suivante.


Saisie de code dans index.js

Si vous avez un serveur de développement en cours d'exécution et que le navigateur a ouvert http://localhost:3000/ page, vous enregistrerez des messages d'erreur si vous enregistrez un tel index.js . Ceci, à ce stade du travail, est tout à fait normal, car nous n'avons pas encore informé le système sur quoi et où nous voulons afficher la commande render() .

En fait, il est maintenant temps de traiter le code que nous venons d'écrire. À savoir, ici, nous avons importé React dans le projet, puis - ReactDOM - afin que les capacités de cette bibliothèque puissent être utilisées pour afficher quelque chose à l'écran.

La méthode render() prend deux arguments. Le premier sera ce que nous voulons faire ressortir, et le second sera l'endroit où nous voulons faire ressortir quelque chose. Si cela est écrit sous forme de pseudo-code, alors ce qui suit se révélera:

 ReactDOM.render( ,  ) 

Ce que nous voulons sortir doit être en quelque sorte attaché à une page HTML. Le code que nous allons écrire sera transformé en éléments HTML qui arriveront sur la page.

Voici à quoi pourrait ressembler cette page.

 <html>   <head>       <link rel="stylesheet" href="style.css">   </head>   <body>       <div id="root"></div>       <script src="index.js"></script>   </body> </html> 

Il y a tous les éléments de base d'une page HTML, y compris la <link> et la <script> .

Si vous utilisez create-react-app , la page index.html sera un peu différente. En particulier, dans son code, il n'y a pas de index.js importation index.js . Le fait est que lors de la construction d'un projet, la connexion entre index.html et index.js fait automatiquement .

Notez l'élément <div> avec l'identifiant root . Entre les balises d'ouverture et de fermeture de cet élément, React placera tout ce que nous créons. Cet élément peut être considéré comme un conteneur pour toute notre application.

Si nous revenons maintenant au fichier index.js et à la ReactDOM render() ReactDOM , son deuxième argument, l'endroit où les données doivent être sorties, sera une référence à l'élément <div> avec l'identifiant root . Ici, nous utiliserons du JavaScript ordinaire, après quoi le deuxième argument de la méthode Render ressemblera à ceci:

 ReactDOM.render( , document.getElementById("root")) 

Avec cette approche, la méthode render() prend le premier argument et renvoie ce qu'il décrit à l'emplacement spécifié. Passons maintenant à ce premier argument. Commençons par le simple élément <h1> . Et, comme c'est généralement le cas lors de l'écriture du premier programme, ajoutez-y le texte Hello world! :

 ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root")) 

Si vous actualisez maintenant la page du navigateur, elle affichera, comme titre du premier niveau, le texte spécifié.


Le résultat du premier programme

Ici, vous pouvez vous demander pourquoi nous avons mis la description de l'élément HTML à l'endroit où l'argument de la méthode JavaScript est attendu. Après tout, JavaScript, face à quelque chose comme <h1>Hello world!</h1> , décidera probablement que le premier caractère de cette expression est un opérateur "moins", puis, évidemment, le nom de la variable vient ensuite, puis l'opérateur de comparaison "plus" ". JavaScript ne reconnaît pas un élément HTML dans cette séquence de caractères, et il ne devrait pas.

Les développeurs de React ont créé non seulement une bibliothèque, mais aussi un langage spécial appelé JSX. JSX est très similaire à une variante de HTML. De plus, vous verrez que presque tout le code JSX coïncide presque complètement avec le balisage HTML formé avec son aide. Il existe bien sûr des différences entre JSX et HTML, et nous en discuterons progressivement.

Nous avons introduit une instruction assez simple et courte, mais dans les entrailles de React, lorsqu'elle est exécutée, beaucoup de choses intéressantes se produisent. Donc, cette instruction est convertie dans sa version JavaScript, du code HTML est généré, bien que nous n'entrions pas dans les détails de ce processus. C'est pourquoi nous devons importer non seulement react-dom , mais également react dans le projet, car la bibliothèque React est exactement ce qui nous permet d'utiliser JSX et de faire fonctionner les constructions JSX comme prévu. Si nous supprimons l' import React from "react" de notre exemple, enregistrons le fichier de script et actualisons la page, un message d'erreur s'affichera. En particulier, create-react-app nous dira que vous ne pouvez pas utiliser JSX sans accéder à React ( 'React' must be in scope when using JSX react/react-in-jsx-scope ).

Le fait est que même si React n'est pas utilisé directement dans notre exemple, la bibliothèque est utilisée pour fonctionner avec JSX.

Une autre chose sur le travail avec JSX sur laquelle je veux attirer votre attention est que vous ne pouvez pas rendre les éléments JSX qui se succèdent. Supposons qu'après l'élément <h1> , vous devez sortir l'élément <p> . Essayons d'utiliser cette conception:

 ReactDOM.render(<h1>Hello world!</h1><p>This is a paragraph</p>, document.getElementById("root")) // 

Si après cela, actualisez la page - un message d'erreur s'affiche (dans create-react-app il ressemble à une Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag ). L'essence de cette erreur est que ces éléments doivent être enveloppés dans un autre élément. Ce qui finira par ressembler à un élément avec deux éléments imbriqués.

Pour que notre exemple fonctionne, nous encapsulons le <h1>Hello world!</h1><p>This is a paragraph</p> code de <h1>Hello world!</h1><p>This is a paragraph</p> dans l'élément <div> :

 ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root")) 

Si vous actualisez maintenant la page, tout se déroulera comme prévu.


Deux éléments HTML par page

Il faudra un certain temps pour s'habituer à JSX, mais après cela, son utilisation sera beaucoup plus facile et plus pratique que de travailler avec des éléments HTML à l'aide d'outils JavaScript standard. Par exemple, pour décrire l'élément <p> et configurer son contenu à l'aide d'outils standard, vous aurez besoin de quelque chose comme ceci:

 var myNewP = document.createElement("p") myNewP.innerHTML = "This is a paragraph." 

Ensuite, vous devez le connecter à l'élément qui se trouve déjà sur la page. Ceci est un exemple de programmation impérative, et la même chose, grâce à JSX, peut être effectuée dans un style déclaratif.

Leçon 5. Atelier. ReactDOM et JSX

→ Original

Dans la dernière leçon, vous avez rencontré ReactDOM et JSX, et il est maintenant temps de mettre ces connaissances en pratique.

Nous effectuerons toutes les tâches pratiques comme suit. Tout d'abord, dans la section avec le titre Tâche, la tâche elle-même sera donnée et, éventuellement, dans la section Conseils, de brèves recommandations seront données sur sa mise en œuvre. Ensuite, la section Solution suivra. Il est recommandé de faire tous les efforts pour terminer la tâche vous-même, puis de traiter la solution proposée.

Si vous sentez que vous ne vous débrouillez pas, revenez à la leçon précédente, répétez le matériel approprié et réessayez.

▍Emploi

Écrivez une application React qui affiche une liste à puces ( <ul> ) sur la page. Cette liste doit contenir trois éléments ( <li> ) avec n'importe quel texte.

▍Conseils

Tout d'abord, vous devez importer les bibliothèques nécessaires dans le projet, puis utiliser l'une d'entre elles pour afficher les éléments générés à l'aide d'un code JSX sur la page.

Résumé

Maintenant, après vous être familiarisé avec les premières leçons du cours React, nous vous demandons de participer à l'enquête.

Merci de votre attention!



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours