Réagir à la pagination J avec des données d'API

1. Introduction: Bienvenue dans ce cours React JS. Mon nom est oui, puis chaque Audrey et les algorithmes Dr. Dans ce cours. Dans ce cours, vous allez apprendre comment créer notre application React et comment ajouter pagination React avec des données API réelles. Comme vous pouvez le constater, c' est le projet que vous allez construire dans ce cours. Nous obtenons donc ici la liste des informations d'un point de terminaison d'API et nous affichons nos données API sous forme de carte. Et dès que je survole la carte, on verra une petite bordure dans le coin gauche. Et dès que je clique sur celui-ci, vais m'étendre. Ensuite, nous pouvons voir le reste des informations. Dans ce cours. Vous apprenez non seulement la pagination React, vous voudrez également apprendre à ajouter pliables affichés dans les chaises de réacteur. Et si je clique dessus, on va s' ouvrir et ensuite ça va aussi marquer, c'est ainsi que nous implémentons l'effondrement réacté de Shun. Et puis, en bas, vous pouvez voir cette pagination React ici. Actuellement, je suis dans le cas numéro un, il y a une raison pour laquelle et celui-ci est marqué de couleur blanche. Et si je clique sur le test numéro deux, ces deux-là vont se mettre en évidence. Et puis ce bouton précédent sera activé s'il y a numéro un, puis le bouton précédent est désactivé car avant un numéro de base, nous n' avons aucun numéro de base. Et en cliquant sur le bouton suivant, je peux également déplacer une base vers une autre base et l'espace E que nous affichons, nous affichons et cette liste de données. Et ensuite, si chaque base dispose de données de remboursement que nous obtenons à partir de notre point de terminaison API. Ensuite, nous pouvons simplement le montrer vous pouvez simplement filtrer nos données à l'aide de notre pagination. J'ai donc essayé d'ajouter toutes sortes de fonctionnalités de pagination que nous voyons normalement dans la réplication de préférences. Donc, si je suis allé à la dernière base, alors le bouton suivant va décibels. Et puis nous avons également approuvé, cela signifie que c'est garder le numéro de base. Apparemment, j'ai ajouté ce numéro cinq. Donc, si je clique dessus, ça va échapper à ce numéro cinq. L'ajustement du type va se conserver en même temps. Maintenant, nous sommes dans le cas numéro trois, et si je clique dessus, nous sommes maintenant au verset numéro huit. Donc, vous pouvez certainement le changer comme vous le souhaitez. Ainsi, au lieu de cinq, vous pouvez afficher pour voir, et vous pouvez également modifier dynamiquement la couleur, couleur d' arrière-plan et les conceptions de pagination. J'ai fait de mon mieux pour expliquer chaque ligne de code de ce projet afin que vous compreniez tout et comment déployer un projet React JS sur Netlify afin que les gens du monde entier world peut accéder à votre application. Nous allons donc utiliser une plateforme Cloud pour déployer notre projet, appelé Netlify. Vous pouvez voir que cette URL, actuellement, ce projet doit exister sur cette URL dans Netlify. Vous voudrez également apprendre comment déployer ce projet React JS. Je vous encouragerai donc vivement à vous inscrire à ce cours. On se voit dans la conférence. 2. Créer un projet React: Bienvenue dans cette conférence. Dans cette partie, nous allons commencer à travailler sur notre projet React JS. Pour cela, avant tout, nous devrons créer notre projet React JS. Comme vous pouvez le constater, j'ai ouvert mon code Visual Studio, mais actuellement je n'ai rien ici car je n'ai pas encore installé le projet. Par conséquent, à l'automne du répertoire, nous devons importer notre dossier. Tout d'abord, ce que vous devez faire, il vous suffit de créer un dossier. Par exemple, je vais créer mon dossier dans ce répertoire de dossiers, par exemple, la réactivité des vidéos, un problème avec les données APA. Et là, je vais créer un nouveau dossier. Et je vais dire pagination React. Pagination React. Et à l'intérieur de ce dossier, vous devrez installer votre projet. Maintenant, ce que je vais faire, je vais importer rapidement ce projet dans mon Visual Studio Code. Vous pouvez donc voir si vous cliquez sur cette icône, il vous affichera ce répertoire Open Folder. Cliquez donc sur Ouvrir le dossier. Et puis je vais voir cette vidéo, puis cet automne, et c'est le nom du dossier que j'ai créé. Je vais le sélectionner. Et voilà. Encore une fois, nous n'avons rien à l'intérieur de ce dossier. Comme vous pouvez le constater, c'est juste un dossier vide. Nous n'avons rien à l'intérieur de ce dossier. Nous allons installer notre projet JS réactif. C'est ainsi que nous allons travailler. Très bien ? Il vous suffit de créer un dossier n'importe où dans vos laboratoires, votre ordinateur portable ou votre ordinateur de bureau. Ensuite, importez simplement le dossier ici et ouvrez maintenant votre terminal. Et nous allons installer notre projet React JS. Donc, ce que j'ai besoin, je vais devoir écrire ici, je vais dire NP x puis Create React app. Ok, donc une chose que vous devez écrire les sondages de paragraphes, donc NPH, application React. Et puis je vais dire que le nom est client. L'exemple du sprint. Vous pouvez donner n'importe quel nom, quel que soit le nom que vous allez donner, votre projet sera sous ce nom. Par exemple, nous sommes en tête, nous travaillons sur la pagination. pagination est donc normalement utilisée du côté client, qui est le recto et le côté. Toujours la raison pour laquelle j'écris côté client. Ainsi, NP x Create React app client. Et maintenant, il va installer notre projet dans ce répertoire de dossiers. Cela prendra quelques minutes en fonction de la vitesse de votre Internet. Et vous pouvez voir que le dossier a été créé et que package.json a été créé. Et cela va créer quelques autres éléments, quelques projets supplémentaires. En attendant, je peux vous montrer quelques éléments qui seront nécessaires à notre projet. Tout d'abord, je vais vous montrer comment utiliser bootstrap dans notre projet. Donc parce que je vais utiliser un arrêt bouddhiste. Je peux donc dire bouddhiste off. Et c'est nécessaire pour nous, donc je vais être d'accord là-dessus. C'est donc le site officiel, souvent du personnel bouddhiste. Et à partir de là, vous pouvez lire beaucoup de choses. Vous pouvez simplement installer leur package NPM. Ils l'ont, mais le moyen le plus simple est d'utiliser le lien. Vous pouvez donc voir l'introduction, puis le démarrage rapide. Il y a quelques liens dont nous aurons besoin. Par exemple, celui-ci. Nous pouvons simplement ajouter celui-ci ici. Ils ont donc la propriété CSS et d'autres propriétés ici. Par exemple, permettez-moi de vérifier, de télécharger le code source. Ils peuvent donc avoir un lien appelé « Commencer ». Nous pouvons donc également le faire à partir d' ici. Ce n'est pas un gros problème ici. Je pense que nous devrons copier celui-ci et ensuite ces deux fichiers que nous devrons installer. Ok, pour que nous puissions obtenir le nôtre, nous pouvons commencer notre bouddhiste à partir d'ici. Et nous allons installer un paquet supplémentaire, appelé pagination NPM React. C'est ainsi que nous allons utiliser notre pagination. Alors, réagissez, pigeonnez-le. Il s'agit du nom du package. Et laissez-moi voir comment ça se passe maintenant. Donc c'est toujours le cas, cela prendra quelques instants. Et c'est notre package de pagination que nous utiliserons. C'est l'option que nous avons cette option et vous pouvez simplement lire leur documentation si vous le souhaitez, vous pouvez simplement de bonnes idées sur leur fonctionnalité sont les options comment utiliser celle-ci ? Et ils ont quelques preuves que nous utiliserons évidemment dans notre projet. Et je vais vous montrer comment le faire. Dans quelle mesure cette classe de rupture signifie-t-elle bien, avec des chaînes sur la peste. Et ils ont beaucoup de choses. Vous pouvez donc simplement jouer ici et ensuite vous pouvez simplement obtenir des idées. Et de toute évidence, je vais vous montrer comment mettre en œuvre celle-ci. Et nous allons installer, nous installerons l'éclairage. De quoi d'autre avons-nous besoin ? Nous aurons besoin de notre icône rouge si médiocre qu'ils aient un autre paquet appelé icônes NPM React. Nous utiliserons les icônes React de ce package NPM, des icônes rouges. Et nous en aurons besoin, nous aurons besoin de nos données API. Voici donc les icônes rouges que nous devons installer dans notre projet. Ensuite, nous avons besoin d'une autre chose qui est notre APA. Nous utiliserons donc notre API publique afin que vous puissiez apprendre à utiliser les données APA. Je vais donc dire un espace réservé JSON. C'est donc le site Web d'où nous obtiendrons notre lien APA gratuit. Et ils ont beaucoup d'options. Par exemple, supposons que je vais sélectionner cet article. Nous obtiendrons donc notre APA en données à partir d'ici. Nous avons le titre, le corps et la pièce d'identité. Nous allons copier ce lien à partir de ce lien. Très bien, il a donc installé des modules Node et quelques choses vont s'ajouter ici. Je vais donc vous montrer celui-là aussi. Et cela pourrait être utile. Ok, donc nous sommes sur le point de finir et je pense que nous avons tous les paquets nécessaires et je vais vous montrer comment l'installer et comment l'activer. Ok, donc pour collecter notre icône de taux il y a un site Web d'icônes réactées. Je pense que c'est leur page d'accueil. Nous y voilà. Non, ce n'est pas la page d'accueil. Ils ont un site Web d' où nous pouvons nous rendre atomiquement ici, d'où nous pouvons obtenir celui-ci, pas celui-ci. Je peux dire des icônes React. Icônes ici. C'est donc le site officiel des icônes React. Une fois que nous aurons installé notre icône de réacteur dans notre projet, nous aurons accès à toutes ces icônes. Ensuite, nous pourrons utiliser ce que nous voulons. Il suffit d'importer le nom. Et ensuite, cela va fonctionner dans notre projet. Il est donc très facile à utiliser. Cela ne prend que quelques secondes. Très bien, donc notre projet est prêt et il indique quelques instructions sur la façon de faire fonctionner le projet. Nous pouvons donc voir qu'il s'agit de notre répertoire de dossiers. Nous avons cet AB n'a pas de chaises et tous les autres dossiers. Je vais d'abord diriger ce projet. Nous devons donc passer à ce répertoire client. Pour ce faire, nous devons écrire ici le client CD car notre projet est installé dans ce dossier client. Nous devons donc nous trouver dans ce dossier client pour pouvoir exécuter notre projet. Donc, pour exécuter notre projet, nous devons écrire npm start. Et maintenant, il va exécuter notre projet et nous pourrons le voir dans notre navigateur. Laissez-moi vous montrer si ça va marcher. Nous y voilà. C'est notre projet. J'espère que cela va marcher parce qu'il devrait fonctionner. Nous ne nous sommes pas trompés. Et nous pouvons également voir la mise à jour et si vous obtenez des erreurs, elle sera affichée ici. Et vous pourrez également le voir dans le navigateur. Je ne sais pas pourquoi cela prend autant de temps. En attendant, je peux vous donner des instructions sur le dossier ou le répertoire ici. En gros, nous travaillerons principalement sous ce répertoire source où nous allons créer notre composant et tout le fichier. Vous pouvez voir qu' il s'agit de notre fichier principal qui contient toutes les données en ce moment, mais nous allons le modifier. Et puis nous avons cette application point CSS. Et c'est l'annuaire public. Et dans ce répertoire public, nous avons notre index.html. Et nous exécutons spécifiquement, lorsque nous exécutons notre projet React sur n'importe quel type de navigateur, il semble que la concurrence soit couronnée de succès. Nous devrions donc maintenant pouvoir voir notre projet. Nous y voilà. C'est notre projet d' acclamations réacteurs. Nous n'avons rien actuellement, donc nous devrons y travailler. Et je vais arrêter cette vidéo ici, et nous continuerons avec la prochaine conférence. 3. Installer les paquets React: Bienvenue encore une fois. Dans cette partie, nous commencerons travailler sur notre projet React JS. Dans la dernière partie, nous avons pu exécuter notre projet, puis nous avons installé notre React JS sur notre ordinateur. Donc, d'abord et avant tout dans cette partie, je vais installer tous les paquets nécessaires pour que nous puissions continuer à travailler sur notre projet. Donc, pour ce faire, cela signifie que j' ai volé ce 1 premier. Nous devrons donc installer l'icône React. Il suffit donc de cliquer sur ces icônes rouges, de cliquer ici, puis d'ouvrir votre terminal et assurer que vous êtes dans votre répertoire client. Parce que souvenez-vous d'une chose, de tous vos fichiers, de tous vos paquets partagés et de votre dossier dans ce dossier client ou de n'importe quel nom de dossier que vous allez donner. Vous devez donc toujours être dans ce dossier où vous avez installé, vous allez réagir au projet JS et non votre répertoire de dossier principal. D'accord ? Donc, pour le faire rapidement, je vais passer à ce répertoire client. Alors client acide et ensuite je vais coller npm, je réagis PyCon, puis il va s'installer. Et cela peut prendre quelques fois. Ok, donc il a été installé, je suppose. Laissez-moi vous montrer quelque chose. Donc si nous ouvrons notre, si nous ouvrons notre package.json, nous pourrons voir que l'icône rouge a été ajoutée ici. Installons maintenant React Busy-ness. Ce que cela va faire est nécessaire pour notre pagination. Maintenant, je suis déjà dans ce répertoire, donc je vais le coller et ensuite je vais installer celui-ci. Et ça va ajouter ici, réagir en paginant. Très bien, nous avons donc installé deux paquets requis. Je pense que nous n'aurons plus besoin de paquets, mais pour celui-ci, nous utiliserons simplement ce lien normal. Avant cela, permettez-moi modifier celui-ci afin que nous puissions comprendre que nos changements vont l'ajouter à nos projets. Donc maintenant tout notre code à l'intérieur de ce app.js. Donc, ce que je vais faire, je vais tout sélectionner, puis je vais supprimer parce que je veux ça, vous savez, tout, chaque ligne de code que je vais écrire ici, il y a une raison que j'ai supprimé tout le code généré automatiquement qui a été créé par React js. Tout d'abord, nous devons importer notre React depuis notre React. Ensuite, je vais ajouter une fonction flèche. Je vais donc dire application console. N'oubliez donc pas que vous devez ajouter votre nom f ici. Sinon, cela va vous donner une erreur. Cela ne signifie pas que vous ne pouvez pas modifier le nom de votre composant. Vous pouvez certainement le faire, mais pour cela, vous devrez apporter quelques changements. Je vais donc vous montrer l'exportation par défaut. Ensuite, je vais ajouter cette application. Donc, ce que je veux dire par là, donc si vous ouvrez votre index TO jaws, index.js et voici votre dossier d'application est votre composant F est connecté et ce index.js et fonctionne essentiellement lorsque nous démarrons notre Projets React JS. Il y a donc une raison pour laquelle vous vous assurez que le nom de ce composant est f, ou si vous apportez des modifications ici, assurez-vous d'avoir ajouté celui-ci. Et c'est ainsi que nous travaillons sur ces réacteurs en ce moment. Ici, nous avons dû écrire notre f. Donc, pour cela, je dois dire retour. Et à l'intérieur de ce retour. Et nous devons ajouter notre fragment de points, nous pouvons dire React car nous pourrions ajouter plusieurs enfants ici. Il y a donc une raison pour laquelle je veux ajouter un fragment de points React ici. Pour l'instant, donc pour l'instant, juste pour un exemple et un but de test, permettez-moi d'en ajouter une, permettez-moi d'ajouter une chose ici. Laissez-moi en ajouter quelques-uns. Juste pour un exemple, vous pouvez dire bonjour, React. Et je vais le sauver. Et maintenant, si nous l' exécutons, nous pouvons voir Hello React. Il est maintenant temps de tester si rapidement notre produit de talon bouddhiste. Je vais devoir ajouter ce lien à partir ici car ce lien nous donnera la partie CSS de ce truc bouddhiste plus de cette classe d'art bouddhiste. Je vais donc copier celui-ci pour ajouter un poêle bouddhiste et ouvrir ce index.html sous ce répertoire public, cliquer dessus. Et puis ici, dans votre tête de celui-ci, vous devez ajouter celui-ci. Et il faut ajouter que ça devrait marcher ici. Et puis il y a deux fichiers JavaScript dont vous pourriez avoir besoin en fonction de la fonctionnalité de Buddhist ou que vous utilisez. Je vais donc juste le copier. Vous ne vous obligez pas à créer de problèmes. Nous obtiendrons plutôt des avantages si cela est nécessaire. Très bien, donc ce sont les deux liens, trois liens que vous pouvez obtenir de bonnes choses bouddhistes et vous allez simplement ajouter à vos Il va activer les fonctionnalités bouddhistes dans votre application React. Donc, juste pour un exemple de test, permettez-moi de définir un nom de classe ici. Et puis je vais dire carte. La voiture est donc bouddhiste ou propriété. Si nos affaires bouddhistes fonctionnent dans notre projet et que nous devrions pouvoir voir une carte. On y va, on peut voir notre carte. Cela signifie que nos affaires bouddhistes fonctionnent ici. Cool. Alors maintenant, que pouvons-nous faire ? Nous pouvons créer un fichier de composants ici. À l'intérieur de cette composante, nous allons travailler notre projet. Nous pouvons dire, nous pouvons dire composante. Ils peuvent dire composant et ce composant, nous pouvons créer nos différents fichiers et dossiers. Bon, donc nous pouvons, tout d' abord , créer un fichier ici. Créons un fichier ici. Et nous pouvons dire que nous pouvons dire, par exemple, que nous pouvons peut-être dire des données. Ou nous pouvons dire : Que voulons-nous construire ? Nous voulons essentiellement construire une composante construite, construire notre système éducatif. Mais pour la pagination, nous allons créer un dossier séparé pour celui-ci, pour ces données, Nous en avons un autre. Disons que nous pouvons le dire ici. Nous pouvons dire ici des informations. Informations. Ces informations contiendront nos informations principales sur la conservation de nos données API. Nous pouvons donc voir l'inflammation point us. Et maintenant, je vais activer celle-ci. Cela va m'aider. C'est un peu un extrait que j'utilise la série Fourier. Vous pouvez donc simplement créer ici un composant qui va être une inflammation. Et ensuite, nous pouvons simplement le faire. D'accord ? Maintenant, si je sais ce que je dois faire, ces informations conserveront toute notre part ici. Ou si je le fais ici , je vais faire partie de celui-ci. Je vais donc importer ce composant inflammatoire qui contiendra l'ensemble de nos données. Et ensuite, je peux simplement appeler cette information ici. Et nous pouvons voir ces informations, nous pouvons voir ce texte. Et maintenant, dans ces informations, nous obtiendrons toutes nos données API et nous ajouterons également notre pagination. Donc, quel que soit le composant que vous créez, assurez-vous qu'il est connecté à votre fichier app.js, qui est connecté au index.js. Et c'est ainsi que ça va fonctionner. Maintenant, nous n'avons pas besoin de ces deux fichiers. Ok, donc si je le veux, je peux aussi faire la même chose ici, mais je veux le séparer pour que vous puissiez apprendre à créer un composant et comment nous connecter les uns les autres. Donc, d'abord ici, nous devons, d'accord, alors laissez-moi d'abord ajouter une option décente ici. Nous n'avons pas besoin de ces informations ici. Donc, à l'intérieur de cette div, je vais créer un nom de classe. Et ici, je peux dire conteneur. conteneur. Et ce conteneur, conteneur signifie, d'accord, donc nous n' avons pas de données ici. Nous devons donc ajouter H1, je peux dire « Obtenir des informations ». Et voilà. Donc, si nous ajoutons un conteneur, il va commencer à partir du milieu de tout cela. C'est donc ainsi que la plupart des vagues dites ont ces caractéristiques. Et il y a une raison pour laquelle j'utilise ce conteneur. Maintenant, à l'intérieur de ce conteneur, nous pouvons créer notre nous pouvons en ajouter deux qui vont commencer à ajouter nos données. Pour cela, je vais d'abord créer un fichier CSS ici. Nous pouvons dire information cependant, CSA, Inflammation point css. Et puis je vais dire « Import ». Et je vais le sauvegarder ici car notre inflammation est liée à celle-ci. Je vais maintenant créer un autre dossier ici. Et à l'intérieur de ce dossier, dans ce répertoire div, je vais créer un nom de classe qui contiendra toutes nos données. Et ici, nous pouvons dire dans le design. Il s'agit donc de notre conception de remplissage et de ces informations, à l'intérieur de ce design d'info, nous aurons notre ACE to Tech, par exemple, sept. Et je peux envoyer ces informations. Je peux dire une liste d' informations, par exemple. Et maintenant, nous pouvons faire du design ici. Donc, en utilisant le côté gauche, mais il devrait être au centre, mais il ne devrait pas être au centre. Je vais donc le faire. Je peux dire, alors je peux dire A7 et ensuite je peux dire, accord, donc ça devrait être A6, A7. Il n'y a pas de particule à sept. Je peux donc dire qu'il y a sept ici. Donc, A6. Et maintenant, je peux dire aligner le texte, centre et la marge, le haut et la marge tolérant 50 pixels. Vous y voilà. Voici notre liste d' informations utilisant le centre et nous avons également une certaine marge d'ici. Cool. Maintenant, tout va bien. Et après cela, ce conteneur ici, nous devrons créer un autre dossier ou un autre fichier où nous afficherons toutes nos données. Et une autre chose que nous devons ajouter à notre APA, alors que puis-je faire pour cela ? Je peux simplement créer notre variable. On peut dire const, URL. Et puis je peux simplement le faire ici. Très bien, donc à partir de cette URL, nous obtiendrons nos données JSON et nous les afficherons dans notre application. Je vais donc arrêter cette vidéo ici et nous continuerons à partir de la prochaine conférence. 4. Obtenir des données API: Bienvenue encore une fois. Dans cette partie, nous allons essayer d'obtenir nos données et nous tenterons de les afficher dans notre application. Nous avons pu ajouter des informations sur cette liste ici. Et maintenant, dans cette partie, je vais ajouter nos utilisateurs à accrocher. Cela nous aidera à obtenir nos données à partir de notre API. Pour cela, nous devons ajouter nos utilisations qui créent et utiliser des crochets d'effets ou qui les utilisent. Nous pouvons dire pour cela, nous l'utilisons. Utilise donc Ted Hope, puis utilise l'effet hoop, puis utilise l'effet Hooke. Et ici, je vais tellement vite que je vais créer. Au lieu de cela, nous pouvons dire const et vous pouvez dire que les données seront des données définies. Ensuite, nous pourrons ajouter de la dette des usages et ce sera une zone vide car nous obtiendrons nos données et nous fixerons notre liste de tableaux à l'intérieur de ce tableau. Il utilise un crochet. Très bien, je vais donc créer un nouveau dossier. Je vais dire beaucoup de const. Ce serait beaucoup d'API. Ce serait beaucoup de données du FBI. Vous pouvez lui donner n'importe quel nom, ce que vous voulez. Vous pouvez lui donner n'importe quel nom, ce que vous voulez. Il ne s'agit donc que d'un nom de fonction. Et dans cette fonction, je vais ajouter Fess. Qu'est-ce qui est rapide ? Fondamentalement, fess est un préconstruit avec le navigateur. Il nous aide à obtenir nos données à partir d' un serveur ou de tout type d'API. Mais si vous le souhaitez, vous pouvez également utiliser des zéros, qui est n, The Becker. Mais pour moi, j'adore utiliser celle-ci et elle va tout faire pour nous. Par conséquent, en phase et à partir de l'endroit où nous voulons obtenir nos données, nous voulons obtenir nos données à partir de cette URL, qui est cette URL. Et vous pouvez voir qu'il s' agit du point de terminaison de l'API. Principalement, nous disons quel que soit le point de terminaison d' API que vous avez, vous pouvez simplement l'utiliser ici et ensuite passer un paramètre. Donc on va être des méthodes normalement, c'est par défaut, la méthode est bonne. Mais si vous le souhaitez, vous pouvez également le mentionner et obtenir quatre autres propriétés, quatre autres propriétés. Par exemple, GET, post, PUT et supprime dont vous aurez besoin si vous effectuez une opération de suppression ou d'autres choses, alors nous devons convertir nos données au format JSON. Donc, parce que par défaut ce visage ne peut pas convertir nos données JSON, alors nous pouvons dire que la réponse sera un risque lié au point json. Qu'est-ce que cela signifie ? Et qu'est-ce qu'on dit ici ? Nous avons dit ici, quelle que soit la réponse que vous receviez de cette URL de notre point de terminaison API, il suffit de la convertir au format adjacent. Ensuite, nous sommes seuls à pouvoir afficher nos données dans notre application. Très bien, maintenant je peux en ajouter un autre qu'ici. Et puis je peux dire, si vous l'avez fait, si vous l'avez converti au format JSON, nous pourrons obtenir notre résultat. Nous pouvons dire résultat. Et ensuite, nous pouvons voir ici. On peut aussi deviner l'utérus. S'il y a de l'euro, on peut penser que c'est rare. Et puis on peut simplement dire que le journal de points de console va être cette erreur. Et je vais ajouter celui-là. Donc, notre résultat, je veux dire que nos données se trouvent maintenant à l'intérieur de ce résultat. Nous devons maintenant définir ce résultat dans les données de l'ensemble, ce qui est à nos utilisateurs de parler. Nous pouvons donc dire que nous le sommes si vous le souhaitez, vous pouvez également ajouter une condition ici. Donc, si nous obtenons notre résultat, cela signifie que si nous obtenons le résultat, nous seuls pouvons définir nos données ici. Et puis le résultat sera à l'intérieur de celui-ci. Maintenant, nos utilisateurs ont défendu l'ensemble des données que nous obtiendrons de cette API. Laissez-moi formater le code. Très bien, nous devons maintenant ajouter notre effet américain pour pouvoir dire utiliser Effect. Et puis, ici, nous pourrons ajouter celui-ci. Et ici, nous devons ajouter un défendeur est l'ère de l'indépendance, car nous ne voulons rendre notre API et nos données qu'une seule fois. Si vous n'ajoutez pas cette zone de dépendance , elle va restituer la même chose encore et encore et encore. Donc, nous le sommes principalement, nous le disons vraiment ici. Donc, quelles que soient les données que vous obtiendrez de cette URL d'API elles sont simplement affectées ou simplement sur le chargement, au moins, au moins une fois. Vous n'avez pas besoin de faire la même chose encore et encore. Maintenant, je vais copier cette fonction et je vais la coller ici. Cool. Maintenant, nous avons celui-ci pour que nos données soient prêtes, mais nous ne pourrons pas voir quoi que ce soit parce que nous n'avons pas utilisé nos données. Laissez-moi vous expliquer encore une fois. Nous avons donc créé un utilisateur à accrocher et nous obtenons nos données API à l'aide de cette URL de phase. Et ensuite, nous disons simplement que si nous obtenons nos données, il suffit d'ajouter ces données à nos utilisateurs pour le faire. Nous pouvons désormais accéder à nos données à l'aide de ces données. Pour ce faire, par exemple, je peux ajouter que je peux simplement l'essayer. Vous pouvez dire, vous pouvez dire, je suppose que c'est juste un point stringify. Et puis ces données, elles nous donneront le format JSON de nos données uniquement à des fins de test au cas où nous les obtiendrons. Nous pouvons donc voir que nous avons obtenu toutes nos données de cette API et les trouver, mais ce n'est pas la façon de les montrer de toute évidence. Et nous allons certainement formater notre code et nous ajouterons l'absorption des couleurs ou d'autres choses que nous ferons ici. Ne vous inquiétez pas, cela signifie que nous sommes en mesure d'obtenir nos données. Dans la partie suivante, nous allons afficher nos données dans notre format de conception et nous les rendrons plus lisibles par l'homme. Je vais donc vous voir lors de la prochaine conférence. Au revoir. 5. Afficher les données API dans une carte: Bonjour, bienvenue encore une fois. Dans cette partie, nous allons concevoir nos données et nous tenterons de les afficher sur une carte. Alors, comment pouvons-nous le faire ? Pour cela ? Je veux supprimer celui-ci parce que nous n'avons plus besoin de cette chose. Maintenant, à partir d'ici, nous pouvons ajouter notre partie descendre, descendre. Nous voyons maintenant que nous n' avons rien dans notre liste. Alors, comment ajouter notre design ici ? Donc avant tout, ce que je veux avoir, je veux créer une première. Nous devons parcourir les données que nous recevons. Nous allons donc récupérer nos données d'ici. Je peux dire que la carte de points delta, vous devez cartographier nos données et je peux dire d. Et vous pouvez ajouter n'importe quel nom, ce que vous voulez. Ensuite, je vais ajouter la position de l'index ici. Et à partir de là, nous pouvons le faire. Maintenant. Je peux voir cette div, puis je peux aussi voir ces tiff. Donc les deux sont les mêmes ici et maintenant, je vais ajouter un nom de classe. Et le nom de classe, je peux dire carte. Et juste pour un exemple, je vais ajouter, je vais ajouter un titre. Je peux dire titre. Et voyons ce que nous pouvons voir ici ? Nous pouvons donc voir cela serré ici et nous pouvons également voir ce chariot. Mais cela a l'air vraiment mauvais et nous devons le réparer afin que nous puissions ajouter une option de conception ici. Il y a donc deux façons de le faire. Soit nous pouvons simplement créer un nom de classe ici, puis nous pouvons l'appeler dans ce fichier CSS ou un autre s'il y a une propriété dans React qui s'appelle un style. Et puis je peux simplement ajouter une double accolade bouclée. Et si je le veux, je peux ajouter de la marge. Et ensuite, cette marge sera de dix pixels. Maintenant, nous pouvons également voir cette marge, dix pixels, puis nous pouvons également ajouter du rembourrage ici. Vous pouvez effectuer presque toutes les propriétés CSS ici. On peut dire dix pixels. Ici va ajouter un objectif de rembourrage. Vous pouvez donc ajouter n'importe quel design CSS dans cette ligne. Mais si vous utilisiez simplement des choses simples, design pointu, vous pouvez le faire. Mais si vous utilisez beaucoup de choses, vous pouvez simplement séparer celle-ci ici. Je peux donc simplement dire que le design de carte ne l'est pas, ce n'est pas une classe distincte que je vais créer. Et je vais l'ajouter ici. Maintenant, si je regarde le navigateur, vous pouvez voir que nous n' avons pas de design maintenant. Je peux donc dire une marge de dix pixels, puis le rembourrage sera de cinq pixels. Nous avons donc ce titre, nous avons cette literie et nous avons cette marge. Nous pouvons maintenant remplacer notre titre par ces données, par ce titre et ce corps. Comment puis-je le faire ? Pour ce faire, nous pouvons ajouter, au lieu de ce titre, nous pouvons simplement dire ce titre et rappeler que vous devez écrire le même nom. en va de même pour ce qui est de l'APA. Ce sera donc un titre ici, Rico. Ok, donc le titre est plus défini parce que nos données se trouvent dans celle-ci, donc nous devons écrire dy dt ou title. Nous pouvons maintenant voir notre titre à partir de notre API. Comme c'est cool. Une chose que je veux le personnaliser ici au lieu de cela est que j'en suis une. Je vais en faire un six pour qu'il soit plus petit et beau. Cool, c'est vraiment génial. Et une autre chose que nous pouvons faire ici, que pouvons-nous faire ici ? Nous pouvons ajouter une balise p ici pour le corps, je veux dire, pour le texte principal. Et il y en a un que je peux dire, quelle est la propriété, quel est le nom de la propriété ? Le nom propre est body. Je peux dire ce corps, sa fille, son corps. Et nous y voilà. Maintenant que nous avons obtenu notre titre, nous avons obtenu notre description de notre API. Cela signifie que si vous le souhaitez, vous pouvez également récupérer cet identifiant. Ce n'est pas un problème. Vous pouvez obtenir n'importe quoi de l'API, de l'API, quel que soit l'aliment qu'ils ont ajouté un identifiant de point d. Maintenant, nous pouvons voir notre identifiant ici. Voir Heidi, 123456789. cool, mais nous n'avons pas besoin d'avoir cette carte d'identité ici. Maintenant, c'est la seule façon de concevoir votre carte pour ajouter des données API à votre projet. Maintenant, il existe une autre façon de le faire et de quoi s'agit-il ? Et maintenant, nous faisons tout ce qui se trouve dans ce dossier, qui n'est pas bon pour nos projets. Par exemple, vous travaillez dans un grand projet, alors il sera difficile pour vous de gérer toutes ces choses. Pour cela, nous allons séparer cette partie de conception dans un autre fichier de composants, puis nous l'ajouterons à notre composant ici et nous l'afficherons ici. C'est le moyen le plus simple que la plupart des entreprises font. La plupart des gens le font. Et maintenant, je vais arrêter cette vidéo ici. Et je vais vous montrer lors de la prochaine conférence. 6. Afficher les données et la conception de cartes API: Bienvenue encore une fois. Dans cette partie, nous allons créer notre composant distinct pour nos données, puis nous afficherons nos informations. Comment pouvez-vous le faire actuellement, nous avons toutes nos informations ici et ça va bien, totalement bien. Mais je veux vous montrer autre chose. Je vais créer un nouveau fichier, nouveau composant appelé data, ou nous pouvons dire montrer les données comme vous voulez, puis js. Ensuite, je vais créer ce composant. Donc, affichez les données, et ces données de spectacle contiendront toutes nos informations. Je vais donc dire React dot, fragment de point à l'intérieur de ce fragment de point d'objet. Donc, ce que nous devrons faire ici, nous devrons ajouter cette partie à notre design. Vous devez donc l'ajouter ici. Alors montrez les données, je vais dire, d'accord, je suis désolé, nous n'avons pas besoin de celle-ci parce que nous avons déjà cette déf à l'intérieur de celle-ci. Je vais donc ajouter celui-ci. Cool. Nous avons donc maintenant cette carte, design de la carte, le titre et le corps. Et ici, nous n'avons rien. Maintenant, qu'en est-il du design ? Nous l'avons eu plus tôt pour celui-ci, et évidemment, cela va nous donner une erreur pour celle-ci. Maintenant, c'est dans ce composant, aucun doute que comment nous allons accéder données ici dans ce composant pour cela, nous devons passer nos accessoires. Ajoutez donc une accolade double bouclée et ajoutez le titre. Et puis ajoutez du corps. Assurez-vous que le même titre portant le même nom que que nous avons dans notre API. Ou vous pouvez également modifier la police, alors vous devrez la créer. En d'autres termes, maintenant, nous n'avons plus besoin d'avoir un titre en point, mais nous avons juste besoin de dire titre et ensuite nous avons juste besoin d'en parler, d'accord ? n'y a plus rien de changement ici. Cela va fonctionner dans cette partie. Et maintenant, nous pouvons appeler notre, nous pouvons importer notre composant show data. Nous pouvons donc dire Importer des données d'exposition. Maintenant, ces données contiennent toutes nos données. Alors, que pouvons-nous faire ? En gros, nous pouvons simplement appeler ces données. Et nous pouvons le voir ici. Voyons maintenant ce que nous pouvons voir ? Nous avons maintenant une carte 100, mais nous n'avons pas de données ici. Nous avons 100 cadets, c'est vrai. Nous avons une carte 100 car nous ne faisons que rendre ce composant, qui est ce composant. Et, mais nous n' obtenons aucune donnée car nous n'avons pas ajouté nos données ici. Comment ajouter ces données ? Nous devons donc d'abord ajouter une clé. Permettez-moi donc de vous montrer ce que signifie cette clé. Donc, si je clique avec le bouton droit de la souris et si j'ouvre ma console, vous pourrez voir elle me donne une erreur et qu'il est dit que chaque enfant d'un bail doit avoir une clé unique. Nous devons donc disposer d'une clé unique. Donc, quel type de clé nous voulons avoir, nous pouvons donc dire clé d ou id. Donc, parce que l'ID est unique, pour que vous puissiez le voir, nous pouvons utiliser cette clé. Et si je rafraîchis celui-ci, nous ne devrions plus avoir cette erreur. Vous voyez, l'euro a disparu. Nous pouvons le voir. Il y a encore une erreur. Non, ça va. Cool. Mais nous n'avons pas de données car nous ne les avons pas ajoutées. Alors maintenant, nos sondes sont des prophéties de ce titre. Nous pouvons le faire de cette façon. Nous pouvons faire ça. Nous pouvons dire que le titre, qui est notre profit, est égal à notre Indeed ou à notre titre. Donc, un titre de point. Et maintenant, il va montrer notre titre. Une autre chose est remarquable ici, c'est que ce titre indique le titre de votre composant. Donc, si vous utilisez cette façon, par exemple, si vous faisiez ce thème de cette manière, ddo title, vous n'avez pas besoin d' écrire exactement le même nom de titre d' API. Vous pouvez ajouter n'importe quel nom que vous pouvez voir. Nous pouvons dire un nouveau titre et nous assurer que vous utilisez celui-ci ici. Et puis ici aussi, ce nouveau titre et le titre ddo. Donc, c'est toujours que nous obtiendrons notre état, nous obtiendrons nos données. Alors pourquoi est-ce parce que nous disons ici acte ou ce titre et ce titre est notre titre de données API, qui correspond ici. Ok, donc si vous le faisiez de cette façon, il n'est pas nécessaire d'ajouter celui-ci. Mais il existe un autre moyen. Par exemple, vous supposez que vous avez 100 articles, 100 articles que vous recevez d'un APA. Alors allez-vous faire cette chose ? Vous allez écrire ceci une centaine de choses de cette façon. De toute évidence, ce n'est pas pour cela que nous avons une autre alternative et la solution. Donc, ce que nous allons faire, nous passerons cette liste de colonnes et ensuite nous allons utiliser un opérateur de spread et ensuite nous allons passer ce d. Comme vous le savez déjà, ce D contenait toutes nos données API. Et que disons-nous si nous avons dit être libéré ou D, cela signifie que nous allons ajouter tout ce qui se trouve dans ce composant est une sorte de chose adjacente. Maintenant, si j'ouvre React , que pouvons-nous voir ? Nous pouvons voir notre modèle corporel, nous pouvons voir notre titre. Et si vous regardez ici, ce texte est contenu dans le premier élément. Dans le premier élément de celui-ci, ce corps, et c' est le deuxième corps. Le deuxième corps est dû au fait que j'ai rencontré des changements dans le titre. OK. Donc, si je l'ai changé en titre, alors nous devrions pouvoir voir notre texte, notre titre, vous pouvez voir maintenant que nous avons notre titre, nous avons notre description. C'est ainsi que vous pouvez utiliser celui-ci. Donc maintenant, nous pouvons voir que je viens d' ajouter un mois auparavant, j'écrivais ce titre, puis égal à, que nom de titre d point de largeur de collègue. De cette façon, j'ai dû tout faire pour pouvoir le faire dans cette seule ligne au lieu d' écrire deux ou quatre fois, peut-être 100 fois, en fonction de votre conception d'API. Cool, ça a l'air bien. Maintenant, je veux avoir d'autres fonctionnalités. Par exemple, je veux afficher rapidement le titre, et dès que je clique sur ce que je veux afficher, je veux montrer l' effondrement de Sean. Ok, donc un peu d'effondrement a montré que nous voyons essentiellement dans différents types d'application. Par exemple, je peux dire comment montrer l'effondrement ici. Donc dans Google, ils ont dans cette option de réduction, d'accord, donc si je clique dessus, ça va ouvrir la fenêtre et il va afficher les détails. Si je clique dessus, que je vais me cacher, va s'ouvrir, va se cacher va s'ouvrir, va augmenter les mêmes images. Je vais vous montrer comment implémenter dans ce projet. Bon, donc nous allons le faire, nous commencerons à travailler dessus dès la prochaine conférence. Et je vais arrêter cette vidéo ici et vous voir lors de la prochaine conférence. 7. Caractéristiques de Collapse de carte: Bienvenue encore une fois. Dans cette partie, nous allons essayer d' ajouter notre effondrement de Sharon. Le fait est que je veux juste montrer ce titre sur notre carte. Dès que c'est prêt, nous cliquerons sur l'icône ou autre dans cette carte. Ensuite, nous leur montrerons tel ou tel texte détaillé afin que vous puissiez apprendre à utiliser l'effondrement de Sean dans les réacteurs. Pour ce faire, vous pouvez voir que cette partie va actuellement contenir notre section de conception. Ici. Je vais ajouter un crochet d'état utilisateur. Je vais dire utiliser un état. Ici. Je dois définir l'état. Je peux donc dire que const va être booléen à la place. Je peux, je peux dire Const. Le spectacle va être défini pour que vous puissiez donner n'importe quel nom que vous voulez. Et il va être utilisé comme mort. Et au départ, elle va être fausse. D'accord ? Et au départ, elle va être fausse. Maintenant, le fait est que lorsque l'utilisateur clique sur cette carte, vous pouvez le faire de plusieurs façons. Par exemple, nous allons simplement cliquer sur le panier ou ajouter l'icône ici. Ou vous pouvez faire d'autres choses. Je vais donc le faire de cette façon. Donc, si c'est faux , nous ne voulons pas afficher ce corps de texte. Si c'est vrai, nous ne voulons que montrer ce corps de textes. Alors, comment pouvons-nous faire celui-ci ? Nous pouvons donc le faire de cette façon. Nous pouvons simplement dire, d'accord, donc nous pouvons simplement dire, par exemple, si cette émission est vraie, si cette émission est vraie, alors nous ne ferons que montrer notre technologie corporelle. Nous ne ferons que montrer des informations sur notre corps. Bon, je vais formater celui-ci. Nous pouvons donc passer cette opération finale ainsi que nous pouvons également passer notre opérateur ternaire. Maintenant, nous n'avons pas ces informations détaillées ici parce que la déclaration est fausse et nous le sommes. Nous avons donc dit que si c'était vrai , nous seuls pouvons le montrer. Permettez-moi de changer cela vrai ou faux en vrai. Ensuite, nous devrions pouvoir voir celui-ci. C'est le corps des textes. Qu'est-ce que je veux dire par tunnel d'opérateur ternaire ? Votre portrait est quelque chose comme ça. Si c'est vrai , nous voulons montrer que celui-ci rentre. Nous ne voulons rien montrer qui sera nul, d'accord ? Cela va se montrer, et si je dois l'ajouter faux. Et puis nous pourrons le voir à nouveau ici. C'est ce qu'on appelle l'opérateur ternaire. Donc, fondamentalement, vous pouvez utiliser l'opérateur ternaire lorsque vous avez deux conditions. Par exemple, si c'est vrai, vous voulez montrer quelque chose ou montrer quelque chose. Dans ce cas, vous pouvez utiliser un opérateur ternaire. Sinon, vous pouvez également utiliser l'opérateur final sera de la même manière. Par exemple, si je veux dire, c'est faux, si je voulais montrer ce Steadman ici. Donc maintenant, nous pouvons voir que c' est faux est faux parce que la première condition n'est pas vraie parce que celle-ci est fausse maintenant, et si je dis vrai, alors elle va afficher la balise body, le contenu, contenu principal. C'est comme ça que fonctionne cet opérateur ternaire. Donc pour celui-là, je n'utiliserai que, d'accord ? Je n'utiliserai que cet opérateur AND, mais vous pouvez certainement le faire de cette façon. Mais si vous ne voulez montrer qu'une seule condition, il est préférable d'utiliser cette fin de la deuxième partie. Ensuite, vous n'aurez pas à ajouter ce deux-points ou null va fonctionner ici, et ensuite je vais ajouter ceci à faux. Bon, maintenant, notre plan était d'ajouter l'icône ici. Ok, quelle icône nous voulions ajouter. Alors revenez ici et puis je peux dire étoiles ici, icône flèche. Vous pouvez voir qu'il y a tellement d'icônes que nous pouvons choisir ici. Arrow, ok, on peut choisir, on peut choisir cette icône, je suppose, ou cette icône, ou je pense que nous pouvons choisir celle-ci. J'utilise celui-ci et celui-là. Je vais donc choisir celui-là. Et pourtant, il pourrait y avoir une autre icône au lieu de la couleur plate que je console, ils avaient cette icône colorée. Nous pouvons en avoir, ok, eh bien, je choisirais celui-ci ici parce que c'est l'icône de couleur, donc nous n'aurons pas à faire de couleur celle-ci, ils pourraient avoir le bas utilise également la LED est sur la droite. Où est le plus bas ? Je pense qu'ils n' ont pas le plus bas. Ils ont le suivant, ils ont le précédent. Ils ont pris de l'expansion, ils l'ont fait. Celui-là. Je vais ajouter ces deux-là. Donc avant cela, je dois ajouter celui-ci. Et je dois importer celui-ci ici. Et puis à l'intérieur de ceux-ci, je dois ajouter cette option qui va s'effondrer FC. Donc FC s'effondre et vous pouvez voir fc et fc sont déjà là. Il vous suffit donc d'ajouter celui-ci. Et si vous utilisez une autre icône, une autre icône, si elle a des noms différents, il vous suffit de la saisir là-dedans. Et celui-ci va être exponentiel. Et celui-ci est ici. Donc, pour réagir, je peux transmettre les deux premières lettres que vous devez écrire, exemple ce que je veux dire par là. Donc si j'utilise, à partir d'ici, je peux, si vous l'utilisez, alors vous pouvez voir ce BS. Il s'agit donc toujours des deux premières lettres de n'importe quelle icône que vous allez utiliser. Une véritable icône pour sans valeur car elle va toujours fonctionner. Maintenant, je voulais le montrer de cette façon. Notre titre et notre icône doivent se trouver dans le coin droit. Ok, alors comment pouvons-nous atteindre celui-ci, je vais créer une div. Et à l'intérieur de cette div, je veux mettre ce titre. Et je vais créer un nom de classe. Ici. Je peux dire, je peux dire l' icône de réduction, l'icône de réduction. Et ici, nous allons essayer de mettre notre icône. Je vais donc ajouter un tag ici. Et j'ai juste besoin d'ajouter ceci, celui-ci rapidement parce que FC élargit la façon dont nous utilisons. Nous avons juste besoin d'appeler ce nom et il a une propriété. Nous devrions maintenant pouvoir voir l'icône. Vous pouvez voir que cette icône est ici, mais elle doit être dans le coin droit. Ne vous inquiétez pas, nous y arriverons. Et pour ce faire, c'est ainsi que nous utilisons l' icône React dans notre f et elle possède une propriété appelée size. Nous allons également utiliser cette cellule oméga1 de taille 30. Il va être plus grand. Je pense que nous n'avons pas besoin, troisièmement, d'en avoir seulement 20. Et puis ces colonnes ont disparu. icône de ces colonnes va être ici. Et je peux dire que l'icône des colonnes, je peux dire justifier le contenu, l'espace entre et l' affichage va être flux va venir dans le coin droit. Objectif. Nous avons donc atteint cet objectif. Nous pouvons y arriver, nous pouvons faire d'autres choses. Par exemple, juste pour être un contenu et peut dire aligner. Peut-être aligner les éléments au centre. Ou je pense que nous n'en avons pas besoin, c'est déjà là. La carte n'est pas si grande. Nous n'avons pas celui-ci parce que nous utilisons déjà du contenu justify-content ici. C'est tellement cool. Maintenant, que pouvons-nous faire ? Nous pouvons ajouter un pointeur de curseur ici. Nous pouvons ajouter un pointeur de curseur. Ensuite, nous avons cela, mais actuellement, cela ne va pas fonctionner, nous devons donc le rendre pliable comme nous le faisons. Maintenant, revenez ici. Et puis, ici, nous pouvons définir une fonction, nous pouvons créer une fonction. On peut dire const, const, show item. Vous pouvez donner n'importe quel nom, ce que vous voulez. Ensuite, nous pouvons dire que le set show ne sera pas égal à show. D'accord, il y a deux façons de le faire. Par exemple, nous disons ici que quoi que ce soit, il suffit de le faire en face. Mais nous devons le faire, nous pouvons créer deux autres composants car une fois qu'il sera ouvert, nous changerons l'icône de couleur de l'icône, puis une fois que ce sera des clubs, puis nous le ferons dans de cette façon. Laissez-moi vous montrer ce que je veux dire par là. Tellement vite. Copiez celui-ci, puis ajoutez un onclick ici. Onclick. Ensuite, je veux mettre en pause celle-ci. Je peux simplement mettre en pause cette fonction que nous venons de créer. Et maintenant, nous pouvons voir s'effondrer. Et si je clique sur cette nouvelle pour me cacher, c'est ouvert. Et si je clique à nouveau , ça va se cacher. S'il est ouvert et qu'il est haut, ouvert, les yeux s'ouvrent puis se cachent. Ok, donc notre absorption des appels fonctionne. Mais maintenant ce que je veux, je veux l'avoir quand il est ouvert, je veux changer l'icône. Et quand ils cliqueront dessus, nous seuls pouvons le masquer, pas la même icône. D'accord ? Donc, pour cela, que puis-je dire au lieu de cette façon, je peux simplement dire quand on clique dessus là où tu veux le rendre vrai. D'accord ? Et maintenant c'est vrai, mais cette absorption d'appels ne fonctionne pas ici. Et maintenant, nous pouvons également rendre cette icône dynamique. Si c'est vrai, si c'est vrai, si cela va bien, nous pouvons également le faire d'autres façons. Par exemple, ne sont pas affichés et nous pouvons simplement changer la couleur de l'icône de couleur, puis cela va également fonctionner. Donc, au lieu d'écrire deux lignes, permettez-moi d'essayer si cela va fonctionner de cette façon. Nous pouvons donc juste en face de celui-ci, quoi que nous ayons, nous voulons le faire. Ensuite, nous pouvons changer l'icône. Nous pouvons dire, si le spectacle est vrai, si le rivage est vrai, alors nous voulons montrer cette option d'effondrement. Cela signifie que nous voulons avoir dans celui-ci. D'accord, alors la taille sera de 20. Si c'est vrai, cela signifie que notre État est ouvert. Cela signifie que le déterminant est vrai. Ensuite, nous voulons afficher cette icône d'effondrement. Si ce n'est pas vrai , nous voulons le montrer ici. Si c'est vrai, nous voulons montrer celle-ci. Et si ce n'est pas vrai, alors nous voulons bien montrer, alors je l'ai ajouté au mauvais endroit. Il devrait être en dehors de celui-ci. Et nous y voilà. D'accord, alors que dire que si notre domaine est vrai, nous voulons montrer cette icône d'effondrement. Sinon, nous voulons afficher cette icône de développement. Voyons voir, notre domaine est faux maintenant. Donc notre faux constant, donc la zone que nous affichons, à la place, cette icône de développement, si je clique, alors notre domaine est vrai, puis nous mettons au carré cette icône. Ensuite, si je clique dessus et qu'il va descendre. Si je clique dessus, je vais descendre. De cette façon. Il est également allé travailler pour vous. Pas de problème du tout. Nous pouvons voir, nous pouvons le faire de cette façon, et nous pouvons également le faire. Une autre chose est que, par exemple, si vous voulez rendre celle-ci cliquable dans toute la carte, par exemple, actuellement si je vais cliquer dessus, cela ne fonctionnera pas. Donc, lorsque vous cliquez sur cette carte, vous voulez réduire cette option au lieu de simplement cette icône , que pouvons-nous faire ? Nous n'avons pas besoin de faire beaucoup plus. Il suffit de couper cela onclick et ajouter surcliquez sur le panier principal, qui est notre rebut. Et si je clique dessus, ça fonctionnera de la même façon. Même l'icône va changer. C'est ainsi que vous pouvez ajouter cette absorption de couleur. Et une autre chose que nous pouvons faire ici, nous pouvons ajouter un peu de personnalisation, design et de système de marquage. Je vais donc vous montrer lors de la prochaine conférence. Au revoir. 8. Carte de désaccord de surbrillance: Bienvenue encore une fois. Dans cette partie, je vais vous montrer comment pouvons-nous mettre en évidence notre carte ouverte, accord, et comment pouvons-nous changer notre nom de famille dynamiquement ? Ok, donc une chose qui est perceptible ici, donc c'est le nom de classe qui nous donne ce design. Donc, si je regarde ici, design de la carte, il y a un rembourrage de marge. D'abord, permettez-moi d'ajouter une propriété ici. Donc, le point de conception de carte survole. Donc, lorsque nous planons, je veux le montrer ici. Je veux donc souligner cette chose. Je peux dire frontière. La bordure gauche sera peut-être de trois pixels. Uniquement. Vous pouvez vous asseoir de couleur tomate. Vous pouvez choisir n'importe quelle couleur, comme vous le souhaitez. Vous pouvez donc voir quand je mets en évidence celle-ci, quand je survole, celle-ci va se distinguer. Mais quand il est ouvert, c'est toujours fait. C'est toujours fini. Il devrait s'agir de cette couleur, elle devrait avoir cette couleur marquée. Comment pouvons-nous le faire ? Nous allons le faire. Mais pour eux, permettez-moi d'augmenter la taille des bordures. Donc, très bien, donc la taille de la bordure, taille est maintenant de cinq pixels et c'est vraiment génial. Mais je veux atteindre celui-ci quand, lorsque notre état est ouvert, lorsque cette carte est ouverte, celle-ci doit être marquée de cette façon. Ok, comment pouvez-vous le faire ? Nous pouvons donc vouloir cette chose de cette façon. Nous devons donc rendre celui-ci dynamique. Comment, qu'est-ce que je veux dire par dynamique ? Nous pouvons ajouter le même opérateur ternaire. C'est la même condition dans notre classe. Si notre JT est vrai, nous voulons le marquer , marquer celui-ci. Sinon, nous voulons montrer celle-ci. Alors, comment puis-je y parvenir ? Je vais appeler celui-là. Et je vais ajouter cette orthèse bouclée. À l'intérieur de cette orthèse bouclée, je peux dire montrer, montrer. Si c'est vrai, alors je veux montrer ce nom de classe si je veux afficher un autre nom de classe. Donc maintenant, je pense logiquement ici. Donc, actuellement, notre état d' équilibre est faux. Laissez-moi montrer celle-ci ici. Bon, donc nous avons celui-là. Donc si j'étais plutôt vrai, alors notre, nous avons quelques changements ici, c'est parce qu'il tombe dans cette condition d'état. Que disons-nous ici ? Fondamentalement, si notre domaine est vrai, alors seulement nous allons rendre ce design de voiture et de voiture. Si ce n'est pas vrai, cela signifie que ce qui est faux ici, nous ne retournons rien. L'autre raison pour laquelle notre voiture a disparu. Que puis-je dire ici ? Je peux simplement ajouter la carte ici. Cela signifie que si déjà dit est faux, alors jetez instinctivement même supposons établir ce que la carte. Maintenant, nous pouvons voir la carte ici, d'accord ? Mais nous n'obtenons pas le design parce que pour cela, nous devons avoir un design différent utilisant la même chose. Je peux donc dire que si c'est vrai, cela signifie que cette condition va être remplie. Si c'est faux , cette condition sera remplie. Donc, nous n' avons toujours pas celui-ci ici. D'accord ? Maintenant, je peux marquer celle-ci rapidement. Résolvez celui-là. Donc, si notre domaine est vrai, alors cette classe va être active. Donc, pour cette classe, cette classe est une classe de conception de cartes. Je vais donc copier le même dessin parce que nous devons marquer celui-ci ici. Cool. Au lieu de cela, c'est ouvert. Il y a une raison pour laquelle celle-ci est marquée vers le bas. Si je le rafraîchis, il a disparu parce que ce n'est évidemment pas vrai. Laissez-moi cliquer sur celui-ci. Notre MST est vraie, et ensuite celle-ci est ici. Et maintenant, je dois ajouter un autre nom de classe. On peut dire que le design de la carte est faux. Si notre état actuel est faux, nous pouvons montrer le même design maintenant que nous avons ici. Nous pouvons donc simplement dire les frais de carte et faux. Nous avons besoin d'un rembourrage de marge. Nous avons besoin de marge et de rembourrage. Je vais donc ajouter celui-ci ici. Cool. Maintenant, si j'étais plutôt faux, alors nous avons le même design. Je vais écrouler celui-ci. Si R est mort, c'est vrai, alors nous avons cette chose. Si j'étais à la place, c'est vrai. Celle-ci est une démarque, c'est vrai, c'est fait. Maintenant, ce que je veux avoir le pouvoir est faux. Ensuite, nous voulons montrer cet effet de survol que nous avions montré précédemment. D'accord ? Alors, comment puis-je le faire ? Pour le faire ? Donc avec la classe va appeler cette queue, est faux dans cette classe parce que si j'étais plutôt vrai, cette classe va l'appeler à place est faux, puis celle-ci. Donc les cartilages et les faux. Ici. Nous devons ajouter celui-ci. La carte est en fausse couleur au survol. Et puis je vais dire celui-là. Nous avons donc maintenant cet effet de survol. Si je clique dessus, il va ici. Et maintenant, nous n'avons pas besoin d' avoir ce design de carte survolé. Parce que si je disais que l'homme est vrai, alors nous allons survoler. Si ce qui est vrai est faux , nous voulons seulement effectuer cet effet de survol appelé Tout va bien. Nous sommes maintenant en mesure de marquer notre carte. Et c'est ainsi que ça va ressembler à ça. Parfait. Parfait, parfait. Nous avons donc réussi à obtenir du sel, c'est l'appel des crises. Et dans la partie suivante, et je vais vous montrer comment ajouter notre pagination, car nous ne voulons pas montrer toutes ces 100 posées ici, dans cette seule base. Bon, je veux avoir de la pagination ici. Et puis, lorsque l'utilisateur cliquera sur la pagination, nous afficherons peut-être 510 ou le montant que nous voulons. Je vous verrai donc lors de la prochaine conférence. Au revoir. 9. Données de tranche pour la pagination: Bienvenue encore une fois. Dans cette partie, nous commencerons à travailler sur notre pagination. Permettez-moi donc de vous montrer comment réaliser notre pagination. Par conséquent, ici, c'est le rythme auquel nous disposons nos données que nous obtenons à partir de notre API. Ces informations en contiennent, permettez-moi d'abord de trancher nos données que nous pouvons connecter nos données à nos fonctionnalités de pagination. Pour cela, je vais ajouter une commande ici. Vous pouvez dire pagination. Juste pour comprendre que c'est Ted et tout ce code concerne la pagination. Donc, ce que je peux dire, c'est que je vais ajouter un état ici. Je vais dire un état. Et avant cela, on peut dire const. Const va être garé en base. partie B est donc combien de poètes voulez-vous montrer ? Donc, actuellement, nous avons 100 bases dans une seule partie. Nous ne voulons pas montrer une force de 100 ici. Nous voulons montrer peut-être cinq, sept ou huit ou dix, ce que vous voulez. Vous pouvez le modifier à tout moment. On peut donc dire base de bar. La base va être pour l' instant, il y a les huit messages que nous voulons montrer à un rythme partiel. Ensuite, nous devons définir un état. Ou vous pouvez dire const, const sera notre rythme actuel. Donc nous l'avons fait, écrivons un rythme actuel rapide. Et nous pouvons dire fixer un objectif actuel. Et maintenant, nous pouvons dire qu'il utilise la dette. La phase actuelle va donc en être une. Cela signifie que peut-être dans notre, après avoir divisé toutes nos données, nous obtiendrons peut-être 100 , 50, 20 ou dix paiements en fonction des données que nous avons et fonction du rythme de la partie de données que nous affichons. Ainsi, chaque fois que nous actualiserons notre page, nous commencerons nos données à partir de la base, à partir de celle de base. C'est ce que ça veut dire. Je serai donc en mesure de vous montrer plus d'exemple une fois que notre entreprise et celle de Becky seront prêtes. Il suffit donc de comprendre que nous affichons nos données de la PS1. Ok, donc le rythme actuel, réglez le rythme actuel. Et maintenant, nous devons passer une fonction de rappel. Je peux dire Const, a géré la peste. Nous pouvons dire cela. La peste va être ça. Et ici, nous pouvons passer une sonde. Vous pouvez dire sélectionné. Il va être sélectionné pour la base. Vous pouvez ajouter n'importe quel nom de classe ici. Cela incite simplement à dire que nous sommes de passage ici. Et ensuite, notre fonction flèche. Et ici, qu'en est-il des données ? L'utilisateur cliquera sur les données que l'utilisateur cliquera ici. Bon, nous avons fait une erreur ici. Il devrait être à l'intérieur de cette attelle bouclée et ensuite avoir besoin d'ajouter un plus, un autre support normal et normal. Et alors, qu'est-ce que cela signifie ? Ainsi, lorsqu'un utilisateur clique sur Coller une clique , nous voulons sélectionner l' élément sur lequel il a cliqué. Ensuite, nous le voulons, nous voulons le fixer à notre rythme actuel. Nous sommes donc réglés, le rythme actuel va être notre mépris. Cool. Nous avons donc peut-être cinq paies, dix rythmes en fonction du nombre de données et du numéro de l'objet que nous affichons. Nous disons que cliquez sur le numéro Coller, cliquez sur Coller le numéro, puis nous passons celui-ci ici. Et peu importe ce que nous obtiendrons en cliquant sur celui-ci, nous allons vous le montrer, nous allons le définir dans notre rythme actuel. Maintenant, nous pouvons créer. Laissez-moi vous montrer. Et ici, vous pourrez également voir ce genre d'instructions. Vous pouvez voir les éléments actuels. Vous venez de rester au compte de base. décalage de l'article utilise l'état que suffisamment dit article plus le décalage. Et puis manipuler, manipulé essentiellement le but de l'article. Vous pouvez donc également y jeter un coup d'œil et ensuite vous pouvez simplement tweeter. Mais j'adore le faire de cette façon. Ensuite, je peux simplement en créer un autre, un autre processus que l'on peut dire que le décalage sera égal à notre rythme actuel. Alors, ce but. Bon, donc, quel que soit notre rythme actuel, nous sommes peut-être à la page cinq et ensuite nous voulons multiplier par notre objectif. Donc, le cas numéro trois , nous voulons multiplier cela par elle. Il va être 24 ans. Ensuite, nous pouvons simplement diviser celle-ci. Et maintenant, nous pouvons obtenir nos données de paye actuelles. Ok, donc actuellement nos données se trouvent dans ces états d'utilisation de données. Nous voulons maintenant trancher ces données afin de pouvoir dire les données actuelles const. allons être nos données sans diapositives et les boues proviennent de JavaScript. Donc, ce que cela fait essentiellement pour nous en trancher nos données d'un grand ensemble de données, d'un grand ensemble de tableaux. Il va juste se trancher en fonction de notre état. Pour l'instant, va découper notre base de données. Et ici, nous devons ajouter notre compensation, c'est-à-dire ceci. Et puis, nous devons ajouter notre offset plus br plus br plus offset, puis offset plus but. Cool. Donc ce que nous avons écrit ici, alors j'ai dit qu' un courant variable associe les données et je vais trancher celle-ci. Donc, les données, qui seront notre ensemble de données contenant toutes nos données API. Nous allons le trancher à l'aide de celui-ci. Nous allons passer ce décalage rapide, c' est-à-dire le nombre de paires et le rythme actuel. Et ensuite, notre barre offset plus colle de cette façon, nous obtiendrons nos données. Et maintenant, peut-être que nous obtiendrons des données doubles ou flottantes. Mais nous ne voulons pas que celui-ci soit de cette façon pour compter notre rythme. Il y a donc une raison pour laquelle nous devons avoir besoin d' environ une heure, c'est correct. Comment pouvons-nous le faire ? Nous pouvons donc simplement dire const, compte va être atteint, pas cartographié, il devrait être respecté. Tant de points vendus ont rendu la dorsale cette propriété provient de JavaScript et de la vente de métadonnées. Et nous pouvons dire que les données pointent les données, parsèment la terre et ont fait beaucoup de terres divisées par nos Barclays. De cette façon, nous n' obtiendrons aucune donnée flottante. Supposons que nous ayons 2525 post dans notre API et que nous le divisons par huit, puis huit. Donc, 25 par huit, cela nous donnera un certain nombre de points parce qu'un 25 par 83 en trois sur huit, il sera 24. Melissa, nous en aurons un lequel nous ne pourrons pas entrer. Permettez-moi de vous montrer ce que je veux dire par là. Je peux dire calculatrice. Et disons donc que nous avons 25 postes dans votre API divisés par huit. Ensuite, nous obtiendrons 3,125. Et cette fonction nous aidera à éviter ce point. Il nous en montrera trois car cette vente de points mathématiques tourne toujours autour de nos données. Maintenant, nous avons celui-là. Permettez-moi de montrer qu'il n'y a pas de changements car nous n'avons pas connecté nos données. Donc maintenant, si vous regardez ici, ces données de rythme actuelles vont contenir notre partie de données paie huit données parce que notre principale va plutôt se diviser en huit Pour le collage par pièce. Maintenant, au lieu de cartographier directement ces données, nous devrons parcourir ces données de collage actuelles afin que nous puissions n'obtenir que le but de l'article até, l'objectif. Nous avons maintenant huit articles ici. Si je ne me trompe pas, 123456788 article ici, ok ? Et toutes les autres fonctionnalités qui fonctionneront parfaitement, sans aucun problème. Et une autre chose, c'est que je vais vous le montrer. Disons que nous ne voulons montrer que deux objets. Ensuite, il va montrer deux objets. Permettez-moi d'ajouter cinq articles. Ensuite, il va ajouter cinq éléments ici. Ok, permettez-moi d'ajouter huit objets à nouveau. Ensuite, il va ajouter huit éléments. Ok, nous sommes donc capables de trancher nos données, mais nous n'avons toujours pas notre pagination. Comment pouvons-nous obtenir d'autres données ? Donc, pour résoudre ce problème, nous devrons ajouter notre pagination en bas après celui-ci. Et puis nous devrons ajouter ces paquets, qui est la pagination React. Et puis vous passez la réaction excessive selon vos besoins. Ensuite, nous montrerons nos données. Je vais donc vous montrer lors de la prochaine conférence. Au revoir. 10. Ajouter la pagination de réaction: Bienvenue encore une fois. Dans cette partie, nous ajouterons notre pagination. Donc, ce que je fais essentiellement, j'essaie toujours séparer le fichier de pagination, puis de passer accessoires pour que vous puissiez réutiliser votre pagination pour d'autres composants, ce qui est le meilleur moyen pour cela. Je vais créer un nouveau composant, nouveau fichier ici dans le dossier. Je vais tout d'abord dire pagination. Je vais m'asseoir là. Et cette pagination à l'intérieur de cette présentation, je vais ajouter le point de pagination js. Ce fichier js de points de pagination va contenir toute notre pagination. Et maintenant, je vais dire, Ok, c'est notre pagination et nous devons avoir un fichier CSS pour ce code de pagination CSS. Nos données et toutes les informations sont donc ici. Dans cette partie. Nous devons relier ces paginations ici. Pour cela, je peux créer un D différent ici. Je vais dire div. Et cette div contiendra notre pagination. Je vais choisir un cours. Le nom va être une carte. Cette div va être une carte. Et vous pouvez dire pagination pour cette partie. D'accord, et ensuite, ce que nous devrons faire, nous devrons passer nos accessoires. Laissez-moi vous montrer. Donc maintenant, nous pouvons voir cette div et nous n'avons pas besoin de l'avoir, accord, alors laissez-moi appeler celle-ci à nouveau ici. Cette information va donc se trouver dans la pâte d'inflammation, cette pagination. nous puissions dire pagination, je peux simplement dire marche, puis pixel, puis s'estomper aussi. Je pense en tant que pixel. Cool. Donc, maintenant, nous devrions être en mesure de voir que cette chose peut faire. Nous n'avons pas de données de toute évidence, mais nous l' aurons certainement bientôt. Bon, donc dans le fichier de pagination, nous devons donc passer, nous devons ajouter notre pagination React. Et comment pouvez-vous le faire ? Pour ce faire, nous devons appeler notre pagination React ici. Je vais donc ajouter une plongée ici. Et tout simplement normalement, puis nous pouvons simplement lire la documentation et le document est affiché. Nous pouvons voir qu'il passe. Il passe deux paramètres, deux ou trois paramètres. Ils ont deux options ici, puis d'autres choses ici. Nous pouvons donc simplement appeler celui-ci ici l'origine. Nous devons donc avoir celui-ci et ne vous inquiétez pas, nous allons apporter beaucoup de changements ici. Et par exemple, je vais parler de celui-ci à partir de cette partie, à partir de ce site Web. Et maintenant, parce que nous n'avons aucune information ici, nous avons besoin de ces deux informations. L'un est le nombre de paires ordonné, l'autre est nos données de rythme actuelles. OK ? Ce sont donc les deux inflammations que nous devrons passer. Nous pouvons donc simplement dire : Oh, nous devrons dire ici Haendel. Et nous avons aussi, comment sont-ils, cette fonction et celle-ci. Ce sont les deux choses que nous devrons passer par le paramètre. Je vais donc dire le meilleur compte. Je vais ajouter celui-ci ici. Le comte et l'autre est celui qui est géré. Veuillez cliquer et nous devons le faire, j'écris le même nom. Donc ici sur la pâte sur Pais, il une chance que nous ayons besoin de passer notre poignée c'est cliquer, qui est celui-ci. Donc, si vous avez des noms différents, il suffit de le mettre et de coller le compte sera notre. Et ces paires comptent va compter le nombre de pages que nous voulons afficher ici. Bon, donc maintenant, nous avons celui-là. Maintenant, ce composant contient ces deux podomètres. Ceci à un élément de données que nous pouvons transmettre à partir d'ici. Qui sommes-nous tous déjà ici. Laissez-moi importer cette chose rapidement. Je peux dire importer la démission de la pagination vers cette pagination. Et maintenant, je vais appeler cette pagination à l'intérieur notre montre cartilagineuse que nous avons créée pour celle-ci. Et il va passer deux paramètres. Le premier est ce décompte de base, puis il s' agira de ce premier décompte. Et puis, ici, nous devons ajouter. Ici, nous devons ajouter ces guidons. Cliquez sur. Cool. Ainsi, nos données que nous avons écrites pour notre pagination comptent et gérées physiquement se trouvent maintenant dans cette pagination. Laissez-moi essayer. Que pouvons-nous voir ici ? Nous avons une liseuse, c' est-à-dire que la réadaptation n' est pas définie. Cela signifie que nous devons importer notre pagination React, ce que nous n'avons pas fait. Donc, pour importer cette désoxygénation, nous devons importer cette pagination de taux ici. Et puis c'est toute la pagination importante, celle-ci. Et j'espère que c'est ou a pris un but. Nous avons attrapé quelque chose ici, mais il est évident que c'est vraiment mauvais maintenant. Maintenant, si je clique sur celui-ci, cela devrait changer nos données, n'est-ce pas ? D'accord, ça marche. Si je clique sur Coller deux, nous pouvons voir que nos données sont en train de changer. Nos données sont en train de changer. C'est vraiment sympa. Cela signifie que notre pagination fonctionne parfaitement. Et puis celui-ci fonctionne également. Celui-ci fonctionne également. Ensuite, nous pouvons montrer celui-ci ici et cette pâte dans ce split cinq. Ok, on va, tu joueras avec ce monde supérieur. Mais avant cela, laissez-moi vous montrer, laissez-moi donner un look parfait au design. Alors, comment ajouter ce design ici ? Tout d'abord, nous devons avoir un niveau de rupture. Ensuite, nous devons avoir un nom de classe de break. Si vous lisez la propriété. Ici, ils ont tellement de choses ici. Ce sont les accessoires. Nous devrons donc le nommer le nom de la classe break ici. Je vais donc ajouter un nom de classe. Le nom de la classe va être notre classe. Ensuite, nous pourrons définir une classe. Ensuite, on peut dire Break Glass, Break Glass. Et ensuite, nous allons avoir un niveau supérieur, qui est le prochain. Nous n'avons pas besoin de l'avoir. Nous pouvons simplement ajouter celui-ci ici. Ce sont les deux choses que nous avons maintenant. Alors maintenant, que pouvons-nous ajouter ici ? Nous pouvons ajouter qu'il y a une autre propriété et un autre nom de propriété s' appelle pagination. Donc, les clusters de conteneurs sont la pagination. nom de la classe de conteneur est donc pagination. Que signifie donc ce nom de classe de continent ? Il existe une classe de conteneurs polynésiens dans le cluster sur le conteneur de pagination. Nous pouvons donc simplement ajouter celui-ci ici. Et puis nous pouvons dire simplement ce nom que nous pouvons ajouter, vous pouvez donner n'importe quel nom de cette classe. Nous pouvons simplement dire pagination. Le nom de la classe de conteneur sera notre pagination. Et maintenant, permettez-moi d'ajouter un peu de design pour celui-ci. Ce sera donc notre cours de pagination. Et dans la classe de pagination, nous devons ajouter du rembourrage. Nous pouvons ajouter un rembourrage, dix pixels, puis nous devons ajouter, notre écran va refléter et ensuite justifier le contenu. Je veux que cela soit centré. Je regarderais ce que nous avons réalisé. Jusqu'à présent. Objectif. Nous pouvons voir que nos données sont maintenant au centre. Nous pouvons voir que vos données sont une par une. Cela signifie que nous sommes sur la bonne voie. Quelque chose va arriver avec nous très bientôt. Et L et les objets, je vais ajouter le centre et ensuite je vais ajouter, disons ajouter de la couleur. La couleur va être bloquante. Ensuite, nous devons ajouter de la marge. Je vais ajouter demain, désolé, besoin d'ajouter des marches, puis des pixels. Alors maintenant ajouté la marge dix pixels. Bon, je pense que nous devons jouer avec eux. Encore une chose à ajouter. C'est à ça que ça va ressembler. Décoration textuelle. Il y a d'autres choses que nous pouvons ajouter ici. Permettez-moi de vous montrer ce que nous pouvons ajouter dans cette partie, car ces données se trouvent dans celle-ci. Donc, nous devons ajouter une décoration de texte. répétition ne sera pas. Et que va-t-il se passer si j'ajoute ici un, car je suppose qu'il contenait toutes les données. Cool. Vous pouvez voir maintenant que nous obtenons toutes ces informations ici, d'accord, cause de cette classe de pagination et par défaut, le contenu est un Toujours presser tous ces éléments, mais nous ne le ferons pas dans ce chemin. Je vais retirer ça ici. Je vais ensuite copier cette pagination une fois de plus. Et puis je vais le faire séparément. De cette façon. Nous réaliserons notre article au centre et nous y parviendrons. Je vais donc ajouter une décoration textuelle. Aucune. Nous n'avons pas besoin de décoration de texte prédéfinie ici. Et puis nous devons ajouter la liste est de type grand. Maintenant, le type de style de liste ne sera pas. Voyons ensuite ce que nous avons réalisé. Et nous devons ajouter notre marge dix pixels de là à là. Bon, donc maintenant, nous avons celui-là. C'est vraiment génial. Notre pagination fonctionne. Donc, nous n'obtenons pas la moindre version de déclaration ou de textos, je suppose que j'ai pensé que nous avons peut-être celui-ci que nous obtenons essentiellement. OK. Donc, cette chose que nous pouvons utiliser et vous déplacez ceci souligné à partir de celui-ci, de celui-ci ou de celui-ci parce que ce sont les précédents et suivants prend sous ces alliés que nous ne sommes pas en mesure de voir cela comme une raison que nous pouvons également utiliser celui-ci. Et nous avons cette marge ou ce rembourrage. Ok, donc ça a l'air bien maintenant, on peut encore apporter quelques changements. Nous pouvons mettre en évidence celle-ci. Ok, par exemple, si je suis dans ce numéro d' espace maintenant, actuellement, nous ne savons pas si nous sommes de l'espace. Bon, il faut donc le mettre en évidence. Et je pense que je vais arrêter cette vidéo ici et nous continuerons avec la prochaine conférence. 11. Réagir Pagination Design: Bienvenue encore une fois. Dans cette partie, nous allons essayer d'activer notre pagination, accord, afin que nous puissions comprendre quelle partie est active, d'accord ? Et comment pouvons-nous le faire ? Pour ce faire, il existe une propriété appelée pagination. Et pour que nous puissions simplement ajouter celle-ci et ensuite ajouter cette partie dans notre projet. nom de la classe est donc un nom de classe actif. Et ensuite, nous avons également une autre partie. Permettez-moi donc de vous montrer comment ajouter celui-ci. Donc ce ClassName, la classe de base LinkedList et le cluster sur une bande de citron facile à utiliser. Donc, nom de classe active, c'est le nom de la classe qui nous aidera à afficher le nom de notre classe active. Nous pouvons simplement ajouter le nom de classe active qui va être, nous allons dire ce lien, ce lien actif. Et puis je peux simplement ajouter le design de celui-ci. Alors, comment pouvons-nous le faire ? Nous pouvons simplement ajouter un rayon de bordure ou d'autres éléments dans notre F quand il sera actif, et cela ne créera aucun problème. Alors, comment pouvons-nous le faire ? Nous devons d'abord ajouter un rayon de bordure, puis ajouter d'autres choses ici. Donc la bordure va être un bloc solide d'un pixel. Et puis la décoloration sera de dix pixels. Et puis on va colorer va être branché. Laissez-moi voir. Nous pouvons donc voir maintenant ce design, cela signifie que cet espace est actif. Celui-ci est trop économe, mais nous ne pouvons rien voir. Et nous devons ajouter, je pense, qu'il n'est pas nécessaire d' avoir une tête de dix pixels. Je pense que cinq pixels suffisent. Ok, donc encore une fois, nous devons appeler la balise a car cet éditeur contient le design principal. Je peux donc dire que la couleur sera blanche, pas le blé, elle devrait être blanche. Bon, donc nous ne sommes toujours pas en mesure de voir notre couleur. Laissez-moi voir ce que j'ai ajouté une couleur de fond noir. Bears Link, actif. Physiquement, la couleur active va être blanche. Cela a donc fonctionné. Et donc aucune idée. Nous devons corriger celui-ci car le lien initial est actif. Ok, donc nous devrons ajouter celui-ci de cette façon. Je pense que lien le point actif, propriété active que nous devons utiliser. Et nous seuls devrions être en mesure de voir nos données. Et puis le lien se produit. Permettez-moi de changer le nom. Retirez ce membre, êtes actif afin que vous ne soyez pas confus car nous avons une propriété appelée equity si elle est dans notre CSS. Il nous suffit donc d' utiliser celui-ci ici, et ensuite nous pourrons l'ajouter. Donc, maintenant, ça devrait fonctionner, je suppose. Cool. Maintenant, ça va ressembler à ça. Nous n'avons pas ces 234. Et c'est toujours la couleur d'arrière-plan qui ne s'affiche pas ici, donc nous devons ajouter notre lien actif, lien, notre lien de pagination actif, actif va être couleur de fond de l'eau va être noir. Et puis nous devons ajouter notre action pour lier la couleur active va être blanche. Et nous y voilà. Donc, dans ce nom de classe active, nous devons ajouter d'autres propriétés car il a une propriété prédéfinie que je viens de capturer. Et ensuite, le nom de la classe sur le deck. Vous pouvez voir le lien actif ClassName. Il existe une autre classe appelée nom de classe active. Nous devons donc le faire de cette façon. Nous pouvons simplement dire un autre lien linéaire. Et cette classe active est à l'intérieur celle-ci est préconstruite ici. On peut donc dire « actif ». Nous pouvons donc simplement faire cette chose de cette façon. Ensuite, nous pouvons simplement changer celui-ci par ce paramètre, par celui-ci. Et ensuite, nous pourrons également ajouter celui-ci ici. Ensuite, nous devrions être en mesure de le faire, alors nous devrions être en mesure de voir quelques changements ici. On peut voir la couleur d'arrière-plan, mais la couleur ne fonctionne pas. Nous pouvons donc simplement ajouter un rayon de bordure ici également. Je peux dire un rayon de frontière de 20 pixels. Ok, donc nous allons le réparer dans une minute trop gros car il y a d' autres propriétés qui sont liées à celle-ci. C'est la raison pour laquelle celle-ci ne vient pas. Alors, que pouvons-nous faire ici ? Lorsque notre pagination est active, nous devrions voir notre couleur à partir de là. Et puis il y a une autre propriété que nous devons utiliser ici appelée nom de classe de base, qui va être une grande conception initiale que nous devons écrire ici nous pouvons dire notre nom de classe de base, où se trouve le composant ? Il va donc s'agir d'un nom de classe rythmé que nous devons utiliser. Bon, nous pouvons donc utiliser ce nom de classe de base. Et puis on peut dire qu' il y a un nom de classe. On peut dire que la pagination est conçue pour celle-ci. Et cette classe de conception de pagination va contenir le design principal. Cela signifie que sans activité. Et nous pouvons simplement ajouter celui-ci. Et nous pouvons simplement dire «  display flex », « display flex ». Et puis, c'est Delta, c'est non. Et une marge de cinq pixels. Nous pouvons ajouter une marge de cinq pixels, puis la décoloration de sept pixels. Et puis j'amènerai quelqu'un pour dire que nous devons définir dur et blanc. Ensuite, nous allons l' arrondir. Tellement haut de l'art au pixel. Et puis y sera de 30 pixels. Et ce que ça va être 30 pixels de couleur va être bloqué. Ça va être un blog. Et puis le rayon de bordure, il faut ajouter 90 pixels. Le rayon de bordure sera de 90 pixels. Et puis la décoration textuelle, aucune. La décoration de texte ne sera pas. La ligne de texto va être centrée. L'alignement du texte sera central , puis aligner les éléments sera central. Et que pouvons-nous voir ? Nous pouvons donc voir que celui-ci est arrondi maintenant. Celui-ci est arrondi. Maintenant. Celui-ci est également arrondi maintenant. Mais il y a encore peu de choses à faire de cette façon. Et maintenant, nous pouvons simplement ajouter celui-ci. Donc, une chose que j'ai oublié d'ajouter ici, la couleur de fond, je pense. Donc. Je sais que nous devons ajouter une couleur de fond ici, et la couleur doit être blanche. Si j'ajoute un bloc de couleurs d'arrière-plan. Voyons ce que l'on peut voir. Nous avons maintenant ce design de base ici. C'est le cas, ça va être le thème principal de tout ça, accord, donc ça ressemble à ça. Nous devons apporter quelques changements. Nous pouvons donc ajouter la marge de sept pixels , sept pixels, rayon de bordure neuf pixels prend la continuité injustifiée du secteur terrestre à ajouter, je suppose que justifier le contenu va être au centre. Et puis la décoration de texte n' est pas non plus car elle crée un type de bail. Nous devrions maintenant pouvoir voir notre texte au centre. Cool. Maintenant, c'est vraiment génial, mais c'est toujours bon. Donc notre arrière-plan est blanc et notre arrière-plan surligné est également bloqué, désolé, le fond est noir, donc je vais le changer en couleur tomate. Il ne fonctionne pas maintenant. Nous devons rendre cela possible. Nous allons réparer celui-ci, ne vous inquiétez pas. Nous avons donc cette pagination. Maintenant, lorsque vous survolez cette pagination, ce que nous allons faire, je pense que nous pouvons corriger cette pagination active offshore en utilisant un appel actif ClassName. Et ce lien ClassName nous donnera ce qu'il vous faut. Donc, lien actif ClassName à prendre. Bon, laissez-moi ajouter celui-ci ici. Et ensuite, la propriété va se passer de cette façon. Je peux dire texte de lien actif. Texte du lien actif. Ok, donc nous sommes capables de faire cette chose jusqu'à maintenant, et nous devrons réparer celui-ci est encore peu de choses. Et je vais vous montrer dans le prochain. 12. Mise en évidence de la pagination active et du design: Bienvenue encore une fois. Dans cette partie, nous allons ajouter quelques changements majeurs à notre pagination. OK ? Nous pouvons donc le faire de plusieurs façons. Par exemple, il existe une propriété appelée « Nous pouvons simplement lire la documentation », puis il existe une propriété appelée règle Bayes sélectionnée. Ou quel est le nom de celui-ci ? Il y a d'autres propriétés. Et on peut dire le nom de la classe Pace Lien. Il existe donc une propriété appelée clustering lambda de classe Baseline au décollage, c'est-à-dire les éléments spatiaux. Nous allons donc utiliser celui-ci pour mettre en évidence notre texte actif. Donc Paisley dans le nom de classe va être sélectionné rythme, sélectionné paie. Et cette basse électrique va être le rythme que nous voulons. Il s'agit essentiellement de notre sélection. Je peux donc dire que le visage sélectionné sera de couleur, couleur sera peut-être de couleur tomate. Par exemple, nous allons le résoudre plus tard. Maintenant, ils sont ici. Ok, tellement cool. Voilà à quoi ça va ressembler. Si notre page est sélectionnée, alors notre, puis notre, si notre base est sélectionnée, nous pouvons voir que cela va être blanc, qui est notre base active ici. lien de collage actif va donc être blanc et les autres ravageurs vont être de couleur tomate. C'est ainsi que vous pouvez réaliser cette chose. Nous pouvons faire en sorte que ce design réagisse. Ou je pense qu'il est également possible de le faire de cette façon. Par exemple, nous pouvons ajouter une feuille. J'ai eu celui-là d'ici. Et si un postérieur affiché ici, que se passera-t-il ? Nous serons donc en mesure de voir que cette chose fonctionne comme ça , donc nous n'avons pas besoin de l'avoir de cette façon. Nous pouvons donc simplement donner cette chose ici. Et ça va ressembler à ça. Ok, donc une autre chose que nous pouvons faire, nous pouvons le dire, donc fondamentalement, nous pouvons maintenant supprimer cet arrière-plan et ce rayon de bordure d'ici. Et ensuite, s'il est sélectionné et que nous seuls le pouvons, nous pouvons, nous seuls pouvons montrer cette chose, je suppose. Donc. Laissez-moi vous montrer ce que je veux dire par là. Ou si vous le souhaitez, vous pouvez simplement jouer avec celui-ci. Et ensuite, cela va fonctionner de cette façon. Celui-ci est donc actif et celui-ci est actif. Et ensuite, nous avons celui-ci ici. Cool. Donc je veux dire essentiellement que cette conception de pagination va contenir tout ça. Donc, si c'est juste, ok, donc au lieu de cela, c'est la pagination que nous avons ici. C'est une pagination. Ok, permettez-moi de le signaler ici. Et c'est ce que je veux dire essentiellement. Donc, si vous le souhaitez, vous pouvez également le faire ici. S'il est sélectionné, nous seuls pouvons simplement mettre en surbrillance celui-ci et pour l' autre texte, nous pouvons le faire. Donc, pour contourner les choses, nous pouvons simplement faire une chose. C'est ce que nous obtenons pour que nous puissions définir notre hauteur. Nous pouvons dire que notre hauteur sera de 90 pixels et que notre y sera de 90 pixels. Et quoi que ce soit, ça va être 90 ans. Alors, ça va se passer de cette façon. Nous avons eu une taille plus grande. Je suis désolé, je vais me cacher dans lequel serait un pixel tardy sur le 19e Excel. OK, cool, cool, cool. Nous avons donc celui-ci et ensuite nous devons créer élément qu'ils peuvent encore justifier que le contenu soit centré, je suis désolé. Juste être une quantité va être centrée. Et peut-être qu'on peut juste prendre ce truc d'ici. Je peux juste le coller ici. Alors, il devrait être au centre, je suppose. Ou peut-être pourrons-nous aussi le mettre ici pour qu'il soit centré sur la droite. Ok, donc je pense que cette chose vient de celle-ci. Nous pouvons également essayer celui-ci. Pour une raison quelconque, il n' arrive pas au centre. Mes données fonctionnent de cette façon. C'est donc ce que je voulais vous montrer. On a une autre frontière, qui va être noire. Je pense que dans cette frontière vient de cette frontière. Nous pouvons donc. Ok, laissez-moi défaire toute cette équipe que nous avions auparavant. Ensuite, nous pouvons simplement ajouter celui-ci ici. Maintenant, nous avons cette option, je suppose. Non, nous devons également supprimer celui-ci. Donc, cette hauteur et ce rayon de bordure à partir d'ici. Et puis on obtient cette chose. Nous pouvons donc voir cette chose, ces choses. Et maintenant, si j'appuie sur un rayon de bordure ici, donc rayon de bordure 90 pixels, alors il pourra toujours voir, marquer celui-ci. Et le problème, c'est ici. Et si moi, si vous voulez créer cet arrière-plan par défaut, vous pouvez simplement utiliser ce design. Ça va aussi marcher, d'accord ? Vous pouvez simplement mettre en surbrillance votre texte et mettre en surbrillance vos données. Quelles que soient les données ou le design que vous préférez, vous pouvez simplement le faire. Cela va donc fonctionner pour vous aussi. Je voulais juste vous montrer comment ajouter. Je vais jouer autour de celui-ci. Maintenant, nous avons encore deux choses à régler. L'un est précédent, n'importe qui est le bouton suivant. Pour cela, ils ont également une propriété appelée nom de classe précédente et classe suivante, alors il va vouloir utiliser celle-ci. On peut dire lien précédent, nom de famille, puis niveau précédent, nom de classe précédente et bouton précédent. Il y a deux autres propriétés qui vont être le bouton précédent, le bouton précédent et le lien précédent. Nous pouvons utiliser ce nom de classe précédent au lieu du lien ClassName. On peut donc dire que le nom de la classe précédente sera le bouton Précédent. Le nom de la classe précédente sera le bouton Précédent. Et ce bouton précédent va être lié à celui-ci. Je vais venir ici pour ces deux modèles entre les deux. Vous devez en choisir un, ce que vous voulez. Je veux dire que soit vous voulez avoir cette couleur d'arrière-plan ou la couleur normale, alors vous voulez simplement sélectionner celle-ci. Donc j'ai juste besoin que tu joues avec cette pagination. J'adorerais le garder de cette façon parce que lorsque le lien est actif, cela montre simplement que la couleur et le normalement vont être dans celui-ci. Ensuite, cette conception de pagination sera la conception précédente des boutons. Nous devons ajouter. Pour ce qui est de l'ajout et de l' affichage va être flexible, puis nous devons ajouter un type de liste aucun. C'est que le télétype ne sera pas. Ensuite, nous devons ajouter notre marge, cinq pixels, puis ajouter une bordure. Le modèle va être un bloc solide d'un pixel. Et ensuite, nous devons ajouter de la literie pour qu'elle soit belle. Nous allons entraver sept pixels et ensuite la hauteur, hauteur va être, je suis Kartik pixel, je pense 30 pixels. Et puis y sera de 90 pixels, ou il va être 90 pixels, la couleur sera blanche. La couleur va être blanche. La couleur va être en hauteur. Et nous pouvons ajouter un rayon de bordure. Le rayon de frontière va donc être de 20 pixels. Et puis la décoration de texte va être une division ne sera pas. Nous pouvons voir ces choses jusqu'ici. Permettez-moi de retirer celle-ci car elle prend plus de place. La raison pour laquelle elle tombe sur la ville. C'est vrai ? Nous pouvons donc simplement ajouter d' autres cours ici. Laissez-moi enlever la hauteur et voyons ce que nous pouvons voir ici ? Nous pouvons voir cette hauteur. Et je peux aussi ajouter que la hauteur est les yeux automatiques vont être automatiquement ajustés. Et je pense que nous n'avons pas besoin d'avoir cette literie sept pour vendre peut-être un rembourrage de deux pixels. Notre hauteur va être automatique, et ensuite je vais être C. Ensuite, on verra ça. Ok, donc nous sommes dans la phase numéro quatre. Si je clique sur le bouton Plus, ça fonctionne parfaitement. Pourquoi ne pouvons-nous pas faire la hauteur de celui-ci ? On peut dire la hauteur, 40 pixels, ça devrait fonctionner, je suppose. Cela devrait fonctionner. Ensuite, nous pourrons ajouter d' autres propriétés. Par exemple, celui-ci. Tous ces textes de déclaration sont télétypés pour le faire tirer au centre, appelé bruit au centre. Et maintenant, nous pouvons réduire la taille à 30 pixels. Cool, ça marche. C'est donc notre bouton précédent. Ensuite, nous devrons ajouter notre bouton suivant dans le même design. C'est donc le bouton précédent. Nous pouvons maintenant faire la même chose avec notre prochain design de boutons. Donc PVS les ferme, va être le prochain nom de classe. Nous pouvons donc simplement ajouter ce nom de classe suivant ici. Le nom de la classe suivante sera notre prochain bouton, notre prochain bouton. Et dans ce bouton suivant, nous avons besoin du même design. Si vous le souhaitez, vous pouvez apporter des modifications. C'est tout à fait très bien. Cool. Nous avons celui-ci ici. Maintenant, si je suis au rythme rapide, d'accord, alors ce bouton devrait être souhaitable. Les objectifs devraient disparaître, non ? Parce que nous, si je suis dans la base numéro un , nous ne ferons rien. Nous ne pouvons pas dépasser la phase numéro un car il s'agit de la valeur initiale. Nous devons donc désactiver celle-ci d'une manière ou d'une autre. Je suis dans la dernière pièce et je devrais également pouvoir désactiver ce bouton de texte. Comment pouvons-nous le faire ? Comment pouvons-nous y parvenir ? Donc, pour atteindre celui-ci, il existe un nom de cluster appelé longueur de classe inducible. Je ne suis pas sûr de celui-là. Je suppose. Nous devons noter le lien. Je pense que nous devons ajouter le nom de la classe, le nom de la classe. Et je vais ajouter cette propriété dans cette pagination ici. Et puis je vais ajouter ce truc. Et je vais dire Visible, Visible. Précédent. Le bouton suivant dépend de vous, du nom de classe que vous souhaitez ajouter. Je suppose. Permettez-moi donc d'essayer si ça va marcher. Ensuite, nous pouvons dire n' afficher aucun, car nous ne voulons pas ou ne voulons pas afficher celui-ci. Si nous sommes en doute. Si vous êtes dans le rythme rapide que ce bouton précédent a disparu. Si je clique sur Suivant ou que je clique sur la deuxième page, le bouton précédent est ici, cliquez sur le bouton précédent. Il a disparu. Si je clique sur le tartan, ce prochain maïs modernisme, si je viens un pas avant, ça va se montrer ici, et c'est à quoi ça ressemblera. De cette façon, vous pouvez simplement jouer avec tout leur nom de classe qu'ils ont. Vous pouvez donc aussi faire une chose. Peut-être avez-vous remarqué que sur certains sites Web, certaines plateformes, ils désactivent le bouton à moins que ce soit le cas. Sauf si c'est le cas, sauf si c'est le cas Par exemple, si je suis dans celui-ci, au lieu de cacher celui-ci, je peux simplement désactiver celui-ci. Alors, comment puis-je le faire ? Permettez-moi donc de commenter celle-ci. Donc je peux simplement dire, mon Dieu, donc on peut dire que le curseur ne sera pas autorisé, en fait, pas beaucoup. Et puis on peut dire que c'est le curseur. Je vois que ce curseur n'est pas beaucoup, ou on peut simplement ajouter celui-ci. Je pense qu'il a compté ce E. We, alors nous seuls pouvons le faire. Vous pouvez voir maintenant que tout cela est là. Nous pouvons donc cliquer sur celui-ci, mais celui-ci n'est pas souhaitable. Sur le bouton suivant fonctionne, fonctionne. Et maintenant, si je suis dans la deuxième pâte et ce bouton précédent est aussi dans un bol comme celui-ci. Puis cliquez sur le troisième. Et puis celui-ci sera le prochain bouton. Et donc pour le prochain beurre va être le même. Et nous pouvons également faire la couleur, car la couleur va être en gris pour qu'elle soit vraiment inductible. Donc, si je suis passé face, vous pouvez voir que la couleur n'est pas seulement un boulon, puis c'est juste un boulon. Ok, donc vous pouvez simplement jouer avec celui-ci et ça va marcher avec vous. Je vais rester. Je vais commencer par ce présentoir aucun. Ça a l'air plus bien. Ok, donc nous devons changer le A parce que ça prend ça de cette façon. 13. Déployer React Project sur Netlify: Bienvenue de retour. Encore une fois. Dans cette partie, je vais vous montrer comment déployer notre projet serveur ou sur n'importe quel type de plateforme d' hébergement afin que l'utilisateur puisse facilement accéder à vos données. Mais avant cela, permettez-moi de vous montrer quelques choses. Nous devons ajouter nos cheveux de chargement ici. Parce que si nos données ne sont pas chargées , nous pouvons leur montrer certaines informations de chargement. Alors, comment pouvons-nous le faire ? Voici donc notre base, et ici je vais ajouter un nouvel état. Je peux dire const, peux dire que le chargement va être triste, seul. Et au départ, ça va être vrai. Parce qu'au départ, c'est vrai dès que nous recevons nos données, nous voulons définir ce chargement faux. obtenons donc nos données ici. Si nous obtenons nos données , nous n'avons pas besoin de montrer de chargement. On peut dire que c'est faux. Alors, comment pouvons-nous montrer ce chargement à notre rythme maintenant ? Pour cela, vous pouvez utiliser différents types d' icônes ou n'importe quoi d'autre. Juste pour un exemple. Après cela, vous dites que je vais ajouter une condition ici. Si notre état de chargement est vrai, nous voulons leur montrer que les données sont toujours en cours de chargement. Alors, que puis-je dire ? On peut le dire ici. On peut dire « def ». Et puis, comme je l'ai dit, Tech Center. Je vais ajouter un nom de classe et le clustering sera un centre de texte. Et je peux dire que la marge large sera de 25. Et puis à l'intérieur de celui-ci, oui, vous pouvez ajouter une icône ou simplement ajouter un texte. Par exemple, je vais prendre un chargement. Et si je clique dessus, vous pouvez voir le texte de chargement. Vous pouvez voir ce chargement des balises. De cette façon, vous pouvez également faire cette chose. Il peut donc y avoir une icône pour le chargement. Vous pouvez également afficher cette icône de chargement. Il y a beaucoup d'icônes. Laissez-moi essayer. Vous pouvez voir cette icône, cette icône, cette icône. Vous pouvez essayer n'importe quelle icône , par exemple, disons que je veux montrer celle-ci. Ensuite, je peux modifier ici et où nous avons utilisé nos données pour celle-ci. Bon, donc je vais copier celui-ci ici, puis je vais le coller ici. Je vais ajouter celui-ci ici, et comme c'est le cas en BI. Je vais donc le changer pour qu'il soit, je sais que je peux accéder à cette icône au lieu de ce texte ou sortir ce texte. Je peux également afficher cette icône. Et puis je peux dire la taille. Et je vais ajouter que j'ai décidé d'avoir 40 ans. Maintenant, laissez-moi rafraîchir celui-ci. Je peux voir ce chargement et avec cette icône. Cool. Nous devons maintenant déployer notre application sur un serveur. Vous pouvez essayer n'importe quel serveur, mais je vais vous montrer comment déployer notre application sur Netlify. Il suffit donc de créer un compte à l'aide votre compte GitHub ou votre adresse e-mail. Ils ont tellement d'options. Ainsi, une fois que vous aurez votre adresse e-mail, une fois que vous êtes inscrit ici, vous pourrez voir cette option. Donc, vous n'avez peut-être pas de site si vous êtes nouveau ici parce que j'ai déjà été déployé pour une raison pour laquelle je peux voir cette chose. Mais si vous êtes totalement nouveau, vous ne devriez pas pouvoir voir quoi que ce soit. Il suffit donc de cliquer sur le côté et ensuite nous pouvons simplement déposer notre dossier ici. Mais pour cela, nous devons d'abord ajouter nos données de cette façon. Par exemple, permettez-moi de vous montrer. C'est donc la taille de notre client. Et d'accord, nous devons donc construire notre projet. Comment pouvons-nous construire notre projet ? Nous pouvons donc simplement ajouter celui-ci. Alors ouvrez votre terminal et je vais le faire, abord je dois passer à mon client de dossier. Donc le client, maintenant ce répertoire client, donc maintenant je peux dire npm run build. Cette commande va construire notre projet. Ensuite, nous pouvons simplement déployer notre dossier Build sur Netlify, puis déployer notre site. Un dossier doit donc apparaître ici et cela prend quelques instants. Et si vous regardez ici, c'est notre répertoire principal de dossiers. C'est donc le client. Ce dossier client nous avons tous nos fichiers et notre dossier Build doit apparaître ici. Et ensuite, nous n'aurons qu'à faire glisser et déposer ou créer un dossier ici. Ensuite, il va faire son travail correctement. Cela prend quelques fois, donc je pense pouvoir mettre la vidéo en pause pendant un certain temps jusqu'à ce qu'elle se produise, ou je peux simplement vous expliquer quelques autres choses. Ok, nous pouvons voir que notre dossier Build crée quelques fois un peu de technologie. Et c'est notre structure de dossiers que nous avons créée. J'espère que vous avez beaucoup appris de ce cours parce que cette pagination est vraiment importante car vous devrez le faire lors de la pagination dans votre projet. Si vous avez affaire à beaucoup d'éléments de données, c'est très important. Et ce package de pagination React vous offre une grande flexibilité pour l'ajouter sans écrire autant de code. Vous pouvez donc regarder ici. Nous utilisons simplement leur nom de classe pré-construit et nous venons de répondre à notre conception en fonction de nos besoins. Rien de complexe ici. Et ici, nous avons juste besoin d'écrire ces quelques lignes de code et ensuite vous pouvez simplement l'utiliser. Donc, la bonne chose est que, comme je vous l'ai dit j'ai classé ces dossiers de pagination séparément. Vous pouvez donc utiliser le même code et les mêmes assemblages et pour n'importe quel type de données, il suffit de placer les données ou les tranches et ensuite vous pouvez simplement réutiliser votre composant. Ok, donc notre construction est terminée. Maintenant, nous pouvons simplement copier ceci à partir du dossier Build, puis vous pouvez simplement le déposer ici. Donc, ce dossier Build n'a pas besoin d'entrer à l'intérieur et de le faire glisser depuis le dossier Build, puis de le dessiner ici. Et voyons ce que nous pouvons voir si vous obtenez une erreur et nous devrons la corriger. Et cela prendra quelques instants. Vous pouvez voir que la production est en cours de chargement en fonction de la taille du fichier. La production de charbon publiée en quelques secondes, nous pouvons voir que notre application est stable. Il s'agit de l'application de port de liaison. Cliquez dessus. Et nous y voilà. Notre première étape est maintenant en direct et serveur. N'importe qui, n'importe qui peut accéder à ce fichier et cela fonctionne, cela fonctionne et notre pagination fonctionne également. Vous pouvez voir parfait en quelques secondes. Donc, ce que nous avons fait ici et d'accord, donc maintenant nous pouvons changer de nom, nous y pencherons définitivement. C'est donc le nom de notre fichier. Ce que j'ai fait, c' est juste une connexion. Et puis il reste ici et vous serez là, donc il vous suffit d' aller à cette taille. Et ici, vous aurez une option pour vous connecter à partir de votre Connect, vous en aurez la moitié, ou vous pouvez simplement naviguer, ou vous pouvez simplement laisser tomber le plaisir ici, puis vous pouvez simplement déployer automatiquement votre projet. Vous voudrez peut-être maintenant modifier le nom de ce projet. Vous pouvez vraiment le faire. Alors, comment pouvez-vous le faire ? Si vous souhaitez ajouter le nom de domaine, vous pouvez également ajouter un nom de domaine ici, mais je souhaite le modifier. C'est le nom. Et ici, nous pouvons voir le nom du site Chen. Et nous y voilà. On peut dire l'origine de React. Cool. Maintenant, si je clique dessus, ce nom est déjà pris. Donc, quelqu'un a déjà pris. Nous pouvons donc prendre celui-ci réact pagination. Nous API dans les objectifs de données. C'est donc le nom de notre site. Maintenant, si je rafraîchis celui-ci, cela ne fonctionnera pas parce que notre nom a été changé. Nous pouvons donc en venir à citer un aperçu. Je veux que vous alliez notre répertoire principal et nous pouvons voir que le nom a été changé, l'origine réactive. Et si je clique sur le lien, cela fonctionnera à nouveau. Nous pouvons également voir notre indicateur de chargement. Cool. Vous avez appris comment déployer votre F sur Netlify, comment créer cet effondrement de Schoen, comment créer ces pagination et comment elles, comment ajouter toutes ces fonctionnalités ici. J'espère que ce cours vous a plu et je vous souhaite tout le meilleur. Et c'est la dernière conférence de ce cours. Adieu.