React.js : flux de données dans l'application

Name: React.js : flux de données dans l'application
Author: Tony Davydets

Ce cours couvre les concepts essentiels liés au routage et à la navigation dans une application Web React. Vous apprendrez à gérer différents itinéraires et à…

Preview the first lesson free — get full access to all 1 lessons.

Demander une démo Se connecter

Cours : à la demande

Bonjour, je m'appelle Tony et dans ces leçons nous parlerons à propos du flux de données à l'intérieur d'une structure de dossiers d'application et des hooks personnalisés avec l'API contextuelle. Dans cette leçon, nous parlerons de plusieurs composants, routage et navigation. Jetons un coup d'œil à l'application. Vous pouvez ajouter des tâches ici une par une. Cochez-les et supprimez-les. Et il y a un compteur en dessous qui compte pour nous. Jusqu'à présent, tout a été servi. Nous par un seul composant et ça. Le composant était auparavant hébergé dans l’application. Alors maintenant, notre application est un peu différente. Nous le voyons en ce moment. Ceci est disponible pour nous chez Slashnda et si nous allons ici, nous récupérez cette petite page minime juste pour illustrer ce point cela dit bienvenue sur mon application. Alors, comment nous procédons, c'est nous. Utilisez un composant de réaction fourni. Nous par réaction routeur Dom appelé routeur de navigateur ou routeur. C'est la nomenclature pour cela. Le routeur est le tout premier composant. Les itinéraires sont immédiatement en dessous. Ici encore, nous exportons des routeurs de navigateur. Je suppose que nous pourrions faire cela pour dissiper la confusion. Cela nous donne effectivement la même chose. Le routeur du navigateur est donc le composant le plus important. Les itinéraires se trouvent immédiatement en dessous et les itinéraires individuels. Sont ici un seul composant d'itinéraire. Alors, que se passe-t-il à l'intérieur de ce composant unique qui pointe chaque individu. Chemin à une sorte de composant. Cela sert cette route. Le chemin est donc le premier. Donc pour l’agenda Slash, quand ce chemin. C'est exact, l'élément que nous utilisons. La sortie pour cet itinéraire est la suivante. Élément d’ordre du jour ici. Jetons un coup d'oeil. C'est essentiellement ce que nous avions dans le. Composant d'application avant de le supprimer. Être son propre composant. Ceux-ci viennent comme accessoires. Nous les transmettons donc depuis le composant app. Et le reste est comme. C’était le cas avant. Il n’y a donc aucun changement dans cette partie. Nous faisons la même chose ici. Seulement, nous ne transmettons aucun accessoire. Ici peu importe car il s’agit d’un composant très très simple. En gros, cela dit simplement bienvenue sur mon application au milieu du écran. Mais nous en avons aussi la capacité. Faites quelque chose d'assez soigné ici. Donc, jusqu'à présent, nous avons utilisé des chemins exacts, mais nous avons aussi les chemins exacts. Possibilité d'utiliser des caractères génériques. Ainsi, par exemple, si nous voulions tout. Demander aux tâches que quelque chose soit redirigé vers l'agenda, c'est comment nous procéderions. Nous utiliserions le composant route, les chemins seraient tâches Étoile. Donc Star est bien sûr un Wildcard. Pour tout ce qui suit un chemin de tâches Slash. Ou plutôt une partie du chemin. Et nous allons utiliser Navigate qui est un outil spécial élément que nous. Sont également transportés depuis le routeur React Dom et nous allons utiliser ce Naviguer pour accéder à l'agenda Slash. Voyons comment cela fonctionne. Donc, si nous devions y aller. Et littéralement n'importe quoi ici, nous allons être redirigés vers l'ordre du jour. Bien entendu, dans une organisation professionnelle, cela va être beaucoup plus étendu. Mais en gros, ce que vous allez faire. Voir va être une sorte. D'une variante de ce que nous venons de voir, mais une fois de plus à grande échelle. À une échelle professionnelle dans un environnement réel. Dans notre prochaine leçon, nous y allons. Pour examiner la structure appropriée des dossiers d’application. Merci d'avoir regardé. Au revoir.

Fournisseur : Tony Davydets 1 leçon · 13m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce cours couvre les concepts essentiels liés au routage et à la navigation dans une application Web React. Vous apprendrez à gérer différents itinéraires et à créer des liens pour naviguer entre les pages. En outre, vous découvrirez l'API de contexte et comment créer des crochets personnalisés.

Le routage et la navigation sont des éléments essentiels de toute application Web et React fournit des outils pour rendre ce processus facile et intuitif. Vous apprendrez à créer un système de routage pour votre application à l'aide de React Router. Vous apprendrez à définir différents itinéraires pour différentes pages, à utiliser des composants de lien pour naviguer entre les pages et à transmettre des paramètres via des URL.

Le transfert de données entre composants peut devenir fastidieux à mesure que votre application se développe, en particulier si vous devez transmettre des données à travers plusieurs couches de composants. Dans ce module, vous apprendrez à créer et à utiliser l'API Context pour partager facilement des données entre votre application. Vous apprendrez également à créer des crochets personnalisés avec l'API Context, ce qui peut simplifier le processus de transmission de données dans l'ensemble de l'application.

Enfin, vous découvrirez une structure de dossiers suggérée pour organiser votre application React. Vous apprendrez à organiser vos composants, styles et utilitaires dans des répertoires séparés, ce qui peut rendre votre code plus facile à gérer et à naviguer.

Ce que vous allez apprendre

Naviguer dans les applications Web React en utilisant React Router
Définir différentes routes pour différentes pages et créer des liens pour naviguer entre elles
Transmettre des paramètres via des URL pour déplacer des données entre les pages
Utiliser l'API Context pour partager des données au sein de votre application
Créer des hooks personnalisés avec l'API Context pour simplifier la transmission des données
Organiser les composants, les styles et les utilitaires dans une structure de dossiers suggérée

Points clés à retenir

Le routage et la navigation sont des éléments essentiels de toute application Web, et React fournit des outils pour rendre le processus simple et intuitif.
React Router vous permet de construire un système de routage qui définit des routes, utilise des composants de lien pour la navigation et transmet des paramètres via des URL.
L'API Context partage des données au sein d'une application sans les faire passer par de multiples couches de composants.
Les hooks personnalisés construits avec l'API Context simplifient la transmission des données dans toute l'application.
Une structure de dossiers suggérée qui sépare les composants, les styles et les utilitaires rend le code plus gérable et plus facile à parcourir.

Foire aux questions

Que couvre ce cours ?

Il couvre le routage et la navigation dans une application Web React, y compris la gestion des routes et la création de liens avec React Router, l'utilisation de l'API Context pour partager des données, la création de hooks personnalisés avec l'API Context, et une suggestion de structure de dossiers pour organiser votre application.

Que vais-je apprendre sur la gestion des flux de données dans React ?

Vous apprendrez comment passer des données entre composants en utilisant l'API Context pour partager facilement des données dans votre application, et comment créer des hooks personnalisés avec l'API Context pour simplifier le passage des données dans l'application.

Comment la navigation est-elle traitée dans ce cours ?

Vous apprendrez à créer un système de routage en utilisant React Router, à définir différentes routes pour différentes pages, à utiliser des composants de lien pour naviguer entre les pages et à transmettre des paramètres via les URL.

Quelles leçons sont incluses dans ce cours ?

Le cours comprend trois leçons : Composants multiples, routage et navigation ; Structure des dossiers de l'application ; et Transmission de données et hooks personnalisés avec l'API Context.

Quelles sont les compétences associées à ce cours ?

Les compétences associées incluent Create React App, Flux (React.js), React JSX, React VR, React.js (bibliothèque JavaScript) et WebMethods Flow.