Créer une application de blog à l'aide de React et de serveurs JSON | Saumitra Vishal | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Créer une application de blog à l'aide de React et de serveurs JSON

teacher avatar Saumitra Vishal, Front End Developer

Regardez ce cours et des milliers d'autres

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

Regardez ce cours et des milliers d'autres

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

Leçons de ce cours

    • 1.

      Introduction

      6:06

    • 2.

      Mise en place de l'environnement

      3:16

    • 3.

      Projet de réaction de configuration

      2:42

    • 4.

      Configurer un serveur JSON

      1:05

    • 5.

      Structure de dossiers

      1:11

    • 6.

      Configurer des MDB dans notre application

      1:42

    • 7.

      Activer le routage

      6:00

    • 8.

      Travailler sur un en-tête

      6:19

    • 9.

      Configurer un Cloudinary dans React

      1:32

    • 10.

      Composant de formulaires

      16:11

    • 11.

      Télécharger une image

      7:49

    • 12.

      Ajouter un blog

      11:09

    • 13.

      Travailler sur un insigne

      3:29

    • 14.

      Supprimer le blog

      2:36

    • 15.

      Mettre à jour le blog

      10:32

    • 16.

      Page de détails du blog

      14:49

    • 17.

      Voir le blog associé

      14:12

    • 18.

      Blog de recherche

      9:07

    • 19.

      Blog de catégorie

      8:09

    • 20.

      Montrer le dernier blog

      10:47

    • 21.

      Pagination - Partie 1

      15:06

    • 22.

      Pagination - Partie 2

      6:55

    • 23.

      Correction de bug

      1:15

    • 24.

      Page 404 et à propos

      1:26

    • 25.

      Merci

      0:38

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

278

apprenants

--

projet

À propos de ce cours

Dans ce cours, vous apprendrez à créer un site Web de blogging en plein fonctionnement avec l'aide de React JS et de JSON Server. Ce cours est très utile pour les personnes qui ne comprennent pas la technologie de backend. Je vous guiderai pas à pas pour créer ce magnifique site de blogs.

Vous apprendrez :-

  • Comment créer un projet de réaction
  • Comment améliorer le serveur JSON
  • Comment concevoir une mise en page de base
  • Comment implémenter et utiliser la bootstrap de conception de matériaux
  • Comment implémenter la fonctionnalité d'acheminement avec react-rouet-dom v6
  • Comment créer des api différents en utilisant un serveur JSON
  • Comment implémenter la fonctionnalité de blog CRUD en utilisant JSON Sever.
  • Comment implémenter la recherche, le filtre et la pagination dans l'application de blog.

Exigence de base

  • Une sorte de connaissances HTML, CSS et JavaScript requises.
  • Compréhension de base du module ES6
  • Les connaissances de base React ajouteront un avantage.
  • Aucune expérience de travail préalable requise avec le serveur JSON.

Exigence logicielle

Rencontrez votre enseignant·e

Teacher Profile Image

Saumitra Vishal

Front End Developer

Enseignant·e

I am front-end Web developer, specialize in the area of React JS

I have a bachelor degree in Computer Science from KIIT University. 

Will be happy to share my knowledge and create great content for everybody who wants to join my classes.

You can also join me on my YouTube platform, I have more than 8k subscriber on my Youtube Channel.

Let's build awesome things together :)

Voir le profil complet

Level: All Levels

Notes attribuées au cours

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

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

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

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

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

Transcription

1. Introduction: Bonjour mes amis. Bienvenue dans ce cours dans lequel nous allons apprendre. Nous pouvons effacer le site web de blogs de l'ampoule capillaire. Et Jason a dit que je m'appelle Tony traditionnel et je serai restreint dans ce cours. Dans ce cours, nous allons voir comment créer ce magnifique site web de blogs à l' aide d'objets, de réactifs et de portes au lieu d'un, il n'y a pas de back-end impliqué dans cette application. Ce code est donc largement une partie de conception, mais n'est pas un développeur pour le type de dortoir, aucune connaissance de fond. Voyons donc une démo rapide de cette application de blogging, que nous allons construire dans ce cours avec le côté défense réactif Health Bot. Donc, actuellement, nous accordons un avantage de cinq blocs. Et si vous faites défiler vers le bas, vous pouvez voir que nous avons une émission de page par clic ou négative. Vous verrez cinq pâtés de maisons suivantes. Mais pour le moment, nous avons neuf blocs dans la duplication. Donc, il ne s'affiche que pour le blog sur ce clic sur Aperçu, vous retournerez à la page d'accueil. Nous avons déjà regardé les deux sections. Où expliquons-nous la vie de votre blog ? On a une charge cardiaque vivante, donc on a une Carnegie comme s'assurer que sa planche. Et si vous cliquez sur un élément critique, cela sera filtré, particulièrement dans l'ordre. Mais vous pouvez voir que pour ce particulier, nous n'avons pas de blog pour que nous soyons obligés de bloquer ou que vous devez regarder. De cette façon aussi, vous pouvez terminer le bloc audio, d'accord ? Maintenant, celui-là, nous allons sortir tous les blocs que nous n' avons pas encore dixième d'argent. Voyons maintenant la bonne région de cette application de blogging. Mais d'abord, je vais ajouter un blog, et je vais lui donner ce retard. Blog, la démo. Je vais les coller une longue description. Je vais ajouter l'immédiat. Vous pouvez voir cette image de méthodes de regard chargée statistiquement. Nous allons sélectionner une catégorie comme la mode. Et cliquons sur Ajouter. Ce blog est complètement détecté. Vous pouvez voir que nous avons ici comme une démo de blocs décoratifs. Vous pouvez le voir sous lettre pour section. Et pour continuer, c'est bloguer ce composant de garde. Ensuite, vous devez cliquer sur Suivant. Vous pouvez voir que ce blogging et le faire venir ici. Nous avons notre bloc créatif. Maintenant, nous pouvons également supprimer un bloc. Effectuons l'opération de suppression. Cliquez sur cette icône. Ce blog va être dilué. Nous avons le bloc de méthode de carte dilué techniquement. Vous pouvez également mettre à jour le bloc différent. Nous allons donc mettre à jour celui-ci. Commençons par la mise à jour du blog du conseil d'administration. Vous ne pouvez pas mettre à jour l'image ici. Vous pouvez mettre à jour la description et, en particulier, mettons à jour celle-ci. Vous pouvez voir que notre blog est également mis à jour généralement. Et nous avons également une troisième fonctionnalité dans cette application. Vous pouvez également lui définir les blocs. Je vais le configurer pour bloguer avec un mot-clé tactique. Et si vous cliquez sur le plateau, vous sortirez, c'est bloqué avec cela donné. Et si vous cliquez sur cette croix, vous obtiendrez un bloc de backhaul que nous avons dans nos portes AND au lieu d'un pied de planche Timperley également. Nous n'avons pas non plus de forme s'il ne s'accouple pas. Je vais également apprendre que si les données sont normales correspondent à l'itinéraire. Nous avons également un peu de détails sur cette application, cliquez sur Mode lecture. Vous n'accéderez jamais à la page détaillée de ce bloc particulier. Et s'il est refroidi, vous pouvez voir que nous avons une description. Nous avons également eu un lien avec ce blog particulier. De là aussi, vous pouvez naviguer sur la saleté est le bloc détaillé. Par conséquent, si vous cliquez sur ce composant de carte, vous accéderez à ce nouveau délégué de ce bloc particulier. Si vous cliquez sur Retour en arrière, revenez généralement à la page d'accueil. L'application globale que nous allons créer dans ce cours avec l'assistant et les différentes applications serveur. n'y a pas de back-end impliqué. Nous allons être utilisés uniquement dans GitHub. Server implémentera toutes ces fonctionnalités. Vous pouvez constater que ce code est conçu pour un développeur de contenu. Je n'ai pas de back-end non mortel. Parce que nous allons implémenter tous ces enfants comme 13 dégénérescences, filtrer l'ajout, la création, suppression et le téléchargement avec j sine Theta. Mais ce n'est que dans cette application React sur l'application que nous allons construire ce code avec React n GSM, corrigez cela. Mais parlons maintenant exigences de base avant de vous inscrire à la discorde. Ce cours est conçu en fait, d'un deck. N'importe qui peut rejoindre ce cours, personnage de directeur pour apprendre à créer à nouveau un site Web avec la propriété Health ET Gates, vous suffit d'avoir une compréhension de base du HTML, CSS, du JavaScript, ainsi que en tant que connaissances de base de React. Ensuite, les médecins citent, vous aurez la Pologne sur la façon de créer un site web de blogs avec l'aide de JSON. Alors, qu' attendez-vous et exécutez ce code afin d'apprendre à éclaircir le développement du reflet avec le prof en tête, côté réactif. Et si vous avez une suggestion de barre de requête, vous pouvez toujours me contacter. Je ferai de mon mieux pour résoudre toutes vos questions. De mon côté, je vous verrai dans la section des cours. 2. La configuration de l'environnement: Dans cette vidéo, je vais discuter des outils et des logiciels nécessaires pour travailler sur ce projet. Dans ce projet, je vais utiliser Visual Studio Code Editor pour écrire notre code. Assurez-vous donc d'appeler cette origine cognitive pour pouvoir télécharger cette origine mobile. J'ai déjà téléchargé celui-ci. Et la prochaine chose que nous avons besoin d'installer le nœud j également pour avoir un serveur de développement pour les réactifs ici. Et aussi avec la note, vous obtiendrez un gestionnaire de paquets npm pour installer la dépendance et assurer d'installer le nœud ? Oui. Laissez-nous en faire un. Je pense que c'est tout. C'est tout ce qui est nécessaire pour ce projet. Maintenant, j'espère que vous avez installé le nœud j et l'éditeur de code Visual Studio dans votre système. Et vous pouvez vérifier si le nœud JS qu'il a installé ou non sur votre système. Vous pouvez donc accéder au CMD, ouvrir, ouvrir mon AMD, et vous pouvez exécuter une commande ici, noeud tiret v. Vous obtiendrez le nœud d'origine que le nœud JS a indiqué sur le terme de page. Passons maintenant au code Visual Studio qui devra être inséré dans notre code Visual Studio pour devenir notre DG Développement. Whoa mecs, j'ai ouvert mon visuel si vous codez et que nous devons installer la tension thermique. Cette tension sera comme première unité à installer ce support d'air. Fondamentalement, il colorisera votre support d'ouverture et de fermeture. Et je vous ai déjà installé pour installer ces actions et pour que vous puissiez blesser les dissections et comme ici, le support ici. De cette façon, vous pouvez installer celui-ci. Unité de lumière solaire dirigée pour l'installer. Il s'agit d'un extrait, d'un extrait de code. Donc, aidez-nous mythiquement à générer une réactance est un extrait de code comme si vous voulez écrire un composant fonctionnel, il vous suffit d'écrire des RAF. Il sera fonctionnel de l'ordre du jour hebdomadaire, une composante. Il est très utile de générer des lipides réactifs à l'aide de cette attention. L'autre chose que nous devons installer comme ce devis, est autorisée. Vous pouvez également installer celui-ci afin de rencontrer notre conseil d'administration. C'est ça. Seulement ce que le transitoire requis dans notre code Visual Studio. Je vous verrai dans la prochaine vidéo où je commencerai à mettre en place le projet React JS. 3. Configurer le projet React: Les gars, maintenant je suis dans ce répertoire et je vais ouvrir une invite de commande ici. Nous allons ouvrir une invite de commandes. Je vais créer une application React à l'aide de la commande et je choisit Create, React app et React JSON block. Ce sera le nom de notre application. Allons appuyer sur Entrée. Il faudra environ deux à trois minutes pour installer toutes les dépendances nécessaires. Je reviendrai une fois toute la dépendance. Donc, les gars, la configuration de notre projet est terminée. Maintenant, allons d'abord dans ce répertoire qui est React, JSON, blob. Nous sommes maintenant dans cette introduction avant démarrer npm lorsque l'informatique doit installer certains paquets. Nous allons travailler avec le routeur React dom. Laissez-nous installer ce paquet. Routeur React vers le bas de l'axe que nous allons utiliser. Ensuite, nous allons utiliser React pour certifier ou afficher la notification de toast. Puis quand il est trop grand, IMDB réagit à l'interface utilisateur. C'est parce que nous allons également travailler avec la conception des matériaux piégés dans ce projet pour construire notre composant. Installons ces paquets. En attendant, j' ai déjà ouvert ce projet dans mon code Visual Studio. Allons dans le code VS. Comme vous pouvez le constater ce projet est ouvert dans mon code Visual Studio. Supprimons tout le contenu indésirable que nous avons dans notre fichier app.js. Je vais juste donner un titre ici. Blog. Supprimons d'abord ce 1. Et nous n'avons pas besoin de ce fichier texte. Enlevons-le également. Supprimons également ce point de logo en tant que fichier SVG. Maintenant, vérifions si coordonnée de notre paquet est indiquée ou non. Notre bouton de colis. Faisons et démontrons et attendons le chargement de l'application dans le navigateur. Chargement de l'application dans le navigateur sans problème. 4. Configurer JSON Server: La prochaine chose que nous devons faire, donc je vais configurer notre serveur JSON ici. Je vais donc créer un fichier à la racine, c' est-à-dire le fichier db.json. Et ici, nous allons avoir un blogs parce que nous allons avoir tous les blogs. Mettons l'un ou l'autre en particulier maintenant, cette époque, car nous allons stocker tout ce blog à l'intérieur de ce tableau. Maintenant, nous devons écrire un pour démarrer notre serveur JSON. Je vais donc aller au script de la page 20 pour commencer ça. Et le serveur JSON. Je viens de coller ce script. Pour démarrer le serveur JSON. Nous avons notre MDB axial, React UI Create, React Router, réacteur diamant. Seuls ces quatre paquets sont nécessaires pour fonctionner sur notre application de blog. 5. Structure des dossiers: La prochaine chose, ce que nous devons faire, je vais créer un dossier ici. Tout d'abord pour peu de composants sont tous les composants seront placés dans ce dossier. Dans le deuxième dossier, nous allons avoir des pages. Je vais créer un fichier dans ce dossier PDF. Nous allons avoir comme notre page d'accueil, home dot gs. Ensuite, nous aurons notre page de blog. Nous allons donc utiliser la même page, mais ajouter le nouveau bloc ou mettre à jour le bloc d'adjectifs. Le prochain fichier que nous allons avoir vie blog.js. Nous pouvons donc également visionner le blog sur une page distincte. Les dossiers que vous n' aurez pas formés. Nous n'allons donc pas non plus financer la méthode si l' URL ne correspond pas. Les autres fichiers dont nous allons en avoir un autre. Il ne contiendra que quelques informations de base sur cette application. 6. Configurer le MDB dans notre application: Maintenant, la prochaine chose que nous devons faire, donc d'abord, je vais configurer notre matériel est d'ajouter Bootstrap dans cette application. Allons donc sur le site officiel de la conception matérielle Bootstrap. Cliquons sur Commencer. Que doit-on faire ici ? Allons juste descendre. D'abord. Nous devons importer ce fichier CSS pour appliquer le style du matériel de voyage en bateau dans notre application. Donc, quand il a fallu page C'est une déclaration importante dans ce fichier js de point d'index. Ici, nous devons payer. Maintenant, la prochaine chose que nous devons faire, nous allons également utiliser cette icône Font Awesome. Il suffit de copier celui-ci. Et collons-le ici dans ce index.html. Et nous allons également travailler avec ce style de police rover. Copions également celui-ci. Il suffit de le coller ici. En troisième lieu se trouve le dossier public. Je vais mettre mes images. D'accord ? Je vais apporter les images. Le troisième est le dossier public. Je viens donc de coller notre dossier d'images dans ce dossier public. Et vous n'avez pas à vous soucier toutes ces images car je vais fournir ces éthers. Vous n'avez donc pas à vous soucier de toutes ces images. Jusqu'à présent, nous venons de terminer notre configuration de base. 7. Activer le parcours: Maintenant, la prochaine chose que je vais faire, je vais enregistrer tout cet itinéraire. Je vais donc d'abord générer un extrait de code ici. Donnons juste un titre pour l'instant, comme à peu près. Maintenant, lisons cela un peu ici aussi, en utilisant la RFC. Donnons le titre. Vous l'avez fait. Centreons ça un peu ici aussi. Il s'agira d'un blog unique dans lequel nous pourrons voir les détails du blog spécifique. Maintenant, ce sera le titre. Nous ne nous sommes pas formés aussi. Gardons pour l'instant, pas formées. Maintenant. Que doit-on faire ? Allons dans le fichier app.js. Et ici, nous devons faire descendre le routeur React Component. Nous allons apporter des itinéraires, un routeur de navigateur, un itinéraire. Retirons celui-ci. Supposons qu'on retire celui-ci. Au niveau supérieur, nous allons avoir un routeur de navigateur. Collons ce contenu. À l'intérieur de ça. Maintenant, nous allons avoir tous les itinéraires, donc nous allons enregistrer notre ancien itinéraire à l'intérieur de cet itinéraire. React routeur dom a été mis à jour la version six. Si doux n'est pas disponible dans le routeur React Dharma vergence six. Nous devons donc utiliser la route. Cette route. Si vous vouliez rigide 35e compris, alors vous devez retourner cette route. Ici. Nous allons fournir un chemin à cinq fois pour enregistrer notre élément de page d'accueil que nous devons fournir ici. Nous allons enregistrer notre itinéraire de cette façon. Si le code VS importe automatiquement ce composant et qu'avec des itinéraires, nous n'avons pas besoin de fournir le mot-clé exact. Maintenant, copions celle-ci et la prochaine diapositive, nous allons avoir notre blog. Pour cela, nous allons utiliser le bloc composant ajouté. Le troisième itinéraire que nous allons avoir, vous avez fait un blog et nous allons modifier le blog en fonction de l'ID. Ici, nous devons fournir la pièce d'identité. Et pour cela également, nous allons utiliser le même composant pour mettre à jour le blog existant. Maintenant, un autre feu de route simple bloc V. D'accord ? Ainsi, l'utilisateur peut également consulter le blog unique qui sera également basé sur l'ID. Maintenant, cette fois, nous allons afficher la page comme Blob uniquement. Le prochain itinéraire, nous allons avoir une simple page À propos. Pour l'instant, il suffit de copier. Il s'agira de cela. R sera à peu près. Nous allons entrer sur la page À propos. L'URL ne correspond pas. Donc, dans ce cas, nous allons résoudre non pas la police. Apportons le composant de formulaire NADH. Nous allons d'abord vérifier si tous les routeurs fonctionnent ou non. Allons dans le navigateur. Lisez celle-ci. Donc, la maison fonctionne déjà. Maintenant. Allons sur le blog. Cela fonctionne également. Blog. Blog. Nous devons fournir un ID, mais cela fonctionne également car nous entrons le même composant pour ajouter le nouveau bloc, modifier le bloc sortant. Les autres itinéraires que nous avons à ce sujet fonctionnent également. Nous avons un seul blog, un blog, un bloc de points. Vous devez également fournir la pièce d'identité ici. Cela fonctionne donc également si les URL ne correspondent pas. Gardons donc une URL aléatoire. Cela fonctionne également. C'est bon, c'est bon. Nous avons réussi à enregistrer toutes les sécheresses que nous avons dans notre dossier de chiffres. La prochaine chose que je vais configurer le T phi réactif dans cette application. Je vais coller pour importer une déclaration IF ici. Ce traitement bleu importé est nécessaire pour configurer, réagir avec actif dans notre obligation. Nous allons donc vous donner un conteneur. Cela va marcher. Nous avons également configuré le réacteur. Démarrons également notre serveur JSON. C'est donc dans notre répertoire que nous avons créé notre projet React. Allons et dossier d'état et ouvrons un TMD. Et on ne va pas courir. C'est pour k. Donc, pour le moment, nous n'avons aucun contenu pour tester celui-ci. 8. Travailler sur l'en-tête: La prochaine chose que nous voulions créer un composant d'en-tête afin pouvoir facilement naviguer dans notre obligation. Passons au code VS. Et dans le dossier des composants d'état, je vais créer un fichier appelé header dot js. Trouvons générer un extrait de code ici. Pour l'instant. Allons maintenant sur le site officiel de la conception matérielle Bootstrap. Ici, je vais utiliser le composant de navigation. Je vais utiliser la barre de navigation. Et je vais utiliser ce numéro. Allons donc ramper vers le bas. Je vais copier ce code jusqu'ici. Passons au code VS et collons-le ici. Nous devons également copier le composant requis lorsque service informatique doit apporter ce composant à partir de notre MDB React UIKit. Nous allons donc copier toute cette importation. Mettons-le ici. Nous devons également apporter un état énorme. Ici. Deux choses que je dois aborder. Nous allons définir un seul état. Donc const user state false. Ici, il sera expédié, il sera réglé. Donc, nous ne faisons que basculer ici, donc ce sera le cas. Et ici aussi, nous devons simplement le dire. Nous allons donc créer un blog. Si je fais une demande, je vais mettre ici notre logo, quelle est notre obligation ici. Je vais donc supprimer celui-ci et nous allons accéder à la page d'accueil. Il sera latéralement. Ici. Je vais avoir mon image. Je peux utiliser ici, image là. Et trier, je peux vous donner notre image pour plus tard que le dossier public fade-out. Donc les images, et nous avons un logo, logo dot JPG. Alternativement, nous devons fournir pour qu'il ne soit que bas. Nous devons donner un style en ligne ici. Ce sera comme de la hauteur. Ceci, et gérer la couleur d'arrière-plan. Et nous devons également modifier la couleur d'arrière-plan. Je dois donner ici 5411 b. Il sera léger. C'est très bien. Je pense que c'est tout. Quand il faut changer d'autres choses ici. Ce sera donc comme une seule tranche ici parce que nous n' arriverons jamais à la page d'accueil. Le prochain graphique que nous allons avoir comme un bloc publicitaire. Ici, nous pouvons spécifier ce bloc publicitaire de sortie. Le prochain pâté de maisons que nous allons avoir. Nous pouvons donc préciser à propos de. Ce sera à peu près. Nous devons également donner une certaine couleur de style en ligne. Je vais vous donner un triple F. Copions celui-ci car nous devons également l'utiliser ici. Utilisons-le ici aussi. Et retirons celui-ci, mais je n'ai pas besoin de celui-ci. Nous devons également ajouter cela comme compte ici aussi chez le tout-petit NaBR. Je pense que pour l'instant, nous avons fini avec ce composant d'en-tête. Utilisons le composant theta dans ce fichier app.js. Dans ce fichier app.js, je vais apporter notre en-tête ici, importera automatiquement ce composant. Voyons si cet en-tête s'affiche ou non. Vous pouvez voir que nous avons encore notre joli en-tête. Et si vous cliquez sur Ajouter un bloc, nous aurons un bon pour l'ajout. Ici. Vous avez peut-être remarqué comme si c'est le cas, il se recharge ici chaque fois que je clique sur la thêta. Parce qu'avec la largeur du composant Bootstrap de conception de matériau vous ne pouvez pas utiliser ici pour mot-clé. D'accord ? Donc deux ne fonctionnent pas avec ces liens de navigation MDB. Si vous le faites aussi, disons que si vous en donnez deux ici, cela ne marchera pas. Vous pouvez voir que cela ne fonctionne pas. Vous devez encore utiliser, etc. Il existe une autre façon d'en utiliser deux. Donc, en gros, vous devez faire baisser le grignotage du routeur React. Et ensuite, vous pouvez utiliser naturellement au lieu de MDB NAB Berlin. Mais dans ce cas, vous recevrez un avertissement dans votre console. C'est donc à vous de choisir si vous vouliez utiliser la liaison Nearpod depuis le réacteur AutoDock, vous pouvez utiliser à la place de ce MDB jamais lié. C'est donc à vous de décider. Maintenant. Nous avons maintenant fini avec ce composant d'en-tête dans notre application. 9. Configurer le cloudinary dans React: Ensuite, nous allons d'abord travailler sur nos blocs Ajouter une modification. Donc, d'abord, je vais activer l'opération pour ajouter des blogs. Afin d'ajouter un bloc pour agrandir pour effectuer une configuration dans notre Cloudinary car nous allons nuire à notre limite dans ce Cloudinary. Ensuite, nous obtiendrons le lien image venant ou cloué à partir de notre Cloudinary. Ce lien d'image nous est indiqué sur notre serveur JSON. Combattons Cloudinary configuré. Donc, les gars, je suis dans mon compte ordinaire. J'espère que vous avez un compte sur Cloudinary. Que devez-vous faire ? Vous devez accéder à vos paramètres. Vous devez donc cliquer sur cette icône de réglage. Et vous devez cliquer sur ce téléchargement. Faisons défiler vers le bas. Ici. Vous devez définir votre préréglage de téléchargement. Vous pouvez le faire. Il suffit de cliquer sur ce préréglage Ajouter le téléchargement. Il générera un nom préféré aléatoire. Et ici, vous devez utiliser non signé. Et cliquons sur Enregistrer. Vous pouvez voir que notre téléchargement 3 tiers est créé ici. Vous pouvez simplement copier celui-ci et vous pouvez le peindre ici en V, comme dans le code VS. Nous en avons fini avec cette configuration de base de Cloudinary. 10. Composant des formulaires: Donc, la prochaine chose que nous allons travailler sur notre page de blog a ajouté. Nous devons apporter certains composants de nos travaux de conception de matériaux pour créer un composant de formulaire. Apportons ces composants en premier. Nous avons besoin d'une validation MDB. Nous allons également effectuer validation côté client de notre côté uniquement, entrée MDB, IMDB, btn. Et la prochaine chose que nous devons faire, nous allons aussi vous apporter juste de la cassette. J'ai aussi besoin d'un axial. Apportons celui-là aussi de notre phi. Nous allons imprimer des toasts. Définissons maintenant notre état initial. État initial. Nous allons avoir notre bloc de motifs. Ensuite, nous allons avoir une description. Mais notre blog. Ensuite, nous aurons une image de catégorie que vous avez vue venir Cloudinary. Nous allons obtenir des atomes immédiats. Donc, nous allons être stockés que vous avez déjà, il l'obtient au lieu de. Nous allons maintenant avoir une catégorie différente. Dans nos options déroulantes. Nous allons avoir une catégorie comme Ravel. Ensuite, nous allons avoir la catégorie Life Fitness, Sports. Ensuite, nous allons prendre de la nourriture. Ensuite, nous avons une sixième catégorie pour créer un blog. Maintenant, ici, nous n'aurons aucune valeur. Donc, valeur de formulaire, valeur de définition. Vous venez de le faire. Ici. Nous allons passer l'état initial. Après qu'ils auront une méthode d' éditeur pour la catégorie que nous avons achetée ou déroulante. Nous ne sommes pas prêts à utiliser un composant MDB React. Nous allons donc utiliser une liste déroulante HTML normale pour créer une liste déroulante de catégorie jusqu'à présent que nous devons également gérer une méthode distincte dans GitHub. Nous allons donc gérer dans un état distinct, méthodes contemporaines de l'État. Ce sera nul. Maintenant, nous allons détruire toute cette valeur, la valeur de forme Ahmad. Nous allons le distraire comme le titre, la description et l'URL de l'image. OK ? Travaillons maintenant sur nos propres composants. On peut enlever tout ça. Ici. Nous allons utiliser la validation IMDB. À l'intérieur de ça. Nous allons lui donner un nom de classe. Nous utilisons donc la plume grep plus. Et après cela, nous pouvons avoir un style en ligne comme la marge, le pixel supérieur. Vous ne devez pas valider. Nous passons ces accessoires novalidés. Et nous allons avoir sur un peu de manette de soumission. Définissons cette fonction. Sinon, nous allons le sortir. OK ? Définissons donc celle-ci pour l'instant. Nous ajouterons la logique plus tard. Troisièmement, nous allons avoir un tag p ici. Nous pouvons donner de la lumière ici que nous pouvons donner un nom de classe pour le style, pour styliser ce titre. Donc FS, F, gras. Voyons d'abord celui-là. On dirait. Fermons celui-là. Ce n'est pas nécessaire. Cliquons sur ce bloc Ajouter. Nous avons notre bloc publicitaire. Après cela, nous devons travailler sur notre fichier d'entrée. Alors plongez à l'intérieur de ça, je vais avoir. Je suis en train de coiffer. Je vais choisir un style ici. C'est du carrelage. Je viens de le coller. Nous allons avoir notre contribution de la BDIM. Nous pouvons vous donner une valeur. Ensuite, nous allons avoir un nom, un titre. Ensuite, le type sera le type externe. Ensuite, nous allons avoir notre méthode OnChange. Suivez essentiellement l'état de chaque champ de saisie sur chaque prop GIF. Nous y allons, nous allons en avoir un sur le changement d'entrée. Ce ne serait donc pas seulement nécessaire. Ensuite, nous allons avoir un niveau. Ce sera donc un titre. Ensuite, la méthode de validation que vous devez donner au cas où le champ d'entrée est dans la pauvreté. Nous pouvons donc leur donner une méthode. Donnons un titre. Nous devons le rendre invalide. Maintenant. Nous allons faire une pause ici. Et après cela, je vais le copier dans la coupole du portefeuille. Cela pour les fichiers de description N catégorie. Je vais copier cette entrée quelques fois. Copions celui-ci. La deuxième est la description. Description. Le nom sera Description. protection contre les dipôles en cas de changement sera notre chaîne d'entrée. Il sera nécessaire. niveau sera la description. Ici, on peut donner une jambe. Veuillez fournir une description. Description. Nous allons utiliser une zone de texte. Nous pouvons diviser la zone du détecteur de défaillance et nous pouvons donner des lignes de fichier en deux parties. Nous n'allons pas utiliser un type égal à cela. Il sera phi situé dans le fichier PSF. La valeur n'est pas prise en charge, nous devons donc supprimer celle-ci. Pour cela, nous n'allons pas travailler avec l'oninput J. Pour cela, nous allons utiliser une fonction distincte qui sera Upload Image. Donc, lors du chargement de l'image, s'agira de Upload Image. Et ici, nous pouvons retarder la cible des points. Maintenant, après cela, nous allons avoir des listes déroulantes. Nous n'allons donc pas travailler avec le matériel dans la liste déroulante bootstrap. Nous allons utiliser la STM plus tôt. Sélectionnez Je vais utiliser ici. Et ici, je vais utiliser le nom de la classe. Donc, catégorie. Nous devons définir le style dans notre fichier CSS de point d'index. Donnons une liste déroulante de catégorie déroulante linéaire de première classe . On va avoir de la teinte. Pour cela également, nous allons gérer une méthode distincte, d'accord, donc sur la valeur de catégorie nous n'aurons disponible qu' avec la catégorie. À l'intérieur de cela, nous allons avoir notre première option. Ainsi, les options disponibles au départ de la lumière du soleil. Veuillez sélectionner une catégorie. Veuillez sélectionner une catégorie. Après cela, nous avons déjà défini nos options ici. Vous pouvez le voir en haut. Nous allons cartographier toutes ces options. Ici. Nous pouvons utiliser les options Dot Map. Nous allons avoir une seule option. Nous allons avoir un indice. Ici. Je vais utiliser Option. Et en fait, je vais avoir une option à l'intérieur de cette valeur sera l'option. Vous pouvez également donner cela en particulier dans GitHub en remplissant la valeur existante. Donnons cela maintenant. Nous allons vous donner un indice. Sinon, nous recevrons un avertissement. Nous allons également fournir cela dans d'autres champs de saisie. Par conséquent, nous pouvons également donner des informations détaillées avec l'Italie utiles à la popularité de la valeur existante sur chaque champ de saisie. En cas d'obtention du blog distinct. Nous utiliserons cela en particulier. Si vous ne l'utilisez pas, vous recevrez un avertissement dans une console. Nous avons créé ce menu déroulant. Maintenant. Nous devons travailler sur notre bouton. Allons faire quelques pauses ici. Ici. Je vais utiliser MDB en dipôle btn avec une certaine largeur. Et je vais utiliser un style en ligne. Je vais donner de la marge ici. Et ce sera dix pixels. Ici. Je vais juste donner et copions encore une fois parce que nous allons avoir un bouton Retour en arrière. Il va revenir en arrière. Nous allons utiliser ici la couleur, le danger. Supprimons le type soumettre. Nous n'en avons pas besoin. Ici. Nous allons avoir notre méthode onclick. Mais généralement, si vous cliquez sur revenir en arrière, vous n'arriverez jamais à la page d'accueil. Nous devons donc amener la navigation à partir de R. Nous devons faire baisser le pouce américain ou le routeur React. Allons faire descendre ce routeur React. Pour nous amener à naviguer. Et le pouls que nous avons poussé vers ce parent. Utilisez naviguer dans la variable, naviguer. Maintenant, utilisons cette variable de navigation ici. Maintenant, nous devons définir toute cette fonction qui est sur le changement d'entrée et sur Charger l'image. Définissons celle-ci. En dehors de ce retour. Cela recevra un e-mail. Tout le monde. Ainsi, les deux fonctions recevront des barres X de l' événement ici, le téléchargement actuel de l'événement, le téléchargement, il sera empilé ici. allons d'abord vérifier si nous sommes en mesure de voir ou non notre composant de formulaire. Allons donc dans le navigateur. Donc sur la catégorie. Nous devons donc définir const on equity change. Définissons également celui-là. Allons dans le navigateur. Celui-là. Dans le fichier de type d'entrée GitHub. Nous n'avons pas besoin de fournir le nom. Ok, laissez-moi me débarrasser de celui-ci aussi. De plus, nous n'avons pas besoin de fournir. Débarrassez-vous de celui-ci aussi. Allons maintenant dans le navigateur. Notre formulaire semble donc très bien ici. Maintenant, nous avons un peu de travail sur cette catégorie déroulante, accord, car nous utilisons notre liste déroulante HTML simple ici. J'ai ajouté le nom de la classe ici. Vous pouvez voir la liste déroulante de cette catégorie. Donc nous allons le faire, nous allons utiliser index.js, CSS, échec à appliquer notre style. Ici, je vais payer un peu de style. J'ai donc ce vecteur, un code secret pour ce nom de classe. Allons maintenant dans le navigateur. Mais maintenant, vous pouvez voir que notre liste déroulante de catégorie, il ressemblait presque à un composant de conception de matériaux uniquement. Je viens donc de faire de mon mieux pour faire de l'équivalent au composant Bootstrap de conception de matériaux. Notre format est complété ici. 11. Télécharger l'image: Donc, la prochaine chose que nous devons ajouter le bloc. Donc, avant d'effectuer ce bloc d'ajout, commençons par travailler sur ce pilote. Ok, passons au fichier blog.js ajouté. Passons à l'image Upload. Et pourtant, nous recevons un dossier. Commençons donc par la console journal de la console ici, Fichier par local. C'est un peu difficile. Allons donc d'abord à la console. Nous allons ouvrir notre console. Je vais donc mettre ce côté console uniquement. Ici. Je vais télécharger une image. Nous allons donc télécharger une image. Maintenant, vous pouvez voir que nous avons obtenu notre BY plus tôt et qu'il est contenu dans une seule zone d'objet. Nous pouvons faire quelque chose comme ça. Il s'agira toujours d'un tableau unique d'objets, sorte que nous puissions passer comme ça. Revenons maintenant au navigateur. Rafraîchissez-le, téléchargez celle-ci, encore une fois, cette image. Maintenant, vous pouvez voir que nous avons ici un objet qui contenait la taille du nom, le type, tous contiennent cinq fois pour travailler sur cette fonction sur Upload Image. Ici. Je vais être particulièrement bien ici, comme Const Data. De nouvelles données, les données de formulaire contractent essentiellement un ensemble de paires clé-valeur représentant la pilule de forme. Ici, nous sommes en train de créer une paire clé-valeur pour notre Farmville qui nous permet d'interagir avec notre API Cloudinary car nous allons maintenir notre limite sur Cloudinary. Nous devons faire une demande d' API et les données de formulaire sont essentiellement, nous pouvons facilement effectuer des requêtes HTTP à l'aide de données de formulaire. Nous pouvons établir un tarif périodique et nous pouvons télécharger notre image sur Cloudinary. C'est pourquoi nous utilisons ici des données. Maintenant, après cela, nous devons essentiellement ajouter. Donc, les points de données de formulaire ajoutent. Et ici, nous devons donner la clé et la valeur. Il s'agira de données de valeur, point d'ajout. Et ici, nous devons définir notre préréglage de téléchargement. Il sera donc prédéfini de téléchargement. Ici, nous devons passer notre valeur prédéfinie de téléchargement. Nous avons donc déjà copié ce préréglage de téléchargement lors de la configuration de Cloudinary. Mettons-le ici. Maintenant. Nous devons faire une demande HTTP. Nous allons donc utiliser les x et nous allons faire une demande d'API avec nos Cloudinary TP, APA dot, Cloudinary dot. Ensuite, on souligne un. Ici. Nous avons sorti DB, neuf, Q, C, D. Donc si vous vous demandez ce que c'est ? Donc, si vous vous demandez ce que c'est ? Il s'agit de la clé API. Une fois que vous aurez créé un compte sur Cloudinary, vous obtiendrez votre clé API. Allons donc au Cloudinary, et maintenant je suis dans mon tableau de bord. Et ici, vous pouvez voir que j'ai un nom de cloud. J'ai utilisé ce Cloud négatif. Une fois que vous aurez créé l'économie, vous obtiendrez votre propre cloud natif. Alors n'utilisez pas ce nom de clade car je vais le faire dans ce nom de clade. Après avoir téléchargé cette vidéo, je souhaite travailler avec ce nom de cloud. Je viens de copier celui-ci. Mettons-le ici. Je ne me trompe donc pas. Maintenant que nous devons charger l'image. Après cela, l'UE est déjà l'image téléchargée. Ici, nous pouvons transmettre nos données. Maintenant. Nous obtiendrons notre réponse et nous allons donc nous y dissoudre . Ensuite, méthode. Commençons par mettre votre console, la réponse du journal de points de la console, la réponse. Ce sera comme un lien. Nous allons donc répondre à une forme de réponse. Commençons par télécharger une image. Nous allons vérifier ce que nous recevons. Promouvoir. Référez-vous à celui-ci. Nous allons télécharger cette image. Voici une réponse achetée. Dans les données. Vous pouvez voir que nous avons obtenu notre URL. Si vous copiez cette URL et collez-la ici. Maintenant, vous pouvez voir qu'avec cette URL, nous avons notre image que nous avons téléchargée. Nous allons donc stocker cette image. Vous êtes lié sur notre serveur JSON. J'ai utilisé Cloudinary pour ce projet car dans GSM Theta, mais vous ne pouvez pas télécharger une image directement. La raison pour laquelle j'utilise Cloudinary pour cette application. La prochaine chose que nous devons faire, c'est que nous allons faire sauter celui-là. Passons au code VS que nous puissions supprimer ce journal de la console. Nous pouvons fournir des informations pour l'utiliser, que l'image ait été téléchargée ou non. Donc, torch dot info. Après cela, nous pouvons donner une image téléchargée avec succès. Et après cela, nous devons le faire, nous allons définir la valeur du formulaire. Je vais étaler notre propre valeur. Et j'ai juste besoin de mettre à jour l'URL de l'image pour que l'URL et la façon dont nous puissions obtenir l'URL de l'image. Cependant, nous devons aller à ces données de points de réponse, URL de points. D'accord ? Nous avons produit quelque chose comme ça ici. URL de points delta. Prenons également en charge ce guide. Donc, si vous avez des données, disons une sorte de notification. Et nous pouvons donner notre propre méthode comme si quelque chose s'est mal passé. Téléchargez le mythe et c'est terminé. 12. Ajouter un blog: Nous allons maintenant travailler là-dessus sur le changement d'entrée. Nous recevons l' événement ainsi que le prénom et la valeur du nom de la cible. Valeur, valeur définie. Je vais m'étendre sur la valeur. Ici. Ce sera comme un nom, une valeur. Et travaillons également là-dessus sur la catégorie. Ce changement de catégorie recevra également le II. Après cette valeur de paume. Ce sera comme une valeur de forme. Ici, nous sommes simplement préoccupés par notre catégorie de terrain concurrentiel. Valeur cible. Allons dans le navigateur. Fermons celui-ci et voyons si nous sommes capables de taper quelque chose ou non dans InputField. Nous sommes donc en mesure de taper le téléchargement que nous avons déjà vu, sélectionnons une catégorie. Nous sommes également en mesure de sélectionner cette catégorie. Après cela, nous allons travailler sur notre dossier de soumission. Gérer la soumission. Tout d'abord, faisons l'événement les points. En gros, nous empêchons le comportement par défaut d' un navigateur lors de la soumission. Formez par pitié. Si vous cliquez simplement dessus sans fournir la valeur dans chaque champ de saisie, nous recevrons un message d'erreur. Et pour cette catégorie, nous ne recevrons pas de message d'erreur car nous n'utilisons pas les composants de conception des matériaux. Nous allons fournir notre propre méthode ici jusqu'à présent que nous avons déjà défini l'état. Vous pouvez le voir ici. Après cela, ce que nous devons faire pour nous soumettre. Vous pouvez vous ôter la vie. Si vous n'avez pas de catégorie. Ensuite, nous pouvons définir la méthode de catégorie. Et la méthode sera comme liste, sélectionnez la catégorie. Au moment de l'utilisateur, sélectionnez la catégorie dans la liste déroulante. Ensuite, je vais définir cette catégorie sur nulle. Alors, faisons-le ici. Définissez uniquement les méthodes d'erreur de catégorie sur Null. Affichons cette méthode d'erreur. En dessous de cette sélection. Bon, je vais mettre cette sélection. Que devons-nous faire ? Nous allons d'abord vérifier si vous disposez de la méthode d'erreur de catégorie. Ensuite, nous allons l'afficher. Et ici, j'utilise un nom de classe ici. Ce sera donc tard Caltech trois. Corteva, mon visage. Ce nom de verre que je vais utiliser avec div. Ici, je vais à la méthode d'édition de catégorie et je vais choisir le style pour cette méthode d'éditeur de catégorie. Troisièmement, ce fichier CSS de point d' index. Je vais avoir ma catégorie au nom de classe atmosphérique et je vais choisir le code CSF pour ce cours. Cela indique que je vais appliquer la méthode d'erreur de catégorie. Mais allons dans le navigateur. Cliquez maintenant sur Ajouter. Maintenant, vous pouvez voir que nous avons également reçu le message d'article pour la liste déroulante des catégories. Et dès que vous sélectionnez une catégorie, elle disparaîtra. Et la même chose que nous utiliserons pour chaque modification et chaque remplissage. Et je ne télécharge pas l'image de ce fichier car elle va à nouveau charger l' image sur Cloudinary. Je ne vais donc pas télécharger l'inutile. Laissez-le là. Maintenant, nous allons ajouter notre blog dans le serveur JSON. Nous devons travailler sur ce handle soumettre. Allons dans le fichier Edit blog.js. À l'intérieur de cette poignée, soumettez-vous. Où nous avons notre poignée quelque part. Ici. Nous en avons cent, deux cents. Donc, à l'intérieur de cette poignée quelque part, je vais d' abord prendre le titre. Si vous avez la description, si vous avez obtenu l'URL de l'image de notre Cloudinary, et c'est le cas. Et s'il s'agit d'une catégorie électrique, vous seul êtes autorisé à créer un blog. C'est notre première tique. Après cela, nous allons également à ce jour lors de la création d'un blog. Nous avons donc également besoin de données. Donc, ça coûte. C'est cool de devoir définir cela. Devons-nous définir cette fonction en profondeur qui est responsable l'obtention de la dette actuelle au moment de la création du blog. Pourtant, je vais juste coller du code. OK ? Je m'attends juste à un code ici. Dans ce code est nécessaire pour obtenir la dette actuelle au moment de la création du nouveau blog. Ici, nous avons eu notre dette actuelle. Maintenant. Après cela, nous avons produit notre champ de formulaire. Nous devons mettre à jour la valeur de notre formulaire avec cette date actuelle. Blog mis à jour, objet delta. Et je vais étaler la valeur de notre formulaire comme le titre, la description, l' URL et la catégorie de l'image. Je vais ajouter une autre propriété qui est morte. Pourtant, je vais passer ici. La dette actuelle. Après ça. Ces poignées numérotées seront quelque chose parce que nous allons nous occuper de l'APA ici. Correspond à un poids. Oui. Il s'agira de demandes de publication car nous ajoutons un nouveau bloc, http localhost. Et notre serveur JSON fonctionne sur cinq mille. Cinq mille. Ensuite, nous avons déjà défini ces blocs que vous pouvez voir dans notre fichier db.json. Donc tous les blocs vont être stockés à l'intérieur de ces blocs. Après cela, nous allons transmettre ces données de bloc mises à jour. Nous allons maintenant obtenir une réponse. Donc, si laissez-nous les polices points statut racine carrée à deux, pas un. Tout en rendant une faible fréquence v toujours plus grande à aucun état de nos portes et de notre serveur AND. C'est pourquoi je ne veux pas le dire ici . Je me suis donc dit mal énoncé. Ensuite. Nous devons trouver la méthode d'accès comme le blog qu'il a créé avec succès. Succès enseigné. Nous sommes en retard. Blog créé avec succès. Et au cas où vous auriez quelque chose de mieux. Nous pouvons donc donner une méthode comme Bush, pas du matériel d'erreur. Nous aimons que quelque chose ait mal tourné. Après ça. Ce que nous allons faire dans notre projet, nous allons être totalement clairs sur chaque champ de saisie. Nous pouvons faire de la valeur de forme. Et le titre deviendra temporaire. Le champ de saisie du titre, description obtiendra de l'empathie, et la catégorie recevra une entrée D. Allons également dans l' image que vous avez ajoutée, évidemment, vous ne verrez pas cette URL d'image, l'UA. Faisons aussi la température de celle-ci. Après avoir soumis le blog, nous voulions naviguer vers la page d'accueil afin de pouvoir utiliser cette navigation. Ok, nous en avons fini avec la logique d'ajouter un nouveau bloc. Allons dans le navigateur et créons notre premier blog. Je voulais créer un bloc 4D. Donc, Woodblock, nous pouvons vous donner un blog de nourriture en peluche. Je vais juste finir un bras de charge. Si une description de contenu. Je suis juste collé ici. Nous allons sélectionner un fichier, je suis en train de créer un bloc 4D, alors sélectionnons cette image. Nous avons ici une méthode comme image téléchargée avec succès. Nous avons obtenu ces informations de notre Cloudinary et c'est à quatre pâtés de maisons. Nous allons donc sélectionner la catégorie pour dn, et cliquons sur Ajouter. Considérez la méthode comme un bloc créé avec succès. Vérifions celui-ci dans notre fichier db.json. Mettons un fichier db.json. Et ici, vous pouvez voir que nous avons obtenu notre titre, notre description, notre catégorie, notre image, notre URL, notre mort et notre identifiant. Nous avons créé avec succès nos cinq blogs dans cette application. 13. Travailler sur le badge: La prochaine chose que nous allons travailler sur ce composant de lot. Donc, fondamentalement dans cette catégorie je voulais montrer dans un lot, un composant de lot, le sexe du lot dans un peu ici. Je vais recevoir des enfants. Composez quatre. Je vais définir une touche de couleur en fonction l'objet de catégorie B. Donc, pour cette mode, il s'agira alors de paramètres de voyage. Et ensuite, nous mettrons ces efforts d'accès adaptés au net fitness. Ensuite, ce sera le blessé. Si c'est de la nourriture, il sera averti. Ensuite, ce sera l'info. Sports. Maintenant, nous allons avoir ce style d'information. Nous allons utiliser ici F5. F5. Après cela, je vais utiliser MDB. Et en troisième lieu, je vais décider en fonction de la catégorie, d'accord ? Ainsi, cette couleur d'intégration obtiendra J et, en fonction de cette catégorie, la couleur est calendrique à la couleur. Ici, nous pouvons passer devant les enfants. Ici, ce seront les enfants. Maintenant, utilisons ce composant batch dans ce fichier blog.js. Nous utilisons des balises P afin que nous puissions utiliser code VS du composant par lots importer automatiquement ce composant de basse. Passons maintenant au navigateur. Vous pouvez voir que nous avons notre joli lit pour ce blog culinaire. La prochaine chose que je voulais effectuer l'opération de suppression. Nous pouvons supprimer son appartenance. Donc, pour supprimer le blog, ajoutons un blog ici. Je vais ajouter un test de blog. Je vais vous donner une description ici. Je vais télécharger une image. Nous allons télécharger celui-ci. En ce qui concerne mon image téléchargée avec succès. Nous allons télécharger à l'intérieur de cette mode. OK, cliquons sur Ajouter. Notre blog a été créé avec succès. Vous pouvez voir ce que nous pouvons voir sur notre page d'accueil. 14. Supprimer le blog: Nous voulons maintenant qu'il effectue l'opération de suppression. Nous avons déjà défini la fonction dans notre fichier home dot js. Allons dans le fichier home dot js. Ici, nous recevons l'ID de notre fichier blog.js. Et ce sera la huitième chose car nous allons faire une demande ici. À l'intérieur de ça. Je vais vouloir que l'utilisateur, comme, Êtes-vous sûr de vouloir qu'il supprime ce blog ? Je suis en quelque sorte un message pour l'utiliser avant qu'ils ne suppriment ce rapport. Donc, notre problème, vous vouliez supprimer ce blog. Quelque chose comme cette méthode que je voulais montrer à l'utilisateur. Une fois que l'utilisateur clique sur le bloc sera dilué. Vous pouvez simplement copier celui-ci. Tout, car ce sera similaire seule la demande voudra être modifiée. Donc, livrez cette suppression. Nous allons le faire sur un blog basé sur l'ID. Je vais donc utiliser ici le sac à dos pour que nous puissions passer la pièce d'identité. Une fois que vous avez reçu cette réponse , Theta est comme 200. Cela signifie que notre blog a été supprimé avec succès. Nous pouvons leur donner les orteils vers le succès. Blogs supprimés. Cela dit tout à fait, d'accord. Je voulais finir les données latex pour le mode encore et terrible. Je peux exécuter cette fonction. Eh bien, pour récupérer le bloc depuis l'ordre et serveur JSON et un L, la méthode sera la même. Essayons si nous sommes capables de diluer un blog ou non. Allons dans le navigateur. Cliquons sur cette icône et supprimons. Considérez cette méthode comme Audi a montré que vous vouliez supprimer ce blog. Et si vous cliquez sur OK, vous pouvez voir que nous avons obtenu une méthode comme blog, supprimée avec succès. Opération de suppression. Nous avons également eu des performances. 15. Mise à jour du blog: Donc maintenant, nous devons surgir sur le bloc d' adjectifs irritant. Par conséquent, si vous cliquez sur cette icône de modification, elle naviguera de manière éthique vers l' ajout de cinq, nous allons renseigner toute la valeur existante dans chaque champ de saisie respectif. Nous devons mettre à jour le mode de filtrage, comme le titre sera la mise à jour, le bloc, la valeur du bouton sera la mise à jour. Et en cas de mise à jour, nous n'allons pas mettre à jour l'image, car il n'est pas possible de remplir la valeur du fichier avec la balise d'entrée HTML. Donc, en remplissant la valeur de notre fichier, il n'est pas autorisé avec le fichier de type d'entrée situé. En cas de mises à jour, nous n' autoriserons pas l'utilisateur à mettre à jour l'image. Commençons par remplir la valeur d' éjection sur le remplissage d'entrée respectif. Vous pouvez voir que dans l' URL, nous obtenons l'ID. Nous avons besoin de cet ID maintenant ajouté le blog dot js fichier. Pour que cela soit ajouté, nous allons utiliser param de notre réacteur vers le bas. Vous éclaboussez. Nous pouvons utiliser un écran LED. Utilisez des articles. Nous pouvons détecter la pièce d'identité que nous avons dans. Maintenant. Nous devons encore faire quelque chose. Nous devons en écrire un, utiliser d'abord l'effet. Et ici, nous avons prédéfini un état qui déterminera si nous sommes en mode immédiat ou non. Le mode. Plus. Ce sera le cas. Maintenant, si nous avons la carte d'identité, cet effet énorme plus tard, une fois que nous avons la carte d'identité, nous avons la carte d'identité. Cela signifie que les utilisateurs mettent à jour le bloc existant. Dans ce cas, ce que je voulais faire, je voulais définir le mode d' édition pour prouver. Nous voulions récupérer le blog unique en fonction de l'ID. De cette façon, nous pourrons renseigner la valeur dans chaque champ de saisie respectif. Bloc unique. Donc, cette fonction nous allons redéfinir, obtenir un bloc plus mince. Et ici, nous allons passer la pièce d'identité. Autre marque. Nous devons faire de la modélisation avec un faux évidemment. La valeur ferme va également s'ajuster. Ce sera comme l'état initial. Définissons maintenant cela devient blog singulier pour faire face au blog unique en fonction l'ID de blog unique. Et ce sera le problème car nous allons faire une liste périodique. Nous obtiendrons un seul bloc. Nous obtiendrons, nous n'obtiendrons qu'un seul bloc dans l'objet. C'est bon, c'est ça. Ici. Nous pouvons simplement vous copier ceci que nous avons dans notre dossier de soumission. Nous pouvons le coller ici. Et après cela, nous pouvons définir la valeur. Il s'agira de données de points blob uniques. Allons dans le navigateur. Vous pouvez maintenant voir que nous sommes en mesure d' y insérer toute la valeur de l' adjectif. Nous sommes productifs et portefeuilles pour cet ID de blog. Vous pouvez également effectuer une petite modification ici donc au cas où l'API est remplie, donc un seul statut de point de blog, Two 100. Ensuite, vous ne vouliez que définir la valeur du formulaire. Vous pouvez simplement résoudre cette notification à l'utilisateur. Comme si quelque chose s'est mal passé. Maintenant, ce sera un verdict. Vous pouvez accéder à la page d'accueil. Cliquons maintenant sur cette icône Modifier. Vous pouvez maintenant voir que nous sommes en mesure de renseigner chaque valeur dans son champ de saisie respectif. Nous devons maintenant restreindre ce téléchargement, classer GitHub, mettre à jour le blog existant. Il n'est pas possible de l'enregistrer avec le fichier de type d'entrée. Et nous devons changer cette rubrique. Maintenant, j'ajoute un bloc pour mettre à jour vlog. Le bouton sera également GitHub à partir de l'ajout à la mise à jour. Faisons tous ces changements. Ensuite, nous mettrons à jour le bloc existant. Retour intérieur. Nous pouvons déterminer s' il ne l'avait pas fait plus que ce sera le bloc de mise à jour. Il s'agit du bouton Ajouter. De plus, nous pouvons faire la même chose que si nous sommes dans un peu plus, cet utilisateur exploite le blog existant, sinon il ajoute le nouveau bloc. Et après cela, ce que nous devons faire, nous devons restreindre le téléchargement du fichier image. Ici. Nous pouvons vérifier comme si nous n'étions pas en mode édition ce mois-là, c'est-à-dire que lorsque vous l'utilisez, c'est que lorsque vous l'utilisez, c'est ajouter un nouveau bloc. Dans ce cas, je voulais le montrer. Coupons celui-ci, collez-le ici. Ici, vous pouvez utiliser, je pense, un fragment. Découpons ou moins de choses à apparaître. Allons maintenant dans le navigateur. Vous pouvez maintenant voir que dans la mise à jour de blogs GitHub, vous ne pouvez pas mettre à jour l'image. Vous ne pouvez donc mettre à jour que le titre, la description et la catégorie. La valeur du bouton a également été modifiée et le titre a également été modifié. Cliquons maintenant sur ce bouton Ajouter des blocs. Nous recevons ce fichier d'entrée, téléchargez l'image. Cela fonctionne. Continuons à travailler sur notre mise à jour du blog existant. Nous devons maintenant travailler sur un traitement quelque peu. Donc, dans la poignée, soumettez, ce que nous devons faire. Nous devons déterminer si nous sommes en mode édition ou non. Donc, si vous n'êtes pas en mode édition lorsque l'utilisateur ajoute un nouveau bloc, nous pouvons découper tout ce code et le coller ici. Et cela va également être découpé. Nous allons essentiellement mettre à jour notre blog de rejet. Encore. Nous pouvons simplement copier celui-ci. Ici. Nous n'allons pas transmettre ces données un jour. Il ne s'applique qu'à l'ajout du nouveau bloc. Ici, nous pouvons simplement passer notre valeur de formulaire car la valeur du formulaire contiendra déjà des e-mails, un titre, une description, une catégorie, a fait toutes ces choses. Nous devons également déterminer si nous sommes en mode édition ou non. Par conséquent, la validation d'image ne prendra soin que si GitHub ajoute le nouveau bloc. Nous devons donc également ajuster celui-ci. Par contre, la validation d'image. Si vous prenez comme si vous n'étiez pas en mode édition, nous devons effectuer une validation de l'image. Qu'il soit téléchargé ou non. Ce sera la rangée. Cela signifie que nous ne procédons pas à une validation d'image en cas de mise à jour du blog existant. Ici, nous allons mettre à jour le blog en fonction de l'ID. Je vais donc utiliser le vecteur. Et je vais mettre à jour un blog en fonction de l'ID. Ici, je passe formé par la régression sera le statut. On en reçoit 200 et monte un blog de construction des adjectifs. Et le message proviendra du bloc lié au blog mis à jour avec succès. Dans les deux portes, comme ajouter le nouveau bloc Albert interjecting blog. Nous le voulions, nous voulions effacer le champ d'entrée de chaleur. Et après cela, j'ai voulu naviguer vers la page d'accueil. Voyons s' ils sont en mesure de mettre à jour le blog existant ou non. Allons donc dans le navigateur. Plus vite. Allons sur la page d'accueil. Cliquez sur l'icône Modifier. Mettons à jour le titre. Blog alimentaire mis à jour. Cliquez sur Mettre à jour. Maintenant, vous pouvez voir que nous avons reçu notre notification qui dit là, bloc mis à jour avec succès et que nous avons obtenu notre serrage et notre titre a été mis à jour du bloc de code au bloc de bois mis à jour. Nous avons également effectué l'opération de mise à jour. 16. Page de l'article de blog: Maintenant, la prochaine chose que nous allons travailler sur notre page de bloc unique, il faut donc cliquer sur Mode lecture. Ensuite, vous naviguez de manière éthique vers le bit de bloc unique où vous pourrez en savoir plus sur ce blog particulier. Nous allons maintenant travailler sur cette page de blog unique. Autrement dit, travaillons sur cette pâte de bloc de singlet. Je vais donc entrer mon code VS pour apporter un composant de notre bootstrap de conception de matériaux. À partir d'un bootstrap N dérivé, nous devons apporter un composant. Je vais choisir tous ces éléments ici. Ce composant est requis dans ce fichier. Problème de conception des matériaux, déplacement voyage. Et nous avons également besoin ici d'utiliser un lien paramétrique à partir de notre dôme réacté car nous allons afficher les détails du blog unique à l' aide de ID. Nous avons besoin d'utiliser Param. Apportons également le lien. Après ça. Apportons X ici. X ici, c'est parce que nous allons faire une demande d' API et les laisser apporter notre composant batch ici. Maintenant, nous devons également apporter des crochets, là où vous venez d'utiliser l'effet. Définissez un état, définissez un blog. Nous devons définir cela comme troisième ici. Qu'il soit en pitié. Et après cela, nous devons attendre d'obtenir l' identifiant qui vient ici dans l'URL. Cette pièce d'identité, nous avons besoin de cet objectif. J'ai apporté ça, j'utilise des paramètres. Nous avons ajouté ici. Maintenant, ce que nous devons faire, nous pouvons écrire un effet américain. Cet utilisateur ne s'exécutera qu' une fois que nous avons un ID dans l'URL. Ici, nous pouvons vérifier que nous avons l'ID, puis le bloc unique. Cette fonction que je vais définir maintenant, un seul bloc. C'est ce que l'on pense. Faisons en sorte que ça soit une chose. Parce que Séville, parce que nous allons faire une demande d'API, la réponse est égale à x naught post. Et ici, je vais copier l'URL de notre fichier de blocage ajouté. Bon, donc nous allons copier celle-ci. Venez dans le fichier blog.js et collez-le ici. Après ça. Ce que nous devons faire, vous obtiendrez la réponse dans un seul objet car nous récupérons l'objet unique en fonction de l'ID. Ici. Nous pouvons faire des données de jeu, de bloguer et de points de réponse. Et ici aussi, vous pouvez faire une autre chose. Si le statut du point de réponse. Si nous en avons obtenu 200, cette demande sera la bonne publication. Parce que nous récupérons les données de notre serveur JSON. Dans ce cas, nous allons juste fixer le bloc, décourager nos données. Et nous pouvons recevoir une notification pour l'utiliser. Quelque chose s'est mal passé. On peut donner une méthode comme si quelque chose s'est mal passé. Après cela, nous allons donc formater celui-ci. Après cela, nous devons concevoir un style en quatre numéros de badge par heure. Ici. Il sera affiché en ligne. Pourquoi je fais cela et parce qu' il y aura un autre Ce tuilage que nous devons fournir pour notre composant batch dans notre bloc unique parce que nous utilisons le même composant de lot pour également le même composant de lot pour notre page d'accueil. en tant que page de blog unique. Nous devons aborder un peu de style. Donc, à partir de ce composant, je passe tout ce style. Marge gauche de cinq pixels, sera à droite. Marge, en haut. Je vais vous donner sept pixels. Maintenant, que doit-on faire ici ? Ici, on peut enlever tout ça. Nous pouvons utiliser ici, le conteneur MDB. Et à l'intérieur, je vais les passer en ligne. Ce sera comme une bordure, bordure autour de notre blog, un pixel. Je vais donc laisser, je vais donner cette couleur EB. Après cela, je vais vous donner un lien parce que nous allons avoir un retour en arrière et un lien vers cela ne me permettrait pas de revenir à la page d'accueil. Ici, je vais utiliser la balise forte avec le nom de classe, tiret vide trois. Et ce sera comme retourner ici aussi, je vais fournir du carrelage. Je vais vous dire que je vais vous donner un flotteur. Il restera. Je vais vous donner une couleur noire traditionnelle. Maintenant, après ce lien. Que doit-on faire ? Donc, la topographie MDB. Ici, je vais montrer le titre du blog. Blog. Nous devons écrire comme ce blog, titre de point de blog. Vous obtiendrez une erreur. Voyons si nous sommes en mesure de l' afficher dans le titre du bloc ou non. Allons sur le navigateur. Nous avons eu le titre de notre bloc, c'est-à-dire pour le blog mis à jour. Maintenant, nous devons également le coiffer. Topographie Mdb. Ici, je vais donner un tag, un nom de classe. Je vais donner ici Bootcamp comme la pneumonie ou le texte, muted, md, tiret à style. Je vais donner une vignette de langue qui sera affichée bloc en ligne, bloc . Passons maintenant au navigateur. Ça a l'air bien. Maintenant, après cette topographie MDB, ce que nous devons faire, donc je vais avoir une image ici, donc nous allons afficher l'image après notre titre. Ici. Tous les types sont-ils présents dans un bloc et il s'agit d'un seul objet ? Nous pouvons donc écrire comme ça, un blog, blog et une URL d' image de blog à regarder. Et nous pouvons donner un nom de classe ici comme une image fluide, arrondie. D'accord. Nous pouvons vous donner L. Nous ne pouvons donner ce titre que. Nous allons donc copier celle-ci. Collez-le ici. Et on peut donner une tuile à quelqu'un. Cette balise d'image. La largeur sera de 100 % et la hauteur maximale sera de 600 pixels. Voyons à quoi ressemblent nos images. air bien. Revenons maintenant au code VS. Après ça. Je vais avoir une div. Je vais fournir une marge de carrelage, en haut. Je vais fournir une marge de décantation à l' intérieur des terres. Passons aux pixels. Je vais avoir une autre div. Cette hauteur de tuile, fond de 43 pixels. Je peux donner ici F6, F6, F6. Et puis je vais utiliser MDB. Mdb. Je vais avoir un style, donc il sera flottant, à gauche. Nom de classe. Je vais vous donner l'icône du tiret trois. Je vais utiliser l'icône ici comme Calendar, Arab. Donc, fondamentalement, nous affichons les données. Les blogs. L'icône du calendrier sera disponible en direct. Je vous donne donc de l'énergie. Après ça. Nous allons avoir un lien fort dans lequel je vais trier le blog de données, le blog, le blog. Troisièmement, je vais encore fournir du carrelage. Je vais donner une marge gauche flottante, en haut. Marge, le haut sera de 12 pixels de marge gauche pixel. Après cela, je vais utiliser notre mauvais composant. Je l'ai déjà importé. À l'intérieur de ça. Je vais fournir une catégorie de blog et de blog dot. Ici, nous devons passer notre style de tuile Info. Informations sur les tuiles. Nous pouvons vérifier celui-là. On dirait. J'ai l'air bien. Maintenant, en dessous de cela, je vais faire Dale en haut de ce bloc de contenu. Après ce lit. Je l'ai mis pour que nous ayons une typographie MDB. Je vais utiliser votre nom de classe, votre nom classe, votre md, votre trait d'union. Ici. Je vais donner un blog. Blog. La description des points échoue correctement, il s'agira donc d'une description. Allons dans le navigateur. Faites défiler vers le bas Nous avons maintenant la description de ce bloc. Nous avons également terminé ce bloc unique. 17. Afficher le blog connexe: Maintenant, nous devons également afficher les messages liés à cette catégorie. Faisons celui-là. Jusqu' à présent, je vais créer quelques blogs. Je vais créer un bloc de plus comme un test pour chiens. Et je vais choisir le contenu ici. Je vais donc sélectionner un fichier ici. Je vais donc choisir celui-là, cette fois. Considérez la méthode comme l'image téléchargée avec succès. Laissez-nous choisir une catégorie comme la nourriture. Maintenant, ajoutons que ça prend de l'air. Et je vais ajouter un bloc de plus avec une autre catégorie. Ajoutons donc cela aussi. Je vais donc télécharger un parent de sang pour prendre un blog, je vais télécharger, collons la description, sélectionner l'image. Je vais utiliser celui-ci. Nous allons maintenant sélectionner la catégorie. Il sera étiqueté. Cliquons sur. Les détails sont également en cours. Maintenant. Je vais souder en lien avec cette catégorie de blocs, c' est-à-dire de la nourriture. Jusqu'à présent, nous devons également passer un autre appel d'API. Faisons donc ça 1. D'abord. Ce que nous devons faire ici, je vais en trouver un qui sera lié, lié au blog. Tout ce que vous allez définir ici. Habituellement indiqué sera là et il s'agira de données d'entrée. Après cela, que devons-nous faire ? Tout en obtenant le bloc unique ? Nous allons également filtrer les messages connexes. Donc, post lié aux coûts. Ici. On peut le donner comme un parent pour les données, d'accord ? Cela ne créera aucune confusion. La main encore. Vous pouvez faire comme vous attendez. X n'est pas bon ici. Nous pouvons simplement utiliser cette URL. Et au lieu d'utiliser RD, nous allons utiliser la catégorie de points de réponse légère, de points de données de points. Cette réponse à particulier contenant un seul objet dans lequel nous aurons une description du titre, une URL d'image de catégorie. Nous pouvons accéder à la lumière de catégorie de cette façon. Et nous ferons un autre liquide ABI avec l'Italie adapté toutes les planches liées à la catégorie Ford. Donc, ici, il sera confronté aux deux poèmes que nous avons sur notre page d'accueil. Vous pouvez voir ici que nous avons un blog lié à la catégorie des aliments. Et si vous cliquez sur le mode Lecture, donc ici, vous faites une demande d'API pour obtenir le blog unique. Et en même temps, nous effectuons également des demandes d'API pour obtenir le lien à la fois avec cette catégorie d'aliments. Mais généralement, il remplira le blog du conseil d'administration. Ce que nous pouvons faire ici, poster ici si nous pouvons faire comme des données connexes, des données de points. Maintenant, dans le port associé, nous en avons deux, donc un seul blog. Nous ne voulons pas qu'il affiche un bloc, alors lisons celui-ci. Quelque chose ne fonctionne pas, n'est-ce pas ? Ça ne fonctionne pas. Nous devons faire une année ou une condition. Et nous pouvons également prendre en compte les deux données en retard. Le point est thêta 200. Ensuite, nous pourrons régler cela. Allons dans le navigateur. Rafraîchissez celui-ci. Donc, nous n'obtenons rien. Ce sera donc une catégorie. Nous commettons ici une petite erreur. La catégorie s'appelle faire comme ça. Ensuite, vous seul obtiendrez votre blog lié à cette quatrième catégorie. Et nous ne voulions trier trois blogs dans la quatrième zone liée à la tête, nous pouvons utiliser l'esperluette start aller à 0% n est égal à trois. Nous ne pourrons remplir que les trois parties liées à cette catégorie particulière. Maintenant, allons dans le navigateur. Il fonctionne comme prévu. Nous allons maintenant afficher les deux correspondants ci-dessous ce que nous devons vérifier. S'il est élu et la longueur du point est supérieure à 0. Ensuite, nous n'avons que deux postes connexes. Ici. Je vais utiliser l'étiquette H1. Ce sera comme un titre de poste connexe. Je vais les coller Theta h étroitement lié à cette balise dans ce style de fichier CSS de point d'index. Je vais le retourner ici pour une étiquette. Vous pouvez copier tout ce style en mettant cette vidéo en pause. J'espère que vous avez copié tout ce carrelage. Si vous accédez au navigateur, sans refléter nos changements. Nous allons enregistrer ce fichier. Nous n'avons pas enregistré ce fichier. Allons dans le navigateur. Et maintenant, vous pouvez commencer. Nous avons pris la direction de notre port connexe. Mais quand cette ligne horizontale, après cela, nous devons montrer la publication connexe. Pourtant, je vais utiliser la ligne MDB avec le nom de classe. Je vais donc utiliser la ligne de nom de classe. Appelez, amusez-vous. Dessinez ensuite les appels D trois, D quatre. Ici. Nous allons utiliser un fragment. Sinon, nous continuerons à recevoir cette erreur. Laissez-le découper celui-là. Et ici, nous allons avoir supprimé notre carte des deux ports. Nous pouvons avoir un index d'articles. Nous pouvons utiliser ici l'appel MDB que nous pouvons utiliser. Mdb peut utiliser votre lien. Ici. Ce que nous devons faire à partir d'ici aussi, vous ne pouvez jamais aller à une seule base de blob. Donc, je vous spécifie déjà. Oui. Donc ici, nous pouvons lui donner l'ID point d'identité sous ce lien que je peux utiliser MDB, image de carte MDB. Nous pouvons avoir la source, l'image point de l'article, l'URL. Nous pouvons vous donner un titre de point similaire, une position. Nous allons donner le dessus. En cliquant sur e-mail. Vous n'arriverez jamais au seul bloc. Mais nous seuls pouvons avoir du contenu du corps de la carte IMDB. À l'intérieur de cela, je peux utiliser le titre de la carte MDB, comme le titre de point d'article. Vous pouvez alors avoir une carte MDB. Il s'agit du texte contenant le texte. Et ici, nous pouvons utiliser la description. Là encore, je vais utiliser x. Nous allons apporter cette méthode à la maison dot js fichier, etc. Nous avons besoin ici. Et nous allons copier cette logique. Laissez tout aller sur la page du blog. Allons dans le navigateur. Donc maintenant, vous pouvez voir que nous avons notre apparenté, ou vous avez peut-être remarqué que nous recevons également ce blog. Sous ce rapport, nous ne le voulons pas, ce blog ici parce que nous sommes déjà sur ce visage. Nous ne voulons pas qu'il affiche ce blog sous les deux. Ce que nous pouvons faire ici. Nous pouvons créer des extraits. Nous allons vous donner un captif. Allons dans le navigateur. Nous pouvons assurer la sécurité autour de nous. Ce sera bien. D'accord. Nous ne voulons pas qu'il affiche ce blog sous le lien correspondant car nous sommes déjà sur ce blog. Que pouvons-nous faire ? Nous pouvons appliquer un seul filtre. Après ça. Nous pouvons utiliser un filtre. Nous pouvons prendre ici l'article, l'ID de point d'article. Si ce n'est pas le cas , nous le voulions. Donc, tout cet ID de blog n'est pas respecté. Il filtrera automatiquement ce blog. Vous pouvez voir que maintenant nous ne sommes pas en mesure de voir ce blog. Nous avons filtré. Et si vous accédez à la page d'accueil, si vous cliquez sur celle-ci, lisez plus. Maintenant, ici, nous n' avons pas de lien de parenté, donc nous ne voulons pas qu'il affiche cette rubrique adulte. Si vous n'avez pas de port associé à cette catégorie, prenez si vous n'avez aucun blog lié à cette balise de catégorie, alors cette ABA retournera toujours la zone unique de l'objet. Nous pouvons écrire une logique ici. Coupons celui-là, coupons cette partie. Nous pouvons vérifier à nouveau si la longueur des points est supérieure à un. Cela signifie que nous avons plus de blogs liés à cette catégorie. Dans ce cas, nous voulions afficher ces blocs sous les publications correspondantes. Ici, vous pouvez donner comme un article connexe. Allons dans le navigateur. Maintenant, vous pouvez voir que nous ne sommes pas en mesure d'accéder à cette rubrique parce que nous n'avons aucun blog lié à cette catégorie. Et si vous accédez à la page d'accueil, si vous cliquez dessus, cela fonctionne comme prévu. Nous obtenons un point connexe pour cette catégorie d'aliments. Et si vous cliquez sur ce bloc, vous accéderez à ce bloc de paiement unique qui est mis à jour sur le blog Ford. Maintenant, vous êtes dans la mise à niveau du blog alimentaire. Vous pouvez voir le titre ici. Vous pouvez également basculer entre ce blog de cette façon. Cela fonctionne maintenant. Nous avons également complété cette fonctionnalité sur notre page de blog unique. 18. Rechercher le blog: Nous devons maintenant travailler sur notre stratégie. Composants. L'utilisateur peut également démarrer le blob. Faisons ça. Une partie que je vais créer un fichier sous le composant. Ce sera la recherche. Oui. C'est dans un peu. Pour apporter le composant bouton de notre matériel, les deux trébuchent. Apportons cette vidéo MDB. Nous allons recevoir quelques gouttes de composante domestique. Ce sera léger. Valeur en entrée, modification, valeur d' état sur la chaîne d'entrée. Ces trois invites, si nous allons recevoir notre troisième composante. Ici, nous allons avoir une div avec le nom de la classe. Et après cela, je vais utiliser le composant de formulaire. Nous n'avons pas besoin d'agir. Nous pouvons donner un nom de classe comme d tiret flex. On peut avoir un peu de MIT. Mit, nous pouvons vous donner la gestion des ventes, que nous obtiendrons de ce formulaire. Nous allons avoir une entrée avec un nom de classe qui sera le contrôle de formulaire. Veuillez commander, nous pouvons vous donner un premier blog. Nous pouvons avoir des valeurs. Je vais choisir cette valeur, conserverons composante parentale qui est à la maison. Mettons en forme celle-ci. Nous allons maintenant avoir des changements. Je vais utiliser cette méthode encore lors du changement d'entrée, je vais avoir un bouton MDB médian sera le troisième, sera le Primaire. Primaire. Nous n'avons pas besoin de spécifier la couleur. Là, il sera quelque part. Maintenant, je vais choisir le style cette classe dans le fichier CSS de point d' index. Je parie que ce style pour ce nom de classe, c'est un formulaire de recherche. Ce succès lui dit de donner un nom de classe satisfaisant. Passons maintenant au fichier home dot js. Nous allons afficher notre entrée tactile ici. Apportons cette composante satisfaisante. Passons maintenant au navigateur. J'ai l'air bien. Maintenant, nous devons travailler sur cet accessoire que nous passons à notre troisième volet, la mode. Je vais définir un portefeuille de l'État 13. Fixons sa valeur. Set. La valeur utilise la troisième méthode en beauté. Et ici, nous avons une valeur de longueur préspécifiée. Elle ne sera satisfaite que. Ensuite, et mettez-en dix. Alors, quelle année faut-il définir ? Nous avons également pris en charge les maladies de service. Faut-il également définir les entrées ? Saisissez, modifiez. Il recevra un événement. Nous pouvons détecter le jeu de jambes, c' est-à-dire la valeur point, la valeur du point. Après cela, le chemin n'est qu' un. Définissez un gestionnaire. Je vous ai dit de penser. Empêchez-vous la défaillance ? Empêchez le défaut. La valeur par défaut peut être navigateur. Nous allons faire une demande, oui, donc const bonds et je peux simplement copier celle-ci. déterminant plus petit de a est requis. Nous allons donc copier celle-ci. Niveau utilisateur. Je passerais tout ce truc à une minute sur le chemin. Et pourtant, nous devons passer la file d'attente. Si nous avons obtenu le statut de réponse avec 200, c'est fini. Ensuite, nous allons définir les données. Définissez les données. Nous allons utiliser les deuxièmes données, les données de réponse. Je n'ai donc pas utilisé comme si quelque chose allait mal. Bon, nous allons copier celle-ci. Utilisons-le ici. Maintenant. Allons sur le navigateur. Nous en avons manqué ici. Nous devons fournir un peu ici. Il recevra également un événement. Maintenant, passons au navigateur. La Fed en est une. Maintenant, définissons le bloc pour que nous n'obtenions pas de marque de croix ici littéralement à notre entrée en premier. Donc, ce que nous pouvons faire, nous pouvons vous en donner un tiers éternellement. Allons maintenant dans le navigateur. Rafraîchissez celui-ci. Commençons à nouveau par dicter. Nous recevons celle-ci et si vous cliquez sur cette croix, elle sera effacée. Une fois qu'il est effacé, nous voulons qu'il charge toutes les données dont nous disposons sur notre serveur JSON. C'est ce que nous pouvons faire, passons au code VS. Et ici, ce que nous devons faire, nous pouvons vérifier si vous n'avez pas de valeur. Par conséquent, valeur de point cible E dot. Dans ce cas, nous voulions simplement charger ou Lovelock données. Voyons maintenant que cela fonctionne ou non. Mettons-le donc avec cette fois comme ça. Nous avons donc ce bloc lié à savoureux. Et si vous cliquez dessus, croisez, sera effacé et nous obtiendrons notre bloc bas et le serveur de tournage fonctionne. 19. Afficher le blog de la catégorie: Maintenant, la prochaine chose que je voulais essentiellement obtenir le blog où la catégorie conduite. Je veux une catégorie ici. Faisons celui-là. Je vais créer un fichier et la tête est un composant pour cette catégorie. Dois-nous. Centreons ce n'est pas un peu. Et cela a essentiellement été reçu quelques invites de notre page d'accueil. gère donc la catégorie 1 sur options de Material Design qui y ont été réservées pour apporter certains composants de MDB que vous aimeriez. Pour apporter MDB, MDB, groupe de liste, MDB, élément de groupe de levage. Ici, au lieu de div, nous allons avoir une carte MDB avec un style d'apprentissage. Le style, je vais vous donner une marge de rampe un peu teintée. Je vais donner une cellule typique ici et je vais avoir des tags, des catégories. Ensuite, je vais utiliser le groupe de listes MDB. Je vais passer une peluche. Aller à la carte est une option. Carte de points en option. Nous allons acheter un objet. Après cela, nous allons avoir notre élément de groupe MDB LET dans lequel nous allons afficher toute la catégorie. Nous pouvons vous donner un article. Nous allons fournir le style d'index de clé. Laissez-vous attribuer le mérite, monsieur. Onclick. Onclick. Onclick. Je vais utiliser cette méthode qui est gérée par catégorie. Et je vais passer l'objet. Ici, nous avons celui-là. Enlevons donc celui-ci. agriculteur, celui-ci. Maintenant, passons au fichier home dot js. Ici. Quand il a pris part à l'option. Nous avons déjà défini ici. Copions celui-ci. Allons dans le fichier home dot js. Ici. Nous pouvons utiliser ce composant de catégorie ici et en dessous de cette colonne. Oh, on peut avoir encore une colonne. Avec la taille trois. Ici, nous pouvons utiliser le composant de catégorie, regarder chaque composant automatiquement important de code. Et ici, nous pouvons passer les options que nous avons définies. Un état énorme. Vous pouvez le voir ici. composant Crawdaddy est automatiquement importé à partir de VS Code. Allons d'abord dans le navigateur. Vous pouvez voir que nous avons obtenu notre catégorie. OK ? Cette catégorie va tomber mortellement, car ici nous allons avoir notre quatrième composante. Marquons sur ce composant catégories. Nous voulions que le port soit basé sur les différentes catégories. La prochaine chose que nous pouvons faire ici c'est de définir une méthode. Ici. Nous passons également celui-ci, gérer la catégorie. Définissons celle-ci. Thirds, c'est le retour. Ça peut être n'importe quoi. Ici. Nous pouvons passer un appel API , appelé réponse. Nous avons déjà utilisé cette API liée à des catégories. Passons donc au fichier blog.js et nous pouvons utiliser celui-ci. Copions ça. Collez-le ici. Allons aux devoirs. Oui. Je vais utiliser un x t bizarre ici. Voyons qu'ils bougent tout ça. Et nous allons recevoir un composant de catégorie catégorie. Nous pouvons emballer la catégorie ici. Maintenant, nous n'avons pas coché statut de point de réponse 100. Ensuite, nous allons définir les données, définir des données de points de liaison delta. Nous allons résoudre les mêmes méthodes que quelque chose qui s'est mal passé. Quelque chose s'est passé. Voyons maintenant si cela fonctionne ou non. Maintenant, prenons le bloc en fonction de la catégorie. Donc, nous ne recevons que des blogs alimentaires. Si vous cliquez sur, nous n' obtenons que des blogs technologiques. Maintenant ce que je vais faire, donc cinq, je vais ajouter un peu plus de blog ici pour que nous puissions implémenter la fonctionnalité, comme laisser verser cette vasodilatation. Nous devons donc ajouter encore un blog. Fonctionne également. Et vous pouvez voir que nous avons l'ami de la couleur par heure. Nous avons créé au total six blocs. Ajoutons un bloc de plus. Sur le circuit. 20. Afficher le blog le dernier blog: Maintenant, la prochaine chose que nous voulions montrer le bloc présenté dans notre application. Chaque fois que l'utilisateur ajoute un nouveau bloc. Il apparaîtra donc de ce côté et nous n'afficherons que pour, laissez-nous Bloquer créé par l'utilisateur. Parce que plus tard, nous aurons une pagination. Ainsi, pendant la pagination, seuls cinq blogs seront affichés. Cela affichera la commande. Vous ne pourrez pas voir le grand blog. Et pour atteindre le grand bloc Theta, il faut essentiellement prendre la page Hale-Bopp. Vous pouvez également faire cette pagination si vous voulez aller sur le blog. Mais le dernier bloc nous pouvons également afficher ici dans notre composant de bloc. Mettons donc en œuvre celle-ci. Passons au code VS. Je vais avoir une lumière compétente. Blog dot js. Tout d'abord, moins que le sexe, c'est un peu. Ici. Nous devons apporter un composant. Je suis actionné par DVD à partir de MDB. Rejeter le thread d'interface utilisateur lorsque l'informatique doit apporter certains composants liés à la carte, MDB, ligne MDB, colonne MDB, MDB, corps de carte MDB. Nous voulions également réduire l'importation de liens de Dr. Nous devons apporter ce lien. Ici. Nous allons recevoir une image proxy. Vous avez ajouté la catégorie ID de marée. Après cela, je vais utiliser link. Nous voulions également naviguer vers le bloc chanteur payé en fonction de l'ID. Je suis notre section blog, blog. Et nous avons un identifiant de défaillance Fitbits. Après cela, je vais utiliser les composants de la carte, donc la carte MDB. Je vais les utiliser en ligne ici. Max Verte. Je vais vous donner 300 pixels. Je vais donner ici un typique de classe que je vais vous donner un nom de classe bootstrap qui sera vide. Il arrive à cela comme marketing. Après cela, je vais utiliser la ligne MDB avec le platine G 0. Je vais être utilisé ici dans la colonne MDB. Je vais vous donner un médecin. Et ici, je vais utiliser l'image MDB guard. Ici. Je vais donner une source qui est immédiatement héritée. Nous pouvons utiliser le titre. Nous pouvons vous donner un nom de classe, nous pouvons vous donner un arrondi pour faire l'image autour. Nous pouvons également donner un style en ligne ici. Donnons la hauteur. Il représente une personne solitaire. D'accord ? Après cette colonne MDB, MDB, nous pouvons donner neuf à MD. Nous pouvons utiliser ici du carton MDB, dans lequel je peux avoir un tag p avec le nom de classe. Alors, donnons un titre. Laissez-nous un titre. Et ce sera comme un titre seulement, que nous recevons sur notre page d'accueil. Nous sommes prédéfinis le carrelage. Mais cette classe peut être dans notre fichier CSS de point d'index. Passons au fichier CSS du point d' index. Je vais présenter un peu de style ici. Je vais donner ce carrelage. Après ça. Allons dans le fichier home dot js. Ce que nous pouvons faire. Je vais donc d'abord définir un état ici. Ce qui sera la colle contenant le dernier blog. Blog. Laissez-nous blob ici. En troisième lieu, utilisez le vecteur. Nous pouvons avoir infonctionnels comme obtenir le dernier blog. Nous devons maintenant définir cette fonction. Définissons uniquement. Laissez-nous bloguer ça un peu quelque chose. Ici. Nous avons littéralement ce que nous voulions faire, nous voulions terminer les quatre derniers records. Nous voulions créer un statut API, s'il conviendrait à tous les blogs. Chaque fois que l'utilisateur ajoute un nouveau bloc, il s'adaptera à la lumière du blog que nous allons afficher ici. Ok, jusqu'à présent, nous devons effectuer des ajustements dans notre APA de serveur. Nous avons donc d'abord besoin du bloc total. Bloc total comment nous pouvons obtenir, nous pouvons simplement copier celui-ci. Il est responsable de l'obtention du blog du portail. Maintenant, nous nous soulevons avec Feather star dix et commençons comme les données de points du blog portail, longueur du point moins quatre ne sera rien, mais ce sera la longueur totale du point du blog seulement. Nous devons spécifier la largeur et les données. Nous avons maintenant le début et la fin. Nous devons écrire des réponses à l'API. Encore une fois, nous allons utiliser celui-ci uniquement. Mais cette fois, nous allons modifier cette API. Je vais donc utiliser ton dos. Après ça. Je vais commencer et commencer. Le même concept que nous allons utiliser pour répondre aux besoins de nos patients. Et aussi. Indiquons également votre fin et votre valeur. Mettons ici un dollar. Maintenant. Nous pouvons simplement copier celui-ci. On peut juste le diviser ici. Nous voulions placer ces données dans un blog. Voyons maintenant ce qu'il reçoit. réception IV correspond à l' ID d'URL et aux catégories. Donc, la catégorie dont nous n'avons pas besoin ici. Enlevons donc celui-ci. Allons dans le fichier home dot js. Et après cela, ce que nous devons faire, descendons. Troisièmement, cette balise de colonne. Nous allons avoir R, nous avons piqué notre blog. Va utiliser comme tag. Et ce sera le dernier cours de post-classe. Ensuite, je vais vous donner un texto. Pour commencer. Ici. Nous pouvons avoir de la lumière. Laissez-nous brancher la carte des points. Je vais avoir un indice. Ici. Je peux faire ressortir, tracons la composante, la composante automatiquement importante de la guerre du Vietnam. Ici, nous pouvons utiliser la clé. Ici, nous pouvons simplement étaler sont tous des articles. Nous pouvons structurer notre composant de bloc de cette façon. avons donc besoin que de l'image, l'URL, du titre et de l'ID. Vous pouvez également creuser la texture, une autre catégorie et cette catégorie et cette description, mais pour cet article n' est pas obligatoire. Allons dans le navigateur. Maintenant, vous pouvez voir que nous avons obtenu notre poste. D'accord ? Et si vous cliquez sur celui-ci, celui-ci également, vous pouvez naviguer vers un seul bloc. Cela fonctionne, on dirait que nous avons également implémenté le widget dans notre application. 21. Pagination - 1ère partie: La dernière caractéristique est donc la jambe gauche. Pour implémenter la pagination. En pagination, nous voulions afficher uniquement les cinq blogs, mais voyons comment nous allons mettre en œuvre celui-ci. Passons au code VS. Cinq. Je vais créer un composant dans le composant d'aujourd'hui pour que pagination soit originaire et point js. Laissons un extrait ici pour la pagination. Ici, la fenêtre pour amener un composant de notre actif je pourrais implémenter la pagination à partir de MDB, MDB, MDB, MDB, Basie , nation link et MDB butène. Nous pouvons faire des preuves que nous allons recevoir de la part de notre composante parent. Autrement dit, il recevra une limite de pages actuelle. Alors, il ne peut pas recevoir de blocs de charge delta, d'accord ? Blog de données et total. Ici. Je vais définir une fonction et ce rendu. Je vais vérifier comme si nous avions la page actuelle qui est sur 0, alors nous avons le bouton Suivant pour naviguer vers la page différente. Ici. Je vais écrire comme une page IMDB. Il va y avoir un centre. Je vais utiliser mb tiret 0. Nous allons avoir un élément de pagination MDB. Puis le lien de pagination MDB. Supprimons ce supplément. Il sera en dessous. Ici, il en sera un. Maintenant, nous allons avoir un autre objet de pagination. Allons le pomper. À l'intérieur de ça. Nous allons avoir notre bouton. À l'intérieur de ça. Nous allons avoir notre bouton ici. Je vais utiliser le bouton MDB et btn sera arrondi. Je vais avoir OnClick. Onclick. Il s'agira des données de blocs de charge. La valeur de notre bouton sera la suivante. Maintenant, nous devons vérifier une condition comme si c' cas, si nous allons vérifier une condition comme période de latence actuelle moins une limite de longueur de point delta . Je le voulais, donc le bouton de la conférence précédente, donc les deux boutons que je voulais afficher. Dans ce cas, nous pouvons simplement copier celui-ci. On peut juste prendre le relais ici. Ici, nous devons faire quelques ajustements. Ici, la valeur va revenir. D'accord ? Ici, je suis le lien de pagination MDB n'est pas requis. Alors, commençons par déplacer celui-ci. Ici. Nous devons également augmenter la page afin que nous puissions découper cette et que nous puissions l'utiliser ici également. Nous n'avons pas besoin de lien de pagination de page, alors supprimons celui-ci. Ici. Quel que soit le salaire actuel , il recevra un ingrédient. Et la valeur du bouton sera la précédente. Encore une fois, nous allons en avoir un autre. Action de pagination. Je vais juste copier celui-ci. Je vais le coller sous ce bouton de pagination. Nous allons nous approcher ici. Copions celui-ci. Je vais couper celui-ci ici. Cette régénération. Mais ensuite et cet objet de pagination. Nous allons nous rapprocher ici pour pouvoir supprimer celui-ci. Ici, il sera là. Et je pense que c'est tout. Et nous allons avoir une autre condition dans laquelle il y aura accès à la grande grille. Dans ce cas, j'ai voulu afficher le numéro de page et le bouton précédent. Nous pouvons donc simplement copier tout ça à nouveau. Avant de copier, nous devons le mettre en retour, sinon il ne sera pas vertical. Nous allons donc copier tout ça et le mettre en retour. À présent, nous voulions trier le bouton précédent avec ce numéro de page. Nous pouvons copier celui-ci. Nous pouvons payer deux niveaux sera patient de la BDIM. Nous devons donc fournir ce crochet de fermeture lorsque le service informatique fournit cette balise de fermeture. Et nous devons également mettre Thaddeus retour, sinon cela ne vous montrera pas. Nous allons copier. Coupons celui-là. Nous pouvons simplement effectuer une pagination de rendu. En octobre avec la génération P. Nous devons faire quelques ajustements dans notre APA existant. Nous voulions trier le blog cinq par page. D'accord, donc à partir de là, nous allons leur fournir la valeur par défaut 05. C'est n et ce détail est plus grand. Par défaut, nous récupérons les cinq blocs par page sur la page d'accueil. Maintenant, nous ne pouvons pas l'utiliser de cette façon. Nous devons donc faire comme différer. Nous pouvons fournir notre valeur de départ et de fin. Ici, ce sera la fin. Nous recevons alors que cette valeur à partir d'ici, 0 et augmente. D'accord ? Après cela, ce que nous devons faire, nous devons faire du courant, d'accord ? Nous devons d'abord définir ce troisième cadre lointain. La page actuelle sera en cours. Ce sera le g. Nous allons avoir une limite de pages non surveillée. Limite. Nous voulions afficher les cinq blocs par page. Et nous allons également avoir un autre état définissant la longueur totale du bloc. Bon, donc mettons celui-là. Ce sera un blog total. Blog. Cela pourrait être nul au départ. Maintenant, nous devons définir la page actuelle. Nous pouvons vous donner un bit actuel plus une augmentation. Maintenant, allons d'abord dans le navigateur. Maintenant, vous pouvez voir que nous ne pouvons voir que cinq blocs, mais c'est payant. Nous devons maintenant travailler sur notre pagination. Donc, tout ce que nous avons déjà créé. Maintenant, ce que nous pouvons faire ici, si vite, passons à la partie écrite. Après la colonne DB. Md Bureau, nous allons avoir une div de plus avec le nom de classe trois tiret vide. Et au lieu de cela, cette classe, maintenant, apportons la pagination. Voyons voir. Les affaires et c'est montré ou non, nous avons obtenu l'entreprise et nous ne fournissons actuellement aucune valeur. Nous allons donc fournir cette valeur. Blocs de chargement de la page actuelle, données, chargement et blocs et données. Vous devez fournir. Ensuite, limiter les données que nous devons également fournir, nous sommes appelés à fournir le réseau de blocs total. Combien de sang avons-nous dans notre fichier db.json, est-ce ce que nous pouvons faire ? Donc, nous obtenons tous les blocs. Nous pouvons donc dire ici le blog total. Ici, nous pouvons entendre, nous pouvons faire données totales de points de blog, la longueur des points. Cette fonction l' exécutera toujours car nous avons mis cet effet d'utilisation de cette façon. Mais j'espère que nous pourrons obtenir la longueur du blog du trimestre que nous avons dans notre fichier db.json. Maintenant, nous pouvons également passer celui-là. Blog total. Allons donc dans le navigateur, actualisez-le. Maintenant, ce naturel ne fonctionnera pas comme prévu, car nous devons également faire quelques ajustements. Dans notre composant de pagination. Passons au composant de pagination. Voici ce que nous devons faire, nous devons fournir à nouveau une valeur par défaut à partir de ce bloc de charge thêta car cette API a été modifiée ici, vous pouvez voir que nous devons la fournir en 3D. Pour ce scénario. Nous devons passer les cinq pâtés de maisons suivantes. Nous allons y accéder en cliquant sur le bouton Suivant. Et nous allons augmenter le pH. Pour ce scénario. Nous devons passer par là. Ici avec moche, on va reculer. Ici, nous pouvons donner Current Page moins 15. Nous avons deux chemins comme celui-ci, l'offre actuelle et B25. Nous revenons en arrière, donc nous devons le faire en décrément. Nous devons donc faire un décrément moins un. Maintenant, voici ce que nous devons fournir, alors copions celui-ci. Collez-le ici. Nous y retournons généralement. Prochaine. Nous avons encore un blog. Voici ce que nous pouvons faire. Supprimons donc ce très rapide, et ici, ce sera le courant plus un en cinq plus de mettre celui-ci entre parenthèses. Et faites cinq fois. Et cette fois, nous avons fait pour ce scénario ou ce scénario que nous pouvons faire, nous pouvons transmettre cela sur la colle car cela fonctionnera de la même manière. Allons maintenant dans le navigateur. Pour celui-là. Nous avons eu la première page et nous avons obtenu le bouton Suivant. Et nous avons la page de garde h2. Et nous n'avons plus de blogue. Nous arrivons ici le bouton précédent et nous devons encore bloguer, d'accord. 22. Pagination - 2 partie: Et nous devons également faire d' autres objets dans ce composant de pagination. Donc, ici, nous prenons comme si je n'avais pas la page actuelle, c'est 0 et que la longueur des données est inférieure à trois, est inférieure à cinq, alors nous ne voulons pas qu'elle le fasse. Donc, les composants de visualisation mis en place, mettons un support supplémentaire parce que nous allons avoir un seul moteur, notre état, notre tromperie, la seule condition, ce qui signifie que si nous sommes dans la période actuelle, c'est 5 bits, nous avons le fichier d'allongement du blog. Dans ce cas, je ne veux pas qu'il soit le composant de pagination. Et pour la deuxième condition, ce que nous allons changer. Nous avons donc un blog portail, donc un blog total, mais ils n'ont rien fait , mais il y a la longueur du bloc que nous avons dans notre fichier db.json. Pour le moment, nous avons sept pâtés de maisons. Vous pouvez le voir en bloquant cet espace et en bloquant. Ensuite, nous avons le blog Steven. Nous pouvons vérifier si le blog total est inférieur à d dt limite, désolé, le blog est égal à la limite. Cela signifie ce que j' essaie de faire ici. Supposons donc que nous n'ayons que cinq blogs dans notre fichier db.json. Dans ce cas également, je ne veux pas qu'elle trie la page dans un sens, car si vous cliquez sur Suivant, vous obtiendrez un blanc. Dans ce cas également, je voulais éviter de souder un composant de vasodilatation. C'est pourquoi je suis en train de suivre ce scénario. mesure que nous abordons notre sujet, nous ne prenons plus que 5 bits, et non d'autres bases. Dans ce cas, je voulais juste le faire. Aucune. Allons dans un navigateur. Vous ne le modifiez pas ici tant que vous n'avez pas supprimé un blog. Par exemple, si je supprime les deux blocs, et si je le supprime, le blogueur est supprimé. Mais nous sommes confrontés à un problème. Pourquoi nous obtenons ce problème parce que nous diluons les données de notre fichier home dot js. Nous sommes également en train de créer le blog avec ce chargement bloqué et nous disons ici aussi que nous devons passer l'argument. Alors, que doit-on faire ? Nous allons donc fournir, encore une fois, une valeur par défaut. Nous voulions donc commencer à partir de 5050 et nous devons également fournir une autre opération supplémentaire comme la suppression. D'accord ? Par conséquent, à l'aide de cet argument, nous allons définir la méthode actuelle sur la valeur initiale. Nous avons donc besoin de celui-ci. Passons à la fonction de données de blocs de charges. Ici. Ce que nous avons à faire ici avec moche, nous pouvons passer l'argument de l'opération Lake. À l'intérieur de ça. Ce que nous devons faire. Donc, après avoir défini ces données, nous pouvons vérifier, comme si vous avez l'opération, cela fonctionnera sur le cas Lynne. Je vais supprimer. paramètre actuel est défini sur 0. Cela va déjà augmenter le scénario de base. Essayons celui-là et celui-là. Passons à la prochaine étape. Ici, nous n'avons qu'un pâté de maisons. Supprimons celui-ci. Maintenant, nos blogs sont supprimés ici. Nous n'avons que cinq pâtés de maisons. Cela ne doit pas s'afficher. chose ne se met pas à jour correctement car le blog total est essentiellement utilisé ici dans ce Fitch, ce blog. Nous devons utiliser cette logique ici qui ne correspond pas au bloc de texte. Nous devons faire cette logique ici. Nous devons modifier votre DCPA ici. Obtenir la longueur totale du bloc. Je vais ajouter quelques blogs dans cette application. Donc, les gars, j'ai ajouté deux autres blocs avant effectuer une opération de suppression à nouveau avec la pagination. Cliquons sur Suivant. Vous pouvez voir que nous avons également ce scénario. Cette condition autre que nous avons aussi la troisième et nous avons un bloc de plus à la troisième pilule. Maintenant, je voulais écrire une autre condition dans 30 années LCF au cas où vous n' auriez pas bloqué à l'art, alors je ne veux pas qu'elle affiche ce support potentiel précédent et suivant. Ce que tout ce que nous avons un bloc de dix dans notre fichier db.json. Dans ce cas, je ne veux pas qu'il affiche cela à la fois dans les boutons Précédent et Suivant. Je voulais afficher un petit bouton Précédent. Nous devons donc écrire une autre condition. Donc, avant d'effectuer l'opération de suppression, écrivons cette condition. Ici. Ce que je vais prendre, blog portail moins la longueur du point thêta n' est pas égale à la limite de page. Ensuite, seul il sera affiché. D'accord, nous allons nous battre. Allez dans le navigateur, rafraîchissez-le. Cliquons sur Suivant. Nous avons eu ça assez bien parce que nous avons plus de blog sur le sujet. Supprimons maintenant celui-ci. Cliquez sur. Bon, donc le blog a été supprimé avec succès. Nous sommes maintenant à moins de cinq pages. Maintenant, cliquons sur Suivant. Maintenant, vous pouvez voir que nous n' avons pas ce bouton suivant car, parce que nous avons un bloc de dix dans notre fichier db.json, nous disons cinq blocs, mais nous avons aussi le fait que c'est un petit problème dans notre pagination. Si vous revenez en arrière, cela fonctionne. Enlevons-en un de plus. Encore une fois, il sera détaché des cinq pages. Cliquons sur Suivant. Nous n'avons eu que ce bouton précédent. Cela fonctionne. Donc, les gars paient la prochaine chose. Il a également été complété dans notre demande. 23. Correction de l'erreur: Nous avons maintenant un problème dans notre application. Donc, si vous recherchez un blog, supposons que vous ayez depuis bricolé, nous avons ce trentenaire avec cette bande de mots clés, d'accord ? Et si vous effacez ce champ de saisie unique, nous n'obtenons plus de formulaire de bloc. Que se passe-t-il ici ? Nous devons donc aller au code VS et dans le fichier home dot js, pourquoi cela se passe. Donc ici, changement en entrée sur la chaîne d'entrée avec une gestion laide du portefeuille 13. Nous ne transmettons donc pas ici la valeur initiale par défaut pour notre début et une valeur augmentée. Ici, nous devons également passer à la valeur par défaut telle que 050. La façon dont nous avons passé l'usage IN OUT. Si vous vous en souvenez, ici. Nous commençons ici, puis nous augmentons la valeur. De même, nous devons également passer la valeur ici. Allons dans le navigateur, rafraîchissons celui-ci. Maintenant, cherchons à nouveau blog avec la technologie. Maintenant, cliquons sur cette croix. Nous récupérons maintenant toutes les données de blog que nous avons dans notre fichier JSON. Nous avons donc résolu ce problème. 24. 404 et à la page: Ok, donc maintenant nous allons travailler sur d'autres pages qui ne sont pas trouvées et à peu près payées. Je vais donc commencer par la page introuvable. Donnez des URL aléatoires. Vous ne vous amuserez pas, mais je voulais résoudre une image ici. Faisons celui-là. Nous ne trouvons pas le fichier dot js ici. Que doit-on faire ? Ici ? Je ne fais que coller une ligne de code. Maintenant, passons au navigateur. Maintenant, nous en avons un à merveille. Eh bien, si l'URL ne correspond pas à NET, nous avons dans notre fichier app.js. Maintenant, nous devons également travailler sur cette page À propos , je vais juste regarder le contenu sur le fichier dot js. Je ne fais donc que prédire le contenu de ce fichier About dot js. Quand l'informatique apportera une certaine confiance de MDB, conteneur MDB. Je suis typographique DB. Donnons une marge, une marge supérieure, un maximum de 100 pixels. Vous pouvez donner n'importe quel contenu à l'intérieur de ce fichier About dot js. Allons dans le navigateur. Nous obtenons donc cette seule ligne de description sur cette application. 25. Merci: Si vous regardez cette vidéo qui s'est déroulée, vous avez terminé ce cours statistiquement. Je suis sûr que vous avez aimé créer cette application de blog React avec moi. J'espère que ce cours vous aidera à créer votre propre site web de blogs avec React et ensemble différent de cela de ma tête. Si vous avez des questions ou des suggestions, vous pouvez toujours me contacter. Merci beaucoup de vous être inscrit à ce cours. Je vous verrai dans un autre cours. D'ici là, allez acheter et prenez soin de vous. Et n'oubliez pas de revoir mon code également.