React 101 : apprendre React js pour les débutants absolus

1. Bienvenue à React.js pour les débutants: Bienvenue pour réagir face à face avec votre hôte, Caleb, grand maigre. Dans ce cours, ce que nous allons faire est de créer un générateur de caractères aléatoire Star Wars à l'aide d'une API. Donc, chaque fois que vous cliquez sur ce bouton, il va trouver un nouveau personnage pour vous en utilisant une API. Vous allez obtenir une expérience pratique avec les requêtes d'API d'état du composant, mettre à jour votre état, travailler avec les accessoires. Vous allez créer une toute nouvelle application à l'aide de la commande React create new app. Et puis nous allons le remplacer par notre propre Star Wars. Le projet à la fin de ce cours est vraiment, vraiment amusant. Je l'ai rétrogradé avant, je vais le démonter à nouveau. C' est simplement un générateur de caractères aléatoires. Et cela fonctionne avec une API. Bonjour, mon nom est Caleb dit et j'enseigne aux gens comment coder depuis 2012. J' ai appris à plus de 350 000 étudiants à coder dans le monde entier. Et aujourd'hui, je vais t'apprendre à réagir. Pourquoi devrais-je apprendre à réagir ? Je pense que vous devriez apprendre à réagir parce que c'est une compétence de forte demande que beaucoup d'agences de développement web et de pigistes ont besoin de connaître. Et à peu près tout travail là-bas va vouloir que tu apprennes à réagir. Et c'est une très bonne introduction sur le fonctionnement de React. Quelques prérequis, vous avez besoin de connaître HTML. Vous devriez connaître un peu de CSS et vous devriez être assez familier avec JavaScript avant de suivre ce cours. React utilise JavaScript avancé. Et cela signifie que vous devez connaître JavaScript avancé si vous êtes prêt à commencer à construire un générateur de caractères aléatoire amusant en utilisant une API, alors c'est le cours pour vous. Ne cherchez pas plus loin et je vous verrai, espérons-le, dans cette première leçon. 2. What ?: Avant de commencer, jetons un coup d'œil à ce qu'est React JS. Donc, si vous allez réagir Js.org, vous pouvez réellement voir qu'ils ont des tutoriels et ils ont toutes sortes de choses ici. Il est en fait vraiment, vraiment bon site et je suggère, et je recommande fortement que vous vous familiariser un peu avec elle au cours de votre temps d'apprentissage React. Mais qu'est-ce que réagir ? React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Ok, c'est un peu utile. C' est une assez bonne déclaration sur ce qu'est React. Mais ce qu'est React en fait, c'est, vous savez, comment un site Web est composé de HTML, CSS et JavaScript, puis généralement d'un langage back-end pour le traitement des données. React vous permet de créer des sites web interactifs. Donc, HTML et CSS ne peuvent pas le faire. Il ne peut pas être super interactif, mais React peut le rendre réactif, peut le rendre amusant et engageant, et c'est ce que réagit fait. Maintenant, React est livré avec une syntaxe intéressante appelée js X. Ce n'est pas seulement JavaScript, il ressemble à JavaScript mélangé avec une version folle de HTML. Et nous allons entrer dans ça dans un petit peu. Mais fondamentalement, ce que vous devez savoir dans cette leçon particulière est React vous permet simplement de créer des pages très dynamiques. Comme si je devais cliquer dessus, c' est juste que c'est instantané, il s'accroche, c'est plus rapide que d'utiliser jQuery est plus rapide que d'utiliser d'autres bibliothèques. Et ça ressemble beaucoup à ça. Encore une fois, nous allons parler de la syntaxe de celui-ci dans un peu juste parce que cela semble un peu bizarre pour le moment. Mais nous allons y entrer dans un peu. Donc, il n'y a pas de tâche pour vous pour cette leçon particulière. Ensuite, nous allons installer Node et nous assurer qu'il est installé sur votre ordinateur. 3. Installation de Node.js et npm: D' accord, allons de l'avant et téléchargeons et installé Node. Nous avons besoin de la même chose appelée Node.js. Donc, nous allons taper dans Google télécharger Node JS, et cela va nous amener à NodeJs.org slash téléchargements. Donc, si cela vous amène à la page d'accueil, vous pouvez simplement cliquer sur le téléchargement. L' icône de téléchargement ici ou le, je suppose pas icône, c'est un bouton. Allez avec LTS, c'est un soutien à long terme. Ça veut dire qu'ils n'essayent pas de nouvelles choses. Je veux dire que 14 ou le nœud 16 va être pris en charge pendant une longue période de temps. Le nombre impair est généralement pas pris en charge et Ubunto fonctionne de la même manière. Donc, chaque fois que vous pouvez aller avec LTS, support à long terme, il va faire ce que vous attendez qu'il fasse. Pour moi. J'ai déjà le noeud 15 installé sur mon ordinateur, donc je vais utiliser 15, mais le noeud 14 va fonctionner exactement de la même manière pour vous. Alors passons à 14 et il va télécharger ceci. Si ce n'est pas le cas, vous pouvez toujours aller aux téléchargements ici et choisir soit le programme d'installation de Windows, le installation de Mac OS, ou le code source que vous pouvez télécharger et installer manuellement à l'aide de Linux. Typiquement, vous cliquez simplement sur l'un d'entre eux cependant. Donc, si vous êtes sur Mac, cliquez sur le programme d'installation de Mac OS, si vous êtes sous Windows, cliquez sur le programme d'installation de Windows, allez de l'avant et installez cela, exécutez les étapes d'installation. Et quand vous avez terminé, revenez et je vais vous montrer comment vous pouvez vous assurer que ce nœud est installé correctement sur votre ordinateur. Très bien, donc j'espère que vous n'avez pas de JS installé sur votre ordinateur. Ce que nous devons faire maintenant, c'est que nous devons nous assurer que nous exécutons la bonne version de Node et qu'il est installé et la bonne version de NPM, qui est Node Package Manager, nous allons parler plus de tout cela et nous allons obtenir une expérience pratique avec un très, très bientôt. Je suis sur Mac et j'ai ouvert un programme appelé Terminal. Si vous êtes sous Windows, vous pouvez ouvrir CMD. Si vous êtes sur Linux, vous avez probablement un programme appelé bash ou vous êtes déjà familier avec le programme de ligne de commande que vous aimez mieux que bash. Donc pour moi, je suis sur Mac, donc je vais ouvrir le terminal, qui est ce programme ici. Et je vais simplement taper N ODE dash v, noeud dash v. Et cela dit la version de dash de noeud, et cela me donne la version dix. Donc ce n'est pas juste. J' ai Node Version Manager installé terminus pour basculer rapidement vers la version 15. On y va. Je passe cela au nœud 15. Et si je ne fais pas de tableau de bord v, ici nous allons, j'utilise le nœud 15. Donc, je veux m'assurer que j'utilise le nœud 15 ou pour vous utilisez le nœud 14 ou le support à long terme. Donc, si vous regardez cela quelques années à partir de la date d'enregistrement, et que nous sommes sur le noeud 16 ou le noeud 18, et c'est LTS. Assurez-vous de télécharger et d'installer la version LTS. Ensuite, nous devons taper npm dash v. Et cela va me montrer ma version de noeud, ma version de Node Package Manager. Et celui-ci n'a pas autant d'importance. Nous avons juste besoin de nous assurer qu'il est réellement installé en ce qu'il ne vous donne pas d'erreur en disant que la commande n'existe pas. Si aucun tableau de bord v ne fonctionne pour vous et npm dash v fonctionne pour vous, vous êtes prêt à passer à la leçon suivante. Donc, votre tâche pour cette leçon est d'aller au nœud js.org et de télécharger soit à partir du programme d'installation de Windows, d'installation de Mac ou du code source. Si vous êtes sous Linux, installez-le. Ouvrez votre programme de ligne de commande, que ce soit le terminal de commande Bash, tout autre type de programme de ligne de commande noeud dash v ou npm tiret trois ou non ou mais, prenez les deux de type noeud dash v et npm dash v. Si vous voyez qu'il y a une version là-dedans et la version du nœud ressemble à une bonne version trois pour vous. Pour moi, c'est le noeud 15, vous devriez dire le noeud 14 ou 16 ou une version LTS, version de support à long terme. Si cela fonctionne pour vous, vous avez terminé votre tâche avec succès. Et passons à la leçon suivante. 4. Commencer un nouveau projet: Bon, allons-y et commençons un nouveau projet. Donc, j'utilise VS Code et cela est livré avec un terminal que je peux utiliser à l'intérieur de celui-ci. Donc, si je vais à View et puis aller à l'endroit où se trouve le terminal ? Terminal, il montre ce petit terminal pour moi. Et donc je suis dans un dossier appelé React 101. Et juste pour en faire une touche plus grande, accord, donc je suis juste dans un dossier appelé React 101. Et ce qu'on veut faire, c'est s'assurer que React est installé. Vous pouvez donc taper npm install dash g, c'est global. Créer l'application React. Et ce que cela va faire est d'aller de l'avant et d'installer application Create React globalement sur votre ordinateur. Donc vous pouvez voir que c'était très rapide pour moi. Ça pourrait prendre un peu plus de temps pour toi. Maintenant, ce que nous pouvons faire est de taper np x, Create, React app et puis lui donner un nom. Et je vais lui donner le nom de mon application de tableau de bord. Vous allez voir comme ce bâtiment, comme cela commence à créer le projet, il crée un dossier appelé mon application de tiret sur la gauche. Donc je vais juste donner à ça un peu de temps pour faire son truc. Il s'agit simplement de télécharger et d'installer toutes les choses qui réagissent aux besoins. Il va obtenir toutes les bibliothèques JavaScript qui ont besoin. Il va tous les installer. Il va apparemment installer Yarn afin qu'il puisse télécharger des choses en utilisant fil au lieu de npm. C' est juste un peu plus rapide. C' est un autre gestionnaire de paquets. Vraiment, on n'a pas besoin de s'en soucier. Je suis sûr que cela va enlever le fil. Oui, il a enlevé le fil ? Et puis il dit toutes sortes de choses que nous pouvons à peu près ignorer à ce stade. On peut travailler avec ça ou on peut l'ignorer. Donc, il dit, créé git commit. Cool, cool. Succès. J' ai créé mon application à, puis mon emplacement de dossier d'application. Dans le répertoire, vous pouvez exécuter plusieurs commandes. Nous vous suggérons de commencer par taper CD myapp. Et ce que cela va faire est de changer mon répertoire de travail dans mon terminal. Ou si vous êtes sous Windows, vous pouvez taper DIR si vous utilisez un système comme Unix, Mac OS ou Linux, par exemple, et vous pouvez taper PWD. Vous devriez être à l'intérieur du dossier de mon application dans votre terminal. Ce n'est pas parce que tu l'ouvres ici qu'il est ouvert dans ton terminal. Donc juste pour clarifier, maintenant, si on ouvre mon application sur la gauche, on a plein de trucs ici. Nous avons des modules de noeud, public, SRC, gitignore package.json, readme dot AMD, yarn dot loc. Nous ne toucherons pas beaucoup de ces choses parce que cela entre, dans plusieurs sujets différents en dehors du monde de React. Mais pour ce cours, nous allons travailler principalement dans le répertoire SRC. Alors allons-y et mettons-le en marche. Donc maintenant que j'ai CDD dans mon application dans mon terminal et que je peux faire ls tiret a. Et cela me montre tous mes fichiers ici. Ou je peux taper DIR Si j'étais sur Windows. Et vous devriez voir tous ces fichiers ici. Une fois que vous voyez ces fichiers, en particulier le dossier des modules de noeud ici, vous pouvez taper npm start. Et ce que cela va faire est de construire l'application React et de la lancer automatiquement dans votre navigateur. Et ça va me demander la permission. Ça va dire, hé, je peux accéder à Google Chrome ? Je vais dire oui, encore une fois, et attendre que ça se charge. Ça va prendre une petite seconde. Et nous y voilà. Nous avons une application React en cours d'exécution sur notre ordinateur. Maintenant, si votre navigateur ne s'ouvre pas automatiquement pour vous, vous pouvez toujours aller à la barre oblique HTTP deux-points hôte local deux-points, et cela va au port localhost 3 mille. Maintenant, si pour une raison quelconque cela ne fonctionne pas pour vous, vous pouvez toujours aller à 127 points. N°1, deux-points 3 mille. C' est exactement la même chose. Certains ordinateurs sont configurés légèrement différemment, donc il y a deux façons différentes de le faire. Leur prochain, allons-y et parlons de la syntaxe des réactions. Mais pour le moment, votre tâche sera essentiellement de mettre cela en marche. Assurez-vous d'avoir exécuté certaines commandes ici. Donc, vous avez exécuté npm installer dash g pour global, Create React app. Puis tapez np x Create React app, mon application de tiret. Et cela va créer tous ces dossiers et toute cette structure pour vous. Et puis vous CD-ROM dans ce dossier particulier. Donc la mienne s'appelait mon application de tableau de bord, donc j'ai juste CDD dans ce dossier. J' ai changé mon répertoire dans ce dossier. Et puis vous tapez npm start. Il devrait lancer un navigateur pour vous. Allez au port localhost 3 mille et vous dit juste ici, le port hôte local 3 mille. Et il vous montrera votre application React, mais vous devez vous assurer que npm start est en cours d'exécution pour que cela fonctionne. Une fois ça fait, passons à la leçon suivante. 5. Syntaxe React.js: Ok, jetons un oeil à la syntaxe de réaction. Donc ce que je vais faire, c'est juste rendre ça plus petit, juste déplacer ça vers le bas. Je vais aller dans mon SRC, mon dossier source, et aller dans app.js. Et ça a l'air vraiment, vraiment, vraiment bizarre. Je vais rendre ça encore plus petit parce qu' on n'a pas besoin du terminal pour cette leçon. Et ça a l'air vraiment bizarre. Donc, si vous avez l'habitude d'écrire du JavaScript vanille, vous n'avez peut-être jamais vu de commande d'importation auparavant. Cela pourrait être tout nouveau pour vous. Et si c'est tout nouveau pour toi, c'est bon. Nous en parlerons et nous aurons un peu d'expérience avec cela aussi. Nous voyons une fonction qui ressemble à une fonction régulière en JavaScript et une déclaration de retour avec une parenthèse ouvrante. Et si on descend ici, il y a une parenthèse qui correspond à ça. Vous pouvez voir cette ligne surlignée ici. Et puis nous avons un div. Maintenant, cela semble bizarre parce que nous n'utilisons pas une chaîne, nous n'utilisons pas un littéral de modèle en JavaScript. Nous utilisons du HTML droit. Et en fait, cela devient un peu plus bizarre juste parce que nous n'utilisons pas seulement HTML, nous utilisons cette chose appelée JS Acts, qui est fondamentalement XHTML. Donc, c'est HTML, similaire à HTML5 normal, mais il est écrit à l'intérieur de notre JavaScript, qui est assez fou à C. ce qui est assez fou à C. Donc, si c'est votre première fois en regardant cela et que vous êtes comme, whoa, soit je n'aime pas ça ou je n'ai pas idée de ce qui se passe à nu avec moi un peu. Il devient beaucoup plus facile et il devient assez agréable de travailler avec en bas de la route. Alors lisons cette ligne par ligne. On a un div. Et remarquez que ce n'est pas une classe. Classe est un nom réel en JavaScript, c'est un mot-clé, nous ne pouvons pas l'utiliser, donc nous utilisons le nom de classe est égal à l'application. Nous voyons la même chose ici et ici nous avons une image. C' est SRC est, eh bien, ça a l'air un peu bizarre. Donc, au lieu d'un fichier, lac logo dot SVG, nous avons importé logo dot SVG. Allons donc ouvrir ce fichier. C' est juste un fichier SVG régulier. Nous avons importé cela sous la forme d'une variable appelée Logo. Chaque fois que nous utilisons l'un de ceux-ci et réagissons, nous disons que le nom de l'attribut ou le nom de la propriété est égal à. Et au lieu d'avoir des guillemets de chaque côté, comme nous le faisons habituellement en HTML, nous avons des crochets bouclés et des crochets bouclés d'ouverture et un crochet bouclés de fermeture. Et puis nous avons mis ce nom de variable à l'intérieur de celui-ci. Et ce que cela va faire est d'injecter ce logo directement dans cette source d'image. Encore une fois, nous avons le nom de la classe, pas la classe, le nom de la classe, c'est un attribut js X. Et nous pouvons voir que ici dès que je survole cela, il dit comme un DJ ESX attributs et balises alt régulières et noms de classe, yada, yada, paragraphe avec du code, HTML standard. Nous avons un lien ici, nom de classe, mais le HRF est le même, la cible est la même, le rail est le même et il dit apprendre à réagir. Une chose à noter cependant, est dans votre déclaration de retour, notez que nous utilisons un crochet ou une parenthèse au début et à la fin ici. Nous enveloppons également tout à l'intérieur d'un div. Donc, vous ne pouvez pas simplement taper du texte normal. Vous avez réellement besoin d'avoir un élément HTML avec plus de code à l'intérieur de celui-ci. Et c'est donc une petite bizarrerie avec React. Mais si je m'assure juste que mon serveur est en cours d'exécution ici, on dirait que c'est le cas. C' est sur localhost 3 mille. C' est ce qu'on va voir. Maintenant, pour changer cela, disons que je voulais changer cette ligne ici. Tout ce que j'ai à faire, c'est changer ce texte. Et puis quand je l'enregistre, et c'est vraiment une chose sympa, il recharge automatiquement mon navigateur pour moi. Donc, au moment où je retourne à Chrome ou Firefox ou Safari, ça a changé pour moi, c'est vivant, mis à jour. Je n'ai pas besoin de frapper Refresh, ce qui est vraiment sympa parce que parfois c'est ça devient assez ennuyeux si vous faites ça assez en une journée. Tout ce que j'ai à faire, c'est taper. Et vous voyez qu'un live a changé juste en face de moi. Et c'est presque l'exemple, donc je suis dans Save frappé et puis je vais passer à Chrome très vite. Et tu vas pouvoir voir que ça a changé. C' était très, très rapide, mais on l'a vu changer. Donc ce que je vais faire, c'est juste le faire. Vous pouvez voir que chaque fois que j'ai enregistré mon app.js, ce nœud est également mis à jour. Donc, il dit qu'il compile chaque fois que je frappe sauver, compiler, compiler, compiler. Donc, votre tâche pour cette leçon est que je veux que vous ouvrez votre app.js, assurez-vous que votre serveur est en cours d'exécution et juste changer un peu de texte. Ne vous inquiétez pas du logo ou de tout ce qui est avancé. Préoccupe-toi juste de changer le texte. Et dans votre navigateur, il devrait changer le texte pour vous une fois que vous avez cela en cours d'exécution, passons à la leçon suivante. 6. Importer des composants: D' accord, jetons un coup d'oeil à l'importation de composants. Et nous pouvons importer toutes sortes de choses. Ils ne doivent pas nécessairement être un composant. Je parlerai plus des composants dans un peu. Mais si nous jetons un oeil à notre app.js, qui vit dans notre dossier source. Nous disons le logo d'importation. C' est le nom que nous utilisons à partir des logos de slash. Donc, cela dit le même dossier que nous sommes actuellement, le même dossier que app.js se trouve, Logo dot SVG. Allons de l'avant et ouvrez ce fichier, logo dot SVG. Et nous pouvons voir qu'il s'agit d'un SVG standard. Il est juste important pour nous et nous le met à la disposition de l'utiliser dans ce fichier particulier. De même, nous pouvons dire importation, et nous n'avons pas besoin de lui donner un nom nécessairement. Dans une chaîne, nous pouvons dire barre oblique de point. Donc, ce dossier exact, point d'application CSS. Ouvrons ça. Ceci est app.use ESS, et cela rend juste le CSS disponible pour nous dans notre fichier ab.js application. Donc, nous pouvons utiliser ClassName est égal à l'application. Et jetons un coup d'oeil par ici. Nous avons une application ici, text-align centre. Allons de l'avant et modifions ce texte aligner à gauche. Vous pouvez le voir recompilé rapidement en bas là. Et est-ce que ça a fait quelque chose ? On dirait qu'il n'a rien fait. Hmmm Dois-je re-enregistrer app.js ? Non. C' est juste CSS funky de sorte qu'il semble que ce n'est pas vraiment tout ce qui est utile. Allons de l'avant et changeons la couleur du texte en noir. Et nous allons gifler et important là-dessus parce que je ne sais pas ce qu'il y a d'autre ici. Je n'ai pas vraiment lu et je ne veux pas perdre votre temps à lire juste le CSS par défaut non plus. Alors allons de l'avant et sauvegardons ça. Et ça n'a pas fonctionné, probablement à cause de la spécificité. Jetons donc un coup d'oeil à l'en-tête de l'application. Nous voulons modifier le texte du paragraphe d'en-tête de l'application. Donc, ce n'est qu'un travail de première ligne que nous faisons ici. Donc, nous avons App, nous avons l'en-tête d'application quelque part, en-tête d'application. Et la couleur est blanche. Alors allons de l'avant et changeons ça en noir. Voyons si ça fait l'affaire ici. On y va, on l'a changé en noir et il a compilé automatiquement votre CSS pour nous. Donc on pourrait changer ça en bleu pour ça. Pour ce texte le change automatiquement pour nous aussi, ce qui est vraiment, vraiment sympa. C' est ainsi que nous importons les commandes. Simplement le mot-clé import et le nom de la variable facultative. Soit nous voulons importer un composant particulier lequel nous allons entrer dans juste un peu. S' il vous plaît, portez avec moi. On y va, je te le promets. De, puis un nom de fichier. Et ce nom de fichier va être dans une chaîne. Donc, dans d'autres langages, python, nous ne mettons pas cela dans une chaîne. En JavaScript, nous mettons ceci dans une chaîne, puis nous le terminons avec un point-virgule. Maintenant, ce que je voudrais que vous fassiez pour cette leçon est ouvert votre CSS applic.use et faire quelques changements dans leur rien de majeur. J' ai donc changé la couleur du texte en bleu. Je vais changer ça en, je vais le changer en jaune pour qu'il soit lumineux et visible. Si je le change en noir, c'est dur à lire. Le bleu est difficile à lire, le jaune est beau et lumineux. Allez-y et changez un peu de CSS, veillez à ce qu'il apparaisse dans votre navigateur comme vous vous attendez à ce qu'il apparaisse. Et quand tu en auras fini, passons à la prochaine leçon. 7. Syntaxe JSX: Allons de l'avant et explorons index.js. Donc, c'est là que notre application est réellement rendue. Et on peut voir que je viens de fermer mon terminal là-bas, juste laisser ça courir. Je peux toujours l'ouvrir avec le terminal de vue et vous pouvez voir qu'il fonctionne toujours, donc je l'ai effondré. Et maintenant, il dit importer React de React comme une chaîne. C' est un paquet que nous avons installé réagir lorsque nous avons écrit npm install dash, dash g, Create React app. Il a créé un paquet pour nous appelé act. Maintenant, si je vais dans mes dossiers de module de noeud, vous allez le voir. Il y a beaucoup de choses ici. Mais si on fait défiler tout le chemin vers le bas, a , C, D, E, F, G, H, tout le chemin vers le bas. Où es-tu ? P, Q, R, S. Où réagissez-vous ? Vous êtes là. Réagissez. Donc c'est ce que nous importons, importer, React, de React. Et nous pouvons regarder tout le code source de React ici aussi. Si nous le voulions, nous allons importer DOM réagi de réagir Dom. Donc si on retourne ici et regarde React DOM, il y a réaction Dom. Il va aussi importer un fichier pertinent, pas non non pertinent, mais un parent, je suppose que c'est aussi pertinent, mais un fichier relatif appelé index.js s. Donc, dans notre fichier index.js, nous importons, je vais fermer celui-ci. Nous importons index dot css. Et donc cela va juste ajouter une marge et un code là-dedans, et pas une marge mais un corps. Il inclut une marge et un code ici. Donc c'est tout ce que ça fait. Nous allons importer App. C' est essentiellement nos composants. Donc, si nous allons à l'application, nous avons une fonction appelée App, et tout en bas, nous voyons l'application par défaut d'exportation. Et ce que cela va faire est de dire prendre cette fonction APP et l'exporter. Et cela lui permet d'être portable. Nous allons donc importer App à partir de la même application de dossier. Ensuite, nous allons importer des éléments vitaux web de rapport. Et cela vient d'un rapport d'URL relative web vitals, qui va juste signaler un tas de choses pour nous. Nous n'allons pas entrer dans cela dans ce module particulier. Et puis nous arrivons à la minutieuse, le code réel. Nous avons donc réagi DOM ou Document Object Model dot rendu. En mode React strict. Nous allons mettre notre application à l'intérieur. Et c'est GSS. Ça a l'air vraiment, vraiment bizarre. Mais fondamentalement notre application en JavaScript était une fonction. Nous pouvons maintenant l'écrire comme s'il s'agissait de HTML ou XHTML standard. Et la bonne chose à propos de ça comme React va juste aller dans les coulisses et dire, oh, je sais exactement ce que c'est. Et je vais travailler avec ça. Je vais juste le faire marcher par magie. Et donc on peut vraiment devenir vraiment, vraiment compliqué avec ça. Et nous pouvons ajouter des choses comme des variables dynamiquement à chaque composant. Nous en parlerons à l'avenir. Enfin, nous avons deux options ici. C' est donc notre premier argument pour la commande de rendu. Il s'agit du deuxième argument pour une commande de rendu. Ce que cela dit, c'est dire dire en mode strict, rendre notre application et le mode strict et le mettre dans notre, nos éléments qui a un ID de racine. Donc si nous allons dans un dossier public et allons dans index.html, nous allons voir quelque part ici, où es-tu ? Id de la racine ? C'est là que notre application va vivre. Donc, si nous nous en débarrassons, cela ne fonctionnera plus pour nous. Nous voulons donc nous assurer que cela existe toujours. Maintenant, il n'a pas besoin d'être appelé root. Tu pourrais appeler ça n'importe quoi d'autre. Vous verrez souvent qu'il s'appelle App aussi. Donc juste un ID de l'application. Et si jamais vous changez ça, vous devez le changer ici aussi. Alors assurez-vous juste que cela correspond toujours. Dernier point et non des moindres, nous exécutons des signes vitaux web. Et c'est vraiment, vraiment utile pour, qui nous dit ici pour commencer à mesurer les performances dans votre application. Passez une fonction pour enregistrer les résultats. Par exemple, signalez les éléments vitaux Web, console.log. C' est donc une partie de la syntaxe bizarre que nous allons voir avec React. Et ça s'appelle le JS X. La principale chose que je veux que vous enleviez d'ici et qu'il n'y a pas de tâche pour cette leçon, c'est que je veux juste que vous jetiez un oeil à ceci, juste lire. Comprenez que cela est en cours d'importation. C' est une classe, c'est une méthode sur cette classe. Donc, nous entrons dans la programmation JavaScript orientée objet. Il faut un paramètre, on peut dire que c'est un paramètre parce qu'il y a une virgule ici. Et le deuxième paramètre est l'endroit où cette application est censée être rendue. Et puis réagissez comme aller compiler un tas de choses. Ça va dire, oh, réagissez en mode strict, ok, je sais comment utiliser ça. Votre application va comprendre ce qu' est votre application et elle va la rendre ici également. Ce qui est bien à ce sujet, c'est que nous commençons à entrer dans les composants. Donc, si nous avions une application secondaire, nous pourrions avoir une autre application ici. Importer qui nous permet de prétendre que nous l'avons importé. On peut l'appeler app ou on pourrait l'appeler boutique. Et cela va rendre notre application et notre boutique dans notre racine de document. Donc, une fois de plus, il n'y a pas de tâche pour cette leçon. Je veux juste que tu prennes un, tu sais, gratte-toi. La tâche est en fait ouvrir votre index.js et juste lire ces lignes ici, juste une sorte d'avoir une idée de ce que cela ressemble, parce que c'est vraiment bizarre au début. Et ce n'est rien comme quoi que ce soit d'autre sur le web. C' est un complètement nouveau, c'est appelé le js X. Et donc fondamentalement, vous avez un composant et un composant de fin et à l'intérieur de celui-ci, et il ressemble juste au HTML. On a quelque chose à l'intérieur. Donc, c'est comme en HTML nous pouvons avoir une div slash div, et alors nous pouvons avoir un H1 à l'intérieur de celui-ci. C' est très, très similaire. La courbe d'apprentissage pour cette partie particulière est donc assez faible. Une fois que vous avez terminé de lire cela, passons à la leçon suivante et commençons peut-être à créer notre premier composant. 8. Votre premier composant: D' accord, allons de l'avant et créons nos premiers composants. Donc, ce que nous allons faire est d'abord et avant tout nous allons dire import, React from React package. Et cela nous permet juste d'utiliser React. Et puis ce que nous pouvons faire est de créer un nouveau composant ici. Et il ressemble à cette classe, mon nom de composant. Alors appelons-le un élément, étend react.com. Et ici, il faut une méthode de rendu. Ça ressemble beaucoup à une fonction. Et ici, il faut une déclaration de retour, donc il retourne quelque chose que nous allons ouvrir et fermer entre parenthèses et juste mettre un h1 ici. Bonjour le monde. Maintenant, c'est sympa. Mais vous pouvez voir que ce genre de n'est pas la bonne couleur. On dirait que ça a l'air faible. Et c'est donc dire qu'il n'est pas vraiment utilisé. Alors allons-y et utilisons-la. Maintenant, nous avons ce composant React. Et la bonne chose à ce sujet est que nous pouvons l'écrire comme nous l'avons vu dans notre index.js, juste comme ça. Alors allons de l'avant et créons un nouvel élément à l'intérieur de notre code. Et supprimons ce paragraphe. Et tout d'abord, supprimons le paragraphe. Revenons à notre navigateur et assurez-vous simplement que ce paragraphe n'existe pas. C' est à quoi il ressemblait avant qu'il ait dit change de texte. Je me suis débarrassé de ça. Il est parti. D'accord. Cool. Donc maintenant que cela est supprimé, je peux taper élément. Et c'est juste un enregistrement XHTML standard. Et ça dit bonjour monde. Donc maintenant, je n'ai rien dit ici. Je l'ai écrit dans je l'ai écrit. Je l'ai écrit ici. Et je peux écrire tout ce que je veux ici. Je peux dire bonjour monde. Et puis en petites lettres, c'est un test. Et ce qui est bien à ce sujet, c'est que nous n'avons pas vraiment à changer dans notre application une fois que nous avons défini cet élément, nous pouvons faire beaucoup de notre logique, beaucoup de notre traitement dans un composant. Maintenant, allons de l'avant et divisons ce composant dans son propre fichier de composant mural. Donc ce que je vais faire, c'est que je vais juste couper ça. Coupez ça. Et je vais dire importer l'article à partir de. Et je vais créer un nouveau fichier appelé mon article. Et nous pouvons nous débarrasser de cette ligne aussi parce qu'elle ne sera pas utilisée dans ce fichier. Et je vais créer un nouveau fichier ici appelé mon item dot js. Donc, remarquez que je l'ai appelé mon point d'article JS, Mais il s'appelle juste mon article ici. Lorsque réaction compile votre code, il sait, il comprend que ce sera très probablement un fichier JavaScript. Maintenant, par exemple, nous avons spécifié app dot CSS parce que nous avons dû le dire, hey, en passant, n'importe pas app.js, n'importe pas le logo ab.js important logo dot SVG, mais par défaut, il va supposer JavaScripts. J' ai donc créé un fichier appelé mon élément ab.js et n'était pas un collage cette première ligne là-dedans. Et puis collez ce code ici aussi. Et allons-y et réparons cette indentation là. Ça a l'air bien. Et maintenant, vous pouvez voir que cet article est également damné à nouveau, il n'est pas utilisé. Ce que nous devons dire ici, c'est exporter cet article afin qu'il soit impossible plus tard, exporter par défaut cet article. Et si je retourne à app.js, nous allons importer l'article de mon article. Maintenant, ouvrons notre terminal et il n'y a pas d'erreurs dans votre, que faire si nous tapons serait ce que nous avons dit point deux. Il dit ne pas compiler. L' élément n'est pas défini. Remettons-le à la façon dont il est censé le faire et nous n'obtenons aucune sorte d'erreur de compilation dans notre terminal. Revenons maintenant à notre navigateur. Et ça marche. Nous avons maintenant créé un composant et le divisons en son propre fichier de composant. Et nous pouvons changer cela à tout moment. Et comme exemple, bonjour de Caleb Talia et c'est moi. Et ça dit bonjour de Caleb Tolkien. Et donc maintenant, nous pouvons diviser les composants, pas seulement à partir de grandes quantités de logique, car votre app.js pourrait devenir assez grand. Vous pouvez maintenant diviser ce composant dans son propre fichier afin qu'il soit plus maintenable à l'avenir. Et toute votre logique et tout votre traitement pour cet élément particulier dans votre, pour celui-ci que nous rendons peuvent aller à l'intérieur de votre composant d'élément. Donc, votre tâche pour cette leçon est l'étape numéro un. Ce que je veux que vous fassiez est d'ajouter ceci, le texte que je viens de mettre en évidence à votre app.js. Et puis je veux que tu instancies réellement. Je veux que vous utilisiez le composant que vous avez créé et vous pouvez copier mon code. Je ne vais pas vous donner le code source nécessairement, juste parce que c'est très, très simple. Et c'est vraiment, vraiment bonne pratique d'écrire ceci pour que vous sachiez que, par exemple, les classes ont des accolades, mais return utilise une parenthèse. Alors allez-y et essayez ça. C'est la première étape. La deuxième étape consiste alors à prendre ce code de votre app.js et à le diviser en vos propres composants comme je l'ai fait. Une fois que tu auras fini avec ça, passons à la prochaine leçon. 9. Travailler avec des accessoires: Parlons de ce truc appelé accessoires. Alors, où est un bon exemple ? Un bon exemple serait un exemple propre serait dans notre index.js, nous avons un composant appelé App. Et nous pouvons avoir cette chose comme un HTML où nous avons un attribut est égal à une sorte de valeur. Dans React, nous appelons ça un accessoire. Donc, un accessoire est égal à une sorte de valeur et nous pouvons le transmettre. Maintenant, lorsque nous transmettons un accessoire ou un attribut dans notre composant, nous pouvons y accéder en tant que variable JavaScript. Allons-y et j'ai juste défait ça. Je vais fermer ce fichier, ouvrir app.js et où j'ai l'élément ici, je vais donner un nom à cet élément. Et donc ce nom va simplement être ravin. Donc je garde ça et on va voir qu'il ne se passe absolument rien. Et dans mon article ici, où j'ai cet article, je ne peux pas simplement taper des ravines parce qu'un qui n'est pas une variable. Je ne peux pas taper Gully et je ne peux certainement pas taper nom. Vous penseriez que nous pourrions le faire, mais nous ne pouvons tout simplement pas. Donc, si je sauvegarde cela, nous allons dire que nous allons voir qu' il dit qu' il n'a pas réussi à compiler l'utilisation inattendue du nom. Alors, allons-y et défaites ce porte-place ici et sauvegardez ça. Maintenant, ce que nous pouvons faire est que nous pouvons accéder aux accessoires en utilisant le, ce mot-clé. Donc, en réaction, quand nous avons une sorte de référence à un autre réacteur, à d'autres JavaScript, nous ouvrons et fermons toujours avec la syntaxe de moustache avec une accolade ouverte et fermante. Ensuite, nous disons ce point, point d' accessoires, et puis quel était ce nom d'accessoire ? Ce nom d'accessoire n'était que le nom. Donc, nous pouvons dire ce point props nom de point, mais sauvegardez cela. Et il dit que je peux maintenant ouvrir cela dans le navigateur. Et voilà, bonjour du ravin. Maintenant, c'est vraiment sympa parce que nous pouvons utiliser cet article à plusieurs endroits maintenant. Nous pouvons donc créer un élément ici. Nous pouvons copier et coller ceci sur une nouvelle ligne, la rhubarbe. Ce sont les deux chats avec lesquels je vis. Je les aime beaucoup. Ils sont super mignons et je veux qu'ils soient dans cette vidéo. Alors je reviens et ça dit bonjour de ravin, bonjour de rhubarbe. J' en ai mis un autre, moi. Bonjour de Caleb. Bonjour du ravin, bonjour de rhubarbe, bonjour de Caleb. Et donc en écrivant une quantité très minime de code, simplement en utilisant un composant, un composant réutilisable appelé un élément que nous avons nommé. Ici. Nous pouvons passer une variable appelée Nom, et ce nom est accessible via ce point props nom de point. Et la raison pour laquelle nous l'utilisons est parce que nous sommes dans une classe ici. Donc, cela fait référence à cette classe entière, juste celle-ci, pas à aucune autre classe. Cela fait simplement référence à cette classe en tant que composant. Ensuite, nous l'espace de noms avec des accessoires afin que ce ne soit pas seulement this.name parce que cela peut devenir très déroutant lorsque vous avez un projet plus grand, nous disons ceci .name cultures comme dans les propriétés, puis le nom de la propriété. Que se passe-t-il si on tape le mauvais ici ? Disons que nous faisons ce point accessoires, nom de point avec un N. majuscule compilé, ça a bien fonctionné, mais ça ne fonctionne pas vraiment pour nous. Et la raison en est que ce n'est pas à la recherche d'un accessoire appelé nom avec un N. majuscule et donc c'est très, très sensible à la casse. Assurez-vous donc que votre boîtier de nom fonctionne toujours. J' ai dit nom avec un n minuscule, là, là et là. Et je veux m'assurer que ça marche ici. Maintenant, ce que je voudrais que vous fassiez comme tâche est pour votre composant que vous avez créé. Je veux que vous lui donniez une propriété et quand vous lui donnez un accessoire, et vous pouvez utiliser mon exemple aussi si vous le souhaitez. Il peut être un nom est égal à quelque chose. Et puis dans votre composant, je veux que vous accédiez à cette propriété. Je veux que vous puissiez le montrer sur votre page. Alors dites bonjour de ce point accessoires et puis votre nom de propriété. Assurez-vous qu'il s'affiche dans votre navigateur de la façon dont vous vous attendez à ce qu'il apparaisse. Et quand vous l'avez fait, passons à la leçon suivante où nous parlons d'ajouter des événements de clic. 10. Cliquer des événements de clic dans React.js: Jetons un coup d'oeil à l'ajout d'un événement click. J' ai donc un composant ici appelé élément. J' en ai trois avec des noms différents. Donc, il utilise la même logique. On remplace simplement le nom. Et ici, nous utilisons ce problème. C' est de notre dernière leçon. Maintenant que se passe-t-il si vous cliquez sur, disons celui-ci. Maintenant, c'est un exemple terrible, mais cela va vraiment conduire à la maison l'idée qu'il peut y avoir un événement click. Et donc comment fonctionnent les événements de clic ou comment fonctionnent la plupart des événements, il utilise en fait du HTML old-school, que nous n'avons pas vu depuis longtemps. Donc, une façon d'écrire une fonction est onclick est égal à et alors vous pouvez mettre une fonction JavaScript ou JavaScript ici. Maintenant, beaucoup d'endroits ne nous apprennent plus parce que c'est vraiment, vraiment de la vieille école. Mais React tire parti de cela très, très lourdement. Donc, pour créer un événement onclick, nous disons onclick, puis nous lui donnons une sorte de valeur. Nous allons juste supprimer ça pour l'instant. Et je reviendrai à ça dans une seconde. Nous devons lui donner une sorte de méthode, une sorte d'action. Donc, nous allons créer une nouvelle fonction ici appelée Cliquez sur moi. Et tout cela va dire que le journal de la console, j'ai été cliqué. Et puis revenons à l'onclick ici. Nous mettons cela dans la syntaxe de la moustache ou des accolades. Et nous pouvons dire la fonction flèche, exécutez ce point, Cliquez sur moi comme une fonction. Ça a l'air un peu bizarre au début, mais tu t'y habitueras, je te le promets. Donc nous avons cette ouverture bouclée, accolade est cette syntaxe bouclée bizarre ici. Et cela veut dire que tout entre ici va être JavaScript, il va être réagir. Le reste de cela ressemble beaucoup au HTML. Mais hé, réagissez quand vous allez compiler ceci, et cela va être JavaScript juste pour que vous le sachiez, donc quand vous cliquez sur quelque chose, il va y avoir une sorte d'événement et va ensuite exécuter ce point cliquez sur moi. Et c'est une programmation orientée objet. Et chaque fois que nous cliquons sur ce va dans le journal de la console, j'ai été cliqué. Alors allons de l'avant et sauvegardons ça. Cela ressemblait à une définition compilée. Et si je vais ici, inspectez avec le bouton droit de la souris, allez dans ma console. Et rendons cela beaucoup plus grand. Si je clique sur Golly, il dit que j'ai été cliqué. La rhubarbe dit qu'on m'a cliqué et Caleb dit qu'on m'a cliqué. Maintenant, ce qui est cool à ce sujet est parce que chaque composant est son propre morceau de code fondamentalement. Donc Gully va obtenir comme événement sur clic, rhubarbe obtient son événement onclick et je reçois mon événement onclick. Donc ce qu'on peut dire maintenant c'est que j'ai été cliqué. Et mettons ceci, Mettons un second paramètre ici qui dit ce point props nom de point. Et ça va dire que j'ai cliqué et ensuite juste le nom. Alors allons-y et jetons un coup d'oeil. Il dit qu'il s'est rafraîchi. Allons juste nettoyer notre console là-bas. Et nous allons cliquer sur ceci. J' ai cliqué golly. J'ai cliqué sur la rhubarbe, j'ai cliqué sur Caleb. Donc maintenant, nous pouvons effectuer une sorte de logique basée sur cela. On peut dire, hé, si tu as cliqué sur l'empreinte de rhubarbe, c'était un chat orange. Ou si vous cliquez sur Gully console log quelque chose d'autre ou si vous cliquez sur Caleb, dites que ce n'est pas un catch, nous pouvons effectuer une sorte de logique basée sur ce nom de propriété et un événement click. Ce que je voudrais que vous fassiez comme tâche, c'est que je veux que vous ajoutiez un événement onclick avec une fonction de clic et que vous conserviez simplement la propriété qui est passée dans votre propriété à partir de la dernière leçon. Alors maintenant, on devient un peu plus avancés ici. Et pour briser cela une fois de plus, nous disons que l'onclick est égal à l'accolade bouclée. C' est ainsi que nous savons que cela va être javascript et réagir à l'intérieur de cette fonction va ensuite exécuter ceci, qui est tout ce composant. Dot cliquez sur moi avec des parenthèses parce que cela correspond ici. Ça va être exécuté. Et vous pouvez consigner tout ce que vous voulez là-dedans. Il peut s'agir simplement d'une chaîne régulière ou vous pouvez consigner votre nom de point d'accessoires. Vous pouvez consigner n'importe quoi. Vous pouvez créer une demande d'API si vous le souhaitez, que nous allons obtenir sur la route, vous pouvez vraiment faire n'importe quoi à ce stade, car c'est juste du JavaScript régulier. Donc maintenant, vous avez combiné votre HTML avec un événement onclick se connectant à votre JavaScript. Dans React, allez-y et donnez un coup de feu, passez quelques minutes à ce sujet. Et rappelez-vous, si jamais vous rencontrez un problème. Disons qu'il y avait une faute de frappe ici. On peut sauver ça. Ça va se compiler parfaitement bien. Mais quand nous testons cela, actualisons la page. On teste ça. Ça ne marche tout simplement pas. Donc, vous voulez vous assurer que votre code fonctionne toujours, toujours. Et si vous vouliez voir cette pause, cela vous donnera une sorte d'erreur. Regarde ça. Erreur de type ne peut pas lire les invites de propriétés indéfinies. Donc ça te dit qu'il y a une sorte de problème ici. Et c'est parce que c'est une propriété, pas une méthode. Cela agit comme une variable, pas une fonction. Donc, chaque fois que vous rencontrez un problème, vous pouvez toujours juste lire à travers il a disparu, mais vous pouvez lire à travers l'erreur et cela va probablement vous donner une idée de ce qui se passe. Ce n'est pas parfait, mais ça vous donnera une bonne idée de ce qui se passe et comment le réparer. 11. Ajouter de l'état à vos composants React: D' accord, allons-y et ajoutons un peu d'état à notre composant. Et quel est l'état, c' est un peu comme des accessoires. Props est une valeur que vous transmettez à vos composants. C' est donc une propriété, c'est une propriété personnalisée que vous transmettez dans votre composant. State est comme une variable qui fait l'objet d'un suivi interne à l'intérieur de votre composant. Ainsi, chaque fois que vous créez un nouvel élément, il obtient un nouvel état. Et c'est un peu difficile à expliquer. Et pour moi, au moins quand j'apprenais cela il y a longtemps, la meilleure façon d'apprendre cela était de le faire simplement. Alors allons de l'avant et créons un état. Pour ça. Nous allons avoir besoin d'utiliser une méthode magique appelée « Constructure ». Et je dois être capable d'épeler notre construction d'aide ou, et cela peut prendre des accessoires si nous le voulions. Et on pourrait écrire des super accessoires. Donc on a juste affaire à des accessoires là-bas. Si cela devait s'étendre à partir d'un composant différent, celui que nous avons écrit, cela ferait en sorte que tous les autres composants de, disons, pas élément, mais peut-être une liste que nous écririons seraient disponibles ici. Et c'est tout ce qui dit. Ensuite, nous pouvons dire que cet état de point est égal à, et c'est un objet. Et comptons le nombre de clics. Donc, nous pouvons dire que les clics seront 0 et c'est le nombre de fois où cela a été cliqué. Maintenant, dans notre état Click Me, un autre état où Click Me méthode. Ce que nous pouvons dire est que chaque fois que cela est cliqué, cet état de jeu de points en tant que fonction prend un objet et il correspond fondamentalement à cet objet ici. Donc, nous allons mettre la clé des clics, et ce sera cet état point, points clics plus un. Maintenant, c'est cool et totalement inutile. Ça ne fait rien. Au moins, on a tendance à voir qu'il fait n'importe quoi. Alors allons de l'avant et assurez-vous que lorsque vous cliquez sur l'un de ces, il fait réellement quelque chose. Si intérieur. Un. Chaque fois que c'est un clic, ça va faire quelque chose. Alors mettons le nombre de clics en dessous. C' est vrai, une nouvelle travée ici. Et cela va juste montrer le nombre de clics. Nous pouvons dire cet état point, points clics est le nombre de clics. Et ça va faire deux choses, trois choses en fait. Donc, le premier ici est que nous devons envelopper tout cela dans une sorte d'élément HTML. Allons de l'avant et remontons ça. Et tu as remarqué que ça me donnait un gros problème là-bas. Ça me donnait tous ces soulignements escarpés. C' est parce que l'instruction return s'attend toujours au moins un élément soit enroulé autour de tout votre autre code. Donc c'est le numéro un. Je sauve, je vais ici. Numéro deux est, vous pouvez voir qu'il dit 0 comme le nombre de clics Il y avait le nombre de clics, zéros, le nombre de clics. J' ai écrit ça en un seul endroit. Mais parce que j'ai ce composant utilisé trois fois, il est automatiquement mis à jour à trois endroits différents. C' est génial. Cela signifie que vous devez faire beaucoup moins de dactylographie et votre travail devient beaucoup plus facile ou devient plus facile. C' était une drôle de façon de dire ça. Ok, donc la troisième chose va faire, c'est de mettre à jour le nombre de clics. Vous pouvez voir que par défaut, il est dit 0. Si je clique sur Gully, chaque fois que je clique dessus, je veux dire, j'aurais probablement dû en faire un bouton au lieu d'un H1, mais chaque fois que je clique dessus, ce nombre monte. Même chose avec la rhubarbe, même avec Caleb. Et la chose vraiment agréable à ce sujet est que le nombre de clics est local à ce composant particulier. Le nombre de clics pour la rhubarbe est local à ce composant, et le ravin est local à ce composant. Ce que cela signifie, c'est que celui-ci n'est pas un objet. C' est un article différent. C' est un article différent. Mais nous avons écrit une logique juste une fois. Donc, nous avons l'état du constructeur est égal à un objet avec des clics est par défaut 0. Ensuite, lorsque vous cliquez dessus et les mises à jour et le nombre de clics par un. Et tout ce qui va faire est de le mettre à jour pour un composant. Donc, quand je clique sur la rhubarbe, trois tours en 412 ne change pas pour ne change pas. Seulement trois le font. Et le seul ce composant est en cours de mise à jour. C' est le pouvoir derrière l'État. Maintenant, la syntaxe pour cela est un peu bizarre et ça a l'air un peu magique. Mais nous pouvons essentiellement dire, quand vous avez un constructeur, cet état point est égal à, et je ne sais pas pourquoi cela a bougé. Mais cet état DOD est égal à une valeur de clé d'objet. Nous pouvons avoir de nombreuses valeurs ici aussi. On peut dire que le total restant est égal à 100. Et si nous voulions mettre à jour le total restant, nous ajouterions juste une virgule ici et dire le total restant. Nous allons mettre à jour tout ça à la fois restant. Assurez-vous que c'est épeautre le même oup. Est égal à, est égal à cet état point, point total restant moins un. Et pas un point-virgule parce que c'est un objet, pas une ligne régulière de JavaScript. Et puis nous pourrions dire ici, le total restant sera ce point total de l'état de point restant. Et rappelez-vous que nous utilisons cette syntaxe, cette syntaxe d'accolade bouclée. C' est ainsi qu'il sait que ce sera JavaScript et pas seulement HTML. Donc maintenant à chaque fois que je clique dessus, ça va descendre. Vous pouvez voir que ça descend de 90 à 80. même chose avec celle-ci, la même chose avec celle-ci. Et les chiffres augmentent. Donc, maintenant, nous avons deux états différents fonctionnant en même temps pour chaque élément particulier ou chaque composant. Maintenant, ce que je voudrais que vous fassiez pour votre tâche, c'est que je veux tout d'abord que vous ajoutez un état dont vous avez besoin pour écrire votre méthode constructeur. Ça ne fait pas mal de passer dans les accessoires et de super vos accessoires là-dedans. Créez votre état dans votre constructeur. Ensuite, dans votre fonction de clic de la dernière leçon, je veux que vous écriviez cet état de jeu de points. Il prend un objet qui semble fondamentalement identique à cet objet et juste changer cette valeur. Vous pouvez le changer en un nom, vous pouvez le changer en nombre de clics. Tu pourrais le changer pour tout ce que tu veux. Last but not least, vous devez être en mesure de mettre cet état dans votre modèle d'objet de document dans votre HTML. Et donc tout ce que nous faisons là, c'est que nous disons accolade, cet état point, nom de propriété point de notre objet qui est. Et puis en fermant accolade, HTML normal ou JavaScript. C' est tout ce qu'on a à faire. Vas-y, essaye-le et quand tu seras prêt, passons à la leçon suivante. 12. Composante Star Wars: D' accord, créons un tout nouveau composant. Donc ce que je vais faire, c'est que je vais me débarrasser de, eh bien, je vais commenter ceci afin que je puisse vous montrer à quoi ressemble un commentaire et laissez-moi supprimer ces deux autres. Donc, un commentaire dans JS Acts ou dans React ressemble à cette accolade bouclée. Donc, nous savons que cela va être JavaScript, se termine par des pauses bouclées. Donc, nous savons tout entre ici va être JavaScript, puis un commentaire javascript, et un commentaire javascript de fin. Donc c'est à ça que ça ressemble. Si vous êtes sur VS Code, vous pouvez appuyer sur Commande. Je vais taper ça en fait Cmd plus ça, cette barre oblique. Si vous êtes sur Windows, je ne me souviens pas si c'est une barre oblique de contrôle ou une barre oblique, mais de toute façon, vous pouvez simplement aller à votre barre oblique de ligne et de commande pour moi. Et il a juste commenté pour moi pour que je puisse aller de l'avant et sauver ça. Et nous allons jeter un oeil et il dit compilé avec des avertissements élément est défini mais jamais utilisé ici. Donc, nous pouvons aller de l'avant et nous pouvons commenter cela également. Cela utilise un commentaire JavaScript régulier car il n'est pas à l'intérieur de js X. Enregistrer. Et allons de l'avant et créons un tout nouveau composant ici, puis nous allons le séparer. Alors créons un nouveau composant appelé Star Wars. Donc Class Star Wars prolonge réagir. C' était un étrange autocomplete react.component. Et parce que nous utilisons React.Component, nous devons importer React. Donc, nous pouvons dire importer React à partir de. Et puis la chaîne réagit parce que c'est un paquet. Ensuite, ici, nous avons besoin d'une sorte de fonction de rendu. Donc Render et il va revenir sur plusieurs lignes, donc nous utilisons des parenthèses et H1. Et ici, c'est Star Wars. C' est tout ce qu'on va faire pour l'instant. Dans ce composant particulier, au moins, allons de l'avant et attrapons Star Wars. Et parce qu'il n'est pas utilisé, faisons-le l'utiliser. Alors allons-y et débarrassons-nous de notre en-tête. On n'a pas besoin de ça. Et nettoyons juste un peu ça. Donc, disons que c'est un test pour nous assurer que cela fonctionne comme nous l'attendons comme un test. Nous voulons vraiment cet en-tête là-dedans parce que cela vient avec un joli style. Alors gardons cet en-tête. J' ai juste défait Control Z ou Command Z. C'est un test. On y va. C'est ce que nous voulons. Donc, ce que je peux faire ici est maintenant que j'ai essentiellement vidé l'intérieur de mon application React par défaut, je peux aller de l'avant et mettre Star Wars ici. Allons de l'avant et écrivons Star Wars. Et ceci est un composant React. Donc, nous l'écrivons comme JS Acts dit que les logos ne sont pas utilisés. Allons-y et débarrassons-nous de ça. Et nous n'avons plus de plaintes, ce sont des avertissements. Et ça dit que c'est Star Wars. Donc, en quelques minutes, nous créons maintenant un composant React à la volée très, très rapidement. Maintenant, au cours du prochain nombre de leçons, ce qui allait faire est que nous allons créer une API ou nous ne allons pas créer une API, nous allons consommer une API. Nous allons utiliser une API qui nous permet de générer au hasard des personnages Star Wars chaque fois que vous cliquez sur un bouton. Donc, ce que j'ai besoin que vous fassiez pour cette leçon, c'est que j'ai besoin de vous pour créer une nouvelle classe, un nouveau composant, il s'étend à partir de React.com. Rends-moi juste un truc. Nous pouvons changer ce qu'il rend un peu plus tard, puis l'utiliser dans vos JS Acts. Une fois que cela fonctionne réellement dans votre navigateur, n'hésitez pas à passer à cette leçon suivante. 13. Code pseudo Code: Très bien, faisons un pseudo codage ici. Tout d'abord, nous allons créer un générateur Star Wars aléatoire en utilisant une API. Alors allons de l'avant et trouvons une API. Alors faisons l'API Star Wars, pas les données, GitHub. Et nous pouvons aller échanger des points de def. L' échange de points co n'existe plus. Il y a aussi quelques copy.txt si vous le souhaitez. Il s'agit des swaps d'API Star Wars. Et chaque fois que vous allez à HTTPS swapping dot.gov slash API slash gens slash un par exemple. Ça va vous donner des informations sur Luke Skywalker. Alors allons de l'avant et tapons ceci dans notre URL juste pour vous assurer que cela fonctionne. Slash api slash personnes slash un. Et ici, nous pouvons voir que c'est ce qui va finir par revenir pour nous. Maintenant, les styles peu bizarres parce qu'il y a comme du texte blanc sur un fond gris clair. Mais c'est le JSON que nous allons récupérer. Et allons de l'avant et ajoutons un nom, une hauteur. Ajoutons une URL du monde maison et les films que ce personnage est N. Donc nous allons faire un peu de pseudo codage ici. Nous allons juste nous préparer pour le succès. Donc, nous allons créer un div, qui va être notre conteneur pour tout notre code. Ensuite, ici, nous allons avoir un nom. Et puis qu'est-ce que j'ai dit ? On va ajouter une hauteur. Ajoutons peut-être cette hauteur en centimètres. Le monde d'origine est une sorte de monde domestique. On ne sait pas encore. Donc ça va être une URL, ça va être un lien. Et puis p peut-être ne faisons pas un P, Faisons UL, une liste non ordonnée avec un LI. À titre d'exemple, pas un LU mais un LI filme ici. Et ça va avoir l'air assez terrible, mais ça va marcher pour nous au moins. Donc, il est dit nom. C'est tout le texte aligné à gauche. Allons de l'avant et changeons ça. Je change i au tout début, index point CSS. Non, c'était dans app.js S text-align. Débarrassez-vous de cela parce qu'il ne fait rien du centre d'alignement de texte. Vous pouvez voir qu'il a recompilé près de. On y va. Il est centré. O dernier mais pas des moindres. Nous avons aussi besoin d'une sorte de bouton ici. Parce que comment va-t-on générer au hasard un personnage sans bouton ? Alors allons de l'avant et ajoutons un gros vieux bouton là-dedans. Donc, nous tapons bouton, bouton et c'est juste HTML. Le type va être un bouton normal. La classe va avoir une sorte de nom de classe que nous pouvons ajouter. Un choc est appelé bouton btn, je suppose. Et cela va dire Randomize caractère. Ok, on a un petit bouton là-dedans. Allons de l'avant et agrandissons ce bouton en ouvrant notre application point CSS. Et je vais faire défiler vers le bas et taper point btn parce que cela correspond au nom de la classe. C' est juste CSS ici. Donc, notez ce fichier, mais le nom de la classe ici, donc c'est CSS régulier et j'ai fait une erreur. Ce n'est pas la classe, c'est le nom de la classe est égal à btn. Et nous avons un cours ici appelé Btn. Changons la couleur de fond en noir. Frontière. Un pixel, noir solide. Non, faisons-le jaune. La couleur du texte va également être jaune. Le remplissage va être de 20 pixels partout et la taille de la police va être beaucoup plus grande. Faisons ce 25 pixels et économisons, attendez qu'il compile un caractère aléatoire. Donc c'est un bouton qui est réellement faisable. Nous avons une erreur dans votre classe While. Vous parlez du nom de classe ? Allons de l'avant et rafraîchissons. Et c'était juste une erreur de la compilation Hill hast. Donc, je viens de rafraîchir et je me suis débarrassé de cette erreur. Donc maintenant, nous devons randomiser ce personnage, mais nous l'avons un pseudocode un peu ici. Et tout ce qu'on a fait c'est qu'on a dit, hé, il va y avoir un nom et ça va être des centimètres plus élevés. Il va y avoir le monde de la maison est URL. Il va y avoir des films ici. Donc, nous ne faisons pas vraiment de codage JavaScript réel pour le moment. Nous sommes juste en train de hacher ceci où ébaucher notre code afin que nous sachions avec quoi travailler. Dans la leçon suivante, ce que j'aimerais que vous fassiez, c'est me refléter. Je veux que tu fasses un pseudo codage. Donc, si vous ne voulez pas utiliser l'API de swapping, celle-ci ici, si vous ne voulez pas de vous Star Wars, il y en a un autre appelé l'API Pokemon. Il vous suffit de le Google. Cela vous donnera fondamentalement un site très similaire avec des structures de données très similaires. Mais je vais utiliser la Star Wars. Et je voulais avoir le nom d'un personnage, la hauteur, le monde de la maison et les films. Et c'est ce que nous allons commencer à faire à partir de la prochaine leçon. Alors allez-y, imite-moi et quand tu seras prêt, passons à la prochaine leçon. 14. Un autre événement de clic React.js: Très bien, nous devons maintenant ajouter une fonctionnalité rapide, donc une fonctionnalité onclick. Donc, nous avons ce composant Star Wars ici et il rend HTML avec un tas de H1, PP, UL, allié et un bouton. Et chaque fois que vous cliquez sur ce bouton, il doit faire quelque chose. Donc on est allé sur ça une fois. Allons-y et repassons une fois de plus. Donc on va dire que l'onclick est égal à. Et puis au lieu de vos citations régulières comme nous le faisons habituellement en HTML ou XHTML. Et nous allons dire que ce sera celui de JavaScript. Nous utilisons des accolades. Ensuite, ici, nous pouvons dire obtenir un nouveau personnage va être une fonction, et cela va simplement obtenir un nouveau personnage. Mais nous allons juste nous assurer que cela fonctionne en consignant quelque chose sur la console, obtenir un nouveau caractère à partir d'un bouton. Et on ne l'a pas rempli une fois. Donc onClick, cela doit être, cela va être une fonction de flèche. Ce point obtient un nouveau caractère. C' est une méthode, donc nous utilisons des parenthèses. Et ce que nous pouvons faire ici, et vous verrez beaucoup, c'est que nous pouvons mettre tout cela sur de nouvelles lignes aussi, donc c'est un peu plus lisible comme ça. Et oui, vous allez voir ça un peu plus tard aussi quand vous écrivez beaucoup de réactions. Donc, nous avons une fonction onclick ici. Allons de l'avant et sauvegardons ceci et actualisons notre page. C' est juste que ça nettoie la console pour moi en bas ici. Et quand je clique dessus, il dit obtenir un nouveau personnage à partir d'un bouton. Donc ça marche. Notre événement click fonctionne en fait. Maintenant, c'est tout ce que nous allons faire pour cette leçon particulière. Et j'aimerais que vous fassiez la même chose. Assurez-vous d'avoir un événement onclick. Ça doit déclencher quelque chose. Ne vous inquiétez pas encore de faire des demandes d'API. On y arrivera dans un petit peu. Mais assurez-vous que vous avez un événement click qui fonctionne réellement et j'écris juste le journal de la console en tant que test. On va finir par supprimer ce code dans un peu. Mais c'est un bon test. Ça me dit que ça marche. Alors allez-y et obtenez cette configuration et quand vous serez prêt, passons à la leçon suivante où nous commençons à travailler avec un peu d'état. 15. Comment stocker des données à l'aide de l'état de React: D' accord, allons-y et ajoutons un état à notre générateur de caractères aléatoire Star Wars en utilisant une API. Donc, tout d'abord, nous devons ajouter un constructeur, instructeur. Nous pouvons passer les accessoires si nous le voulions, il n'y a pas de problème. Donc on va juste sauter ça. Et on va dire que cet état de point est égal à. Et puis il faut un objet. Ou si vous venez de Python, il faut un dictionnaire. Et nous avons besoin de stocker, de quoi avons-nous besoin de stocker ? Le nom, la hauteur, le monde intérieur, et les films dans lesquels ils sont. Alors allons de l'avant et stockons le nom comme null. Nous ne savons pas encore quel sera ce nom. La hauteur va être nulle. Nous ne savons pas encore quelle sera cette hauteur. Ces devoirs vont aussi être nuls. On ne sait pas encore ce que ça va être. Et les films, ça va être un tableau vide. Et la façon dont j'ai eu ça, et on reviendra à ça dans une seconde avec un super. Mais la façon dont je suis nul partout c'est parce que nous ne savons pas quel est le nom, la taille ou le monde. Mais les films, nous savons que ce sera au moins une liste ou un tableau. Et si on retourne ici, on va voir des films. Voir ici, c'est un tableau. Nous voulons donc stocker ces données comme elles sont à l'intérieur de notre application. Maintenant, allons de l'avant et lançons ça. Et ça veut dire que le super doit venir avant. Alors couvrons super cool. Ça semble marcher. Assez bien. Maintenant, chaque fois que nous cliquons sur obtenir un nouveau personnage, nous devons mettre à jour cet état. Et nous le faisons avec cet état de point défini. Et je vais littéralement copier et coller ça. Et nous allons coder certains d'entre eux juste pour le moment. Donc le nom va être Luke. La hauteur va être 172. Si je me souviens. Ted, s'il vous plaît, ne me jugez pas si j'épelais ça mal. Et je vais laisser les films comme un seul objet et tu n'es qu'un seul article. En fait, je vais mettre l'article 2 ici aussi, juste pour qu'on puisse voir à quoi ça ressemble. Donc nous allons juste coder ces valeurs et ensuite nous pouvons les changer ici. Donc on peut dire cet état de point, nom de point, hauteur en centimètres, je pense que c'est en centimètres. Cet état de point, hauteur de point. Le monde entier va être une URL. Donc, cet état point, le monde de la maison de points. Et encore une fois, nous définissons cet état. Nous avons initialement dit cet état et lorsque vous cliquez sur, nous allons définir ce S8 ou nous allons mettre à jour cet état. Et enfin, les films vont aller ici. Ça va être intéressant. On va travailler avec ça un peu plus tard. Mais on pourrait dire que ce point des films. Et nous avons codé cela en dur comme ne pas utiliser requêtes API que vous pouvez voir qu'il semble un peu laid, peu cassé pour le moment. Lorsque nous cliquons dessus, il remplit automatiquement ces choses pour nous. Vérifie ça. C' est plutôt sympa. Allons-y et veillons à ce que ça n'apparaisse pas. On va le faire dans la prochaine leçon. Donc, chaque fois que vous chargez la page, il y a juste un bouton. Et aucun de ces trucs ne va apparaître tant que ce bouton n'est pas cliqué. Nous le ferons dans la prochaine leçon. Mais pour le moment, assurez-vous d'avoir ceci codé en dur. Ne vous inquiétez pas des requêtes API. Nous avons juste besoin de nous assurer que vous avez une construction ou assurez-vous que vous exécutez super en premier. Babum, babum, cet état .tab, vous allez vouloir nommer des films du monde home height, ou toute autre donnée que vous voulez utiliser à partir de swaps, de l'API marécageuse. Assurez-vous que lorsque vous cliquez sur, vous allez définir cet état. Vous voulez donc définir le nom, la hauteur, le monde entier, les films ou toutes les propriétés que vous définissez dans votre objet et votre objet d'état. Et puis imprimez simplement cela sur la page dans votre fonction de rendu. Vas-y et essaye-le et quand tu seras prêt, passons à la leçon suivante où nous cachons tout ce truc jusqu'à ce qu'il soit réellement disponible à voir. 16. Si les conditions dans Réact: Jetons un coup d'oeil à cacher ces trucs. Donc, si nous retournons ici et nous rafraîchissons notre page, il est écrit centimètres monde intérieur et il y a une liste et nous ne voulons pas que ça apparaisse. Ce dont nous avons besoin est une sorte d'instruction if à l'intérieur de notre méthode de rendu. Donc ce qu'on peut faire, alors, il y a deux façons différentes de le faire, mais je vais vous montrer le JS XY. Donc on peut dire des accolades ou des accolades. Cela signifie juste qu'il va y avoir une logique JavaScript ici. On va dire si quelque chose est vrai, et ensuite on peut lui donner un div. Donc on va retourner dans JS X et on va déplacer tous ces trucs ici sauf le bouton. Donc en haut, en haut, en, en dedans. Et quelque chose doit être vrai. Ce qu'on peut faire, c'est travailler avec l'État ici. Donc, par défaut, nous pouvons dire que quelque chose est faux. Lorsque vous cliquez sur ce bouton, quelque chose est vrai. Donc, nous pouvons dire que ce point a un caractère ou disons un caractère chargé. Et cela va être un état, donc cet état .tab. Et nous devons installer ça ici dans notre constructeur. Donc, nous voulons dire caractère chargé, ce sera faux par défaut. Et quand vous obtenez un nouveau personnage, nous allons le mettre à jour pour qu'il soit vrai. Et ce que ça va faire, c'est qu'il ne montrera rien tant qu'on n'aura pas cliqué dessus. Ce qui est vraiment, vraiment sympa parce que nous ne voulions pas ce CME ou ce monde entier, ou juste cette petite balle là-bas. Nous ne voulions pas que tout cela apparaisse jusqu'à ce qu'il y ait des données. Donc, pour résumer, ce que nous avons fait ici, c'est que nous avons ouvert notre syntaxe JavaScript. Donc JavaScript à l'intérieur de js X, nous avons dit si l'état du caractère chargé est vrai et c'est un raccourci de JavaScript. Ensuite, nous disons et finissons. Nous mettons du texte ici ou des JS Acts. Cela dit, si ce personnage a été chargé, nous avons tout cet autre état. Et fondamentalement par défaut, nous avons dit caractères non chargés. Le bouton n'a pas encore été cliqué. Lorsque le bouton est cliqué, nous allons dire que le caractère est chargé. Quand ce personnage est chargé, toutes ces autres choses vont être définies en même temps, et nous pouvons le montrer ici. Enfin, nous avons fermé notre syntaxe avec une accolade fermante, et cela dit simplement que tout ici va être une forme de logique JavaScript. Ce n'est pas seulement XHTML. Allez-y, essayez ça. Assurez-vous que ça marche pour vous. Quand tu seras prêt. On va passer à la prochaine leçon ensemble. Je te verrai là-bas. 17. Votre première demande de API basée sur Réaction en réaction: D' accord, allons-y et faisons nos premières demandes d'API. Donc, ce que nous devons faire est dans notre get new caractère, non seulement avons-nous besoin de définir l'état, mais nous devons faire une demande d'API pour échanger, vous devez obtenir des informations. Alors, nous allons travailler avec ça. Dans une affaire très, très simple pour commencer. Allons échanger e.gov. Et je vais obtenir cette API slash gens slash une URL. Et je vais mettre ceci ici comme l'URL const est égale à cette URL, alors nous allons créer une requête d'API de récupération. Donc, nous allons dire chercher cette URL en utilisant une requête get par défaut. Ensuite, nous allons prendre cette réponse et nous allons à JSON, défier ou décoder de JSON parce que nous savons que la réponse va venir de JSON. C' est le format JSON ici. Nous voulons donc nous assurer que la réponse, quelle qu'elle soit, sera JSON. Ensuite, une fois que cela sera fait, nous allons prendre ces données, toutes ces JSON, et nous allons travailler avec et nous allons dire les données console.log. Et débarrassons-nous de notre premier console.log pour ne pas encombrer notre console. Tout semble être un ordre. Il a parfaitement compilé. Revenons à notre application React et actualisons. Et vous pouvez voir que nos affaires sont chargées en premier, c'est juste parce que c'est codé en dur. C'est très bien. On ne va pas s'inquiéter pour ça pour l'instant. On va le remplacer dans une seconde. Ce que nous voulions nous assurer qu'il fonctionne, c'est ça. Dans notre console. Il a toutes les informations. A l'année de naissance, qui est-ce ? Voici Luke Skywalker a son nom, sa taille, sa masse est la couleur des cheveux, la couleur de la peau, les films, genre, la taille, le monde domestique , la masse, yada, yada, yada, toutes sortes de choses là-dedans. Nous avons donc maintenant ces données à utiliser dans un objet ou dans un objet. En JavaScript, je l'ai presque appelé un dictionnaire parce que j'écris beaucoup de Python, fondamentalement la même chose. Donc, ce que nous voulons faire maintenant, c'est que nous voulons prendre ce code, l'état défini. Et nous voulons le déplacer dans les données ici. Et nous voulons définir ces données pour qu'elles soient pertinentes. Le nom des données sera Luke Skywalker. Nous obtenons des données d'ici. Donc, tout cet objet ici va être appelé données. C' est à ça qu'on l'a assigné. Et puis on a dit que le nom allait être juste là. On a le nom. Donc, la hauteur data.frame va être la hauteur est 172, je suppose que c'est vrai ? Maintenant, faisons la hauteur des points de données. Monde d'origine. Ce sera une URL. Donc ça va être un monde domestique. Et tu pourras travailler avec ça un peu plus tard. Une fois que vous avez ce projet en cours d'exécution, vous pouvez alors dire, oh, il y a une URL du monde domestique. Allons de l'avant et récupérons également ces données. Mais pour l'instant, nous allons rester simple et dire data.dat monde maison, et ce sera juste une URL et c'est très bien. Et les films s'appellent ça des films dans ton oui. Des films. Il y en a quatre. Lucas et film 1236. Ce sont les idées, pas l'ordre du film d'ailleurs. Nous faisons donc des films de données. Et allons de l'avant et testons ça. Donc, ce que cela va faire maintenant, c'est quand je rafraîchis ou que vous n'avez pas à rafraîchir. J' aime me rafraîchir comme une habitude de nettoyer rapidement ma console. Ce que cela va faire, c'est que je vais cliquer sur ce bouton et il va ensuite faire une demande pour échanger e dot dev. Et je vais te montrer, ça va apparaître dans notre console ici. Et une fois que cette demande est faite, en supposant que je n'ai pas de fautes de frappe, il va charger les données ici et il va toujours montrer Luke Skywalker. On y va. Luke Skywalker, un 172 centimètres à domicile monde est planètes slash un anys dans les films, un, ID de deux, Film ID de trois idée de film pour ce ne sont pas les épisodes d'ailleurs, c'est juste une façon différente de commander des données. Donc, nous avons cela fonctionne maintenant. Je veux que tu t'assures que ça marche de la même façon que moi. Et dans la leçon suivante, nous allons réellement randomiser cela parce que maintenant chaque fois que je clique dessus, il charge juste Luke. Et tu sais, aussi grand que Luke l'est. Peut-être que nous voudrions qu'il soit exposé à quelqu'un d' autre, à d'autres caractères qui viennent de l'échange de dot dev. 18. Réaliser les personnages: D' accord, générons un personnage aléatoire de Star Wars. Donc, vous pouvez voir ici que nous avons swapping dot dev slash, api slash gens slash un. Et ça va juste obtenir le premier caractère dans leur base de données. ID numéro un est le premier caractère dans l'échange de la base de données de devs de points. Et si nous allons sur leur site Web et que nous regardons les gens slash pour qui était le numéro quatre ? Dark Vader, gentil, un autre personnage commun. Donc c'est un bon à utiliser. Et si on voulait obtenir le numéro de qui ? Je ne sais pas. Je vais deviner le numéro 11. Ou tu dois te moquer de moi. Je vais à tort ici et il peut Skywalker gentil. Donc, tu sais, le garder dans la famille. Ok, alors on va au hasard. Voyons ce qui se passe quand on passe au numéro 100. Il n'y a pas de 100. Et donc, avec beaucoup d'API, et ce que nous pouvons faire, c'est parce qu'il s'agit d'une URL détaillée, nous pouvons simplement aller à couper les gens et cela nous montrera tous les gens. Ça dit qu'il y a un compte de 82. Donc nous savons qu'il y a au moins 82 caractères là-dedans avec une pièce d'identité. Maintenant, nous avons besoin d'un nombre aléatoire entre 0 ou pas 0, mais un nombre aléatoire entre 182. Donc on va créer un nombre aléatoire. Le nombre aléatoire est égal à, et c'est juste du JavaScript simple ici. Donc on va arrondir quel que soit ce chiffre, point mathématique aléatoire. Et ça va nous donner un numéro entre 01. Et puis on va multiplier ça par 82 et s'assurer que c'est arrondi. Donc, si c'est comme 0,4. 1.5.2 trois, il va multiplier cela par AD2 puis arrondir cela à un nombre entier. Ensuite, nous pouvons prendre ce nombre et nous pouvons le transformer en un littéral de modèle au lieu d'une chaîne régulière. Et nous pouvons jeter cette variable ici à nouveau, c'est juste du JavaScript régulier à ce stade. Et ce que ça va faire, c'est obtenir un nombre aléatoire entre 182. Et donc chaque fois que nous cliquons dessus, chaque fois que nous cliquons sur cette fonction, cet événement de clic va créer un nouveau nombre aléatoire, créer une nouvelle URL aléatoire. Et cela va affecter cette URL, puis définir ces données pour nous. Et chaque fois que ces données sont définies, notre page est automatiquement mise à jour. Alors allons de l'avant et jetons un coup d'oeil à ce caractère aléatoire de rafraîchissement. L' un est Ben. Et chaque fois que je clique dessus, il obtient un nouveau personnage. Donc maintenant, nous avons en fait ça et en cours d'exécution. Maintenant, nous avons encore quelques choses avec lesquelles travailler, comme celle du film, ok. S' il y a plusieurs films, nous allons en trouver un qui a plusieurs films. En voici une bonne. C3po est dans tous les films qu'ils ont dans leur base de données. C' est une longue chaîne. Ce que nous voulons faire est en fait montrer ceci comme peut-être un lien et transformer cela en un lien aussi bien. Alors allons de l'avant et tout, dans la leçon suivante, créons le lien ici. Je vais te montrer comment faire ça. Et puis dans la leçon après cela, allons de l'avant et transformons cela en plusieurs points de puces. 19. Créer des liens à partir de texte dans React: D' accord, allons-y et le lien de phi sont des mondes maison ou le monde domestique est le monde de la maison de point de données et c'est une URL. Et quand il apparaît ici, il dit le monde de la maison et puis juste une URL ici. Allons donc, allons de l'avant et en fait couper ça. Et ce qu'on va faire, c'est créer un lien. Ce sera une vidéo vraiment, vraiment courte. Alors j'ai juste collé ça là-dedans. C' est un lien régulier. Et regarderais-tu ce compilé bien. La seule chose bizarre ici est que HREF n'a pas d'apostrophes autour d'elle. Nous utilisons JavaScript à l'intérieur de celui-ci. Donc, nous disons, hey, réagissez quand vous compilez cette accolade bouclée, cela va être JavaScript ici, alors assurez-vous que vous savez quoi faire. Oh, au fait, nous fermons ce JavaScript, le reste va être HTML. Et dans les coulisses, cela fonctionne beaucoup de logique et de comprendre ce qu'il doit faire. Donc, quand je rafraîchis ici, nous allons voir que c'est un lien maintenant il est difficile de lire, mais c'est en fait un lien. Et si je clique dessus, ça m'amène à la planète 42. Haroun Cal, je suppose. Oh, je suis désolé. Si vous êtes un grand fan de Star Wars, je suis une grande star, ça va, mais je ne sais pas comment naviguer les noms. Donc je suis désolé si j'ai massacré ça. Mais il m'a amené à mace Windows monde domestique. Et encore une fois, tout ce que nous avons fait là-bas, c'est que nous avons dit HREF est égal à ouvrir et fermer ces accolades, puis mettre votre JavaScript à l'intérieur de celui-ci. C' est tout ce qu'on avait à faire dans la leçon suivante. Allons de l'avant et travaillons sur une sorte de lien défiant ces films. Mais nous devons apprendre à parcourir certains d'entre eux d'abord, et ce sera une leçon plus importante. Alors assurez-vous que vous avez cela et que vous travaillez et quand vous êtes prêt, passons à la leçon suivante où nous avons appris à parcourir les choses dans notre HTML interne ou js X plutôt. 20. Comment boucler les arrays dans React: Ok, passons en revue tous les films. Nous savons que les films vont être un tableau, donc nous pouvons les parcourir en boucle. Et comment pouvons-nous les parcourir ? En réaction ? Eh bien, réagit utilise une autre façon de boucler. Donc, vous êtes probablement familier avec une boucle for ou une pour chaque boucle à ce stade. Et je veux m'en débarrasser aussi, parce que nous voulons que chaque LI soit dans chaque film. Mais nous allons utiliser une nouvelle façon. Au lieu d'utiliser une boucle for ou une pour chaque boucle, nous allons utiliser la carte. Donc, nous ouvrons notre logique ici et nous disons cet état de point, point films dot map. Et c'est une fonction. Et ça va prendre un film, donc ça va parcourir chaque élément. On va l'appeler film. Et on pourrait revenir, mentir avec le film là-dedans. Allons de l'avant et voyons ce que cela fait. Nous allons en créer un nouveau ici et regarderons ça. Ça marche pour nous. Maintenant, c'est vraiment, vraiment cool. Mais que se passe-t-il si nous voulions lancer cela dans un nouveau composant ? Nous pourrions le faire très, très facilement. Et donc ce que je vais faire ici, c'est parce qu'il y a beaucoup de code. Je vais rendre ça un peu plus petit ici. Et on va se débarrasser de ça. Et on va simplement appeler ça des films. Et ici, dans notre fonction de rendu au-dessus de notre déclaration de retour, parce que rien en dessous d'une déclaration de retour n'est jamais exécuté, doit être au-dessus de notre retour. Sauvez-le. Et on peut dire que les films const sont égaux à cet état de point, points films carte points. Et qu'est-ce qu'on peut cartographier ici ? Tout d'abord, nous pouvons cartographier le nom du film lui-même ou l'URL du film. Alors appelons cette URL. Et nous pouvons aussi lui donner un index. On va en avoir besoin dans une seconde et je vais te montrer pourquoi. Et puis au lieu de dire comme LI quelque chose plutôt, qui n'a pas fait ce que je voulais qu'il fasse. Au lieu de dire quelque chose comme ça et d'écrire js X ici ou HTML plutôt, nous pouvons écrire deux js X. Donc, nous pourrions retourner film Item Row, qui n'existe pas encore, mais nous pourrions le faire exister. Et cela me donne une syntaxe drôle et parce que je manquais cette flèche là-dedans. Donc maintenant, nous avons ce nouveau composant. Nous n'avons pas encore créé ce composant. Nous devons aller créer ce composant. Maintenant, cela va être un des composants plutôt simples. Alors allons de l'avant et disons film de classe, Item, Row étend react.com, rendu. Et nous revenons, retournons plusieurs lignes. Donc, nous utilisons l'ouverture, la fermeture, les parenthèses. On va retourner un LI à chaque fois. Il va y avoir un lien qui va quelque part. On ne sait pas encore ce que c'est. Et il va y avoir un message. Et dans une seconde, nous allons passer quelques propriétés que nous pouvons mettre dynamiquement des données à l'intérieur de notre ligne d'élément de film. Alors allons vers le bas et trouver votre film Item Row, film Item Row. Et tout cela va faire, c'est jeter chaque film dans un concept appelé cinéma, que nous pouvons ensuite mettre à l'intérieur d'ici. Allons-y et essayons ça et avons-nous eu une erreur ? L' attribut href nécessite une valeur valide. D' accord ? C'était mon erreur. Valeur valide. Alors disons juste aller nulle part. Point HTML. On y va. Plus de plaintes. K, nous allons rafraîchir. Et vous pouvez voir ici, il dit du texte, du texte et cette URL, si vous voulez regarder en bas à gauche, dit aller nulle part. Maintenant, ce qui est intéressant à ce sujet est si je fais cette console juste un peu plus petite ici, nous pouvons lire cette erreur. Il dit que chaque enfant d'une liste doit avoir un accessoire clé unique. Si jamais vous voyez cela, ce que vous devez faire est de passer dans un accessoire. Et ce que nous faisons ici, parce que chaque composant de React doit être, pour plus ou moins, il doit être unique. Et nous passons donc une clé pour la rendre unique. Et on va passer ça. Je, allons de l'avant et sauvegardons ça. Rafraîchir. On n'a plus cette erreur. Et nous allons de l'avant et remplacons ce texte par l'URL et cette URL par l'URL. Donc, nous allons passer une autre propriété ici appelée URL est égale à URL et cela vient juste d'ici. Donc, ce que cela fait essentiellement, c'est de parcourir tous nos films. Pour chaque film, il va mapper cette URL, puis l'index dans ce fondamentalement une boucle for. Pour chaque film. Il va ensuite retourner un nouveau composant qui a une clé unique dedans. Donc, ce sera 0123, et cetera, et cetera, avec un accessoire URL aussi. Maintenant, ce qui est bien à ce sujet, c'est que nous n'avons pas besoin d'écrire plusieurs composants. On peut simplement mettre l'accessoire ici. Nous pouvons dire que ce point props URL point. Et je l'obtiens à partir du point point. Je reçois ça d'où suis-je ? Clôtons une partie de tout ça. Je reçois l'URL d'ici. Donc c'est un accessoire. Donc, ce point props URL de point n'appartient pas entre parenthèses car il s'agit d'une chaîne. Nous voulons que cela exécute une logique réelle dans les coulisses. Et mettons-le le même ici. Ce point accessoires, point URL, Enregistrer nos compilateurs qu'il n'y avait pas de problèmes. Nous allons rafraîchir notre page. J'aime me rafraîchir. Vous n'avez généralement pas à actualiser, sauf si vous voyez une erreur et qu'elle ne se met pas automatiquement à jour pour vous. J' aime rafraîchir cela comme une vieille habitude et vérifier cela. Il dit échanger les films API dot dev pour les films API cinq, les films API six. Allons de l'avant et cliquez sur ce lien. Api, films six, ça correspond ici. Donc, c'est un bon lien. C' est Revenge of the CIF épisode ID est trois, et il a tous ces personnages dans votre, toutes ces planètes, tous ces vaisseaux, tous ces véhicules, toutes ces espèces ont toutes sortes de choses là-dedans. Donc ça marche pour nous. Essentiellement, ce que nous avons fait, c'est que nous avons pris plus de temps pour le faire. C' est un très, très simples composants. Et donc nous n'avions probablement pas besoin de mettre cela dans un composant, mais nous l'avons fait. Nous l'avons mis dans un nouveau composant qui rend un allié pour chaque film dans lequel se trouve un personnage. Ensuite, nous avons dit, passez cette URL en tant qu'accessoire. Et comme un accessoire ressemble à ceci. Nous avons passé cette URL. Donc, pour chaque film que nous appelons URL, nous pourrions tout aussi facilement appeler ce film. Et cela va fonctionner exactement de la même façon. Cela ne va pas nous donner d'erreurs. S' il y a quatre films, il y a quatre films qui vont le stocker dans une constante, une variable constante appelée films. Et puis on accède aux films ici. Maintenant, je veux que tu lui donnes une chance. Va à la dure. Ne fais pas la façon facile que je t'ai montré dans la première minute ou 90 secondes environ. Essayez ceci à la dure car c'est ce que React est en production. En tant que développeur professionnel, vous verrez des composants divisés en petits et minuscules composants comme celui-ci, ou des composants plus grands qui utilisent beaucoup d'autres composants. Vous devez donc être vraiment familier avec la façon d'utiliser un composant. Last but not least, chaque élément d'une liste. Chaque élément d'une liste où vous avez besoin d'une clé et cette clé. Je viens de dire que cette clé va être i. Donc, si c'est la première itération, je vais être 0, deuxième itération, 1, troisième itération, Ce sera le numéro deux. Et cela va juste dire que chacun d'entre eux aura une valeur clé différente. Et cela rend juste unique pour que réagir aussi agréable et heureux avec cela et pour qu'il sache comment gérer ce composant sur la route. Au lieu de dire que chaque composant est exactement le même, allez-y et essayez cela. Si vous êtes coincé, laissez votre question ci-dessous ou n'hésitez pas à poser votre question. Dans le groupe Facebook, apprendre à coder. Quand vous aurez fini ça, passez à la leçon suivante. Et je vais te donner un projet. 21. Votre projet: Très bien, bienvenue dans votre projet final. Je veux que tu fasses quelque chose de différent. J' ai donc cette URL ici, et je suis allé à la mauvaise. Oups. GitHub.com slash, AKA bab slash Star Wars Dash API. Et ici, si vous allez dans API, peut aller dans Id. Et si vous entrez dans la pièce d'identité numéro un, c'est Luke Skywalker. Tout comme l'échange de point Dev l'a fait. La différence est qu'il y a une image et que vous pouvez charger cette image dans votre application. Donc, quand vous obtenez un personnage au hasard, au lieu de simplement dire Sand Hill, montrez une photo de San Hill, ou montrez une photo de quelqu'un d'autre qui apparaît ici. Maintenant, vous allez devoir changer l'URL. Vous ne pouvez donc pas utiliser l'échange de point, point, de point car il ne prend pas en charge les images. Mais si vous utilisez cette URL ici, si vous cliquez simplement sur comme ID, un point JSON, cela va vous donner ce caractère particulier. Ou si votre numéro aléatoire l'était. Et il y a 88 caractères. Voyons qui le numéro 88 est conservé dans le plasma. Si vous êtes numéro s'est avéré être un nombre aléatoire, 88, il devrait chercher cette URL. Donc tu vas vouloir t'assurer que huit est un nombre dynamique, c'est un nombre aléatoire. Récupère cette URL, récupère le nom. Et peut-être toute la morale, ai-je ça ? Ce n'est pas en fait une URL, c'est un nom que j'aime ça, c'est un peu mieux. Prends cette image. Et peut-être, peut-être obtenir leurs espèces ou affiliations ou quelque chose et mettre cela dans votre application aussi bien. Donc fondamentalement, je veux que vous recréez ce que nous avons créé dans ce cours ou dans ce module. Et je veux que tu mettes une image ici. Vous allez devoir utiliser l'état un peu. Vous pouvez utiliser des invites. Vous allez vouloir changer l'URL de votre API et vous allez vouloir changer le nombre aléatoire que nous générons parce que nous générons seulement jusqu'à 8082, je crois que c'était. Cela prend en charge jusqu'au numéro 88. N' oublie pas si tu restes coincé. Vous pouvez poser des questions et apprendre à coder le groupe Facebook, venez nous rejoindre. C' est un groupe totalement libre. Vous pouvez poser une question sur tout ce qui concerne le développement web. Vous pouvez voir qu'il y a déjà plus de 65 000 membres ici. N' hésitez pas à venir vous joindre, poser des questions, obtenir des commentaires et aider d'autres personnes si vous le souhaitez. Vous pouvez généralement obtenir une réponse dans quelques minutes après l'approbation de votre poste, ce qui est vraiment, vraiment sympa. C' est très, très rapide. Il y a beaucoup de gens utiles ici. Enfin, je m'appelle Caleb Italian. J' ai été ton professeur, la gorge réagit un à un. J' espère que vous avez apprécié ce cours. J' espère que c'était amusant et une introduction amusante dans React JS. Si vous voulez Me suivre, vous pouvez toujours me suivre sur toutes sortes d'endroits différents, mais Twitter est un bon. Vous pouvez toujours me suivre sur Instagram, ou si vous le souhaitez, vous pouvez obtenir des conseils et astuces de codage en allant sur Instagram.com slash coding pour tout le monde. Et vous obtenez de jolis petits trucs et astuces comme comment travailler avec Django, comment travailler avec les décorateurs Python , comment travailler avec React, etc. Merci beaucoup d'avoir suivi ce cours. J' apprécie vraiment votre temps et j'espère vous voir dans un autre de mes cours. Ou si vous êtes dans un de mes plus grands cours, j'espère vous voir dans le prochain module. Merci encore, et je te verrai partout. Au revoir.