Apprendre React : de l’initiation à la création d’une application React complète

1. Intro: Savez-vous quelle est la question d' entretien initiale la plus populaire ? Ça, tu peux construire un comptoir ? Aujourd'hui ? Nous allons passer en revue tout ce que vous devez savoir pour créer votre propre projet à l'aide de React, y compris comment créer ce compteur afin que vous puissiez réussir votre prochain entretien d'embauche. Bonjour, je m'appelle Zoé. Je suis ingénieur logiciel et ancien professeur qui adore enseigner aux autres comment apprendre à coder J'ai créé des tonnes de sites Web et d'applications Web en utilisant React, CSS, HTML et d'autres technologies. À la fin de ce cours, vous serez capable de le faire vous-même . Commençons. 2. Projet du cours: Projet de classe. Le projet de cette classe est de construire un compteur entièrement fonctionnel en utilisant React pour cela. Vous devez avoir accès à un ordinateur et un éditeur de code tel que Visual Studio Code. Vous devez également avoir une certaine compréhension du script Java ainsi que du HTML et du CSS. Je vais laisser des liens vers tous les actifs et ressources dont vous aurez besoin dans l'onglet projet et ressources ci-dessous. 3. Pourquoi réagir ?: Pourquoi React ? React a été développé Facebook et rendu public en 2013. Il a été initialement créé afin de gérer rechargements de pages et les mises à jour inefficaces qui nécessitaient à l'époque de repeindre l'intégralité du Dom ou du modèle d'objet du document. À chaque mise à jour, React corrige ce problème en créant ce qu'ils appelaient le Do virtuel, une représentation du Dom Cela a permis à React de ne mettre à jour que les aspects ou composants du Dom qui ont changé plutôt que la page entière, ce qui a entraîné de meilleures performances. React a changé la donne dans le domaine du développement Web et reste l'une des bibliothèques les plus populaires du marché. Grâce à l'utilisation de composants, les développeurs peuvent désormais écrire du code modulaire beaucoup plus facilement, ce qui leur permet de développer de beaucoup plus efficiente et efficace. les autres frameworks populaires qui sont souvent comparés à React, citons View et Angular. 4. Composants: Composantes. Les composants sont des morceaux de code réutilisables qui réagissent et exploitent afin de maintenir leur modularité Considérez-les comme les éléments de base que les développeurs utilisent pour créer des applications. Un composant est un morceau de code autonome, réutilisable, qui encapsule ses propres fonctionnalités, son état et sa propre structure Ces composants peuvent être considérés comme une combinaison de HTML et de Javascript ou de JS , utilisée dans React. Chaque composant peut avoir son propre état, qui représente des données susceptibles de changer au fil du temps, et un ensemble de propriétés ou d'accessoires permettant aux composants parents transmettre des données à leurs enfants Tout comme le HTML contient des éléments dans d'autres éléments, React possède des composants dans d'autres composants. Ces composants internes sont considérés comme les enfants des composants externes. 5. Accessoires et état: Accessoires et État. Pour vraiment comprendre et utiliser React au maximum, nous devons parler d' état et de propriétés. Ou comme on les appelle accessoires. Regardons un composant de base. Ces composants sont vraiment à leur base, ce ne sont que des fonctions. Ils peuvent accepter des arguments, modifier des variables et renvoyer une valeur. En termes simples, nous pouvons considérer les accessoires comme les arguments transmis à notre fonction lorsqu' elle est appelée state comme les variables locales qui n'existent que dans notre composant donné Nous développerons cette définition plus tard, mais il est important de comprendre d'abord comment elle fonctionne. 6. Créer une application React: Créez une application React. Il existe plusieurs manières de configurer une application React. Dans ce cours, nous passerons en revue les plus populaires. La façon originale de configurer une application React était d'utiliser Create React App, ou CRA. Puisque React est une bibliothèque et non un framework entièrement fonctionnel, pour qu'il fonctionne pleinement, il a besoin de plusieurs autres éléments tels que des outils de construction. L'application Create React a également été développée par Facebook afin de supprimer une grande partie de cette complexité et de la transformer en une commande simple mais puissante. En utilisant l'application Create React, vous vous éviterez des heures de maux de tête lorsque essayez de démarrer un nouveau projet React pour la première fois. Pour exécuter Create React App, entrez simplement px, create React App, suivi du nom de votre application dans le terminal et appuyez sur Entrée. Au bout de quelques minutes, vous serez prêt à partir. Vous pouvez exécuter la commande vous-même dans votre terminal si vous souhaitez voir à quoi ressemble l'application Create React. Nous allons l'utiliser dans notre projet. L'utilisation de l'application Create React convient un petit projet comme ce compteur. Cependant, je vous mets en garde contre son utilisation pour construire quelque chose de plus grand, car il n'est plus maintenu. 7. Bootstrap: Bootstrap. Bootstrap est l'un des frameworks CSS les plus populaires pour le développement de sites Web réactifs Il est gratuit à utiliser en open source et est particulièrement efficace pour créer des pages Web axées sur les mobiles et réagir. Bootstrap est basé sur le HTML, le CSS et le Javascript. Et fournit en fait un ensemble de composants, de modèles et de styles de pré-conception qui permettent aux développeurs de créer et d'itérer rapidement. Il est également conçu pour fonctionner sur tous les navigateurs, ce qui est idéal pour garantir que votre application s'affiche correctement pour tous les publics. Nous utiliserons React Bootstrap pour accélérer notre processus de développement aujourd'hui 8. Installation de React: Bien, maintenant que nous savons un peu plus sur React, allons-y et créons notre propre compteur. Comme je l'ai mentionné, il est très important comprendre comment construire, car c'est l'une de ces choses qui vous seront demandées lors quelques entretiens d'embauche et si vous décidez poursuivre une carrière de développeur front-end. Alors allons-y. Donc, ici, vous pouvez voir à quoi pourrait ressembler un compteur fini. n'y a pas beaucoup de styles et designs, mais c'est assez simple. Mais en termes de logique, c'est fonctionnel. Ce qu'ils voudraient que vous fassiez, c'est créer quelque chose qui affiche un nombre et vous permet ensuite d'y ajouter des éléments. Vous pouvez donc en ajouter un ou en soustraire un. assez simple, mais voyons comment nous pouvons réellement le construire. Si nous passons au code Visual Studio, la première chose que nous allons vouloir faire est de créer une application React. Comme je l'ai déjà mentionné, nous pouvons utiliser l'application Create React pour ce projet car il est si petit. Mais à l'avenir, nous parlerons de l'utilisation de solutions telles que. Ensuite, nous allons lancer notre application Create React, PX createapp Ensuite, nous allons l'appeler Counter. Cela va prendre quelques minutes pour commencer. Nous y retournerons une fois sa construction terminée. Maintenant que notre application Create React a enfin créé le dossier, allons-y et commençons à travailler avec lui. Je vais changer de répertoire en dossier. Et voilà, c'est ouvert. Très bien, alors allons-y , ouvrons-le et voyons avec quels types de fichiers et de dossiers nous travaillons. Donc, sur le côté gauche, vous verrez que nous avons un tas de dossiers différents qui ont été essentiellement créés pour nous à la suite de l'utilisation de l'application Create React. Comme je l'ai déjà mentionné, React est une bibliothèque et non un framework. Il nécessite donc l'installation de plusieurs autres outils de construction pour qu'il fonctionne correctement. Donc, si nous jetons un coup d' œil au Read me, cela nous en dira un peu plus sur la façon de travailler avec l'application Create, React, sur ce que nous pouvons faire, les commandes que nous pouvons exécuter. Si vous avez déjà travaillé avec NPM ou Note par le passé, vous devez connaître certaines de ces commandes Si ce n'est pas le cas, disons brièvement si vous avez déjà travaillé avec Node ou NPM dans le passé, vous devriez connaître certaines de ces commandes Passons en revue ceux qui créent des offres d'applications React pour nous. Nous avons donc NPM Start qui exécutera l'application en mode développement sur un hôte local 3 000. L'hôte local 3 000 est l'emplacement de choix pour exécuter l'application Ceci est simplement basé sur une configuration définie par l'équipe de création de réaction. Ensuite, vous avez une autre commande appelée NPM test. Cela vous permet d'exécuter des tests sur votre application React, et nous examinerons ces tests dans une seconde. Nous avons également une facture de production qui créera une version optimisée pour la production. Nous avons eject, que je n'ai pas trop utilisé personnellement, puis nous en savons un peu plus sur ce qu'est React, comment il a été construit, comment l'utiliser correctement, etc. Je vous encourage donc à lire ceci. Lisez-moi si vous ne l'avez pas lu auparavant il contient quelques informations qui pourraient être utiles. Comme je l'ai mentionné, l'application Create React n'est pas actuellement maintenue à l'avenir. Il se peut donc que les informations soient à jour ou non au moment où vous regardez cette vidéo. Très bien, jetons maintenant un coup d'œil au package Json. Encore une fois, si vous avez déjà travaillé avec NPM ou Jason, vous connaissez peut-être, au moins, le format et vous comprenez qu'il s'agit quelque sorte de l'un de ces fichiers nécessaires lorsque vous créez un projet Le fichier Json du package point contient donc différents éléments qui nous aideront à identifier notre projet et à comprendre les versions avec lesquelles nous travaillons des différentes dépendances que nous avons installées. En haut, nous avons donc le nom de notre compteur de colis. Nous pouvons toujours changer cela, si cela ne nous plaît pas , nous avons notre propre version, donc juste notre première version, qu'elle soit privée ou non. Et puis les dépendances que nous avons déjà installées. Nous avons donc la bibliothèque de tests, nous avons react, react, etc. Nous avons maintenant nos scripts. Les scripts que nous étions en train de parcourir dans le fichier Lisez-moi. Euh, donc en gros, ce qu'ils ont fait ici c'est créer un script qui s'appelle NPM start Mais ce que NPM start exécute réellement, c'est le démarrage des scripts React. C'est donc un peu un raccourcissement d' une commande plus longue, juste pour notre commodité en tant que développeurs Nous avons ensuite quelques configurations ES Link. Es link est préinstallé avec l'application Create React. Nous avons une liste des navigateurs avec lesquels nous souhaitons travailler en production et en développement. C'est à peu près ça. Le package Jason n'est pas très élaboré dans l'application Create React. Il y a quelques éléments clés sur lesquels nous devons travailler. Mais il augmentera en fonction de la taille du projet sur lequel vous travaillez. Et au fur et à mesure que nous installons de nouvelles choses. En parlant d'installer de nouvelles choses pendant que nous sommes ici, allons-y et installons, React, Bootstrap, et voyons comment il met à jour nos packages Pour en revenir au terminal ici, nous allons taper NPM install Et nous allons installer deux packages. L'un est React Bootstrap, et l'autre est juste le bootstrap lui-même. Ensemble, ces deux packages nous permettront de travailler avec toutes les fonctionnalités Bootstrap mises à notre disposition dans React Nous allons juste nous asseoir ici et attendre que cela s'installe. Je crois qu'il nous faut encore une ligne de code, alors laissez-moi la récupérer dans la documentation de Bootstraps Si nous allons dans Bootstrap React et que nous cliquons sur Getting Started, nous voulons également importer, oui, voir ci-dessous où il est dit feuilles de style et CSS Nous voulons l'importer dans l'un de nos fichiers. Au fur et à mesure que nous descendrons, je vais le copier. Ensuite, lorsque nous arriverons à ce fichier, je m' assurerai de l'importer. Bien, revenons à notre colis A Jason. Vous verrez ici que deux choses ont changé. Nous avons donc installé dans nos sous-dépendances, nous avons bootstrap, qui a été installé Et React Bootstrap. Ce sont donc les deux que nous venons de demander à installer. Vous savez, nous venons de faire la demande à NPM et ils nous ont correctement installés Comme vous pouvez le voir en bas de page, il existe également plusieurs vulnérabilités. Cela est dû, encore une fois, au fait que le projet n' est pas maintenu. Mais comme je l'ai mentionné, c'est l'un des moyens les plus simples si vous essayez simplement de démarrer avec React et d'apprendre à l'utiliser. Créer une application React est vraiment une sorte de moyen simple d' apprendre à utiliser React. Je dirais que certaines des autres options actuellement disponibles ont une courbe d' apprentissage très certaines des autres options actuellement disponibles ont une courbe d' apprentissage lente. Très bien, alors allons-y et nous allons jeter un œil aux autres fichiers ici. Nous avons donc un Git ignore. Donc, si vous avez déjà travaillé avec Git, vous savez que Git est un système de contrôle de version qui vous permet d'enregistrer vos fichiers et d'enregistrer différentes versions de vos fichiers au cas où vous auriez besoin revenir ou de revenir à une version antérieure d'un fichier sur lequel vous travaillez Mais dans notre Git ignore, nous verrons tous les fichiers contenus dans les dossiers que nous avons essentiellement prédéfinis pour ne pas les valider lorsque nous publions notre code , potentiellement sur Github, donc notre dossier de modules de nœuds ici Et cela s'explique par le fait que les modules de nœuds sont un très gros dossier contenant de nombreuses données provenant de diverses dépendances qui, si nous devions les transférer, les ajouter à notre Github les augmenteraient en quelque sorte Nous ne voulons donc pas vraiment insister là-dessus. C'est quelque chose qui peut être installé sur la base du package sur les versions de Jason chaque fois que nous clonons à nouveau notre fichier ou que quelqu'un d'autre clone notre travail Nous avons également d'autres éléments, y compris la couverture dans les dossiers de construction et certains fichiers divers. Très bien, passons aux bonnes choses. Nous avons donc deux dossiers ici, nous avons le dossier public et le dossier source. Le public est donc l'endroit où nous aimons toutes les images et choses qui sont actuellement affichées sur notre application, notre vie en ce moment. Ainsi que notre fichier HTML à points d'index. Et puis nous avons notre source, celle qui contient également tout un tas d' autres fichiers. Passons donc à ces deux questions. Et ce que nous pouvons faire pour vraiment avoir une bonne idée de la façon dont ces deux fonctionnent, c'est de démarrer notre application. Rappelez-vous donc que j'ai mentionné dans le package dotson foul qu'il y avait un script appelé NPM Allons-y, exécutons-le dans le terminal et voyons ce que cela apporte. Nous allons donc taper NPM Start. Nous allons appuyer sur Entrée et nous donner une seconde. Démarrez le serveur de développement. Et bien, c'est bon, nous sommes prêts à partir. Nous avons cette icône de réaction qui tourne. Et puis il est indiqué Modifier les applications source et les charger en toute sécurité. Et puis découvrez React qui renvoie à la documentation S. Génial. Nous savons donc au moins que notre application fonctionne. Revenons donc à nos dossiers et voyons maintenant où se trouvent toutes ces choses. Et ce que nous allons faire, c' laisser cette fenêtre de terminal ouverte juste pour que notre application continue de fonctionner en arrière-plan. Ainsi, si nous accédons à notre dossier public, généralement en HTML, toutes nos informations sont stockées dans le fichier HTML. Donc, lorsque nous l'ouvrons, il s' agissait d'un projet HTML normal, nous nous attendions à trouver toutes ces informations, nous nous attendions à trouver toutes ces informations, tout ce que nous venons de voir dans ce fichier. Cependant, quand on regarde ici, ce n'est pas là. Nous avons notre élément principal ici et de nombreuses métadonnées ici. Des choses que nous pouvons changer. Nous pouvons modifier le nom et le contenu ici. Cependant, si nous faisons défiler l'écran jusqu'au corps du message, vous remarquerez que toutes les informations que nous venons d' avoir dans notre navigateur ne sont pas disponibles. Vous verrez que dans le corps il n'y a que deux éléments. Le script no, qui indique aux personnes qui n' ont pas activé Java Script qu'elles en ont besoin pour l'exécuter. Et puis il y a un div singulier vide, ce qui est vraiment intéressant. D'où vient réellement notre projet ? Ensuite, si nous avons un div complètement vide, cela n'a pas vraiment de sens car si nous revenons sur la page, nous voyons que nous avons toutes ces informations. Je veux dire que nous avons du texte une icône qui tourne et un lien. De toute évidence, il faut vivre quelque part. Bien, eh bien, si nous retournons à notre division, regardons-y de près. Nous voyons qu'il a l'ID root. Cela signifie donc que peut-être quelque part en cours de route cela est ciblé et que cette racine signifie quelque chose, n'est-ce pas ? Donc, si vous avez regardé la vidéo précédente que j' ai sur le script Java, vous l'aurez compris. Vous vous en souviendrez probablement. Vous vous souviendrez probablement qu'il existe une méthode appelée get element by ID. Passons donc à notre fichier JS à points d'index sur la gauche ici. Et jetez un œil à ça. Donc, en regardant dans notre fichier JS à points d' index, nous avons tout un tas d'importations. Nous sommes donc maintenant dans le monde du Javascript, non ? Nous sommes en quelque sorte passés du HTML au langage entièrement Javascript. Et quand nous voyons, mais ce n'est pas tout à fait du Javascript car nous y sommes habitués, je veux dire, vous voyez que nous avons des structures similaires à des éléments div. Alors allons en quelque sorte descendre ligne par ligne et voir ce que tout est. Nous avons donc importé React depuis React. Encore une fois, en travaillant avec NPM. Nous avons installé ce package appelé React, cette bibliothèque appelée React, et nous en avons maintenant importé l' instance de React. Nous avons import react, import index CSS, qui n' est que le fichier CSS. Importer l'application, qui est un autre fichier ici. Et puis importez les données vitales du rapport. Là où je veux vraiment commencer à faire attention, c'est à la ligne sept où il dit que la racine constante est égale à react dom point create route. Ensuite, dans cette route de création, il est écrit document point get element by ID route. De toute évidence, il se passe quelque chose ici où nous obtenons cet élément racine, nous obtenons ce div et maintenant nous créons une sorte de route basée sur cet élément. Nous l'avons donc fait ici, nous avons créé une route sur le React, et nous avons créé cette route variable, n'est-ce pas ? Ensuite, nous disons root render. Et dans ce cadre, nous affichons maintenant React en mode strict. Et puis, dans ce cadre, nous faisons le rendu de cette application, de ce truc d'application. Maintenant, d'après ce que nous avons lu auparavant, l'application n'était qu'un fichier Javascript. Mais les deux sont dans cette étrange structure de type élément, n'est-ce pas ? C'est donc ce truc JSX dont nous parlions. Ce Javascript est en quelque sorte mélangé au HTML, ce qui nous permet d'écrire du HTML dans Javascript Alors allons-y et plongeons-nous dans les applications. Les applications ressemblent à un fichier Javascript assez normal, mais il contient cette combinaison JS HTML et Javascript. Maintenant, comme vous pouvez le voir, il s'agit simplement d'une fonction normale appelée app, renvoie cet élément HTML. C'est vraiment un maître brillant là-bas. Ce que c'est, en fait, c'est un composant. Ces choses dont nous parlions tout à l'heure. Les composants qui ont leur propre affichage leur propre logique et tout ce contient l'application, pour nous, c'est ce composant. Maintenant, si nous parcourons ligne par ligne, nous verrons qu'il importe un logo depuis logo dog, mais ce logo depuis point logo, point Sg, qui se trouve dans le même dossier source. Il importe des applications, c'est-à-dire ce fichier de style. Ensuite, il crée cette fonction appelée app, puis en bas, il l'exporte. Et puis dans ce fichier d'index JS, il l'importe. Hein ? Dans les applications, nous renvoyons un div contenant tout un tas d'éléments . Il a donc un div avec un classamepphadermagelogoitcedemagelogoi'm Je pense que c'est le logo React dont nous parlions tout à l'heure. Et puis nous avons cette ligne de code que nous avons vue. Nous avons cette ligne de texte, nous l'avons vue. Il le dit, sourcez les chiens de l'application et enregistrez pour le recharger. Et puis, en bas, il est écrit « Apprenez, réagissez ». Maintenant, si nous revenons ici, c'est exactement ce que nous avons. Nous avons notre logo, nous avons l'édition, source des applications à installer et les enregistrer pour les recharger. Et nous avons appris, réagissez. Nous avons donc finalement trouvé l'endroit où se trouvaient toutes ces informations, n'est-ce pas ? Donc, comprendre, réagir un peu plus. Et en comprenant la structure, nous avons ce plus grand fichier JS à points d' index, qui contient en fait toutes nos informations, n'est-ce pas ? En gros, c'est là que tout s'accumule. Mais dans l'index, nous avons les applications applicatives, où les informations, la logique que nous allons réellement afficher prennent réellement vie. Et maintenant, avant que j' oublie qui, étant donné que nous sommes dans index dogs pour que notre bootstrap React fonctionne, si vous vous souvenez bien, nous devons nous assurer qu'en haut du fichier, nous importons le bootstrap Cool. Nous devrions être prêts à partir maintenant. Bien, maintenant que nous comprenons un peu mieux la structure de notre application, allons-y, travaillons avec les applications, et commençons à développer nos composants. 9. Créer un compteur: Il s'agit d'un ancien style de composant que nous allons transformer en ce que nous appelons un composant de fonction flèche. Les composants de la fonction Arrow constituent simplement un moyen plus propre d'écrire et de créer des composants sur le plan syntaxique écrire et de créer des composants sur Ce n'est pas strictement nécessaire, mais je vais le faire parce que c'est une bonne pratique de savoir comment procéder et de vous montrer comment le faire. Si nous allons de l'avant, nous allons réellement changer cela. Donc, il est dit que l'application constante est égale à la flèche, puis nous allons simplement appuyer sur Safe. Très bien, et nous venons de le transformer en un composant de fonction flèche. Génial Nous sommes déjà un peu plus modernes lorsque nous regardons notre application ici. Lorsque nous examinons les applications sources, nous n'avons vraiment pas besoin de grand-chose de tout cela ou de rien de tout cela. Honnêtement, ce que nous allons construire, le comptoir qui n'est en fait qu'une page unique contenant quelques éléments. Nous pouvons nous débarrasser de la plupart de ces choses. Je pense qu'une chose que nous pouvons faire ici est simplement effacer tout ce qui se trouve dans l'application ici. Nous conserverons le di global, pour l'application, mais nous supprimerons tout ce que nous n' utilisons pas et nous l'enregistrerons. Très bien, maintenant nous avons notre application vide, et si vous voyez, nous avons juste une simple page blanche, c'est exactement par là que nous voulons commencer. Si vous démarriez un nouveau projet d'application Create React, voici les étapes que je vous recommande de suivre, n'est-ce pas ? Vous obtenez votre projet, vous le nettoyez, vous installez les packages dont vous avez besoin, puis vous commencez à travailler dessus. Bien, à l'avenir, il existe quelques autres bonnes pratiques que nous souhaitons utiliser lorsque nous travaillons avec React. Tout d'abord, dans notre dossier source, nous allons créer un autre dossier appelé Components. La raison pour laquelle nous avons créé ce composant est que, surtout lorsque vous travaillez sur des projets plus importants, nombre de petits fichiers nous commençons à accumuler très rapidement le nombre de petits fichiers. Et cela pourrait devenir très compliqué s' ils se trouvent tous dans votre dossier source Et ce n'est pas la meilleure idée de les avoir partout. Il devient très difficile de déboguer et de définir ce que vous recherchez meilleure pratique consiste à créer des dossiers distincts en fonction des fonctionnalités sur lesquelles vous travaillez fonctionnalités sur lesquelles vous travaillez, afin de garder les choses propres et simples dans notre dossier de composants. Allons-y maintenant et développons certains des autres composants dont nous aurons besoin. Si j'écris, que je clique et que je crée un nouveau fichier, nous savons que nous construisons un compteur. Commençons donc par en créer un qui dit counter counter Jsx enter Génial, nous avons créé notre premier fichier JSX. Maintenant, la prochaine chose que nous allons vouloir faire est de créer notre composant compteur. Vous pouvez maintenant le faire de deux manières. Il existe en quelque sorte des méthodes de saisie semi-automatique pour le faire, ou des méthodes manuelles pour le faire Donc, si l' extension est installée, vous pouvez taper R, A FCE, qui correspond à S seven snippets, l'ES seven, et React Snippets est l'extension que vous souhaitez installer si vous voulez travailler avec cela Et cela ne fera que créer ce composant pour nous. Nous allons donc appuyer sur Entrée voir à quoi cela ressemble. Ensuite, nous allons le créer manuellement. Donc, si nous appuyons sur Entrée, vous verrez qu' il fait tout le gros du travail à notre place. Elle importe, réagis pour nous. Il crée un élément appelé compteur. Il renvoie un élément entre crochets avec déjà un Dave. Et il dit « contre » et il l' exporte déjà pour nous. C'est une façon vraiment géniale de tout faire manuellement. Nous allons utiliser celui-ci pour tout faire sans avoir à le taper manuellement. Se débarrasser de ça. Si nous voulons refaire nous-mêmes, avons qu'un impact en réagissant. Ensuite, nous procéderions à la création d'un compteur. De plus, une autre chose à propos des composants React est que la première lettre du composant doit toujours être en majuscule Ce n'est qu'une partie de la syntaxe requise. compteur d'inconvénients est égal à notre fonction, puis nous allons renvoyer un div indiquant counter. Très bien, et c'est tout ce que nous avons pour le moment. Ensuite, nous allons également exporter le compteur par défaut. Très bien, alors allons-y. Nous sommes prêts à partir. Nous avons notre compteur, nous avons créé notre composant de compteur et, vous savez, c'est bon, mais si nous consultons notre page, il n'apparaîtra pas, n'est-ce pas ? Parce que personne ne sait que le compteur existe. heure actuelle, le compteur vit simplement dans son propre dossier de composants, dans son propre petit fichier, et il ne fait rien. Donc, pour que d'autres personnes sachent qu'il existe, nous devons l'importer dans quel fichier ? Notre fichier d'application, car le fichier d'application est un fichier actuellement affiché. Revenons donc à l'application , puis nous allons importer le compteur. Et ce qui est vraiment cool, c'est que nous pouvons également importer automatiquement le code VS contient une certaine intelligence et donc si nous tapons avec le. Le support à angle ouvert , puis le nom du composant, nous demanderont en fait de simplement l'importer depuis notre porte-composants. C'est donc très pratique si nous devons importer quelques composants différents ou, vous savez, sans avoir à les importer puis à les intégrer dans le fichier. C'est juste une façon très rapide et intelligente de l'utiliser. Et la dernière chose que nous voulons retenir maintenant, c'est que si notre comptoir ou notre composant n'a pas d'enfants, nous voulons le fermer immédiatement. Nous voulons que ce soit un élément à fermeture automatique, donc comme ceci, dessus comme ça. Parfait. Alors, mais à quoi ressemble le fait d'avoir des enfants ? Bien, comme vous pouvez le voir maintenant, Counter est une application qui n'a pas d'enfants, mais si nous voulions que ce soit une application qui accueille des enfants, nous pourrions toujours la mettre comme un élément HTML normal , puis y ajouter les enfants. C'est vrai. Et cela fonctionnerait tout de même. Voilà donc cette combinaison géniale de script Java et d' inaction en HTML Génial, alors débarrassons-nous du deuxième compteur. Nous n'en avons pas vraiment besoin, et commençons à travailler sur notre application à partir de nos fichiers de comptoir. Nous en avons un peu fini avec les applications pour le moment. Nous n'avons pas besoin de notre index ML le moment, sauf si nous voulons modifier certaines métadonnées. Nous allons juste nous concentrer sur les compteurs. Très bien, nous avons donc notre comptoir. Nous avons un div, et tout ce qu'il dit c'est un compteur. Et si nous regardons notre page ici, nous verrons qu'il est écrit « compteur », donc nous savons que nous l'avons correctement Maintenant, si nous revenons à notre page, nous devons réfléchir aux éléments qui figuraient dans cette conception initiale, n'est-ce pas ? Nous avions ce chiffre, nous avions un bouton rouge dans un bouton vert, ou un plus et un moins, mais il n'est pas nécessaire qu'ils soient rouges et verts. Nous voulons donc nous assurer développer tous ces éléments, n'est-ce pas ? Très bien, alors allons-y et commençons à construire ça. Donc, dans ce div, je veux créer, allons-y, en faire un H pour le nombre. Nous allons donc commencer à zéro et simplement enregistrer cela. Ensuite, en dessous, nous allons créer les deux boutons. Et au lieu de le faire manuellement ou de le styliser manuellement, nous pouvons utiliser React Bootstrap pour les styliser un peu plus dynamiquement Nous allons utiliser le bouton de React Bootstrap. Comme vous pouvez le constater, il nous donne également des renseignements et nous demande de les importer automatiquement. Nous allons ajouter ce bouton. Nous pouvons utiliser ce qu'on appelle une variante. React bootstrap nous donne une option, une propriété appelée variance Avec ces variantes, nous pouvons simplement utiliser un nom, comme une propriété prédéfinie, peu comme les attributs en HTML, et lui donner des styles spécifiques Par conséquent, il existe deux variantes avec lesquelles nous allons vouloir travailler aujourd'hui. L'un d'eux s'appelle Success. Nous allons clore ça. Et puis ce sera notre bouton plus un. Et puis l' autre sera, je crois que c'est dangereux, mais oui, nous allons prendre notre bouton, le copier, le coller. Nous y allons, je crois que ça s'appelle le danger. Nous allons taper le second et le remplacer par moins un. Jetons donc un coup d'œil à notre page et voyons si cela a bien fonctionné. Nous en sommes déjà à 90  % avec le design. Nous avons donc notre bouton vert, qui est plus un, et notre bouton rouge, qui est moins un. C'est tellement bon d'y aller. Mais une autre chose que je voudrais corriger un peu, c'est l' endroit où cela est affiché. Parce qu'en ce moment, c'est vraiment en haut de la page. Pas vraiment idéal pour une visualisation correcte. Nous voulons donc simplement le mettre en bas de la page, juste pour cela. Donc, la façon dont nous allons le faire à nouveau, c'est simplement améliorer notre style, n'est-ce pas Donc, si nous passons à notre contre-élément, nous pouvons en fait ajouter une certaine marge haut de celui-ci, juste pour nous donner un peu plus de place. Nous pouvons donc soit créer un fichier CSS auquel ajouter tous nos styles, soit utiliser du CSS en ligne Maintenant, le CSS en ligne est quelque chose qui correspond essentiellement à ce qu'il dit Cela nous permet d' écrire littéralement les styles sur la même ligne. Cela nous permet d' écrire littéralement les styles dans la même ligne que notre code HTML, ce que je trouve plutôt cool. Vous l'avez peut-être déjà utilisé une ou deux fois dans votre code HTML, mais c'est une pratique beaucoup plus courante lorsque vous travaillez avec un React, car tout est beaucoup plus compartimenté Donc, si nous voulions ajouter notre style ici à notre Div, nous tapons simplement STYLE style. Ensuite, nous utiliserions deux crochets bouclés afin d'utiliser le caractère dynamique du style intégré. Nous voudrions donc ajouter une marge. Donnons-lui simplement une marge globale de quatre RAM. Et sauf que si nous revenons ici, tant mieux, nous avons un peu plus de racines. Je vais ajouter un peu plus d'espacement peut-être à droite de notre bouton vert ici Alors allons-y, ajoutons la même propriété de style et nous allons faire de la marge, n'est-ce Encore une fois, une autre chose très intéressante à propos de React, non ? En HTML, vous devez taper une marge, n'est-ce pas ? Mais parce que nous travaillons avec Javascript, nous voulons vraiment utiliser Camel Case Ensuite, il n'y aura pas de tiret lorsque nous saisirons notre CSS et notre Nous allons faire de la marge, non ? Ensuite, nous allons taper à nouveau dans une chaîne ce que devrait être notre marge. Je vais enregistrer ça. Parfait. D'accord, et nous avons un peu d'espace là-bas. Et puis ajoutons simplement un petit espace en dessous de l'en-tête. Et nous devrions être bons. Nous allons donc faire la même chose une fois de plus. Style, marge égale, bas. Ensuite, nous installerons deux rampes. On vérifie, je pense que nous sommes plutôt doués pour le style. Nous pourrions toujours en faire beaucoup plus, mais en général, lors d'un entretien, ils ne vous en demanderont pas trop en termes de style au-delà de ce stade. Passons donc à la logique et commençons à travailler pour en faire un compteur fonctionnel. Bien, la prochaine chose que nous allons vouloir faire maintenant que nous en avons fini avec nos styles de base, c'est de commencer à travailler sur notre logique réelle, notre démonstration de logique, etc. maintenant que nous en avons fini avec nos styles de base, c'est de commencer à travailler sur notre logique réelle, notre démonstration de logique Donc, si tu te souviens, nous avons ce zéro, non ? Et lorsque nous appuyons sur le bouton plus et le bouton moins, nous voulons que quelque chose se passe. Maintenant, si nous nous souvenons de notre script Java, nous avons besoin d'une fonction onclick ou, vous savez, de passer quelque chose dans cette fonction onclick pour que quelque chose fonctionne réellement, n'est-ce pas pour que quelque chose fonctionne réellement, Allons-y donc et commençons à l' implémenter de manière réactive. Donc, comme je l'ai déjà mentionné, React a ce qu'on appelle état, n'est-ce pas ? L'état est donc littéralement le statut donné à tout ce qui se passe. État donné de ce qui se passe dans un composant. Il existe donc un moyen d'interagir réellement avec l'état que nous utiliserons spécifiquement avec React. Le concept d'État est un peu abstrait au début, mais il deviendra beaucoup plus concret au fur et à mesure que nous l'utiliserons. Donc, la première chose que je veux faire, au lieu que ce chiffre soit zéro, nous voulons être un peu plus dynamiques, n'est-ce pas ? Je vais donc créer une variable appelée count equals zero. Commençons donc par le remplacer par le nombre, n'est-ce pas ? Joli et simple. Rien de trop fou pour l'instant. Donc, si on vérifie ici, le décompte est resté nul. Bien, reviens. Mais maintenant que nous avons changé le nombre pour en faire une variable, nous pouvons désormais l'utiliser de manière un peu plus dynamique, n'est-ce pas ? Donc, comme je l'ai mentionné, nous voulons utiliser cette chose appelée état. React a aussi ce qu' on appelle des hooks, non ? Les hooks ont été introduits pour réagir quelques années afin de faciliter l'utilisation de l'état au sein d'un élément. Avant cela, l'état ne pouvait pas vraiment être utilisé dans un élément de la manière dont nous l'utilisons aujourd'hui. Donc, ce que nous voulons faire pour utiliser state, c' est importer un hook. Et ce qu'est un crochet n'est en réalité qu'un simple composant. C'est ce qu'est hook, c'est en fait juste une autre fonction qui est en quelque sorte extraite et nous importons simplement ses fonctionnalités pour pouvoir l'utiliser. Très bien, importons donc l'état utilisé depuis React. Super, maintenant que nous avons utilisé state, nous allons modifier la façon dont nous travaillons avec le nombre de variables, n'est-ce pas ? Et je sais que vous pensez bien, ne pourrions-nous pas simplement appeler une fonction et le faire en un clic, etc. Il existe une meilleure façon de le faire avec la réaction. Lorsque nous utilisons state, il existe la variable elle-même. Ensuite, il y a un ensemble, appelé setter, qui nous permet de définir la valeur de cette variable Maintenant, nous pouvons initialiser cela en utilisant un peu de syntaxe spécifique Nous plaçons notre variable réelle entre crochets, c' est-à-dire notre variable initialisée puis nous plaçons un point commun à côté Et puis la convention typique de la façon dont nous écrivons ceci est de mettre set devant le nom de la variable. Si le nom de notre variable est count, nous utiliserons set count pour que ce soit notre setter. Ensuite, nous introduirons l'état d'utilisation en ce qui concerne l'acte, le numéro initialisé lui-même. Nous allons taper et utiliser state et l' intégrer à cet appel de fonction. Vous voyez maintenant que notre nombre défini est devenu une fonction réelle elle-même. Il sera utilisé pour nous aider à définir l'état. Il se connecte à ce crochet à état U et nous permet d'activer cette fonctionnalité. Et puis nous avons notre État américain qui y travaille et y fait sa magie. Vous verrez donc que le nombre défini est toujours souligné parce que nous ne l' avons pas encore utilisé. Mais nous allons l'utiliser dans une seconde. Et si nous revenons sur notre page ici, nous verrons que rien n'a changé jusqu'à présent car la valeur initialisée n' a pas changé, n'est-ce Nous avons gardé notre zéro et cela fonctionne parfaitement bien. Maintenant, ce que nous voulons faire, c'est utiliser ce setter pour mettre à jour la valeur du nombre de manière dynamique, n'est-ce pas Chaque fois que nous appuyons sur le bouton plus un ou sur le bouton moins un, nous voulons que ce zéro augmente ou diminue. Hein ? Donc, la façon dont nous allons procéder est d'utiliser une fonction onclick Ce sera une fonction onclick vraiment simple et directe qui nous prendra 2 secondes à implémenter. Donc, si nous allons sur notre bouton, comme nous le savons, les boutons ont une fonctionnalité de clic. Nous allons donc taper notre code « on click » et, comme c'est à nouveau du Javascript, Camel Case équivaut à des crochets bouclés. Ensuite, nous allons appeler notre Set count. Nous allons donc utiliser nos parenthèses et nous appellerons set count Et nous allons passer entre parenthèses de set count la valeur que nous voulons qu'elle soit maintenant, car nous avons la variable initiale count La valeur qui compte, c' est l'État, non ? Le décompte est donc cette partie de l'État, quelle que soit sa valeur, qu'il s'agisse d'un, de 100 ou 10 000, c'est l'état actuel. Nous pouvons donc réellement l'utiliser dans notre fonction d'addition ici. Nous allons donc prendre la valeur de count, quelle qu'elle soit à ce moment-là, et nous allons simplement y ajouter une valeur. C'est vraiment simple. Nous allons simplement taper dans les limites du nombre défini, nous allons compter, puis plus un et économiser. Et c'est toute notre fonction qui va nous permettre d'en ajouter un à notre décompte. Donc, si nous l'essayons et que nous appuyons sur plus un, nous pouvons voir que cela fonctionne. Nous pouvons donc simplement ajouter, ajouter, et tout est configuré. Construire vraiment un comptoir n' est pas si difficile. Il s' agit simplement de comprendre la logique, les outils et les étapes qui les sous-tendent. Si nous revenons ici, nous pouvons simplement le copier, déplacer vers notre deuxième bouton et modifier le nombre pour en soustraire un Nous faisons toujours référence à la même variable de comptage, mais lorsque quelqu'un clique sur le signe moins un, nous voulons qu'il en soustrait mais lorsque quelqu'un clique sur le signe moins un, un Hein ? C'est vraiment simple. Si nous allons ici, soustraire, soustraire , ce bouton fonctionne maintenant et nous avons tout notre compteur configuré, facilement et facilement. Cool. C'est une sorte de méthode de premier niveau pour configurer le compteur. Hein ? Il se peut que votre intervieweur vous demande de configurer le comptoir de cette façon Au départ, il pourrait s'agir d'une version 1. Mais si vous avez déjà fait un entretien technique ou si vous ne l'avez pas encore fait, parfois, ce que les intervieweurs vous demandent de faire , c'est qu'après avoir fait la première version de quelque chose, ils vous demanderont de l'itérer et de créer une deuxième Passons donc à une éventuelle itération de cet élément. Nous allons donc parler des enfants des éléments, de la façon dont il transmet les accessoires, de la façon dont l'État est transmis, et d'autres choses de ce genre Passons donc à la prochaine version, deux. 10. Affiner le compteur: Bien, maintenant que nous avons complètement configuré notre première version, construisons cette version deux. Donc, dans la deuxième version, ce que votre intervieweur pourrait vous demander, ce que quelqu'un pourrait vous demander de faire dans une deuxième version, c'est en fait de le séparer en différents éléments Parce que l' un des avantages React est qu'il vous permet d'être vraiment modulaire avec les éléments avec lesquels vous travaillez. Et vous n'avez pas besoin de tout imbriquer dans un très long fichier HTML, n'est-ce pas ? Vous pouvez en fait décomposer les éléments en composants plus petits. Comme nous l'avons vu avec le passage d'un compteur à une application, nous pouvons simplement accéder aux éléments comme s'ils se trouvaient tous dans un seul gros fichier, tout en les gardant séparés et bien rangés. Découvrons donc un peu plus en détail comment nous pourrions procéder. Une chose que nous pourrions en fait ressortir est la section des boutons, n'est-ce pas ? Le déclencheur réel du composant. Si nous voulions continuer et créer un nouveau fichier ici, nous pourrions l'appeler boutons et appuyer sur Entrée. Et si c'était le cas. Donc, ce que je veux faire avec le bouton maintenant c'est simplement extraire cette logique dans son propre composant et la faire vivre là-bas. Donc, ce que nous allons faire ici, c'est que nous allons d'abord créer notre composant de bouton, puis nous allons prendre les informations des boutons des compteurs et les copier dans le Et nous n'allons en copier qu'une et je vais vous montrer pourquoi dans une seconde. Nous allons le coller ici. Nous devons le réimporter ici. Et il s'agit simplement de réimporter le bouton de Maria Bootstrap pour s'assurer qu'il fonctionne toujours Ensuite, l'étape suivante, button égale button, a déjà été déclarée. Nous devons changer le nom. Nous allons appeler ça, nous allons appeler ce bouton personnalisé. Il deviendra un bouton personnalisé. Oui, c'est donc une autre chose importante que vous avez probablement rencontrée dans le script de travail avant de vous assurer que vos variables sont uniques. C'est bon, super. Vous remarquerez qu' une erreur s' affiche ici avec le nombre défini. Nous y travaillerons dans une seconde. Adaptez-vous pour le moment afin que cela ne nous donne pas d'erreur de construction. C'est bon, cool. C'est bon d'y aller. Donc, ce que nous voulons faire avec notre bouton personnalisé maintenant, c'est le créer d'une manière un peu plus modulaire, n'est-ce pas ? Il peut donc s'agir d'un bouton de réussite ou d'un bouton de danger. Cela peut être à gauche ou à droite. Cela peut être un avantage ou un inconvénient. Nous voulons donc l' implémenter de manière ne pas avoir à l'utiliser uniquement pour le cas d'utilisation d'un seul bouton. Nous voulons l'implémenter de telle sorte que si nous avions un bouton plus un moins et un bouton de multiplication et toutes ces autres options, nous pourrions le faire avec notre bouton. Donc, la façon dont nous allons procéder est lui transmettre des accessoires ou des propriétés, n'est-ce pas Ce sont donc des éléments que nous allons transmettre du composant parent de Counter au composant bouton qui aideront à identifier le but de ce bouton spécifique. Alors laissez-moi vous montrer comment nous allons procéder. La première chose que nous allons faire est donc de transmettre ces propriétés. Il y a donc deux façons de récupérer les accessoires, non ? Nous pourrions donc, pourrions essentiellement transmettre accessoires comme, je ne sais pas, la variante et le numéro ou autre, n'est-ce Oui, donc on peut soit passer les accessoires comme ça , soit les récupérer, tu sais, à travers nos accessoires C'est vrai. C'est une bonne façon de les transmettre, mais elle implique beaucoup de syntaxe supplémentaire qui donnera un code une apparence un peu onéreuse. Ce que nous voulons faire à la place, c'est les placer entre crochets, puis nous pouvons simplement accéder directement à ces variables Je peux donc simplement devenir constant, je n'ai pas besoin d'initialiser maintenant une variante, une variable de variante En fait, je peux simplement accéder à la variante directement dans le code. Donc, au lieu de passer le mot succès ici, je vais maintenant transmettre le mot variant, la variable, n'est-ce pas ? Alors allons-y et branchons tout ça. Vous pouvez donc voir de quoi je parle si nous transmettons la variable variant ici, si nous revenons au compteur et que nous commentons ces deux variantes afin de voir que cela ne fonctionne plus. Bien, nous allons réellement importer, nous allons effectuer cette importation ici et nous allons importer notre bouton, notre bouton personnalisé à partir du composant local. bouton d'importation ne provient pas de Maria Bootstrap, mais du bouton barre oblique Importez donc le bouton personnalisé depuis. Très bien, et nous allons ensuite l'utiliser. Nous allons maintenant créer un bouton personnalisé. Pour le moment, c'est juste un bouton bleu aléatoire. Je peux même le commenter. Nous allons donc tout commenter sauf la variante afin de nous assurer que nous faisons un bon test. C'est un numéro de bouton aléatoire, il n'y a rien dedans. Ce que nous pouvons alors faire maintenant, c'est transmettre nos propriétés. Nous opterons pour des variantes égales et nous saisirons succès parce que notre premier était le succès, le second le danger. Le bouton de variante est maintenant vert. Nous savons qu'en transmettant notre propriété d'un compteur à un bouton personnalisé dans un. Property dans la propriété de variant , puis en l'appelant bring it , puis en y accédant dans un bouton personnalisé et en l'utilisant comme variante, elle est simplement redirigée directement. Hein ? Nous perçons simplement l'accessoire du comptoir au bouton. Nous pouvons donc le faire, afin que nous puissions le faire avec n'importe quelle propriété avec laquelle nous voulons travailler, n'est-ce pas ? Donc, si nous voulions faire la même chose avec le style, d' accord, si nous avions des demandes de style spécifiques, nous le voudrions. Nous faisons de la marge, non ? Un seul RAM, non ? Et si nous revenons maintenant au bouton plutôt qu'au numéro, nous importerons le style. Nous pouvons faire en sorte que le style soit égal au style. En fait, nous n'avons pas besoin du double, nous avons juste besoin d'un style, non ? Et encore une fois, nous ne pouvons pas vraiment le dire, mais vous pouvez le voir un peu décalé. Nous aurons cette marge, non ? Très bien, c'est donc un moyen très rapide de commencer à utiliser les propriétés de manière très dynamique, n'est-ce pas ? Ainsi, si nous créons un deuxième bouton, nous avons déjà deux boutons avec lesquels travailler. Et nous n'avons pas eu à faire beaucoup de travail, n'est-ce pas ? Nous n'avons pas eu à écrire la variante et le style. Et ceci et cela, nous n'avons eu qu'à écrire dans un, nous avons juste dû mettre à jour quelques champs simples, non ? Dans ce cas, nous allons changer la variante en danger, et nous allons supprimer l'élément de style ici. Maintenant, nous devrions avoir un bouton vert et un bouton rouge. Parfait. Ça va vraiment bien. Maintenant, les deux autres éléments que nous voulons inclure sont le plus un et le moins, ainsi que la fonction onclick Bien, ce que nous voulons faire pour tout fonctionne correctement, c'est deux choses. Nous voulons transmettre le numéro contenu dans le bouton personnalisé, puis nous voulons également transmettre la fonction elle-même. Donc, si nous changeons réellement cela pour ne pas être un élément à fermeture automatique et que, comme nous en avons déjà parlé, nous allons faire en sorte que ce ne soit qu'un élément normal qui accueille des enfants. Nous allons mettre plus un dans le premier. Et si nous passons à Button maintenant, nous voulons accéder à quelque chose appelé Children. Il existe une propriété spéciale appelée enfants. Oui, il existe une propriété spéciale appelée Children qui nous permet d'accéder à tout ce qui est imbriqué dans un élément de réaction Ce que nous allons simplement faire ici, c'est notre bouton permet d'accéder au lieu d'avoir le plus un, nous allons en fait changer cela pour dire enfants. Et sauvegardez-le. Ensuite, si nous regardons ici, React a découvert que, étant donné que le plus un était un enfant de notre bouton personnalisé ici, nous voulions également être un enfant du bouton personnalisé là-bas. Maintenant que nous avons indiqué que nous voulions y utiliser un enfant, les enfants, tous les enfants désormais, vivront dans l' élément de bouton personnalisé. C'est logique. Nous avons donc simplement pris le plus un ici, en le plaçant sur le bouton ici, passant en tant qu'enfant, ce qui est un accessoire spécial Et puis je l'ai transmis à notre page elle-même. Faisons-le encore une fois, mais avec un point négatif. Nous allons donc changer cela ici, faire un élément qui ne se ferme pas automatiquement, juste un élément normal. Et nous allons faire moins un. Nous allons enregistrer cela , puis ne rien y changer, il suffit de revenir sur notre page et le tour est joué. Cela fonctionne. Nous ne faisons donc que transmettre les enfants comme nous le ferions avec HTML, mais avec nos boutons. Bien, la dernière chose que nous devons ajouter est notre fonctionnalité «   on click », n'est-ce pas ? Celui-ci est un peu plus grand, celui-ci est un peu différent. Ce que nous allons faire ici, c'est deux choses. Nous pouvons écrire le clic comme nous l'avions fait auparavant et transmettre notre nombre défini, le nombre est égal au nombre plus un. Et puis cela fonctionnera une fois que nous aurons ajouté notre clic. Ensuite, une fois que nous avons ajouté notre « on », cliquez ici et cliquez sur « cliquez ». Donc, peu importe ce que vous transmettez en un clic et que vous le retirez, cela fonctionne, nous y voilà. Nous en ajoutons un à chaque fois. C'est donc une façon de procéder. Une autre façon de le faire est d' abstraire complètement la logique du composant. Ce qui pourrait être utile ici est de créer une fonction appelée en ajouter un. Nous allons ajouter un nombre égal au nombre défini, soit le nombre plus un. Très bien, nous avons donc simplement résumé cette logique dans le haut du compteur Bien, maintenant que nous avons créé cette fonction d'ajout d'un élément, nous pouvons simplement l'écrire ici. Nous pouvons simplement écrire en ajouter un. Ensuite, notre clic va simplement ajouter. Oups. Ensuite, notre clic en ajoutera simplement un lorsque nous en aurons besoin. Génial. La prochaine chose que nous pouvons faire ici est de faire abstraction cette soustraction pour qu'elle soit un peu plus claire dans notre code actuel en bas Nous allons donc soustraire un, nous allons définir le nombre moins un Nous allons enregistrer cela. Ensuite, nous allons le prendre, soustraire un et le transmettre sous forme clic dans notre fonction ici Si nous l'avons fait, et si nous avons tout fait correctement, cela devrait simplement fonctionner. Jetons donc un coup d'œil. Soustrayez un. Génial. Cela fonctionne exactement comme nous nous y attendions. Nous pouvons donc nous débarrasser de ce texte supplémentaire ici. Sauvegardez ça. Et nous avons maintenant ajouté une autre couche à nos composants, n'est-ce pas ? Donc, ce que nous avons fait, c'est que nous avons intégré ces variantes, nous avons transmis les styles, et nous les avons transmis en cliquant sur le bouton. Le bouton appelle désormais l'enfant de manière dynamique. Le bouton appelle désormais dynamiquement la variante le style et le clic selon les besoins. Et transmet le bon enfant en fonction ce que nous avons vécu. C'est plutôt cool. Il s'agit donc d'une façon de travailler avec propriétés d'un composant parent, c'est-à-dire du composant opposé à un composant enfant, qui est le composant bouton. Ce n'est donc qu'une façon de l'utiliser. Nous allons donc nous entraîner une dernière fois, mais nous allons le faire avec le composant count. C'est donc assez simple en fait. C'est un peu plus simple que le bouton lui-même. Nous allons créer un nouveau fichier et dire « ça compte ». Et nous allons faire la même chose et créer un composant de comptage. Ce que nous allons utiliser, c'est exactement pour cette composante de comptage que nous utilisons la composante h. Nous allons importer le nombre et nous allons le transmettre, au lieu de l'utiliser étant enfant, nous allons simplement le transmettre en tant que propriété. Nous allons procéder au décompte. Ensuite, nous allons faire abstraction de tout ce style de notre composant ici. Alors débarrassons-nous de ça. Et nous allons économiser. Et si nous revenons au décompte, nous voulons maintenant accéder à toutes ces propriétés, n'est-ce pas ? Donc, en faisant la même chose que dans le bouton, nous allons utiliser nos crochets ici et nous allons accéder à la valeur de count Nous allons enregistrer cela. Et si vous vous souvenez, il est clair nous avions en fait un H au lieu d'un div ici pour afficher le décompte lui-même. Et ce qui est cool avec JSX, c'est que le composant extérieur n'a pas vraiment d'importance Cela peut être un bouton, cela peut être, cela n'a pas vraiment d'importance. Il peut s'agir de ce que l'on appelle un fragment d'événement, où vous n'avez en fait que ces crochets vides qui n'ont aucune valeur. Ce que nous allons faire, c'est utiliser ce H à la place. Nous allons donc taper un H, nous allons l'enregistrer, puis nous allons simplement accéder à la valeur de count. Et si vous vous souvenez, nous avions également un petit siling en cours, alors nous allons simplement le copier, nous allons simplement le coller à nouveau ici Et maintenant, si nous avons tout fait correctement, le résultat devrait être exactement le même, non ? Nous avons notre compte et il fonctionne comme prévu. Encore une fois, c'était très simple, car il simplement de passer du décompte. Nous avons transmis la valeur de count au composant nommé count, accédons à la valeur de count et l'affichons. J'espère que cela vous aidera à comprendre un peu le fonctionnement de JS, comment fonctionne React, comment les accessoires sont transmis, comment fonctionne la relation parent-enfant Et encore une fois, la raison de le faire est simplement de rendre les choses un peu plus propres. Quelque chose que nous pourrions même faire dans le composant du bouton pour le nettoyer un peu est afficher la variante dynamiquement, n'est-ce pas ? Au lieu d'écrire explicitement la variante ici dans le fichier compteur, ce qui prend beaucoup de place et c'est quelque chose de plus que nous devons nous rappeler changer chaque fois que nous devons changer quelque chose. Ce serait formidable si tous nos styles résidaient simplement dans les composants des boutons. Voyons si nous pouvons le faire ici. Ce que nous allons faire, c'est accéder notre composant bouton et au lieu d'accéder à cette variante variable, nous allons la baser sur ce qu'est l'enfant. Nous allons donc poser cette question ici. Donc, si les enfants E sont égaux à plus un, c'est donc notre composant publicitaire, n'est-ce pas ? Et si vous vous souvenez, notre composant publicitaire sera sur le côté gauche et il sera vert. Nous voulons que notre variante le soit, nous le demanderons et nous voulons que notre variante soit un succès. Et si vous vous souvenez, cela utilise ce qu'on appelle les opérateurs ternaires, que nous avons décrits en Javascript, n'est-ce pas ? Nous posons donc une question sur la condition ici. Évaluez donc cette expression. Si c'est vrai, obtenez ce premier argument ici. Cependant, si c'est faux, optez pour le second, qui dans notre cas est un danger. Donc, si nous l'avons fait correctement, afin que cette variante ne soit plus utilisée, elle devrait toujours afficher les couleurs correctes des boutons. Donc, si nous regardons ici, oui, les couleurs sont toujours les mêmes, et cela fonctionne exactement comme prévu Génial. Encore une fois, ce que nous avons fait ici, vrai, nous utilisons simplement un opérateur ternaire Nous avons pris la valeur des enfants, qui sera soit plus un, soit moins un. Et nous avons posé la question, donc si l'enfant a plus un, si c'est vrai, nous voulons qu'il affiche la couleur de réussite, la variante de réussite. Si c'est faux, nous voulons qu'il affiche le signal de danger, dont vous savez qu'il est rouge. Et comme nous l'avons fait, nous n'avons plus besoin de percer cette variante d'hélice Ce qui nous permet en fait nettoyer un peu notre code. Ici, c'est logique. Nous allons l'utiliser encore une fois juste pour nous en faire une idée. Encore une fois, ici dans le bouton personnalisé, vous voyez que nous avons du style sur l'un et aucun style sur l'autre. Ce que nous pouvons faire à nouveau dans le bouton, c'est l'afficher en fonction de la variante. Et nous procédons de cette façon uniquement parce que nous savons que notre compteur ne changera pas tant que ça, n'est-ce pas ? Nous avons un plus un et un moins et cela ne changera pas grand-chose. Si cela doit changer beaucoup à l'avenir, nous ne voudrions peut-être pas le faire de cette façon. Mais comme il s'agit d' une portée en quelque sorte limitée, cela a du sens pour notre cas d'utilisation. Très bien, nous allons donc prendre notre style et ajouter une marge, à droite, d'une marge autour. Je vais le copier. Et je vais le retirer de ce contre-composant extérieur. Hein ? Nous avons donc déjà beaucoup nettoyé tout cela. Vous savez, nous avons, nous n' avons en fait que trois lignes ici et vous pouvez voir l'intérêt de supprimer un peu du style affiché dans un composant différent, quand vous voyez à quel point le composant parent devient plus propre le composant parent devient C'est vrai. Et comme vous pouvez le constater, parce que nous l'avons retirée, la marge de droite ne fonctionne pas. Il n'y est pas. Ce qui est très bien parce que vous allez le réintégrer. Revenons donc au bouton. Très bien, alors nous allons supprimer le style d'ici, parce que nous n' en aurons plus besoin. Sauvegardez ça. Supprimez-le là, et enregistrez-le. Bien, maintenant, ce que nous allons faire avec le style ici est légèrement différent car nous ne modifions qu'un seul élément Nous allons le vérifier d'une manière légèrement différente. Nous allons donc saisir une marge, non ? Et puis dans les limites de la marge, non ? Nous allons maintenant poser cette question. Si le nombre d'enfants est égal à plus un, nous voulons que la marge soit égale à deux, c'est vrai. Sinon, nous voulons que la marge soit nulle, c'est vrai. Nous allons enregistrer cela. Voilà. Nous avons maintenant ajouté notre marge, à droite, selon que c'est l' enfant qui est à ajouter ou non. Il s'agit donc d'un moyen très simple nettoyer notre composant de comptoir, notre composant parent, et de conserver tous les styles dans un seul et même endroit. C'est vrai. Nous pouvons toujours constater que nous avons la logique qui est gérée en interne. Mais le compteur est maintenant un composant logique qui contient tous les appels d'état que un composant logique qui contient tous les appels d' la fonction appelle et qui sont ensuite transmis aux composants d'affichage des boutons de comptage et de personnalisation. Les composants React sont donc également créés pour avoir idéalement un usage unique. Ils affichent donc ou travaillent selon la logique, mais ils ne font pas nécessairement les deux. C'est donc l'une des raisons pour lesquelles on pourrait vous demander de le faire lors d'un entretien ou dans le cadre d'un éventuel scénario d'emploi. 11. Essais: Bien, la dernière chose sur laquelle nous voulons travailler aujourd'hui, ce sont les tests. Les tests sont un autre élément intéressant de React. Comme vous l'avez déjà vu lorsque nous examinions notre package point json, installons ces éléments appelés bibliothèques de test, n' est-ce pas ? Il s'agit de bibliothèques de test auxquelles nous avons accès et dont nous pouvons ensuite utiliser des appels spécifiques afin de nous assurer que notre application fonctionne correctement. Donc, si nous examinons les tests d'applications. Donc, pour le moment, cela échoue car nous avons en fait supprimé une partie de ce qui se trouvait auparavant dans l'application. C'est vrai. Il s'agissait de vérifier si, eh bien, nous allons le parcourir ligne par ligne. Dans le cadre de ce test, nous importons deux éléments. Rendu et écran à partir de la bibliothèque de test React. Nous importons également une application depuis une application. Maintenant, ce que nous appelons alors ce qu'on appelle un test. Nous faisons un test. Le test affiche un lien d'apprentissage et de réaction Il affiche l'application puis trouve un élément de lien. Il accède à l'écran puis appelle get by text. Il appelle cette méthode appelée get by text qui nous permet de trouver les mots react. Et vous verrez que c' est écrit de manière vraiment intéressante. Ici, vous remarquerez qu'elle n'est pas écrite comme une chaîne classique. Si vous vous souvenez, nous avons en quelque sorte abordé le X rouge à un moment donné, les expressions régulières. Vous savez que c'est reg dans la mesure où cela nous permet de rechercher ces mots qu'ils soient majuscules ou en lettres communes Donc tu écris une barre oblique, tu écris ta phrase, tu écris une autre barre oblique, puis tu écris un I juste après C'est donc un petit fait amusant que vous puissiez peut-être utiliser Internet. Ensuite, la façon dont le test fonctionne est que la dernière étape est toujours l'assertion, alors qu'est-ce que nous essayons de nous assurer que cela fonctionne, qu'il se produit, etc. Nous nous attendons donc à ce que l'élément lien, qui est cette variable que nous avons créée ici, se trouve dans le document. Nous nous attendons donc à ce que l'élément lien figure dans le document. Encore une fois, comme je l'ai déjà dit, cela échoue actuellement car nous avons supprimé cet élément de lien du document. Mais nous pouvons réellement corriger ce test et le faire rechercher autre chose qui se trouve dans le document, n'est-ce pas ? Comme nous savons que notre en-tête figurera toujours dans le document, nous pouvons utiliser cet élément de lien dans lequel nous pouvons utiliser le même format pour vérifier si notre en-tête est présent. Allons-y et changeons l'élément de lien pour qu'il soit compté. Et nous allons faire un écran, mais nous allons effacer cette partie. Nous allons nous débrouiller avec l'écran. Nous voulons le définir par rôle. Et Get By Role nous permet essentiellement de trouver des éléments en fonction du rôle qu'ils jouent. Donc, si c'est un bouton, si c'est un texte, si c'est une étiquette. Nous pouvons utiliser ces différents rôles afin d' identifier les éléments eux-mêmes. Heureusement, nous n'avons qu' un seul titre sur cette page, nous pouvons donc utiliser l'en-tête get by role. Nous pouvons l'utiliser là où nous nous attendons à ce que le décompte figure dans le document. Comme vous pouvez le constater, lorsque nous l'avons enregistré, il fonctionnait déjà correctement car nous affirmons les bonnes choses Encore un test que nous pourrions faire. Nous pourrions faire exactement le même test, réécrivons-le. Mais nous pouvons vérifier la présence du bouton Plus par exemple, n'est-ce pas ? Nous pouvons faire des rendus. Euh, et nous voudrons également modifier cet en-tête de rendu juste pour qu'il soit correct Le deuxième test que nous voulons faire est le bouton Renders Plus. Et puis nous pouvons simplement créer, oups, créer le test et nous allons afficher l'application. Et vous savez, la chose intéressante à laquelle nous n'aurions peut-être même pas pensé, c'est la raison pour laquelle cela fonctionne correctement est que tous ces composants se trouvent dans l'application Parce que l'application contient un compteur compte et un bouton. Peu importe où nous effectuons le test, car il peut tous les voir. Donc, juste une autre chose intéressante à laquelle réfléchir. Ensuite, nous voulons écrire une constante, c'était quoi ? Le bouton Plus équivaut à l'écran, passez au rouleau. Mais maintenant, ce qui est intéressant, c'est que nous n'avons pas vraiment deux boutons. Nous avons le bouton plus et le bouton moins. Mais devons-nous cliquer sur le bouton « roll » pour ensuite passer ? Que transmettons-nous dans la deuxième partie ? Pouvons-nous accepter plus un ? C'est potentiellement une façon de procéder. Encore une fois, comme vous le voyez, cela ne fonctionne pas vraiment. Nous trouvons maintenant plusieurs éléments avec le bouton roll. Nous ne pouvons pas simplement dire, oh oui, nous allons découvrir ce que c'est. Nous devons probablement proposer une sorte d'option ici. Nous devons donc demander , d'accord, nous voulons trouver le bouton, mais il existe une autre propriété appelée nom qui nous permet de trouver spécifiquement le bouton qui porte le nom. Hein ? Voici donc comment je règle le problème. Nous avons terminé l'écran, nous avons fait l'obtention par rouleau, nous avons recherché le bouton roll, puis nous voulons que le bouton portant le nom de plus un soit le bouton que nous recherchions. Hein ? C'est ainsi que nous accédons au bouton plus. Je vais vous montrer une autre méthode pour le faire et nous pouvons rechercher le bouton moins. Donc, conduits plus bouton, c'est égal à ça. Ensuite, nous voulons nous assurer que cela figure dans le document. Nous allons le dire, voilà, afin de savoir si cela fonctionne correctement. Très bien, maintenant nous allons écrire un autre test et nous allons juste vérifier la présence du bouton de soustraction Tester le rendu permet de soustraire le bouton. Nous allons écrire notre test. Nous allons faire le rendu de l'application, soustrayant le bouton égal à l'écran au lieu de l'obtenir par rôle Nous allons maintenant utiliser get by text. Nous allons donc recevoir par texto, puis il y aura moins un. Nous allons enregistrer cela. Ensuite, nous allons stocker l'assertion. Attendez-vous à ce que le bouton de soustraction figure dans le document. C'est ce que nous appelons ça. Si nous l'avons bien fait, nos tests sont réussis. Il existe deux manières de rechercher réellement un élément. Je veux dire, il y a plus de deux méthodes, mais les deux méthodes que nous examinons actuellement sont d'utiliser get by role et d'utiliser get by text. Étonnamment, même si obtenir par texto est la plus concise des deux options, l' par rôle est en fait préférée, car obtenir par rôle , vous pouvez en quelque sorte être un peu plus sûr d'obtenir exactement ce que vous voulez Supposons que nous ayons un titre écrit moins un. Ce point d'écran d'obtention par texte obtiendrait en fait ces deux éléments et déclencherait une erreur, car obtenir par texte ne fait que rechercher le texte. Get by roll, en revanche, est un peu plus nuancé, un peu plus précis. En utilisant le rôle du bouton et le nom ou une autre option, nous pouvons être sûrs ou du moins avec un niveau de certitude plus élevé que nous obtenons le bon élément que nous recherchons 12. Conclusion: En conclusion, nous avons parlé de beaucoup de choses dans cette vidéo, des origines de React à la création de votre propre compteur. J'adorerais voir comment vous avez décidé de mettre en œuvre votre compteur. Veuillez donc laisser un lien vers votre code ou le site hébergé dans l'onglet Projets et ressources afin que je puisse voir tout le travail que vous avez accompli. Je lis tous les commentaires et toutes les critiques et je regarde chaque proposition de projet. Donc, si vous avez des questions, hésitez pas à laisser un commentaire dans la section d'évaluation ci-dessous ou à me contacter directement. Consultez ma page de profil pour plus d'informations à ce sujet. Si vous souhaitez en savoir plus sur le codage, regardez les autres vidéos que j'ai également sur ma page de profil. J'ai également des vidéos sur HTML et CSS disponibles sur ma chaîne Youtube et mon site Web. Si vous souhaitez les apprendre, jetez-y coup d'œil et je verrai dans le prochain.