Réagir 201 : niveau intermédiaire Réagir js | Kalob Taulien | Skillshare
Menu
Recherche

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Réagir 201 : niveau intermédiaire Réagir js

teacher avatar Kalob Taulien, Web Development Teacher

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Welcome to intermediate React

      2:13

    • 2.

      Creating a new React app

      2:53

    • 3.

      Code cleanup

      1:23

    • 4.

      Installing Bootstrap 5

      1:52

    • 5.

      Adding a Navbar component

      9:58

    • 6.

      Adding a Home component

      3:38

    • 7.

      Adding an About component

      1:44

    • 8.

      Installing a React router

      1:40

    • 9.

      Using the Browser Router component

      5:17

    • 10.

      React based links

      3:16

    • 11.

      The Hero component

      3:44

    • 12.

      Component props

      2:39

    • 13.

      Adding generic content

      3:55

    • 14.

      Adding a search component

      1:52

    • 15.

      Search component props

      8:48

    • 16.

      Binding keyup events

      7:51

    • 17.

      Getting API keys

      3:36

    • 18.

      React based API requests

      5:30

    • 19.

      React browser history

      1:49

    • 20.

      Mapping search results

      4:49

    • 21.

      Bootstrap 5 search Results

      8:40

    • 22.

      Movie detail component

      11:23

    • 23.

      Loading state

      3:38

    • 24.

      Movie component API

      4:34

    • 25.

      Adding a backdrop using CSS

      6:07

    • 26.

      Your project

      3:43

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

513

Students

14

Projects

À propos de ce cours

Bienvenue à React intermédiaire où nous apprenons tout sur React.js. Dans ce cours, nous allons créer une application à une page en utilisant React où nous utilisons une API pour rechercher les résultats de film.

Nous créerons un certain nombre de vues, de composants et de crochets réact. Qui est un aperçu assez large. Si nous explorons ce que vous apprendrez, vous apprendrez l'état de réaction, les accessoires et les composants basés sur les fonctions (nous avons appris les composants basés sur les classes dans React 101), les routeurs pour afficher différentes pages et les demandes d'API.

Tout d'abord, nous commencerons par tout savoir sur les composants fonctionnels. Ensuite, nous allons diviser certains de nos composants dans leurs propres fichiers et les importer en utilisant "la méthode JavaScript d'importer". Ensuite, nous allons apprendre les props, c'est comment nous transférons les données d'un composant à un autre (y compris les variables et les fonctions). Ensuite, nous découvrirons les crochets d'état dans React qui viennent avec une fonction magique pour changer une valeur de variables, mais également déclencher une autre fonction appelée un effet, qui est un autre crochet de React.

Ensuite, nous allons ajouter un certain nombre de pages, donc notre application à une page unique (SPA) a en fait plus d'une page, avec plus d'une URL.

Ensuite, nous allons implémenter la recherche en utilisant une API et un JavaScript moderne. Je vous montrerai comment tout fonctionne à l'intérieur de React, et comment faire une requête d'API lorsque la page changes, aussi.

À la fin de ce cours, vous maîtrisez les demandes modernes de JavaScript, JSX, React et AP. Vous aurez un projet amusant et avancé pour mettre sur votre portefeuille.

Oh oui, nous allons également mettre en œuvre ce site en utilisant Bootstrap 5.

Conditions requises :

  • Vous devez comprendre au moins le JavaScript intermédiaire
  • Vous devez déjà avoir Node.js sur votre ordinateur
  • Vous devez avoir de la patience avec vous-même, car React n'est pas un sujet facile à apprendre.

Meet Your Teacher

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Teacher

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... See full profile

Level: All Levels

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Bienvenue au réagir de intermédiaires React: Bonjour et bienvenue pour réagir à 001. C' est une réaction intermédiaire dans ce module ou dans ce cours, nous allons travailler avec beaucoup de composants différents dans React. Par exemple, créer une application d'une seule page afin que vous puissiez basculer d'une page à l'autre instantanément. Nous allons aussi travailler avec la recherche. Donc, je peux taper Star Wars et obtenir tous ces résultats de recherche différents. Je peux même cliquer sur les détails de l'un d'entre eux et aller à forme quelconque d'une vue détaillée en utilisant le routage React. Nous allons utiliser des composants fonctionnels dans React to 01. Et nous allons travailler avec des choses comme l'état et le réglage de l'état. Utilisation des API telles que l'API de film db.org. On va travailler avec des accessoires. Et nous allons même travailler avec l'histoire dans ce sens. Nous allons également utiliser l'effet US, qui est un livre React. Donc nous allons l'utiliser en conjonction avec l'état. Encore une fois, nous allons utiliser une API. Nous allons utiliser des routeurs, allions utiliser des composants. On va passer des accessoires à ces composants. Et nous allons faire parler cette application entière à différents composants d'un composant peut parler à un autre composant. Maintenant, pourquoi voudriez-vous apprendre à réagir de niveau intermédiaire ? Réagissez comme l'une des compétences les plus exigeantes pour le développement web frontal. Connaître React peut presque vous garantir un emploi en tant que développeur web frontal. Donc, être bon chez React est vraiment, vraiment important. Si vous allez devenir un développeur web indépendant, vous allez avoir besoin de savoir comment écrire réactif ce qu'il fait. Et ce cours est juste un peu différent de réagir un à un. Réagir un à un était très, très basique. Nous n'avons pas utilisé de pages différentes ou quoi que ce soit. Tout était sur une seule page. Celui-ci est plus d'une application web progressive où vous pouvez littéralement taper n'importe quoi dans cette barre de recherche et obtenir des réponses API immédiatement. Colleen et moi enseignons le développement web depuis 2012. J' ai appris à plus de 350 mille étudiants dans le monde entier comment coder et en réaction à un, je vais vous enseigner un composant fonctionnel en utilisant React. Bienvenue pour réagir à un, et je te verrai à l'intérieur. 2. Créer une nouvelle application React: Très bien, bienvenue pour réagir un tuple 1 premières choses d'abord, vous devez avoir Node installé et réagir installé. Si vous n'avez pas de nœud n, React déjà installé sur votre ordinateur, s'il vous plaît dirigez-vous vers la réaction 101 où nous avons couvert les bases de React, y compris l'installation et la mise en service avec Node JS. Maintenant, je vais supposer que vous avez déjà application Create React installée sur votre ordinateur en utilisant le nœud et NPM, auquel cas nous pouvons simplement plonger directement dans ce. Bon, donc ce que je vais faire ici, c'est que je vais taper n px, Create React app. Et je vais appeler ce navigateur de film, navigateur de film. Et ça va aller de l'avant et installer un tas de trucs pour nous. Bon, donc avant de continuer ici, jetons un oeil à la version du nœud que j'utilise. J' utilise le nœud 15. Vous voulez utiliser Node 14 ou plus récent si possible, si vous utilisez Node Version 10, cette commande de l'application Créer React va construire quelque chose de différent pour vous. Donc, vous voulez vous assurer que vous avez fondamentalement la dernière version de la dernière version LTS de Node. Utilisez donc le nœud 14 ou 15, ou si 16 ou 18 est sorti, utilisez la version LTS, peut-être 16 ou 18. Alors maintenant, je vais au cd dans le navigateur du film. Et ce que je peux faire, c'est Dash L.A. Ou si vous êtes sous Windows, vous pouvez taper DIR. Et il vous montre que vous avez un paquet node_modules de lecture, public, SRC, dialogue de fil. Vous devriez avoir tous ces fichiers et dossiers. Ce que je vais faire, c'est que je vais ouvrir ça et VS Code en tapant un point de code. Si vous n'avez pas cette commande pour une raison quelconque sur votre ordinateur, c'est bon. Vous pouvez simplement ouvrir le code VS et aller dans Fichier Ouvrir et sélectionner le dossier entier. Et vous voulez juste vous assurer de sélectionner les dossiers du navigateur vidéo. Donc, vous pouvez aller au fichier ouvert. Et vous pouvez sélectionner ce dossier entier ici. Donc, navigateur de film. Très bien, une fois que vous avez cela en cours d'exécution, ce que vous pouvez faire est dans le code VS ou si vous n'avez pas de code VS en fait, vous pouvez simplement ouvrir votre terminal comme ce que j'avais ouvert avant. Juste ce terminal ici ou PowerShell ou, ou tout ce que vous voulez utiliser. Ce que je vais faire, c'est que je vais l'utiliser directement à l'intérieur du navigateur. Donc je vais fermer ça. Donc le terminal quitte le terminal. Et dans mon code VS, je vais voir mon terminal ici. Donc, tout mon code est que tous mes fichiers vont être, ils vont être sur la gauche. Mon terminal va être en bas et mon code va être en haut juste ici. Donc maintenant ce que je veux faire est que je veux taper npm start. Et cela devrait vous amener à votre première sorte de page de réaction. Il vous dit exactement ce qu'il faut faire. Modifier le point de l'application slash SRC JS. Et on va faire un tas de trucs. Donc, ce moment dans le temps, vous devriez avoir cela en cours d'exécution. Si vous n'avez pas cela en cours d'exécution, faites-en votre tâche pour cette vidéo. Assurez-vous que votre première application React est en cours d'exécution à l'aide de la commande Create React app. 3. Nettoyer le code: Ok, bienvenue à la prochaine leçon. Dans cette leçon, ce que nous allons faire, c'est que nous allons aller dans notre SRC et aller dans app.js. Et je vais tout simplement faire ce juste un peu plus petit. Et on y va. Ça a l'air un peu plus raisonnable. Et ce que je vais faire, c'est que je vais juste me débarrasser de tout ça ici. Juste, je n'ai plus besoin du logo. Alors, allons de l'avant et supprimons ce logo. Supprimer le logo. Oui, supprimez l'application ClassName. Je n'ai pas besoin de ce nom de classe là-dedans non plus. Et je vais simplement dire retour H1, bonjour de React 201. Et c'est tout ce que je vais faire. Et pour sauver ça. Et vous pouvez voir que cela compilé avec succès, il me dira compilé avec succès comme nous nous y attendons. Alors allons-y. Sauvegardez. Chaque fois que je sauve, il va se recompiler. Et chaque fois qu'il se recompile, il devrait lire rafraîchir mon navigateur automatiquement pour moi afin que je n'ai pas à appuyer sur Actualiser. C' est vraiment, vraiment sympa. Et donc il devrait dire Bonjour de réagi à un. Allons de l'avant et nettoyons ça. Et pendant que je vous ai fait cela, allons-y et ouvrons app.use CSS. Et nous allons juste éclaircir cela aussi. Nous allons continuer à utiliser app.use ESS. Nous n'avons tout simplement pas besoin du CSS par défaut qu'il vient avec. Alors allons de l'avant et supprimons cela et sauvegardons-le. Et vous pouvez voir qu'il dit compilé avec succès. Une fois que vous avez fait cela, passons à la leçon suivante où nous installons bootstrap cinq. 4. Installation de Bootstrap 5: Bon, bienvenue à la leçon où nous installons bootstrap. C' est ce qui va rendre notre site agréable. Et au lieu de ressembler un site Web de texte standard brut, nous allons avoir comme un système de navigation et Lake, une section de héros,des nous allons avoir comme un système de navigation et Lake, une section de héros, cartes et d'autres choses. Alors allons sur bootstrap.com, getbootstrap.com et cliquez sur Démarrer. Et ici, j'utilise la version cinq de docs au fait. Donc j'utilise Bootstrap 5. Il est dit dans le Quickstart que je peux essentiellement copier et coller cette feuille CSS dans ma page. Et c'est tout ce que je vais faire, c'est que je vais littéralement cliquer ici. Et je vais aller ici et ouvrir index.html public. Et ça va avoir un tas de trucs dans l'année, des tas de commentaires et d'autres choses. Je veux faire deux choses. Tout d'abord, je veux mettre ce lien ici à l'intérieur de la tête. Donc, avant cette tête de barre oblique et avant, pas avant mais après la tête. Donc tu le veux quelque part entre ici. Donc, si je réduit cela, vous voulez le code quelque part entre ces deux balises. La deuxième chose que je veux faire est que je veux renommer cela de application React au navigateur de film. Et ça va simplement ressembler à, Honnêtement, il va sembler qu'il n'a rien fait. Fondamentalement, ça n'a rien fait. Il a juste changé un peu l'espacement, une sorte de réinitialisation ou CSS. Il a fait quelque chose, mais fondamentalement un n'a rien fait à ce stade. Tout cela a été de nous permettre d'utiliser notre CSS à partir d'un bootstrap cinq, qui va finalement nous permettre d'utiliser de beaux petits composants comme cette carte. Alors allez-y et faites installer Bootstrap. Assurez-vous de copier et coller ce lien dans cette feuille de style ici. Assurez-vous simplement de copier et de coller cela dans votre index.html qui se trouve à l'intérieur de votre dossier public. Ensuite, continuons et créons un composant fonctionnel de la barre de navigation. 5. Ajouter un composant Navbar: Ok, jetons un coup d'oeil à l'ajout d'une barre de navigation globale à notre site. Donc, j'ai juste app.js ouvert et c'est là que fondamentalement l'application entière va vivre. Et donc je veux que cette barre de navigation, cette barre de navigation théorique vive quelque part ici. Et je veux que le reste du site vive aussi essentiellement ici. Mais il y a différentes façons de le faire. Et la première façon est à travers un composant fonctionnel. La deuxième façon consiste à utiliser un composant basé sur une classe. Et la troisième voie est similaire à la première, qui est un composant fonctionnel. Nous pouvons utiliser const. Et donc je vais vous montrer les deux façons d'utiliser fonctionnel et const. Donc, je vais écrire la fonction navbar. Et tout ce que cela fait est de retourner quelque chose. Donc j'écris div ici. Div, c'est ma barre de navigation, et c'est un composant fonctionnel. Et tout ce que c'est, c'est littéralement juste une fonction et il renvoie un tas de js X. Donc JavaScript et XML réunis. Donc, nous copions la barre de navigation et allons de l'avant et écrivons ceci comme une barre de navigation composant. Et vous pouvez voir que cela a été compilé avec succès. Donc, si j'ouvre mon navigateur maintenant, et fermons Bootstrap pour l'instant. On n'en a pas besoin. C' est ma barre de navigation. Et si je change autre chose dans ma barre de navigation, c'est ma barre de navigation 123123. Vous pouvez le voir automatiquement mis à jour pour moi et a dit ceci est ma barre de navigation 123123. C' est donc un composant basé sur la fonction, un composant fonctionnel. Et ceux-ci sont un peu différents des composants basés sur les classes que vous avez appris dans React 101. Maintenant, à mon avis, il n'y a pas de bonne ou de mauvaise façon d'écrire des composants. Vous pouvez les écrire en tant que composants fonctionnels ou les utiliser comme composants basés sur des classes. Personnellement, j'aime juste m'assurer que si j'utilise des composants fonctionnels, mais ce sont toutes des fonctions, ou si j'écris des composants basés sur des classes, ce sont toutes les classes qui ont juste gardé le code standardisé de cette façon. Maintenant, si vous avez un travail sur la route et que vous remarquez que lorsque vous écrivez réagissez qu'une section utilise un composant fonctionnel et une autre seconde utilise un composant basé sur une classe. En fait, c'est ALK. n'y a rien de mal à ça et c'est juste une de mes préférences. Réagit donc à un que nous allons utiliser des composants fonctionnels. Revenons donc à notre navigateur et tapons Bootstrap cinq, fermez en fait trop tôt et bootstrap F5 et je veux barre de navigation ici. Et donc je vais aller dans les composants. Et où est ma barre de navigation ? Et il y en a un dans votre spécialité que je veux qu'on modifie et c'est le premier ici. Donc je vais copier tout ça et nous allons rencontrer quelques erreurs ici. Donc tout d'abord, je vais juste coller tout ça là-dedans et changer à l'indentation. Et maintenant, vous pouvez voir quand nous enregistrons cela qu'il dit balise de fermeture correspondante js X attendue pour HR. Où est HR ? Il y a un HR juste ici. Et donc, en HTML régulier, vous pouvez écrire HR comme ceci. Vous pouvez écrire BER, comme ceci. Vous pouvez même écrire IMG et l'avoir pas vraiment auto-fermeture, n js X. Vous avez besoin de toutes vos balises auto-fermant pour être correctement auto-fermant avec une barre oblique à la fin. Alors allons-y et sauvegardons ça. Il dit que la balise de fermeture correspondante js X attendue pour l'entrée sur la ligne 3838, colonne 1038, colonne dix va me montrer ici. Ce n'est pas tout à fait correct, mais c'est assez proche. Et ce qu'il cherche, c'est cette balise d'entrée. entrée est la même chose que JS Acts et il est une balise auto-fermante. Allons de l'avant et sauvegardons ça. Et maintenant ça va me donner un tas d'autres avertissements. Et je crois qu'à ce stade, cela devrait fonctionner parfaitement bien. Alors revenons à notre navigateur et regardons ça. Si cela ne fonctionne pas pour vous, vous pouvez simplement appuyer sur refresh et cela devrait fonctionner pour vous à ce stade. Maintenant, la liste déroulante ne fonctionnait pas. Nous n'avons pas ajouté Bootstrap. Javascript ne va pas l'utiliser. Fondamentalement, nous voulons juste le lien d'accueil de la barre de navigation, peut-être un lien désactivé, et la recherche là-bas. C' est tout ce que nous recherchons pour le moment. Maintenant, une chose à noter est lorsque vous ouvrez votre outil d'inspection. Donc, si vous faites un clic droit et que vous allez dans la console, vous verrez qu'il va vous plaindre assez dur de beaucoup de choses. Et tout d'abord, allons de l'avant et réparons cet index d'onglets. Vous parlez de l'index des tabulations ? Réagir et js X est un peu. Maintenant, il n'y a aucun moyen de dire ça. C' est pointilleux. Et je tape l'index de tabulation avec une majuscule I. Et quand je rafraîchis ma page et fais défiler jusqu'aux erreurs, cette erreur n'existe pas. Et le bien, c'est que ça me dit ce qu'il pense. Je veux dire, l'autre ici et celui-là me ramène tout le temps et ça va probablement vous avoir aussi. Est-ce que cela dit une classe de propriété DOM non valide. Vous parlez du nom de classe ? Maintenant, nous n'utilisons pas de classes dans le sens des classes JavaScript, mais nous utilisons des classes dans le sens des attributs HTML, CSS, classe. Et donc la classe est en fait un mot réservé. C' est un mot-clé en JavaScript et nous ne voulons pas l'utiliser. Donc, ce que je vais faire, c'est que je vais sélectionner tous ces éléments et aller à la sélection, puis ajouter l'occurrence suivante. Et il va juste sélectionner tous ces éléments. Donc, je veux sélectionner des classes égales à, puis sélectionner toutes celles-ci, chacune. Et puis je peux taper, fondamentalement, je peux taper tous ces endroits en même temps. Je peux taper un nom de classe avec un N. majuscule Ok, continuons et rafraîchissons et regardons ça. Et nous n'avons plus ces erreurs là-dedans. Mais nous avons quelques avertissements. Allons-y et nettoyons tout juste un peu et nous pourrions avoir besoin d'ignorer ces avertissements pendant quelques minutes. Donc cette liste déroulante, nous n'avons pas besoin de cette barre de navigation. On n'appellera pas cette barre de navigation. On va appeler ce navigateur de film. Et il va se plaindre de HRF avec lien vide. Donc juste un signe numérique qui est un lien vide. Disons simplement d'aller à quelque part juste pour que nous nous débarrassons de ces plaintes pour l'instant, revenons à notre navigateur, appuyez sur Rafraîchir, et avec notre console ouverte, nous voyons qu'il n'y a pas d'erreurs là-dedans. Maintenant, si on clique sur l'un de ces éléments, ça ne va pas aller nulle part. Vous pouvez voir qu'il va quelque part dans l'URL, ne fait rien. Donc on va s'attaquer à ça très bientôt. Mais la principale chose que nous devrions enlever ici est cette classe, la classe d'attribut est en fait le nom de la classe en réaction. Donc, vous voulez vous assurer d'utiliser le nom de la classe. Et vous voulez vous assurer que tous vos éléments sont JS Acts ou XHTML, pas HTML normal, XHTML. Et la différence à nouveau est juste en HTML régulier, vous pouvez écrire l'image. Ou entrée, ou HR ou BR. Alors que dans JS Acts et dans XHTML, c'est en fait une barre oblique d'image. Et c'est pourquoi vous me voyez dans d'autres cours ou d'autres modules l'écrire comme ça. C' est la vieille école, mais c'est aussi la façon dont React s'attend à ce que vous formiez votre code, votre HTML. Donc, il s'attend toujours à ce que dans leur réaction quand il se compile, va dire, hey, s'il y a un BR sans cette barre oblique ici, alors il y aura probablement une balise BR de fermeture. Mais en HTML, il n'y a pas de balise BR fermante en tant que balise auto-fermante. Nous utilisons donc cette balise à fermeture automatique chaque fois que possible en utilisant React. Ok, il y a encore une chose qu'on doit faire ici. Nous avons cette fonction à navbar. Nous devons mettre cela dans un fichier différent, sinon, notre fichier app.js va devenir incroyablement difficile à traiter. Alors allons de l'avant et faites un clic droit sur SRC New File. Et je vais créer un nouveau dossier ici appelé composants. Et cela va s'appeler navbar ab.js. Et ce que je vais faire ici, c'est que je vais littéralement couper ce code. Laissez-moi aller à la barre de navigation point js et collez-le là-dedans. Et je vous ai dit que j'allais vous montrer qu'il y a un moyen fonctionnel, comme un moyen d'écrire un composant en utilisant la fonction de mot-clé. Et il y a aussi un moyen d'utiliser const. Donc, quand j'exporte cela éventuellement sur la route, je vais utiliser const. Et donc ce que je veux dire, c'est que la barre de navigation const est égale à une fonction de flèche sans paramètres encore dedans. C' est là que nous allons mettre nos invites. On en parlera sur la route. Mais fondamentalement, c'est une fonction anonyme, fonction flèche anonyme entrant dans un concept appelé navbar. Et en bas, je vais dire exporter la barre de navigation par défaut. Maintenant, cela ne va en fait rien faire sauf supprimer notre barre de navigation de notre app.js et il ne parvient même pas à compiler parce que navbar n'est pas défini. Donc, ce que nous devons faire maintenant est d'importer navbar from.com. signifie que ce dossier particulier, puis le dossier des composants. Donc, la barre oblique de point va être ce dossier particulier, puis le dossier des composants, puis la barre de navigation. Nous n'avons pas besoin de prendre navbar ab.js car il va supposer que ab.js était la seule fois que nous avons besoin d'écrire notre extension est si cela va être layout.css ou quelque chose, mais React et fondamentalement pack web en général est va supposer que lorsque vous importez quelque chose, vous importez un autre fichier JavaScript. Alors allons-y et sauvegardons ça. Et si cela fonctionne correctement, nous devrions voir que rien n'a changé ici. Ça veut dire que ça marche pour nous. Maintenant, à tout moment, React est vraiment bon de cette façon. À tout moment, si vous avez un problème, vous pouvez toujours regarder votre terminal. Ça vous dira exactement quel est le problème. Si vous avez besoin de plus de détails, vous pouvez toujours ouvrir votre navigateur et il vous dira exactement la même chose. Donc, dans ce cas, la barre de navigation n'est pas définie. Cela veut dire, hey, essayer d'utiliser navbar, mais il n'a pas été défini parce qu'il a été commenté. Maintenant, je l'ai importé. J' ai accès à cela en tant que composant. Ça va marcher pour moi. Il va compiler avec succès. Dans notre prochaine leçon, allons de l'avant et créons un nouveau composant pour notre page d'accueil. Donc ça va être notre page d'accueil ici. Nous allons avoir plus de détails à l'intérieur de notre page d'accueil. Alors, dans la leçon suivante, allons-y et faisons-le. 6. Ajouter un composant de maison: Bon, allons de l'avant et créons un composant de page d'accueil fonctionnel. Alors faisons la console. Je vais utiliser constante cette fois. Je vais appeler cette page d'accueil, vue de la maison maintenant appeler la maison est égale à la flèche de parenthèses. Il s'agit donc d'une fonction de flèche. Et je peux retourner tout ce que je veux ici. Et donc je vais dire revenir avec un div. Et en fait, une petite chose cool que vous pouvez faire est que vous n'avez pas besoin d'écrire div, vous avez juste besoin d'ouvrir, de fermer JS Acts là-dedans. Et vous pouvez écrire bonjour monde de React 201. Et remarquez que celui-ci dit bonjour du réacteur 1. Celui-ci dit bonjour mondes. Allons-y et débarrassons-nous de ça. Et parce que nous avons cette constante ici, c'est une fonction de flèche et une fonction de flèche anonyme appelée maison. Nous pouvons maintenant évaluer la maison comme un composant. Allez-y et sauvegardez ça. Et nous allons rafraîchir notre page et dit bonjour monde de réagir à un. Ou si je le voulais, je pourrais faire yada, yada, yada, et il sera automatiquement mis à jour pour moi aussi dans ma page. Maintenant, c'est cool et tout, pas super, super utile. Mais ce qu'il a fait, c'est qu'il a sorti le code de l'application et le mettre dans un composant de sorte que dans notre application, vous pouvez juste faire semblant que c'est tout notre code d'application ici. C' est gentil et propre. Donc, nous savons que nous avons une barre de navigation, nous avons un des composants de la maison. Et si nous le voulions, si nous voulions simplement changer les composants à la maison, ce que nous pourrions faire est d'ouvrir home.html ou nav bar dot js et de les éditer séparément. Donc, il est de garder nos composants séparés est, eh bien, c' est l'idée de toute façon, que nous pouvons garder nos composants séparés et c'est pourquoi nous les appelons composants. Donc ce que je vais faire ici, c'est que je vais prendre cette coupe que je vais dire importer à la maison des composants slash point slash slash slash maison. Maintenant, cela ne va pas compiler pour moi. Ce que je vais devoir faire est de créer un nouveau fichier ici appelé home.html. Et ça vit juste dans mes composants. Vous pouvez voir que ici les composants. C' est aussi dans mes composants. Et ce que je vais faire, c'est que je vais dire coller ceci et ensuite exporter par défaut cette maison const. Et maintenant, vous pouvez voir que cela fonctionne. Et donc si je rafraîchis la page, il y a peu d'erreur là-bas dans la console, mais si je rafraîchis la page, il n'y a plus d'erreur. Et si jamais je voulais changer ma page d'accueil, je peux dire que c'est un changement dans un fichier différent. Et ce qui est bien à ce sujet, c'est que ma page d'accueil est maintenant autonome. Je n'ai pas besoin d'écrire toute cette logique dans mon application parce que tout va être votre application. Et si tu as fait ça, ce dossier peut devenir vraiment, vraiment long. On parle de milliers et de milliers de lignes de code. Et c'est vraiment, vraiment difficile de travailler avec. C' est beaucoup plus facile. Vous pouvez juste dire, hé, écoutez, il y a une application, il y a une barre de navigation, il y a une maison. Cliquez avec le bouton droit de la souris sur la barre de navigation, définition go-to. Il l'ouvre pour moi dans le code VS. Tous les navigateurs ne le feront pas, mais le code VS est vraiment, vraiment intelligent quand il s'agit de JavaScript. Donc, ce que je voudrais que vous fassiez pour votre tâche ici, c'est que je veux que vous soyez sûr que vous avez le composant Navbar et un composant maison. Assurez-vous qu'ils sont dans des fichiers distincts. Importez-les et utilisez-les. Ils n'ont pas à être complexes. Le n'a pas besoin d'avoir beaucoup de texte et ici, en fait, cela n'a même pas de très bon texte dedans. Ceci est tout simplement dit bonjour monde de réagit à un. Allez-y et assurez-vous que cela fonctionne afin que nous puissions écrire notre code dans d'autres fichiers. Et ça va juste garder notre code va aussi garder sa santé mentale en ligne pour aller de l'avant. 7. Ajouter un composant à propos de la composante: Ok, allons de l'avant et créons une nouvelle vue de page. Donc en ce moment, la seule page vue que nous avons et ce que j'appelle une vue. Et ce que j'appelle une vue, c'est ça, tout ce truc ici. Donc, c'est comme la vue de la page d'accueil. Et s'il y avait comme une page à propos, ce serait une vue À propos ou s'il y avait une page de recherche dédiée, je serais une revue de surtension. Et nous utilisons beaucoup ce terme dans les langages de rendu de modèles et les frameworks tels que Django. C' est donc une vue et nous devons créer une page à propos. Donc nous n'avons pas de page d'accueil, nous avons maintenant besoin d'une page A propos. Donc, nous allons faire const à propos de Vw est égal à une fonction de flèche et retour, cela va faire est retourné et H2. Ça dit A propos de nous. Maintenant, c'est cool. Vous pouvez réellement voir qu'à propos de v a été assigné mais il n'est jamais utilisé. Ce que nous pouvons faire, c'est que nous pouvons jeter ça ici et nous pouvons dire à propos de la vue. J' aurais probablement dû appeler cette page d'accueil, la vue de la maison. Mais en allant de l'avant, gardons juste cette vue nommée. Donc, nous avons cela sur le carburant et vous pouvez voir qu'il, il compile avec succès. Mais le problème est que nous avons maintenant une vue sur la page d'accueil. Oups, et nous avons maintenant une vue sur la page d'accueil. Et nous n'avons pas eu de vue sur le bateau et nous voulons qu'ils soient sur des pages séparées. Donc ce que je veux que vous fassiez, c'est que je veux que vous écriviez dans une vue de bateau et ensuite je veux que vous déplaciez ça dans sa propre composante. Et puis une fois que vous avez fait cela, passons à la leçon suivante où nous apprenons ce que nous commençons à apprendre sur le routeur React DOM, c'est un paquet différent. Nous allons installer un nouveau paquet dans la prochaine leçon. Assurez-vous donc de diviser ceci en un nouveau composant. C' est votre tâche pour cette leçon. Quand tu auras fini ça, je te verrai dans la prochaine vidéo. 8. Installer un routeur de React: Ok, eh bien, nous devons faire maintenant c'est qu'il faut commencer à travailler avec ce truc appelé un rotor. Et le rotor est fondamentalement comment nous acheminons à partir de différentes pages. Est-ce la route ou est-ce la racine ? Je dis route. Donc, si vous cliquez sur la page d'accueil où si vous cliquez sur la longueur, faites semblant que c'est comme la page À propos. Il ne devrait montrer qu'à propos de nous. Et si vous cliquez sur accueil, ils ne devraient afficher que le titre de la page d'accueil. Et l'URL devrait même changer. Donc, il devrait être comme slash serait juste votre maison est slash sur va être la page A propos. Actuellement, il rend juste tout ensemble. Donc, dans les prochaines vidéos, nous allons nous habituer à travailler avec réagir, routeur DOM. Et donc ce que nous devons faire ici, c'est entrer dans le terminal. Nous allons juste annuler le contrôle C pour annuler là. Je vais faire noeud v. Ça va juste vous montrer que j'utilise une mauvaise version de Node. Étonnamment, comme je vais changer ce nœud, utilisez 15, c'est ma nouvelle version. Et ce que je vais faire est npm installer React, routeur, tableau de bord, DOM. Et ça va se déclencher et installer fondamentalement un autre outil utile dans le monde de React appelé un rotor. Donc, si nous regardons notre package.json et nous allons ici, faire, faire, faire, faire. Nous allons voir des dépendances. Nous avons réagi, réagi, Dom, réacteur , routeur, DOM, donc nous avons ça maintenant. Et c'est juste la preuve qu'il a été installé correctement. Donc, ce que je veux que vous fassiez pour cette vidéo particulière est simplement exécuter NPM installer, React, routeur, DOM. C' est tout ce que vous devez faire une fois que vous avez cela en cours d'exécution ou je suppose que vous ne fonctionnez pas, mais une fois que vous avez installé cela, passons à la leçon suivante où nous avons configuré notre routeur de navigateur. 9. Utiliser le composant Router du navigateur: D' accord, jetons un coup d'oeil à l'activation de notre routeur. Donc, le routeur, juste parce que nous l'avons installé avec npm install React routeur dump ne fonctionne pas automatiquement. Nous devons dire qu'il doit être utilisé. Et donc ce que nous voulons faire ici est d'aller dans index.js et nous voulons taper import, et nous allons structurer ceci ou déconstruire ceci. On va chercher le routeur du navigateur de React Router, dash.com. Et vous pouvez voir que c'est une sorte de faible parce qu'il n'est pas réellement utilisé en ce moment. Dans notre mode Strict, ce que je vais faire, c'est que je vais créer un nouvel élément ici. Et il va déplacer cette application à l'intérieur de celui-ci. Et donc j'ai réagi en mode strict, cool. Ensuite, j'ai le rotor du navigateur, et puis j'ai mon application à l'intérieur de cela. C' est ce sur quoi nous avons travaillé dans les dernières vidéos, c'est notre application réelle. Vous pouvez voir ce qui vient de l'application dot. Point, point-point, ab.js. Ça vient d'ici. Et puis j'ai dit fermer le routeur au cas où nous ne voulions plus utiliser un routeur. Fermer le mode strict. Maintenant, cela dit juste que notre application va être à l'intérieur d'un routeur. Tout ce que ça fait. Alors allons-y et sauvegardons ça. Revenons à notre app.js. Et ici, nous devons faire ce qu'on appelle un interrupteur, et ensuite nous changeons les racines. Et donc si vous avez écrit une instruction JavaScript switch, cela ressemble à ceci. Commutez, votre affaire. Et puis ça va dire que votre affaire va être quelque chose, faire quelque chose, briser. Cas, par défaut. Fais quelque chose casser. Et c'est donc une déclaration switch. C' est, c'est fondamentalement un si très rapide, sinon si instruction utilisant juste un type différent de syntaxe en JavaScript, beaucoup de langues différentes ont une instruction switch et JavaScript est l'un d'entre eux. Et donc ce que nous voulons faire maintenant, c'est que nous voulons écrire notre déclaration de switch ici. Donc j'ai cette div et ce que je vais faire, c'est que je vais écrire un commutateur et que ce commutateur créé automatiquement. Allons de l'avant et remontons ça. Et puis je peux écrire routeur. Le chemin est égal à barre oblique exacte. Et ici, je peux dire qu'il va y avoir une page d'accueil. Il y a une autre façon que nous puissions écrire ces deux et déplacer cette somme de cette barre de navigation en dehors du commutateur afin qu'elle soit toujours globale. Et il y a une autre façon d'écrire ça. On peut dire que le chemin du rotor coupe un bateau. Et puis nous pouvons passer dans le composant. Nous pouvons dire que ce composant va être la vue About. Et c'est une étiquette auto-fermante cette fois, continuons et sauvegardons ceci et voyons s'il y a des problèmes. Début Npm. Et nous avons, oui, ça a du sens. Commutateur et routeur ou non défini, c'est parce que je ne l'ai pas importé, bien sûr. Donc ce que je veux faire ici, n' est pas un routeur non plus. Ce que je fais ici, c'est la route. Et ce que je veux faire est d'importer, changer et aussi d'acheminer de React, routeur, stupide. Allons de l'avant et sauvegardons cela compilé avec succès. Allons de l'avant et voyons si cela fonctionne réellement. Donc, si nous allons au port localhost 3 mille, nous pouvons voir que dit bonjour monde de réagir à un. Si je vais à barre oblique sur, il affiche la page À propos. Dans la leçon suivante, allons de l'avant et ajoutons des liens ici pour que nous puissions créer des liens vers et depuis les pages. C' est un peu différent d'un lien régulier parce que vous remarquerez que si je fais ça, c'est une sorte de clignote rapidement. Donc, si je viens de taper un bateau, vous voyez une autre page sorte de flashs, prend un rapide 15 ou 20 millisecondes à charger. Ce n'est pas instantané. Nous pouvons réellement faire cela à complètement instantané lorsque vous cliquez sur un lien. Et cela va faire de notre application une application d'une seule page. Nous sommes appelés une application web progressive. Nous allons le faire dans la prochaine leçon. Pour l'instant, ce que je veux que vous fassiez, c'est que vous assurez que vous avez changé de configuration. À l'intérieur de votre interrupteur, vous avez des itinéraires différents. Vous devriez avoir un itinéraire pour votre page d'accueil, un autre écrit pour vous sur la vue. Et il y a deux façons différentes de le faire. Ils sont exactement les mêmes, ça fait exactement la même chose. Une chose à laquelle vous allez faire attention, c'est que c'est votre page d'accueil, donc juste slash va être votre page d'accueil. Et il est dit exigeant ici, c'est la seule voie qui va prendre exactement. Et cela vient à dire, si ce chemin est exactement le suivant, alors il va rendre notre page d'accueil. Si le chemin est une barre oblique à propos de pas exact. C' est la pêche à la ligne V. Voici ce cas particulier. Si c'est exactement cela, alors rendre la page d'accueil. Sinon, ce chemin est barre oblique sur le composant est sur la vue et nous savons sur le, sur le carburant, nous savons sur le composant de la maison. Nous avons déjà construit ça. Nous avons, nous avons importé ces, nous les avons déjà dans différents fichiers de composants. Et donc, ce n'est que deux façons différentes de faire exactement la même chose. Quelle que soit la façon dont tu veux écrire, c'est tout à fait d'accord avec moi. Je voulais juste te montrer qu'il y a ce chemin et qu'il y a là. 10. Réagir sur des liens basés sur les React: D' accord, ce que nous avons est si je viens d' ouvrir Google Chrome et nous avons cette barre de navigation et actuellement les liens ne vont nulle part. Allons de l'avant et assurez-vous que ces liens vont quelque part afin que nous puissions basculer entre la page about et la page d'accueil. Et pour cela, nous devons ouvrir navbar ab.js. Et donc nous avons ce navigateur de film, et ce n'est que notre titre. C' est juste ici. Et il dit que ça va aller quelque part. Donc, au lieu de dire un, ce que nous allons dire, c'est que nous allons prendre tout ça. On va utiliser un lien. Nous ne l'avons pas encore importé, donc ça va être un peu un problème, mais nous y arriverons dans une seconde. Je vais saisir toutes les balises de lien de fermeture, les balises d'ancrage et faire le lien slash à la place. Et tous les FRH. Href le sera aussi. Maintenant que le navigateur de film va aller à la maison slash va également aller à barre oblique. Et ça ne va pas sauver. Vous pouvez voir que cela va réellement échouer parce que le lien n'est pas défini. Allons de l'avant et importer le lien. Donc, importer le lien de React, routeur, dash.com. Et on y va. Ok, alors allons-y et changeons ça de leur lien. Celui qui a juste Lincoln habituel là-bas et ouais, appelons ça à propos de pas à propos de nous. Et cela va aller à slash sur et n'ont pas été obtenaient barre oblique à partir de est juste ici, il correspond à ce chemin particulier. Donc barre oblique sur désactivé. Allons de l'avant et faisons celle-là, disons venir bientôt. Celle-là à faire n'a pas d'importance. Ce lien est désactivé de toute façon, donc il peut aller à peu près n'importe où. Et je pense que c'est tout ce qu'on a ici. Et revenons à notre navigateur, rafraîchir. Et nous avons une page à propos. Et quand je clique sur ceux-ci, vous pouvez voir que c'est instantané. C' est super, super rapide. Et la bonne chose à ce sujet est qu'il ne recharge pas tout mon JavaScript ne recharge pas tout mon CSS. Il est déjà chargé à la fois. Et donc quand je, quand je clique sur l'un de ces, tout ce qu'il a un switch out le contenu pour moi. Et donc comment nous faisons cela est que nous écrivons lien, qui est importé à partir d'un routeur React DOM. Donc, nous avons le nom de classe de lien comme un élément HTML régulier. Plus d'éléments HTML attributs à la place de HREF, nous écrivons 2x est égal à, puis nous mettons dans un lien qui existe réellement. Donc, barre oblique va à la page d'accueil, barre oblique À propos, va à notre vue À propos. Ensuite, nous disons lien barre oblique. Donc, cela fonctionne beaucoup comme la balise d'ancrage irrégulière en HTML. Celui-ci dit simplement que hey, parce que vous utilisez un routeur, vous pouvez échanger ce contenu instantanément. Vous n'avez pas à vous soucier de recharger la page ou quoi que ce soit. Il sait juste déjà qu'il existe. Et donc cela va être vraiment, vraiment rapide quand les gens finissent par charger votre page. Tu sais, une fois que tu auras ta page sur un serveur en direct, quelqu'un va la charger et ça va être instantané. Alors allez-y et changez ces balises à une balise de lien. N' oubliez pas de changer votre attribut HREF 2A, deux. Et quand vous avez fait ça, passons à la leçon suivante où peut-être nous ajoutons un nouveau composant appelé, ouais, ce n'est pas un nouveau composant appelé Hero. Et nous allons juste ajouter un joli petit titre à chacune de nos pages. 11. Le composant du héros: Ok, ajoutons un nouveau composant appelé héros. Alors ouvrons ce fichier home.html et créons un nouveau composant. Donc constant, appelons-le Hero est égal à une fonction de flèche vide et il va simplement retourner un Bootstrap. Donc on peut dire l'en-tête. Et ça va être une section de héros. Je vais te montrer ce que c'est dans une seconde. Le nom de la classe va être VG sombre. Je ne me souviens pas si c'est Bootstrap ou le vent arrière. Je pense que c'est Bootstrap. Donc BG, texte noir blanc. Faisons le rembourrage cinq tout le chemin. Et disons-en un. C' est un élément de héros. Maintenant, ça ne va rien faire. Vous pouvez voir ici qu'il a été en fait barré et nous recevons un avertissement qui est assigné, mais il n'est jamais utilisé dans notre maison. Ce que nous pouvons faire, c'est que nous pouvons maintenant dire héros comme composant. Et cela semble rendre parfaitement bien. Maintenant, quand nous revenons à notre page, Eh bien, je suis actuellement sur la page à propos, mais quand je vais à la page d'accueil, Ceci est un composant de héros. Maintenant, nous n'avions pas cela jusqu'à ce point. Et ce que nous pouvons faire, c'est que si nous ne le voulions pas sur la page à propos, nous pouvons simplement le laisser hors de la vue à propos. Mais ce que nous pouvons faire est de dire, hé, j'ai aimé ce composant et je veux aussi qu'il soit sur la page à propos. Alors allons de l'avant et divisons ceci en ses propres composants appelés Hero. Et ce que je vais faire est de créer un nouveau fichier appelé Hero ab.js et de le coller là dedans. Et je vais écrire l'export par défaut, puis le nom de ce héros const. Et quand j'ai ouvert home.html s, Il va essayer d'accéder au héros, mais ce n'est pas défini. Vous pouvez voir qu'il est écrit ça ici. Donc, ce que je veux faire maintenant est d'importer héros à partir de composants non slash ou composants slash point parce que nous sommes déjà dans le dossier components. Donc, nous voulons dire dans ce dossier, Donc point slash héros. Et ça marche pour nous. Maintenant, si les choses marchaient, nous ne devrions pas voir de changement. C' est parfait. Lorsque vous ne voyez pas de modifications pendant que vous déplacez du code, pendant que vous refactorisez, c'est exactement ce que vous voulez. Alors allons de l'avant et bougeons ce héros et ne pas bouger, mais ajoutons ce héros. Je vais copier la ligne 1 et la ligne 7. Et je vais voir mon point de vue. Je vais coller ça ici aussi. Et nous devons faire un peu de travail ici. Donc, à mon avis, je vais importer un héros aussi. C' est donc un composant utilisé dans deux fichiers différents. Et je veux retourner JS X. Je veux déplacer ce héros vers le haut. Je veux faire avancer le sujet. Débarrassons-nous de ça. Et tout a l'air bien. Maintenant, quand je reviendrai ici, nous avons cette composante héros sur les deux pages. Maintenant, dans la leçon suivante, ce que je vais vous montrer, c'est comment nous pouvons changer cela en fonction de la page pour que nous puissions faire cette dynamique parce que c'est un élément de héros. Cela pourrait dire bienvenue au navigateur de film, mais si elle dit Bienvenue à parcourir le film sur chaque page qui va devenir un peu vieux. Personne ne veut voir l'ancien contenu sur chaque page. Donc, nous voulons dire, voir que cela dit sur nous ou pourquoi nous existons ou quelque chose. Et la page d'accueil va dire, bienvenue pour réagir à un ou quelque chose dans ce sens. Mais pour l'instant, ce que je veux que vous fassiez, c'est que vous créiez un nouveau composant de héros. Et puis je veux que vous l'importiez dans votre page d'accueil et l'importiez également dans votre vue sur. Assurez-vous de l'utiliser dans les deux endroits. Il peut être codé en dur et devrait être codé en dur à ce stade. Et tout comme c'est un élément de héros dans la prochaine leçon, quand vous aurez fait ça, nous allons parler de passer des accessoires. 12. Accessoires de composant: Bon, jetons un coup d'oeil à la transmission d'une invite de texte aux composants du héros. Donc, sur notre page d'accueil, nous avons ce composant de héros et il rend un en-tête. Avec ceci est un héros composants. Et nous voulons que ce soit différent car actuellement sur la vue A propos, nous avons la même chose. Nous importons ce composant de héros. Mais si je fais un clic droit et passe à la définition, ça dit exactement la même chose et ce n'est pas une façon de vivre ta vie. Ce que vous voulez faire, c'est que vous voulez pouvoir passer quelque chose d'un peu plus flexible. Et donc ce qu'on va faire, c'est d'abord aller notre page d'accueil et on va ajouter notre première invite. Et ça va être appelé texte. Et ce texte sera le bienvenu pour réagir 201. Et en fait, parce que c'est juste une chaîne régulière, je n'ai pas besoin de cette accolade bouclée là-dedans. Nous avons donc cette propriété de texte ou un attribut en HTML, mais dans React, nous l'appelons un prop. Et parce que c'est appelé des textes, mais nous pouvons le faire maintenant dans notre héros, nous pouvons utiliser des accolades, taper du texte, et ensuite nous pouvons mettre le texte à l'intérieur de notre composant, comme ce texte. Et il dit bienvenue de réagir à un. La page À propos n'a rien d'autre que la page d'accueil indique Bienvenue pour réagir à un 1s. C' est donc, ça devient un peu plus dynamique à ce stade. Maintenant, ce que nous voulons faire pour notre vue de résidence, c'est que nous utilisons aussi le composant héros ici. Donc, disons que le texte sera sur nous. Et encore une fois, ce que ça va faire est de dire, hey, rendre ce composant de héros avec une propriété de texte. Dans nos composants de héros, nous avons Collins héros est égal à. Et puis nous faisons quelques restructurations ici. Donc, cette première variable détruite va être du texte, et cela correspond au nom de la propriété ici. Et puis nous pouvons l'utiliser dans notre déclaration de retour. Et donc, quand nous allons sur notre page d'accueil maintenant, il dit à propos de nous et c'est parfait, que le contenu est changé dynamiquement. Ce qui est bien, c'est qu'on a maintenant un héros. Nous pouvons nous débarrasser de celui-ci, ce H2, et sur notre page d'accueil nous pouvons nous débarrasser de ce H1. Et nous avons cette page qui se réunit, ces deux pages se rassemblent. Donc je veux que vous soyez sûr que vous avez un héros, pas les devoirs, mais hé, composante héros, qui prend une propriété. Passe cet accessoire. Utilisez le texte que vous voulez transmettre, mais transmettez cet accessoire dans votre composant de héros, puis rendez cet accessoire dans votre déclaration de retour. Allez-y et essayez ça. Et quand vous avez terminé, passons à la leçon suivante, où nous ajoutons simplement du contenu de base à notre page d'accueil et à notre page sur. 13. Ajouter le contenu générique: Ok, ajoutons un peu de contenu à notre page d'accueil et à notre page d'accueil. Donc, ce n'est en fait pas super réactif, mais c'est un peu important pour construire une page. Et donc nous utilisons bootstrap et je suis dans mon fichier home dot js ici. Et ce que je peux faire est de type div nom de classe est égal à conteneur. Le nom de classe Div est égal à rho d de ClassName. Et cela ressemble beaucoup au HTML régulier, juste en écrivant bootstrap cinq, class_name va être charbon, LG huit offset LG aussi. Et ça va juste centrer mes huit colonnes sur 12 que je vais mettre en place. Et allons de l'avant et écrire lorem ipsum ici. Et gardons ça. Retournez à notre page d'accueil. On peut voir qu'on a du lorem ipsum ici. Maintenant, nous devons ajouter une marge ici en haut et en bas de la marge. Donc marge y de cinq. On y va. Ça a l'air un peu mieux. Et ce que nous pouvons faire ici, c'est parce que c'est censé être un paragraphe. Quoi qu'il en soit, ce que nous allons faire est de dire que ce paragraphe nom_classe va être dirigé. Et ça va juste rendre ce texte un peu plus grand. Et c'est encore une fois juste Bootstrap régulier. Et donc vous pouvez voir le texte aller un peu plus grand. Allons-y et fermons ça. Et sur notre page à propos, allons de l'avant et faisons exactement la même chose et vous pouvez écrire tout ce que vous voulez ici. Je vais juste garder ça comme un texte factice. Et quand j'arriverai à la fin, avant de vous donner tout le code source, je vais changer ce que ce texte est sur la page d'accueil. Je ne voulais pas que tu me regardes écrire ça parce que c'est ennuyeux et aucune façon de vivre ta vie. Et donc je vais simplement coller ça ici. Et ce formatage est devenu drôle. Donc ce que je vais faire, c'est d'abord, j'ai une extension appelée plus jolie installée. Donc PRE TTIP, ER, C'est celui-ci et c'est un simple formateur de code. Et donc une fois que vous avez installé cela, vous pouvez appuyer sur Command Shift P, contrôler le shift B sur Windows, tous les shift P. De toute façon, vous allez vouloir ce petit gars ouvert. Donc, si vous appuyez comme ALT P, vous pouvez simplement appuyer sur le signe supérieur à, puis tapez document format. Et cela pourrait vous demander de configurer en utilisant plus joli, auquel cas vous irez, vous devrez sélectionner plus joli, ce qui est totalement bien, et il formera votre code pour vous. Alors peut-être que je vais le faire sur quelques autres fichiers ici pour le faire sur le document Home Format. Faisons cela au format App. Le document, non, rien n'a changé. Parfait. On fait du bien là-bas. Index.js, nous pouvons fermer, nous ne toucherons plus jamais ça. Et c'est à propos de ça. Et donc cela a juste formaté mon code pour moi gentiment. Et maintenant, quand je vais à la maison, nous avons un contenu différent et oui, assurons que nous avons différents lorem ici aussi, Lorem 25. Juste pour que nous puissions voir que cela est en fait en train de changer et que c'était exactement le même texte. Voyons Lorem 50. J'ai juste un raccourci sur mon ordinateur pour Lauren 25 et Lauren 50. On y va. Ça a l'air différent. Donc maintenant, nous avons une page d'accueil et sur la page en utilisant une application d'une seule page. Maintenant, notre site React utilise ceci et ce qui est bien à ce sujet. Si quelqu'un vient sur votre site, allez directement à la barre oblique d'un bateau et il va afficher la page À propos pour nous. On n'a rien à faire de magie. C' est juste comme par magie pour nous, ce qui est génial. Dans notre prochaine leçon. Une fois que vous avez fini de travailler sur cela et de le faire ressembler comme vous le souhaitez. Vous pouvez ajouter des images et tout ce que vous voulez ici. Quand tu seras prêt. Passons à la prochaine leçon où nous créons une nouvelle vue de fin d'itinéraire de recherche, parce que pour le moment notre recherche ne fait rien. Cela ne fonctionne pas. Et nous voulons que ça commence à fonctionner. Donc, dans les prochaines vidéos, nous allons travailler avec la recherche. 14. Ajouter un composant de recherche: Ok, allons de l'avant et créons un itinéraire de recherche et une vue. Et donc ce que je vais faire ici est avant tout ce que je vais juste dire importer la vue de recherche à partir des composants slash point vue de recherche slash. Et maintenant cela n'existe pas. Et ça va se plaindre de moi dans une seconde et je vais créer une nouvelle route ici. Et cette route va avoir un chemin de recherche de slash et c'est tout ce qu'elle va faire. Et ici, je peux dire la vue de recherche et je ne veux pas que ça se ferme, je veux que ça se ferme automatiquement. Maintenant, cela ne va pas compiler. Cela va évidemment dire que les frais de recherche de composants n'existent pas, ne peuvent pas le résoudre. Allons de l'avant et faisons en sorte qu'il existe. Alors attrapons notre maison. Et je vais juste réenregistrer ceci en tant que point de vue de recherche js. Et nous devons changer cela pour rechercher la vue. Et ouais, gardons notre héros comme il est. Parce que j'aime un peu ça. Et continuons à dire quelque chose comme vous cherchez. Et puis des trucs là-dedans. On va le laisser tel quel pour l'instant. Assurez-vous que nous exportons cela. Ok, maintenant ça marche. Maintenant, nous pouvons aller dans la recherche de slash. Et ça dit que tu cherches. Nous avons donc créé une vue de recherche très, très rapidement. Et nous avons créé une nouvelle route. Et juste en quelque sorte sur cette route, j'ai utilisé cette version de la même façon que nous utilisons la page d'accueil juste pour vous montrer que vous pouvez faire cela de deux façons différentes. J' aurais pu aussi facilement l'écrire de cette façon. J' ai choisi de l'écrire de cette façon. Donc peut-être que la prochaine que vous finissez par écrire est, ou la suivante nous finissons par écrire parce que nous allons en écrire une de plus. Nous allons, nous allons utiliser cette façon juste pour vous montrer et pour démontrer que vous pouvez utiliser l'un ou l'autre de façon interchangeable. 15. Recherche de accessoires de composants de recherche: Ok, parlons d'utiliser l'état ainsi que passer l'état par des invites à huit, un autre composant. Ça peut sembler un peu effrayant, un peu accablant, mais non, nous allons juste faire un pas à la fois, comme nous le faisons toujours. Donc, dans notre application ici, ce que nous pouvons dire est cette chose magique appelée cont. Nous allons à la structure D et le tableau. Donc, nous allons appeler ce résultat de recherche des résultats de recherche de jeu de virgules. Et cela va utiliser l'état, pas la statue, mais l'état. Et ça va prendre, je pense que ça va être un objet. Aucun résultat de recherche, nous avons besoin de quelque chose à parcourir plus tard en utilisant la fonction de carte. Donc, nous allons définir un tableau comme le tableau par défaut. Maintenant, vous dites n'est pas important, nous devons importer ceci. Alors allons-y de Import. Utilisez aussi apatride, vous obtenez un effet US pendant que nous sommes ici, nous allons l'utiliser un peu plus tard. Et on va importer ça de React. Et donc quand nous compilons, au moins cela signifie qu'il n'est pas utilisé, mais au moins il ne se plaint pas que ce soit indéfini. Maintenant, nous allons devoir définir une chose de plus dans votre texte de recherche const. C' est ce que nous allons montrer dans notre page et définir le texte de recherche. Je vais vous montrer comment fonctionne l'accessoire dans une seconde. Donc, utilisez l'état et la valeur par défaut va être une chaîne vide. Bon, donc je vais vous montrer comment ça marche, mais nous devons d'abord avoir l'installation. Alors allons de l'avant et prenons la configuration. En fait, nommez. Je vais y retourner. Donc, chaque fois que vous utilisez définir les résultats de recherche sont définis texte de recherche ou tout ce que vous appelez ceci. Ce sera votre variable à laquelle vous pouvez accéder. Ce sera la fonction que vous définissez ensuite cet état. Et donc, si vous êtes tout nouveau à State ou si vous êtes relativement nouveau à rester et que vous l'avez fait, vous avez joué avec un peu dans les composants basés sur les classes de Lake, comme dans la réaction one-to-one. Eh bien, nous utilisons pour réagir un à un et réagir un à un. Utilisez cet état de point. Bien que nous n'ayons pas cela dans les composants basés sur la fonction. Donc, nous utilisons un crochet appelé état américain. Et nous pouvons changer cela en disant définir le texte de recherche, nouveau texte. Et, et alors allons de l'avant et faisons cette console. Journal des points. Le texte de recherche est la valeur par défaut. J' ai une faute de frappe, mais c'est bon. Je vais supprimer ça dans une seconde. Et puis nous allons définir le délai d'attente. Et faisons de cela une fonction de flèche aussi. Et c'est le temps qui s'écoule de deux secondes. Nous allons dire définir le texte de recherche, nouveau texte. Et puis nous allons à console.log. Le texte de recherche est le nouveau texte. Et alors passons à notre navigateur de films et rafraîchissons notre page. Et je n'ai pas fait ça assez vite. Et vous pouvez voir que cela commence en fait à changer un peu. Maintenant, il y a un petit bug ici. Et ce que je vais faire, c'est que je vais me débarrasser de ça juste parce que et c'est vraiment important à savoir. On y va. Il y en a un et ne voulait pas que détruire mon navigateur soit chaque fois que vous appelez la fonction set, l' utilisation de l'état va relancer votre application entière. Donc, ce que cela faisait était que j'obtenais mon texte de recherche, ce qui n'était rien par défaut. Ensuite, après deux secondes, il définirait mon texte de recherche sur un nouveau texte. Mais parce que le texte de recherche défini a été utilisé dans l'état, il a re-rendu mon composant entier, qui se trouve juste être mon application entière. qui, à nouveau, il lit de haut en bas et dit, ok, nous allons chercher le texte va être rien en quelques secondes. Définissez-le pour être nouveau texte. Oh, regarde ça. D' accord. Le texte de la recherche a été modifié à nouveau, le rendu de l'application. Et ça va encore et encore et encore. Il y a un moyen de contourner que je vais vous montrer comment ça marche avec l'effet américain en bas de la route. Mais pour l'instant, allons de l'avant et passons certaines de ces choses dans notre vue de recherche. Et donc notre vue de recherche ici va être comme mot clé va être et c'est un texte de recherche prop. Et quand nous arrivons à des résultats de recherche, nous voulons aussi mettre cela dans notre recherche de vue. Donc nous allons dire que les résultats de recherche sont égaux à deux résultats de recherche. Et ce que cela va faire, c'est parce que nous avons une barre de navigation et ici nous avons aussi ces différents composants. Toutes ces informations, l'état va être stocké dans l'application globale. Et donc, disons notre barre de navigation et nous pourrions dire que définir les résultats de recherche va changer les résultats de recherche. Lorsque ces résultats de recherche changent, il va alors re-rendre cette vue ou toute cette application et cela va changer notre vue de recherche pour nous. Alors allons-y et sauvegardons ça. Et ouvrons notre vue de recherche. Donc, je fais un clic droit et accède à Définition. Et notre vue de recherche doit maintenant prendre en charge les accessoires et l'ESA, prendre les mots clés et les résultats de recherche. Donc, nous allons D structurer ces. Donc, nous disons mot clé et résultats de recherche, et je viens de copier et coller cela à partir de mon presse-papiers. J' ai un presse-papiers fantaisie pour que je puisse copier et coller plusieurs choses en même temps. Et puis ce que je veux faire, c'est que je veux changer ce mot-clé. Alors regardez ce mot-clé et il va juste changer un texte dans mon héros. Donc, si je passe à la recherche de barre oblique, il n'y a rien là-dedans par défaut. Mais si je change cela, car c'est la valeur par défaut. Recherche de dot-dot-dot, recherche de dot-dot-dot, 1-2-3, 1-2-3, 4-5-6, 4-5-6. Donc, cela va juste utiliser le texte de recherche normal là-dedans. Maintenant, je ne veux pas que ça dise ce que je cherche. Je veux que ça dise une phrase. Donc le titre const est égal à un littéral de modèle. Vous recherchez, puis mot clé. Et ce que nous pouvons faire est au lieu d'utiliser une chaîne ici, nous pouvons utiliser ce titre. Vous êtes à la recherche. Et puis vide. Il n'y a rien là-dedans. C'est bon. On va travailler avec ça. Maintenant, nous allons aussi continuer et consigner nos résultats de recherche sur la console. Console.log ou les résultats de recherche sont les résultats de la recherche. C' est tout ce qu'on va faire pour l'instant. Finalement, nous allons prendre les résultats de la recherche, qui va être une liste ou un tableau. Et nous allons parcourir chacun d'eux et mettre du texte dans notre page afin que nous puissions réellement parcourir les résultats de recherche en utilisant une API. Nous n'avons pas encore été aussi loin, nous avions juste besoin de passer ça à peu près en même temps. Donc, comme un petit résumé rapide, ce que nous avons fait ici, c'est que nous avons dit que le texte de recherche et le texte de recherche vont utiliser l'état. Définir le texte de recherche va changer recherché le texte de recherche. Et chaque fois que le texte de recherche est modifié, en utilisant cette fonction, il va re-rendre l'application entière, qui peut ou non être ce que nous voulons tout le temps. Et il y a donc un moyen de contourner cela en utilisant l'effet US. Ensuite, nous avons dit que le texte de recherche et les résultats de recherche, qui va être une chaîne et un tableau vont être des accessoires de la vue de recherche. Pour que nous puissions les passer dans la vue de recherche pour rendre la route. Ensuite, dans notre vue de recherche, nous avons dit qu'il y avait un mot-clé et des résultats de recherche. Ce mot-clé que nous mettons dans un littéral de modèle et un concept appelé titre. Et nous avons changé dynamiquement ce texte de héros. Et donc, quand nous modifions nos résultats de recherche, quand nous changeons ce mot-clé, va dire que vous cherchez Star Wars, vous cherchez Star Trek. Vous cherchiez des sbires ou n'importe quelle sorte de film que vous vouliez chercher. Ce sera beaucoup plus dynamique sur la route. Maintenant, allez-y et donnez un coup de feu. Cela peut être un peu déroutant, mais à ce stade, cela n'a pas vraiment besoin d'avoir trop de sens parce que nous sommes en quelque sorte au milieu de quelques caractéristiques majeures ici. Et c'est la façon dont cela fonctionne lorsque vous enseignez en ligne, c'est qu'il doit être divisé en plusieurs vidéos. Et donc nous sommes dans un petit état bizarre ici. Et si ça n'a pas de sens pour toi, si ce que j'ai fait dans cette vidéo n'a pas de sens pour toi, c'est bon. Du pouvoir à travers ça de toute façon, donne un coup de feu à ça. Vous pouvez toujours vérifier le code source aussi. 16. Lier des événements de keyup: D' accord, allons de l'avant et travaillons avec notre barre de recherche. Donc, dans notre barre de recherche, quand nous tapons des trucs, nous devions vraiment faire quelque chose. Et actuellement, il ne fait rien. Alors allons dans notre barre de navigation où se trouve notre recherche. Et ici, vous savez, nous allons formater ce document. Nous avons donc cette entrée et nous voulons définir une valeur ici. Donc, la valeur va être, disons test. C' est un test, mais vous pouvez voir que nous obtenons effectivement une erreur dans votre oreille disant ou un composant d'avertissement est en train de changer une entrée non contrôlée à contrôler. Cela est probablement causé par la valeur passant indéfinie à une valeur définie qu'elle était, c'était actuellement point d'interrogation et maintenant c'est test, ce qui ne devrait pas se produire. Choisissez entre l'utilisation d'une entrée contrôlée et non contrôlée pendant la durée de vie du composant. Il y a plus d'informations ici, vous pouvez toujours lire à ce sujet. Mais fondamentalement ce que cela dit, c' était une lecture seule et vous ne pouvez pas taper dedans et je ne sais pas si vous pouvez m'entendre claquer sur mon clavier ici, mais je tape, rien ne se passe, et c'est un problème. Alors, comment avons-nous contourné ça en réagissant ? Eh bien, tout d'abord, réagir dit toujours qu'un champ d'entrée est toujours lu uniquement si vous avez essayé de définir cette valeur. Eh bien, nous devons faire est que nous devons définir cette valeur pour être la valeur de recherche. Nous avons également besoin d'un gestionnaire d'événements onchange pour réellement gérer cela. Et nous allons dire mettre à jour le texte de recherche. Maintenant, cela n'a actuellement aucun sens. Mais si, si, si, si c'est proche, certains de ces non, trop. On y va. C' est juste de devenir gentil ici et je veux juste rendre ça un peu plus court pour qu'on puisse voir à peu près toutes les choses dans la même fenêtre ici. Nous pouvons dire const, si nous l'appelons mettre à jour le texte de recherche. Mettre à jour le texte de recherche est égal à un événement. C' est le premier paramètre. Et nous pouvons dire consoles dot log e dot cible valeur. Et c'est simplement dire que c'est activé, disons une entrée. Il va dire point E, fondamentalement valeur point d'entrée, quelle que soit cette valeur, ça va coûter beaucoup pour moi. Maintenant, ce n'est pas super utile car actuellement c'est codé en dur. La valeur indique « Pour être la valeur de recherche ». Et nous avons besoin que ce soit quelque chose d'un peu plus dynamique, comme le texte de recherche. Mais le texte de recherche n'est pas encore ajouté. Alors allons de l'avant et assurez-vous que nous l'avons ajouté ici dans notre barre de navigation afin que nous puissions dire texte de recherche et barre de navigation interne dans notre application, nous devons ajouter ce texte de recherche comme accessoire. Donc maintenant, nous pouvons dire que le texte de recherche est égal au texte de recherche. Et c'est le nom de la propriété. Il arrive juste d'être appelé la même chose que notre variable d'état ici. Alors allons de l'avant et essayons ça. Rafraîchissons. Et chaque fois que je tape, vous pouvez voir qu'il apparaît dans ma console, donc cela fonctionne maintenant. C' est génial. Mais nous avons besoin d'accéder à cela à partir d'un niveau supérieur. Et ce que je veux dire par là, c'est. Nous devons ensuite être en mesure de définir ce texte de recherche ici afin que nous puissions le transmettre à notre vue de recherche. Donc, dans notre barre de navigation, nous allons définir ce texte de recherche. Il va arriver à notre application, qui est là où cela est défini. Et puis il va revenir dans notre vue de recherche en tant que résultats de recherche. Nous devons donc définir les résultats de recherche. Et ce qu'on va faire, c'est passer comme accessoire. Donc, nous allons dire que définir les résultats de recherche est égal à définir les résultats de recherche. Et ce ne sera qu'une propriété, un accessoire. Et tout ce que nous allons faire ici, c'est mettre ceci dans notre barre de navigation, ce qui signifie que nous devons l'ajouter ici aussi. Rechercher du texte et définir les résultats de la recherche. Ne le fais pas, c'est autour d'un jeu de texte de recherche. C' est la bonne. Désolé pour ça. J'utilise la ronde. Et cela arrive de temps en temps. Nous devons donc définir ce texte de recherche. Maintenant, lorsque nous définissons ce texte de recherche, nous devons nous assurer que chaque fois que nous cliquons sur une clé que nous définissons ce texte de recherche. Donc en ce moment, nous sommes juste la journalisation de la console. Mais ce que nous pouvons faire est que nous pouvons dire définir cette valeur de point cible du texte de recherche E point cible. Maintenant, cela va définir ce texte de recherche, qui va également changer la valeur ici, qui est ce que React recherche. Il cherche un gestionnaire d'événements spécifique comme ça. Mais parce que le texte de recherche est également en train de changer et il va venir ici. Disons que ça a changé ici aussi. Ce mot clé va également changer. Si nous revenons dans notre vue de recherche, ce mot clé va entrer dans notre titre, qui va entrer dans notre héros. Donc, théoriquement, si je tape ici, si je tape là-bas grosse souris, ça devrait changer ici aussi. Voyons si j'ai cassé quelque chose ou si ça va marcher. C' est là. Star Wars. Ça change pour moi. Plutôt bien, non ? Donc ça marche. Et à ce stade, nous pouvons réellement commencer à travailler avec une API, qui est exactement ce que nous voulons commencer à faire. Nous voulons commencer à travailler avec une API parce que les API font tourner le monde. Tellement grande haleine. Je t'ai peut-être confondu avec celui-là. Je sais quand j'ai commencé à apprendre réagir si c'était vraiment déroutant pour moi. Donc, ce que j'aime faire est de penser à mon application est d'être, c'est vraiment grand seau. Disons que vous avez comme un seau géant et qu'à l'intérieur, vous avez ces petits contenants de crème glacée. Et donc, ce que nous disons ici, c'est notre seau géant, géant. Navbar est notre saveur de crème glacée. Accueil est une saveur de recherche de crème glacée vues de saveur de crème glacée. Et on doit sortir une pépite de chocolat de notre barre de navigation et la mettre dans notre champ de recherche. Et donc ce qu'on doit faire, c'est dire, Hey, quand tu mets ce texte de recherche, sortis-le de ce conteneur dans notre seau, et laisse-le flotter dans notre seau un peu. Et quand il trouve cette vue de recherche, mettez cette pépite de chocolat, mais cette petite pépite de chocolat dans le conteneur de crème glacée. Et donc l'idée est que nos données circulent de la barre de navigation jusqu'à notre application, puis redescendent dans notre vue de recherche. Et nous avons fait cette interface très chic avec un tas d'accessoires. Nous passons donc le texte de recherche afin que nous puissions toujours rendre le texte de recherche dans notre champ de saisie. Définir le texte de recherche est une fonction que nous avons passée en tant que texte de recherche ensemble. On l'a déconstruit. Non, c'est le mauvais. Nous l'avons déconstruit et définir le texte de recherche est ici. Et chaque fois que cette valeur change, il va exécuter la mise à jour du texte de recherche. Et puis il va définir ce texte de recherche, qui ensuite les bulles remontent à notre application. Et puis redescend dans notre vue de recherche, où nous avons notre mot clé et nous obtenons le mot clé de notre texte de recherche ici. Nous venons de le renommer comme une propriété, comme un problème. Nous avons ce mot-clé et finalement atterrir dans notre texte de héros. Allez-y et essayez ceci, n'oubliez pas, vous pouvez également référencer le code source à tout moment. Si vous êtes coincé, n'oubliez pas de poser des questions. Je suis là pour vous aider. Mais le plus important, vous savez, a essayé de s'amuser avec nous, même si ça casse. Chaque fois qu'il casse et vous donne une erreur, allez dans Google ce que cette erreur est, qu'il est un excellent moyen d'apprendre. Donc, chaque fois que vous voyez une erreur, il suffit d'aller et Google. Ou si cela vous donne un lien droit vers les Docs React, lisez les docks React, les React Dogs sont vraiment, vraiment bons. 17. Obtenir des touches API: D' accord, commençons avec des trucs d'API. Donc, d'abord et avant tout, nous allons utiliser la base de données des films. Donc tm DB. Et je ne me souviens pas de son .com ou .org. C' est le film db.org. Et donc tu vas vouloir t'inscrire pour un compte absolument gratuit. Tu n'as pas à payer pour quoi que ce soit. Moi, mais vous voulez vous inscrire pour un compte gratuit et ensuite vous allez vouloir aller dans vos réglages. Et dans vos paramètres, vous avez cette petite section API. Maintenant, j'ai déjà une clé d'API, vous allez donc devoir créer une nouvelle clé d'API. Et j'utilise la V3 off. Et donc c'est ma clé API. Et je peux en faire un nouveau ? Je ne pense pas pouvoir en faire un nouveau ici. C' est malheureux. Sinon, je vous montrerais exactement comment le faire. Mais ce que vous ne pouvez pas faire est juste d'aller de l'avant et de créer une nouvelle clé d'API et vous voulez copier ceci. Il suffit donc de cliquer avec le bouton droit de la souris et vous allez vouloir stocker cela quelque part parce que nous allons y référencer plusieurs fois. Et donc ce que je vais faire, c'est même juste dans mon code où je vais chercher. Ce que je vais faire est juste de mettre un commentaire dans l'année t clé API IMDB est égale à cela, juste pour que j'ai accès à cela plus tard. Maintenant, ce que vous pouvez faire est dit que les développeurs dot le film db.org. Il y a quelques choses qu'on peut faire ici. Et donc tout d'abord, allons de l'avant et cherchons des films. Et on peut essayer ça. Et ce que je vais faire est juste de gifler ma clé d'API et leur ID de film. Faisons 559, élève numéro 11. Et envoyons cette demande. Et oh, il dit que le service n'est pas disponible. Intéressant, intéressant. Je me demande si cela ne pourrait pas me causer des problèmes lors de l' enregistrement dans les prochaines minutes, j'espère que non. Mais ce que cela finirait par faire, c'est cracher un tas d'informations. Boat va être format JSON à propos de ce film particulier, quel que soit ce soit dans ce film. Il y a une autre API, point de terminaison API que nous allons utiliser appelé Search et pas seulement la recherche générale, mais nous voulons rechercher des films. On peut essayer ça aussi. Et laissez-moi mettre cette clé API là-dedans. C' est déjà dans leur requête Star Wars. Et essayons cette auto veggies ou aller à 503 sur moi aussi. Oui. Je ne sais pas si ce service est en panne ou quel est le problème. On pourrait l'examiner si on veut. Nous sommes des développeurs, nous pourrions comprendre pourquoi cela se passe, j'en suis sûr. Mais ne perdons pas notre temps là-dessus. Ce n'est pas notre service, ce n'est pas notre ferme. Ce ne sont pas nos animaux qui valent la peine d'être pris en charge. C' est le problème de quelqu'un d'autre. Mais ça ne nous donne pas un joli petit lien que nous pouvons utiliser ici. Et nous allons finir par vouloir copier ce lien. Donc j'ai juste copié tout ça. Et je vais stocker ça ici. Exemple de lien pour les recherches de films. Les recherches sont égales à, puis juste le lien dedans. Et vous remarquerez qu'il dit des requêtes égales à Star Space Wars là-dedans. Et c'est ce que nous allons ajouter. Et c'est ce que nous allons changer dynamiquement. Et notre clé API va être cette clé API. Vous pouvez voir qu'il sélectionne dans les deux endroits et inclure adulte. Pourtant, nous allons nous assurer que c'est faux pour que ce soit sûr pour le travail si vous regardez cela au travail. Et c'est à ce sujet. Donc, ce que j'ai besoin que vous fassiez pour cette leçon particulière, c'est aller au film db.org. Créez un nouveau compte si vous n'en avez pas déjà, accédez aux paramètres, accédez à l'API et obtenez une clé API. Donc ça devrait ressembler à ça. Ce ne sera pas exactement le même que le mien, mais ça devrait ressembler à la mienne. Donc un tas de lettres et un tas de chiffres. Donc, une fois que vous avez ce sentiment de liberté, passez à la leçon suivante. 18. Réagir aux demandes API basées sur le réagir.: D' accord, allons de l'avant et faisons une demande d'API. Chaque fois que vous tapez dans la barre de recherche. Donc, chaque fois que le texte de recherche change, nous allons faire une demande d'API. Et donc pour cela, nous allons utiliser l'effet US, qui vient de React. On n'a pas encore utilisé ça. Je me suis plaint qu'il n'a pas encore été utilisé. Allons-y et utilisons-le. Type, effet d'utilisation. Et c'est une fonction et il faut une fonction de flèche anonyme. Et en tant que deuxième paramètre, qu'est-ce qu'il va surveiller pour les changements ? Donc, il va surveiller le texte de recherche. Donc, nous définissons le texte de recherche ici. On le transmet à la barre de navigation. Cette barre de navigation va onchange, mettre à jour ce texte de recherche, qui va ensuite définir ce texte de recherche. Donc, définissez ce texte de recherche, définissez ce texte de recherche, qui va ensuite mettre à jour ce texte de recherche. Donc maintenant, nous pouvons dire console.log. Le texte de recherche est le texte de recherche. Et ça ne me dérange pas que j'ai une faute de frappe là-dedans. C'est bon. Et continuons juste et actualisons ceci et vous pouvez voir qu'il n'y a rien dans le texte de recherche. Mais si je tape Star Wars, vous pouvez voir Star Wars est le texte de recherche. Et ça commence à arriver. Et donc chaque fois que nous tapons un personnage, nous devons faire une sorte de requêtes d'API à TMD B. Et donc nous pouvons le faire avec fetch. Et où est ce lien ? Ce lien que nous voulions à partir de cette dernière leçon présentée ici, c'est celui que nous voulions. Nous allons prendre cette demande d'API. Et la seule chose que nous voulons changer ici est où il dit Star Wars, nous voulons changer cela pour être une variable appelée texte de recherche. Ensuite, nous allons prendre cette réponse et nous allons dire, Hey, au fait, JavaScript, cette réponse va être une réponse JSON. Alors analysez-le en JSON. Et puis on va dire de prendre les données restantes et de consigner ces données une seconde seulement. C' est tout ce qu'on va faire. Et donc quand je me rafraîchis et que je tape Star Wars, vous pouvez voir que je fais un tas de demandes ici. Nous obtenons une page avec un tas de résultats ici avec 20 résultats par page. Et donc le premier ici est un objet adulte faux. Il a une toile de fond, ID de genre, qui sont des ID. Nous pouvons faire une autre demande d'API. Le titre original Star Wars aperçu des couches princesse, calque. princesse Leia est capturée et prise en otage par les forces impériales maléfiques et leurs efforts pour prendre le contrôle de l'Empire Galactique, yada, yada, yada. Donc, nous avons toutes sortes d'informations ici. Nous avons également un chemin d'affiche, qui va finalement être une image que nous pouvons utiliser. Et donc nous pouvons voir que chaque fois que nous tapons quelque chose, nous obtenons des résultats différents. Donc total des pages, 414 pages. Plus on a tapé, moins on a de pages. Finalement, nous sommes descendus à huit pages où vous pouvez taper simplement Star Wars et obtenir environ 160 résultats ou un 157 au total, au total. Donc la seule chose que nous voulons ici, c'est que nous voulons ce tableau. Pourquoi nous cherchons un tableau est parce que nous voulons définir ces résultats de recherche. Et le résultat de la recherche est défini sur un tableau. Et la raison pour laquelle nous voulons un tableau est parce que nous pouvons faire une boucle sur un tableau plus facile que nous pouvons faire une boucle sur un seul objet. Et donc toute cette page ici, ce résultat entier est un objet. Et en fait, ce que je peux faire, c'est aller de l'avant. Cliquez avec le bouton droit ouvrir dans un nouvel onglet et nous pouvons voir l'ensemble de la réponse JSON ici. Rendons ça plus grand. Donc, nous avons un ID de page d'objet, les résultats sont égaux à un tableau de résultats. Et nous pouvons faire tous les petits parce qu'ils sont fondamentalement les mêmes. Eh bien, c'était amusant. Allons en ouvrir un. Et c'est donc un tableau de résultats. Et dans chaque résultat, chaque itération est un objet. Et nous voulons juste cette liste et nous voulons juste ce tableau de données. Nous ne voulons pas le numéro de page. Si vous le vouliez, vous pourriez avoir le numéro de page et d'autres choses plus tard. Peut-être comme un moyen d'étendre ce projet comme votre propre projet. Mais allons de l'avant et gardons juste ces résultats. Et donc ce que nous voulons faire ici maintenant, c'est que nous voulons dire définir les résultats de recherche. Résultats des points de données. Ouais, ça s'appelait, donc tout ça s'appelle des données. Oups, qu'est-ce que j'ai fait ici ? Donc, tout cela est toutes nos données et nous voulons des résultats de points de données parce que c'est une liste, c'est un tableau, c'est ce que nous voulons. Et encore une fois, nous le voulons juste pour que nous puissions le parcourir plus tard en utilisant JavaScript. Nous allons donc définir ces résultats de recherche en tant que résultats de recherche de données. Maintenant, à ce stade, on dirait que rien ne s'est passé quand on fait une recherche ici. Donc, je tape Star Wars et il fait toutes ces requêtes API différentes qui fonctionnent. C' est juste que rien ne rend encore. L' autre chose aussi est quand vous êtes ici, vous pouvez taper Star Wars et vous pouvez voir qu'il fait toutes ces requêtes API différentes ici pour moi. C' est cool. Cela fonctionne, mais ce n'est pas en fait sur la page de recherche et nous voulons forcer cela à être sur une page de recherche. Donc dans la prochaine vidéo, ce que je vais faire, c'est que je vais vous montrer comment quand quelqu'un tape ici, vous pouvez automatiquement les forcer à aller à la page de recherche. 19. Réagir sur l'histoire du navigateur de navigateur de réagir: Bon, regardons comment nous pouvons forcer les gens à la page de recherche chaque fois que vous cherchez quelque chose, allons-y et débarrassons-nous de cette connexion de console ici. On n'a pas besoin de ça. Nous n'avons pas besoin de ces résultats de recherche non plus. Et dans notre barre de navigation ici, ce que nous voulons faire est que nous voulons importer, utiliser l'historique ainsi que le lien. Et puis on va dire que l' histoire est égale à l'histoire américaine. Et puis chaque fois que nous mettons à jour cette taxe de recherche, mais nous allons faire, nous allons forcer l'utilisateur à aller à la recherche de barre oblique. Et alors regardez ceci quand j'irais, disons à la page à propos et je tape quoi que ce soit, je vais taper la lettre T. Il m'amène directement à la page de recherche, a changé mon URL pour moi, T E S T. Si je retourne à la , test deux, ça me ramène à la page de recherche chaque fois que je tape. Donc tout ce que nous avons fait là-bas, c'est que nous avons dit chaque fois que nous tapons avec cette entrée, chaque fois qu'elle est modifiée, exécuter, mettre à jour le texte de recherche, qui est une fonction anonyme ici, une fonction flèche. Ça va pousser cette histoire à chercher. Et puis nous allons définir ce texte de recherche. Maintenant, nous avons utilisé l'histoire ici. Nous avons dit que l'histoire du concours est égale à l'histoire américaine. Et nous avons importé l'historique ou le crochet d'histoire américain de React, routeur, DOM. C' est tout ce qu'on a fait. Donc, dans trois lignes de code, nous avons simplement dit, hey, utilisateur, chaque fois que vous êtes sur une page, disons que vous êtes sur la page d'accueil et que vous tapez une lettre. Toute lettre, allez directement à la page de recherche parce que vous cherchez, donc devrait aller directement à la page de recherche pour vous. Et il le fait automatiquement pour vous ? Oui. J'ai dit automagiquement parce que c'est un peu magique. Allez-y et mettez-vous en place et quand vous serez prêt, passons à la leçon suivante. 20. Mappage des résultats de recherche de résultats de la cartographie: Ok, jetons un coup d'oeil à la cartographie de nos résultats de recherche. Donc, dans notre barre de navigation, nous définissons le texte de recherche et la vue de recherche interne. Finalement, il revient en tant que résultats de recherche et qui passent par une API et nous allons ensuite utiliser les résultats de recherche. Donc, ce que nous pouvons faire est que nous pouvons utiliser les résultats de la recherche et nous pouvons parcourir chaque résultat et faire quelque chose. Nous allons donc parcourir chaque résultat en utilisant la fonction de carte en JavaScript. Et puis mettons tous ces résultats de recherche dans notre modèle d'objet document dans notre page. Donc, disons que les résultats const, HTML est égal à la carte de points Résultats de la recherche. Et cela va prendre un objet et en itération, et ce sera une fonction de flèche. Maintenant, si vous vous demandez, d'où ai-je obtenu l'objet et l'itération ? Ici, où nous allons à travers chacun des résultats de recherche. Il y a un objet ici. Donc, pour le résultat de recherche numéro un, nous avons l'objet numéro un. Pour le numéro deux, nous avons l'objet numéro deux et nous pouvons voir que c'est un objet parce que a, c'est juste JSON et être JSON ressemble juste à JavaScript. Et donc c'est le symbole d'un tableau et c'est le symbole d'un objet. Et c'est là que nous obtenons l'objet. Nous disons que pour chaque résultat de recherche , passez en revue tous. On a l'index. Donc c'est 12345, et cetera, et cetera. Et on va chercher l'objet. Et alors nous pouvons dire retour div, quel que soit cet objet et les données qui viennent ici. Donc disons div titre original. Donc je vais juste coller ça là-dedans. Titre d'origine du point d'objet. Et avec nos résultats de recherche, nous pouvons mettre nos résultats de recherche ici maintenant. Et cela va simplement faire une chose très cool. Vérifie ça. Oh, on a cassé quelque chose. Qu' est-ce qu'on a cassé ici ? Allons-y Star Wars. Oh, on continue à casser quelque chose. Qu' avons-nous, qu'est-ce qu'on a cassé ? Impossible de lire la carte de propriétés des résultats non définis. Voyons ce qu'on peut faire ici. Donc, nous voulons probablement nous assurer qu'il y a une sorte de résultat ici et une sorte de textes. Donc, nous voulons nous assurer s'il y a du texte de recherche, alors faites cette demande d'API. Sinon, s'il n'y a pas de texte de recherche, ne faites rien. Alors essayons ça. On y va. Ça marche un peu mieux. Donc le problème était, il n'y avait rien ici. Donc, cette requête était vide et elle ne retournait rien pour nous, ce qui n'est pas une réponse API étrange. Mais on avait une poignée. Et donc nous disons d'effectuer uniquement la demande d'API si le texte de recherche change. Et il y a en fait du texte de recherche là-dedans et ce n'est pas nul, ce n'est pas vide. Alors maintenant, quand je ferme ceci et trois frais, Allons à la page d'accueil. Faisons en sorte que cela fonctionne. Et je tape Star Wars et nous avons tous ces différents films de Star Wars et autres choses. Donc c'est bien. On a la première page ici. C' est essentiellement tout ce que nous voulions faire à ce moment où nous filtrons, qui est génial, nous filtrons à travers une API. Donc si je voulais taper star, star track, si je peux taper ça correctement, Star Trek et on aura Star Trek. Star Trek Beyond Star Trek nemesis, interaction dans les ténèbres , évolutions, etc., et cetera, et cetera, et cetera. Maintenant, il y a un petit problème ici avertissant chaque analyste enfant devrait avoir une propriété clé unique. Et ce que cela dit est dans notre vue de recherche, cela devrait avoir une clé. Et donc nous pouvons simplement dire que C0 est égal à i. Et donc ça va être 0, puis un, puis deux, puis trois, puis quatre. Donc, il va fondamentalement prendre cette itération et la jeter comme une clé. Et nous allons faire réagir heureux. Alors allons de l'avant et rafraîchissons. Et vous pouvez voir que l'erreur ne s'affiche plus. Une chose à noter est ce qui se passe si nous tapons un tas de ordures ici et qu'il n'y a pas de résultats ? Je vais vous laisser le soin si une partie de votre projet final est de faire un, oups, il n'y a pas de résultats de recherche. Il doit y avoir une sorte de texte ici, donc ça va être laissé à toi. Mais continuant de l'avant, nous allons juste en faire une belle carte. Donc ce que je veux que vous fassiez, c'est que votre recherche fonctionne réellement. Maintenant, vraiment tout ce que nous avions à faire était d'ajouter trois lignes de code. Dans notre vue de recherche, nous avons ces résultats de recherche et ensuite nous avons dit que le résultat constant est égal à un tas de choses ici. Bon, vas-y et essaye ça quand tu seras prêt dans la prochaine leçon, ce que nous allons faire, c'est que nous allons créer un nouveau composant pour nos résultats de recherche. Et au lieu d'utiliser simplement un div, nous allons utiliser une carte bootstrap. 21. Résultats de recherche Bootstrap 5: Très bien, ce que nous devons faire ici c'est, tout d' abord, aller sur getbootstrap.com. J' utilise Bootstrap cinq et je vais copier ceci dans mon presse-papiers et tout ce que j'ai fait, c'est que je suis allé aux composants, puis à la carte. Et j'ai choisi le premier parce que j'aime celui-là, c'est celui que je veux utiliser. Et donc l'idée est à chaque fois que vous tapez ici, au lieu de simplement dire Star Wars ou quelque chose comme ça. Et il devrait dire, ou devrait montrer une carte avec votre image dedans. Et donc nous allons générer cela en utilisant un composant basé sur la fonction. Et donc, allons de l'avant et créons un nouveau composant ici. La carte de film Const est égale à, et cela va prendre une propriété. Et on va appeler ce film d'accessoires. On va passer ça à la fin. Et ça va être une fonction de flèche. Et ça va rendre un tas de trucs. Et donc je veux juste cogner cela dans et où il dit Class est égal à k, nous devons réparer chaque fois qu'il dit Class est égal à deux, nom de classe est égal à IMG doit être une image DJ Sx ou un élément js X. Cette source doit être une sorte d'URL d'affiche. On en parlera dans une seconde. Que tout va être le titre original du point de film. Copions aussi ça d'ici dans notre VIH où il est dit titre de carte, débarrassez-vous de ça, allez quelque part dans ce qui va dire Afficher les détails. Maintenant, cela ne fait rien actuellement. L' URL de l'affiche n'est pas définie, qui ne va pas faire quoi que ce soit sans que cela soit défini. Alors faisons les inconvénients. Const. L'URL de l'affiche est égale à, et nous voulons cette URL de l'affiche. Ce n'est pas une image, on ne sait pas d'où ça vient. Donc ce que je vais faire est de taper le chemin de l'affiche TMD BY, l'image, quelque chose comme ça, et juste cliquer sur le premier résultat et ça me donnera quelque chose. Alors, nous allons cliquer sur l'un de ces. Oui, c'est ce qu'on voulait. Je crois que c'était du Fight Club. Jetons donc un coup d'oeil à cette documentation. Et oui, voilà, une image comme ça. Donc, ce que je veux faire est de copier cela et de le coller dans mon URL. Et j'ai ce chemin d'affiche avec une barre oblique dedans. Et donc probablement, tout ce que j'ai à faire, c'est de sortir la dernière barre oblique et tous ces personnages drôles là-dedans. Collez ma nouvelle ici. Et quel film allons-nous avoir ? Star Wars ? Et cela veut dire qu'il y a une largeur de 500, donc c'est ce que nous voulons. L' autre option est originale. Jetons donc un coup d'oeil à l'original. Origine. Maintenant, celui-ci est beaucoup plus grand et regarde ça. Ou on peut faire une largeur de 500. Et peut-on faire avec autre chose ? Je pense que c'est juste 500 et qu'en est-il de 250 ? Non, taille de l'image non prise en charge. Et c'est très bien. Nous resterons avec une largeur de 500. Et donc fondamentalement, nous voulons, nous voulons prendre cette URL, cette URL entière. Et nous voulons simplement remplacer cette dernière partie par le chemin de l'affiche de point de film. Et d'où j'ai posté ton chemin était juste ici. Alors maintenant, on fait beaucoup de bouger. Donc cette carte de film est à la place de ça, nous allons dire retour. Carte de film. Et ce film va être l'objet et la clé parce que nous avons toujours besoin de Key. Et donc ça va prendre cet objet, par exemple, celui-ci juste ici. Il va le renommer en film comme accessoire. On va accepter cet accessoire. Ensuite, nous allons vérifier ce point de film poster votre chemin, le chemin affiche de point de film. Ajoutez-le à cette URL ici. Et ça va être notre URL d'affiche. Maintenant, cela ne va pas avoir fière allure pour le moment. On va arranger ça dans un petit peu. Mais ce que cela va faire est de rendre un tas de HTML pour nous. Allons de l'avant et sauvegardons ça. Et il va se plaindre de ça. Link abordera cela et juste un peu. Mais allons de l'avant et voyons ce que cela fait pour les données. Quelque chose est cassé. Oh, style. Il y a une autre façon de faire du style. Ok, donc si vous voyez cette erreur particulière, cet accessoire de style attend un mappage des propriétés de style aux valeurs. Il est à la recherche de JavaScript ici, curieusement, pour votre attribut de style. Et donc vous l'écririez comme ce style est égal à double accolades. Et puis vous pouvez dire que la largeur est égale à 18 m virgule, et alors c'est juste un objet. Donc, cela ressemblait beaucoup à un objet JavaScript régulier. Il a juste les deux accolades autour d'elle. Les accolades extérieures. Celle-là, juste là. Et celui-ci juste ici dit, Hey, saute en dehors de HTML et utilise juste JavaScript régulier. Et là, il dit, oh, c' est ce que vous cartographiez va être. Nous n'avons pas besoin de l'un ou l'autre de cela va traiter avec le style un peu plus tard dans une nouvelle fonctionnalité. Allons-y et supprimons cela parce que je ne veux pas que cette largeur maximale là-dedans et rafraîchir déclarer une console, Star Wars. Et vous pouvez voir que ça a changé beaucoup de choses ici. Et c'est grand. C'est trop grand. C' est assez proche de ce qu'on veut, mais c'est trop grand. Alors, qu'est-ce qu'on veut faire ici ? Nous voulons des résultats HTML ou des résultats HTML et se termine s'il y a des résultats, alors nous pouvons faire quelque chose comme div nom de classe. Jetons ça dans un conteneur. Ajoutons un autre nom de classe div est égal à une ligne. Et puis mettons nos résultats HTML ici. Nous allons voir que ce n'est pas tout à fait ce que nous cherchons, mais cela nous rapproche un peu. Donc, c'est maintenant au moins tout à l'intérieur d'un conteneur. Le problème est, dans notre rangée, nous avons toutes ces cartes différentes et ce dont nous avons réellement besoin en tant que colonnes, parce que dans Bootstrap cinq, vous avez un conteneur avec une rangée à l'intérieur, avec une colonne à l'intérieur. Donc, ce que nous pouvons faire est au lieu d'écrire la carte de nom de classe, nous pouvons dire div, nom de classe est égal aux algues de charbon de Let's do, voyons à quoi deux ressemblent. Et grand finit par. C' est aussi faire col, md. Donc moyenne, il y aura 33 fois trois plus trois plus trois plus trois plus trois plus trois. Math rapide, il va y avoir quatre colonnes parce que les colonnes sont toujours sur 12 et bootstrap. Sinon faire du charbon, SM, pas SM, mais du charbon de deux. Et cela doit toujours être à l'intérieur d'un élément parent. Alors allons de l'avant et slash div ça. Et regarde ça. Ça a l'air bien. Ça a l'air un peu bondé, trop bondé pour du goût élevé. Allons-y et disons charbon LG. Trois. Ça a l'air un peu mieux, encore peu bondé ensemble. Donc, pour chacun d'entre eux, c'est ajouter la marge supérieure et la marge, marge inférieure, la marge sur l'axe Y de quatre. On y va. Ça a l'air plutôt bien. Jetons un coup d'oeil à ce que cela fait la recherche de Star Wars, vérifiez ça. Il fait une recherche réelle pour nous donne maintenant le titre, nous donne un nom. Et c'est ainsi que nous ajoutons des cartes Bootstrap à notre projet. Donc, ce que j'aimerais que vous fassiez pour cette leçon, c'est que je veux que vous ajoutiez cartes Bootstrap à votre projet jusqu'à présent. Et tout ce que nous avions vraiment à faire, c'est que nous avons créé un nouveau composant dont nous devrions être familiers. Nous passons dans un accessoire appelé film. Et sur notre carte, nous avons dit, utiliser ce nouveau composant accessoire de ce film se trouve juste être il s'appelle OBJ à ce stade. Nous lui donnons toujours une clé pour que réagir il ne se plaint pas. Et puis nous venons de retourner un tas de HTML qui était purement bootstrap. Eh bien, pas seulement 95 % de bootstrap. Et puis nous avons juste échangé certaines des propriétés comme l'image SRC est égale à l'URL de l'affiche. Quand vous avez terminé cela et cela fonctionne pour vous. Ce que nous allons faire ensuite, c'est que nous allons changer ce lien en vue détaillée. Et donc vous pouvez réellement cliquer sur ceci parce que pour le moment vous ne pouvez pas cliquer dessus et cela ne va nulle part. Il suffit de faire défiler vers le haut de la page, ce qui n'est pas utile. Nous allons configurer une vue détaillée du film afin que vous puissiez réellement utiliser, par exemple, la barre oblique 11 de votre site webe.com. Et il va vous montrer l'ID de film 11 en utilisant une API. Et ça va être très sympa et ça va faire un tas de trucs. Donc on va le faire ensuite. 22. Composante de détails du film du film: Très bien, continuons et ajoutons une vue détaillée du film avec des requêtes API. Tout d'abord, allons de l'avant et débarrassons de cette ligne. On n'a pas besoin de ça. C' est trouvable dans d'autres endroits. Doo-doo-doo-doo. Ouvrons notre app.js. Et dans notre route, allons de l'avant et créons une nouvelle route. Je vais copier celui-là et l'utiliser. Et ça allait dire des films slash slash slash ID deux-points. Et nous allons utiliser cette carte d'identité en bas de la route. Et au lieu de la réalité virtuelle, on va appeler ça une vue de film. Maintenant, j'aurais pu utiliser cette méthode, j'aurais pu utiliser cette méthode, n'a pas vraiment d'importance. J' aime utiliser cette méthode si vous avez des accessoires à transmettre, tels que des mots clés ou des résultats de recherche. Mais je ne le fais pas. Donc, je vais juste utiliser une vue de film et je vais laisser l'U ou L comprendre ce que ces idées de film, puis faire une demande d'API basée sur cet ID de film. Alors allons de l'avant et disons que cela va échouer à compiler comme prévu, vue du film n'est pas définie. Donc, allons de l'avant et importer une chose qui n'existe pas encore, importe la vue vidéo à partir des composants slash point vue vidéo. Ça va continuer à se plaindre. Je vais juste réécrire à propos de VW deux points de vue de film et le démonter, l'éditer et il s'est terminé. A propos de la vue va être appelée vue de film. Et cela va au moins charger pour nous maintenant. Donc, si je vais à la barre oblique 11, ça parle de nous. Ce n'est pas juste. Et ce n'était pas une faute de frappe dans la butée ? Oui, ça disait à propos de nous. Changeons ça à propos de nous. Et on y va. Et la vue détaillée du film finit par être le nom du film. Maintenant, pour obtenir le paramètre de cette URL, nous devons d'abord importer. Et qu'est-ce que c'est ? Je pense que c'est utilisé des paramètres, si je me souviens bien, utilisez des paramètres de React, routeur, DOM. Et puis attrapons cette carte d'identité et nous déconstruirons ça. Donc, l'ID const est égal à utiliser params d'abord pour le comprendre par magie pour nous, ce qui est incroyable. Et console.log cet ID. Et nous allons ouvrir nos outils ici et nous pouvons voir qu'il est écrit 11 dans l'année, donc il en a 11. Faisons comme 550. Il en a 550. Donc c'est parfait. Nous extrayons maintenant des données de notre URL et dans notre application. C' est exactement ce que nous voulons utiliser. Ensuite, nous voulons nous assurer que nous avons quelques détails de film ici afin que nous puissions faire détails de film const comme égal à noter rien égal à définir les détails de film est maintenant égal à l'état américain. Et ça va contenir un objet. Et les seules données cinématographiques que nous voulons conserver sont ces données particulières ici. On ne veut pas tous les films, on veut juste un film en particulier ici. Et en fait, ce que nous pouvons faire, c'est si nous revenons à la documentation de notre développeur ici, allons voir des films, films, où êtes-vous des films ? Nous voulons le faire. Ouais, on va juste chercher des détails. Envoyer la demande. Cinq sur trois, ça ne marche pas pour nous. Copions ceci et collez. Et, vous savez, en fait, coller juste le texte que vous voulez, pas sur le bouton aussi bien. On y va. Ce sont toutes les données qui vont nous revenir. Donc je vais fermer l'original. Gros plan bootstrap. Je ne pense plus qu'on va l'utiliser. Et qu'est-ce qu'on l'a ici ? Nous avons le budget, l'ID de la page d'accueil, ID IMDB, ce qui est plutôt cool. Langue originale, titre original, vue d'ensemble, chemin de l'affiche de popularité. Nous devrions également avoir une toile de fond, qui va être une image légèrement différente. Juste une toile de fond plus grande comme une affiche géante. Par exemple. Statut des revenus de la société de production, slogan , et cetera, et cetera, toutes sortes de choses ici. C' est donc ce que nous voulons utiliser. On veut ce Lincoln ici. Donc c'est juste mettre ça dans notre poche arrière pour l'instant. Maintenant, nous devons utiliser un fait. Donc, chaque fois que cet ID change, nous devons aller chercher de nouvelles données à partir de TM db. Nous devons donc importer, utiliser l'effet de React. Et nous allons écrire un effet ici suite juste pour prouver que ça va marcher. Donc on va dire « Utiliser l'effet ». Il va prendre une fonction de flèche, Console.log, faire une demande d'API. Et le deuxième paramètre va être ce qu'il cherche ? Il cherche la carte d'identité. Donc, chaque fois que cet ID change dans l'URL, il va le faire, il va faire une, une, une, une, une demande d'API à toutes ces idées. Donc, allons de l'avant et enregistrer cet état utilisateur n'est pas défini. Oui, c'est exact. L' état de l'utilisateur n'est pas défini. Donc, utilisez un fait et c'est aussi important état d'utilisation que Rio, se plaignant de certaines choses que nous pouvons réparer ça dans un peu. Star Wars. Et on ne peut pas aller à l'un d'entre eux, mais allons aux films slash 11. Et nous pouvons voir 11, faire une demande d'API à 11. C' est parfait. C'est ce qu'on veut. Bon, reprenons un pas en arrière et revenons à notre champ de recherche. Et faisons Star Wars. Et quand on clique sur l'un de ces boutons, il ne va nulle part. Ça nous ramène au sommet. Et donc nous voulons que cela aille réellement à nos nouvelles vues de détail. Et ce que nous pouvons faire est d'aller dans notre vue de recherche et d'échanger un HREF pour un lien est égal à. Et ce qui est censé aller au cinéma Slash a fait quoi que ce soit, nous allons l'échanger contre une const en une seconde. Nous devons importer le lien. Nous importons donc le lien de React Rotterdam. Et puis nous pouvons obtenir l'URL de détail const. Je l'appelle une URL détaillée parce que c'est ce que nous appelons dans Django. Et l'idée est qu'il va montrer juste des données détaillées sur un film particulier. Donc, il ne va pas montrer tous vos films, qui va être comme une vue ListView ou une vue de recherche, va afficher des données sur un film, un film particulier avec un ID, et cela s'appelle une vue détaillée. Et donc c'est censé aller dans les films et ensuite quelles que soient ces idées. Et j'ai eu cet ID de mon app.js. Et cela vient à, à, à, à, pour faire l'itinéraire, chemin des films deux-points ID. Maintenant, ce que je veux faire, c'est que je veux remplacer cet identifiant deux-points par l'identifiant de film réel. Pour que je puisse faire du film DID, je crois que c'est le cas. Et jetons un coup d'oeil à ça. C' est notre réponse API. L' ID du film est égal à 11. C' est ce qu'on cherche. Donc ça marche parfaitement. Détaillez l'URL et remplacez simplement cette chaîne par notre variable. Sauvons ça. Et revenons à notre page ici. Et vous pouvez voir que quand je survole en bas à gauche, il dit slash film slash slash 123475. Cliquez sur celui-ci et il va à un film VW 13475, faire une demande API et 13475. Donc on y arrive, on y arrive. Nous faisons ce travail lentement, mais sûrement. Nous créons une vue détaillée ici. Donc nous pouvons fermer notre vue de recherche parce que je pense que tout est fait maintenant. Et revenons à notre vue de film. Et ce que nous allons vouloir faire, c'est que nous allons chercher ces données. Et alors, allons ici, attrapons ce lien. Il a notre clé API et il y avait tout simplement très bien. Je vais juste désactiver ma clé d'API plus tard ou elle sera désactivée quand trop de gens finissent par l'utiliser. Mais ici, on veut échanger cette carte d'identité. Donc, nous sommes allés à api dot le film db.org slash 3 films slash slash quelle que soit cette idée. Donc, dans mon cas, c'était 11. Et puis ma clé API. Ensuite, nous allons prendre cette réponse et nous allons dire, hey, réponse soit JSON, ou elle vient en tant que JSON et une sorte de converti à partir de JSON XML, l'analyser à partir de JSON. Ensuite, nous allons prendre ces données et nous allons dire que les détails du film sont les données. Et puis ici, on peut changer ça pour être quelque chose comme des détails de film. Titre original du point. Et alors que les détails du film viennent d'aujourd'hui, il est défini comme rien. Mais ce qu'on pourrait faire. Et ce que nous faisons, c'est que nous utilisons cet effet. Donc, chaque fois que cet ID change, nous allons ensuite faire une demande d'API à cet ID. On va dire, hé, c'est JSON. Travaillez avec ces données en tant que JSON. Définissez ces données, qui vont ensuite changer les détails de notre film. Et chaque fois que nous utilisons la partie définie de notre état américain, il va re-rendre ce composant entier pour nous, auquel cas, et c'est vraiment sympa. Cela va être vide au début et ensuite il va en fait apparaître avec un nom. Alors allons-y et faisons-le. Et passons au numéro 11. Et vous pouvez voir comment quand je me rafraîchis, c'est en quelque sorte qu'il n'y a rien là-bas et tout d'un coup il y a quelque chose là-bas. C' est parce qu'il fait cette demande d'API. C' est dire, hey, utilisez le numéro 11, puis faites cette demande d'API et il utilise à nouveau le numéro 11. Alors débarrassons-nous du journal de la console. Et qu'est-ce qu'on veut faire d'autre ici ? C' est juste à peu près ça. Donc, ce que nous allons faire dans la prochaine leçon, c'est que nous allons ajouter quelques détails ici. Nous allons ajouter un conteneur, une ligne, et un tas de colonnes, quelques informations supplémentaires. Et nous allons, nous allons nous assurer qu'il y a une sorte de chargement ici afin que par défaut, si cela est toujours en cours de chargement, cela va dire chargement et ensuite il va montrer le titre. Donc, au lieu d'être juste vide et ensuite rejoindre avec cela, au moins il montre quelque chose instantanément. Donc on va le faire dans la prochaine leçon. Ce que je voudrais que vous fassiez pour cette leçon particulière, c'est dans votre vue vidéo, utilisez les paramètres, utilisez l'état, mettons-les ensemble. Effet d'utilisation. Obtenez ces requêtes d'API. Assurez-vous de mettre ceci comme votre ID. Si vous ne mettez pas ceci comme pièce d'identité, supposons que vous mettiez ceci comme détails du film. Tu vas définir les détails du film. Il va alors déclencher cet effet d'utilisation, qui va ensuite provoquer une autre requête d'API qui va définir les détails du film. Les détails du film seront différents. Il provoquera alors l'exécution de cet effet. Encore une fois. On ne veut pas ça. Nous voulons que l'effet s'exécute uniquement lorsque l'ID est modifié. Donc, quand vous passez de la barre oblique 11 à la barre oblique 13475, allez-y et essayez cela et quand vous êtes prêt, passons à notre prochaine leçon. 23. Marge: Très bien, ajoutons un état de chargement à, à notre page ici. Et la raison en est que dans notre dernière vidéo, nous actualisons la page et vous pouvez voir qu'elle est vide pendant une seconde rapide, puis elle apparaît réellement avec les données, donc elle est vide pendant une seconde, puis fait cette demande d'API, obtient le , puis re-rendu ou composant pour nous. Et c'est cool et tout. Mais ce n'est pas vraiment une bonne expérience utilisateur. Parfois, nous voulons juste que cela dise chargement, puis le remplacer automatiquement. Donc, l'idée est que vos utilisateurs ne sont pas frustrés par l'idée qu'il y a, avec le concept qu'il pourrait n'y avoir aucune information tant qu'il n'y a pas d'information, ils veulent juste toujours voir quelque chose. Et alors, allons de l'avant et ajoutons un état de chargement. Donc, nous allons dire que const est le chargement et set est le chargement est égal à l'état américain et par défaut, est-ce qu'il se charge ? Il l'est. Et une fois que nous obtenons des données ici, nous pouvons dire que set is, chargement, est faux, il ne se charge plus. Et nous pouvons créer une nouvelle fonction à l'intérieur de cette fonction. Disons que la fonction rend les détails du film. Et nous pouvons dire si est le chargement, nous voulons alors retourner héros avec un texte de point, point, point ou point de chargement point point point, ce serait mieux. Sinon, s'il y a des détails du film et où je reçois est le chargement et les détails du film est ici les détails du film et se charge. Et je suis juste en train de définir ces changements en utilisant l'état. Donc, si vous chargez, alors il va faire cette requête d'API et ensuite il va dire que le chargement est faux. Il ne se charge plus. Si quand nous rendons ces détails de film, c'est en fait le chargement, ça va dire chargement dans notre héros. Sinon. Déplaçons ça dans cette ligne ici. Et rendons les détails du film. Donc, au lieu d'une grande déclaration de retour, nous allons retourner une fonction qui va ensuite retourner un peu plus JS X4 en fonction d'un conditionnel. Ok, nous allons rafraîchir. Le PDG dit de charger très vite. Chargement, chargement, chargement de Star Wars, chargement de Star Wars, chargement de Star Wars. C' est ce qu'on veut. Maintenant, la raison pour laquelle nous faisons ça, c'est parce que si la connexion Internet de quelqu'un est vraiment, vraiment lente, cela pourrait prendre un peu de temps. Il peut prendre 2 à 3 secondes pour que n'importe quelle API réponde. Et pendant qu'ils attendent, au moins ça va dire chargement. Et faisons-le comme exemple. Délai de réglage. Et ce qu'on va faire, c'est qu'on va changer ça pour attendre deux secondes ou deux mille millisecondes. Il est saisi que déplacer ça en haut d'une ligne. Et rafraîchissons. Il dit qu'il est en train de se charger. Et puis il dit qu'il a chargé le chagrin ou donc nous imitons l'idée qu' une API pourrait prendre deux secondes pour répondre. Maintenant, mon internet est agréable et rapide, donc il clignote très, très, très rapidement. Mais si l'Internet de quelqu'un est lent, il peut apparaître comme point de chargement, point, point pendant beaucoup plus longtemps. Et c'est pourquoi c'est important. Donc, c'est comme ça que nous ajoutons le chargement est là-dedans. Donc, nous disons que le chargement est en train de charger. Et nous, nous aurions pu faire tout ça honnêtement à l'intérieur de notre retour principal. Mais juste pour rendre ce look un peu plus agréable, ce que nous avons fini par faire était de créer une autre fonction ici et de dire, si c'est le chargement, puis retourner le héros avec chargement. Sinon, renvoyez un tas d'autres choses. 24. API de composant film: Maintenant, allons-y et rendons cela un peu plus compliqué. Et pas compliqué, je suppose parce qu'on ne fait rien de complexe ici. On va écrire quelque chose de grand, plus grand. Alors ouvrons quelques JS x ici et fermons ce js X. Et nous allons avoir un héros ici, mais nous allons aussi avoir un nom de classe div. Et ça va être un conteneur. Nous allons aussi écrire div. Le nom de la classe est égal à la ligne. Et nous allons mettre deux colonnes dans votre nom de classe div. La première colonne sera le col md E3. Et ça va être la colonne de gauche. Et puis le nom de classe div col md 9. Et ça va être la bonne colonne. Et allons de l'avant et ajoutons une certaine marge. Ce qui n'est pas tout à fait étreindre notre bannière ou notre héros tout le temps. Regardez cette colonne de gauche, colonne de droite. Donc, nous allons dans la colonne de gauche est aller de l'avant et ajouter une image ici. Nous avons donc besoin de l'URL de l'affiche. Et donc nous avons une URL d'affiche. Où es-tu ? L'affiche ? Oh, ça s'appelle le chemin de l'affiche. Et ça revient dans les détails de notre film. Donc maintenant, nous pouvons dire ici le chemin de l'affiche const est égal à et nous savons que ce sera le chemin de l'affiche des détails du film point. Et d'où vient cette image ? Évaluez ici. Nous voulons aussi ce 501. Donc, prenons juste la première partie de cette URL. Et on va mettre ça ici. Et nous allons l'ajouter à la trajectoire du film. Maintenant, ce que je veux que vous fassiez quand vous avez fini de travailler sur ce projet comme vos devoirs, s'il n'y a pas de chemin d'affiche qui vaut que le chemin d'affiche revienne comme nul ? Qu' est-ce que tu fais ça ? Parce que cela va dire image que l'équipe db.org slash T slash p slash w 500 slash null ou pourrait même ne pas dire slash null, il pourrait juste être null. Alors, comment traitez-vous cette image manquante ? Et c'est quelque chose sur lequel vous pouvez travailler aussi. Donc, faire face à une image manquante possible. Et c'est vraiment juste un conditionnel. S' il y a quelque chose, s'il n'y a pas quelque chose, changez cette variable. Donc, ce chemin d'affiche, allons de l'avant et ajouter une image dans votre IMG SRC va être ce chemin d'affiche. Alt va être point-point. On peut y mettre tout ce qu'on veut. Le nom de classe va être fluide IMG pour le rendre réactif en utilisant Bootstrap. Donnons-lui une ombre et arrondissons. Et voyons à quoi ça ressemble. Oh, on y va. J'ai une petite image là-dedans. Et puis nous allons changer certains des trucs dans la colonne de droite. Disons qu'il y aura un H2 ici. Et ce sera le titre original des détails du film. Et allons de l'avant et ajoutons un p avec un nom de classe de lead, et c'est juste bootstrap. Et mettons les détails du film. Je pense que cela s'appelait Vue d'ensemble, vue d'ensemble de choses à faire. De quoi parle ce film. Vue d'ensemble des détails du film. Et j'ai ça. Maintenant, nous avons un petit aperçu ici et vous pouvez mettre plus de détails ici si vous le souhaitez. Vous pouvez mettre un lien vers la page d'accueil. Si vous le vouliez. Vous pouvez créer un lien vers une page de la BDIM. Il y a aussi des notes ici. Il y a des votes, donc la personne moyenne nous aime. 8.2 sur dix. Le statut a été publié car il n'a pas été publié. Par exemple, jetons un coup d'oeil à Deadpool. Et je viens d'apprendre aujourd'hui qu'il y aura une piscine de trois morts. Et voici l'ID 5.3.3, cinq, 35. Changeons ça ici et voyons si ça a été libéré. Le statut est modifié. Libéré son prévu. Donc Deadpool 3 est prévu et il n'y a pas de vote pour ça. Alors, comment traitez-vous ça s'il n'y a pas de votes ? Donc il y a beaucoup de choses avec lesquelles vous pouvez travailler ici. n'y a même pas de vue d'ensemble. Oui, on ne sait pas de quoi le film va être. Alors peut-être mettre ça dans une déclaration if. C' est ainsi que nous créons un peu d'une vue détaillée. Maintenant, ce n'est pas le meilleur exemple juste parce qu' il n'y avait rien d'autre que celui de Star Wars a l'air assez bon. Maintenant, dans la leçon suivante, allons de l'avant et prenons une toile de fond, qui va être cette image de fond. Et remettons-le ici pour que le texte soit toujours superposé sur le dessus. Et nous allons écrire un peu de CSS pour cela. 25. Ajouter un arrière-fond sur CSS: Très bien, dans cette vidéo, et ça va être notre dernière leçon avant le projet final. Je crois. Nous voulons changer cette image ici. Donc pour l'instant, c'est juste gris, mais continuons et changeons-la en une image pour qu' il y ait quelque chose d'un peu plus thématique à ce sujet. Et pour cela, nous allons devoir travailler avec notre composante héros une fois de plus. Alors ouvrons notre vue de film. Et ici, notre héros, nous allons ajouter une toile de fond. La toile de fond est égale à une sorte d'URL. Appelons donc cette URL de toile de fond. Nous ne savons pas encore ce que c'est, mais voyons ce que ça va être. Donc, l'URL de fond const est égale à quelque chose et il est appelé chemin de fond. Ainsi, nous pouvons mettre une variable dans votre chemin de toile de fond, détails du film jusqu'au chemin de toile de fond. Et puis on pourrait probablement prendre ça aussi. Et appelons ça original. Je pense que c'était ce que c'était il y a quelques vidéos. Et on va prendre l'URL de fond. Et nous allons le mettre dans notre héros, ce qui signifie que nous devons maintenant ouvrir notre héros et accepter une toile de fond facultative. Et juste pour les fonds, allons-y et voyons ce que sera cette toile de fond. Et ouvrons ça. Oui, c'est une grande image, c'est exactement ce qu'on veut. Donc nous voulons remettre cette image ici. Maintenant, pour cela, nous avons besoin d'un peu de CSS. Alors tout d'abord, allons de l'avant et appelons ça notre conteneur de héros. Et pour H1, donnons à ceci un nom de classe de texte de héros. Et pour un div optionnel pour l'image. On va dire ClassName, toile de fond de héros. Et on va garder cette toile de fond ici pour l'instant juste pour qu'on puisse y accéder si on en a besoin dans un petit peu. Donc maintenant, ce que nous voulons faire, c'est que nous voulons ouvrir notre app.js S, que nous n'avons pas encore touché du tout. Et nous allons, divisons notre écran. Et donc nous avons un texte noir BG, rembourrage blanc, un conteneur de cinq héros. Donc psu dot héros tableau de bord conteneur. Et ça va être la position relative. C' est cet indice de 100. Nous avons également héros 2.txt, notre texte de tiret de héros, position, indice zed relatif 200. Et puis nous avons notre toile de fond de héros, toile de fond de héros. Et cela va être la position absolue. Haut, 0, gauche, 0, largeur 100%, hauteur 100%. Et la taille d'arrière-plan x2 est contenue. Et laissons-le à ça pour l'instant. On va l'ajuster dans un peu. Je suis sûr que ça ne va pas se passer comme je m'attends à ce que ça se passe. Donc nous avons cette toile de fond de héros et ça correspond ici. Allons de l'avant et sauvegardons ça. Oui, je vais fermer ça pour l'instant. On pourra toujours rouvrir ça un peu plus tard si on en a besoin. Et nous devons définir cette toile de fond, cette image de fond. Donc, nous disons style, ouvert notre JavaScript, puis ouvrir un objet avec notre cartographie. Laissez-moi vous dire que l'image au sol est égale à, c'est là que ça devient bizarre. Ticks arrière, URL, parenthèses d'ouverture et de fermeture. Ensuite, nous avons une variable avec ouverture et fermeture accolades accolades. Et puis nous avons mis notre URL de toile de fond ici. Donc, c'est beaucoup à écrire et ce que j'aime faire est que je fais juste ouvrir et fermer l'URL. Puis à l'intérieur de cette URL, j'écris ma variable. Et puis à l'intérieur de cette variable, j'écris l'arrière-plan du nom de la variable réelle ou non l'arrière-plan mais la toile de fond. Et c'est juste une sorte de gestion. Parce qu'à ce stade, cela peut être beaucoup à regarder même si c'est seulement, eh bien, quoi ressemblent ces données aux 3839 caractères que cette partie ressemble beaucoup. Alors allons de l'avant et sauvegardons ceci et regardons ça. Ça n'a pas l'air mal. Et comme prévu, ça ne s'est pas déroulé comme je l'attendais. Revenons donc à notre app.js S. La taille de la cour arrière va être couverte. Et changeons la position d'arrière-plan pour être au centre et au centre. Et si ce texte est blanc sur blanc ? Ça peut être délicat. Alors faisons l'opacité ou il va payer la ville 0.5. juste faire un peu plus sombre et il va toujours apparaître. Rendons peut-être ça juste une touche plus foncée aussi. Et on y va. Maintenant, allons regarder une autre image. Faisons Star Trek, comme ça. Ça a l'air plutôt bien. Star Wars. Regardons celui-là. Bien, ça a l'air sympa et à thème. Et donc nous utilisons maintenant un peu de CSS. Nous avons également utilisé ceci, utilisons un conditionnel ici juste pour nous assurer que ce div n'apparaît pas s'il n'y a pas de toile de fond. Donc on peut dire « retour ». Et, et nous mettrons cette div là-dedans, rafraîchir. Et ça marche. Vérifiez cela et dit même chargement, puis charge tout à la fois. C' est vraiment, vraiment sympa. On aime vraiment ça. Maintenant, c'est à peu près tout ce qu'il y a à faire pour tout ce projet. On a beaucoup fait ici. Donc, dans la prochaine vidéo, ce que je vais faire, c'est que je vais vous décrire certains de vos puits, essentiellement les choses que vous devez faire pour finir ce projet dit, que je nous ai obtenu environ 90% là-bas. Nous avons beaucoup appris en cours de route, mais il y a environ 10 %, ce qui peut être 5 %, ce que j'aimerais que vous fassiez. Et nous en parlerons dans la prochaine leçon, qui sera votre projet final. 26. Votre projet: Bon, bienvenue dans votre projet final pour réagir à un. Maintenant, c'est un peu intéressant, un peu différent de la façon dont je fais habituellement les choses. D' habitude, je vous ai montré les principes fondamentaux et je vous ai fait construire quelque chose par vous-même. Mais parce que React peut être si grand et qu'il y a tellement d'informations là-bas. Ce que nous avons fait, c'est que nous avons construit toute cette application de recherche de base de données de film presque entièrement. Et ce que je vais faire, c'est laisser le reste entre vos mains. Il y a des choses que je veux que tu fasses pour ton projet. Et il y a quelques bugs que je n'ai délibérément pas encore résolus. n'y a donc pas de page 404. Donc, par exemple, si je vais à barre oblique page manquante, il n'y a juste rien là-bas. Donc il devrait y avoir quelque chose que je veux que vous créiez une sorte de page qui dit, Hey, cette page n'existe pas. Il devrait y avoir un 404 là-dedans. Parfois, un résultat de recherche n'a pas d'image. Et un bon exemple est Wanda, j'essayais de chercher une division par exemple. Et il n'y a pas d'images pour quelqu'un, je ne peux même pas dire ce nom ou le film qui vient d'appeler Wanda. Et donc ce que je veux que vous fassiez, c'est que s'il n'y a pas de chemin d'affiche, je veux que vous le changiez pour être quelque chose de générique, juste pour qu'il y ait toujours une image là-dedans. y a pas non plus de gestionnaire s'il n'y a pas de résultats de recherche. Donc, si je tape un à 99999, ça ne dit rien. Et il devrait y avoir quelque chose là-dedans pour de bonnes expériences utilisateur dit, hey, regardez, je sais que vous cherchez un à 99999, mais il n'y a pas de résultats. C' est juste qu'il n'existe pas. Donc, vous allez avoir besoin de créer ça. Et le bouton de recherche, bouton Rechercher dans la navigation ne fonctionne pas. Donc, si je tape Wanda et que je clique sur Rechercher, ça ne va nulle part, ça ne fait rien. Et ça va être un gros, ça va être difficile à mettre en œuvre. Alors allez-y et donnez-leur une chance. Je te laisse volontairement pendre environ 5% d'entre eux étaient environ 95% là-bas. Donc tu as juste besoin de finir ces derniers petits morceaux. Et puis nous avons fini. La bonne chose à ce sujet et la raison pour laquelle je le fais de cette façon, et c' est un peu différent de la façon dont je crée habituellement un projet, sont ces tâches que j'ai volontairement oubliées de ce projet pour que vous devez les résoudre vous-même. Et c'est très, très, très similaire à une affectation à emporter qu'une entreprise va vous donner lorsque vous postulez, lorsque vous travaillez avec eux. Et donc une fois que vous aurez traversé vos phases d'entrevue, entreprise vous donnera souvent un peu de code. Ils vous l'enverront par e-mail ou quelque chose comme ça. Et ensuite, vous devez régler certains des bugs. Et vous devez comprendre ce que sont ces bugs et comment les résoudre par vous-même. Et c'est vraiment une bonne pratique de la vie réelle où 95% là-bas, vous devez nous faire dépasser cette ligne d'arrivée avec ce dernier 5%. Parce que c'est ainsi que nous le faisons dans le monde professionnel. C' est à quel point tout le monde le fait. Et donc c'est juste vraiment, vraiment une bonne pratique pour vous. Alors allez-y et essayez ça. Et n'oubliez pas que si vous êtes coincé, vous pouvez laisser une question ci-dessous. Dernier mais non des moindres, mon nom a été un Caleb Tolkien a été non, Mon nom est Caleb Pauline. Merci de me suivre à travers réagir à un. N' oubliez pas, vous pouvez télécharger le code source à tout moment et vous amuser avec. Vous devrez peut-être échanger les clés d'API. Je ne suis pas trop inquiet à propos de la clé API est la mienne ou celle de quelqu'un d'autre. Donc tu n'as pas à les échanger. Mais vous pouvez certainement jeter un oeil au code source. Vous pouvez toujours me suivre sur Twitter à Caleb Tolkien ou sur Instagram. Codage, point pour point. Tout le monde. Merci encore pour vérifier réagit à un. J' espère que vous avez eu beaucoup de plaisir et j'espère que je vous verrai dans un autre module de la mienne, mordre.