4.8/5 Trustpilot (1390 avis)
Formation React complète
Dans cette formation React, nous allons créer une "single page application" (aussi appelée SPA). Cette page sera constituée d'un menu qui nous permettra de naviguer dans différentes sections de notre mini-site, sans jamais avoir à recharger la page.
- Nous allons apprendre à créer des routes pour que l'utilisateur puisse naviguer sur notre projet. Pour cela, nous allons utiliser la dépendance React Router. Nous allons installer cette dépendance au sein de notre projet React.
- Nous allons apprendre à configurer des chemins, comprenez des liens. L'idée sera de permettre à un utilisateur de cliquer sur un lien et ainsi de faire apparaître un composant, soit virtuellement une page web. La page ne sera jamais rechargée.
- Nous verrons également comment capter le lien actif et ainsi le mettre en évidence dans le menu pour une meilleure expérience utilisateur.
Le cours se termine par un QCM pour valider vos différents acquis en plus du projet qui sera réalisé.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur React et la mise en place d'une SPA.
Épisodes précédents :
- Les bases de React JS #1/9 : La découverte du framework
- Les bases de ReactJS #2/9 : Composant à base de classe
- Les bases de ReactJS #3/9 : Etat et cycle de vie d'un composant
- Les bases de ReactJS #4/9 : Les hooks
- Les bases de ReactJS #5/9 : Mapper des éléments HTML
- Les bases de ReactJS #6/9 :: Manipuler des datas depuis un JSON
Qu’allez-vous apprendre dans ce cours ?
Plan de cours
Chapitre 1
Mise en place des pages
Mise en place des pages
Chapitre 2
Mise en place des liens
Mise en place des liens
Chapitre 3
Pour la prochaine fois
Pour la prochaine fois
Table des matières
Chapitre 1 : Mise en place des pages
37m03
Leçon 1Installer l'extension React Developer Tools
Leçon 2Créer un projet
Leçon 3Structure du projet
Leçon 4Lancer React à partir de Visual Studio Code
Leçon 5Créer le composant fonctionnel Rouge
Leçon 6Aperçu de nos composants dans React Developer Tools
Leçon 7Ajouter du CSS
Leçon 8Créer le composant fonctionnel Vert
Leçon 9Créer le composant fonctionnel Bleu
Leçon 10Créer la Nav
Chapitre 2 : Mise en place des liens
23m45
Leçon 1Suite du travail
Leçon 2Installer React Router
Leçon 3Importer BrowserRouter
Leçon 4Créer les routes
Leçon 5Créer les liens
Leçon 6Appliquer une classe aux liens
Leçon 7Définir le lien actif
Leçon 8Retour sur React Developer Tools
Chapitre 3 : Pour la prochaine fois
02m37
Leçon 1Pour la prochaine fois
Avis des apprenants