Les bases de ReactJS #9/9 : Exercice d'application
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO Les bases de ReactJS #9/9 : Exercice d'application

Carl Brison
25,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Nous voici arrivés à la fin de cette série sur le framework ReactJS.
Afin de clôturer cette formation, nous allons réaliser un exercice pratique qui va reprendre l'intégralité des bases de React.
Ce challenge consistera à créer une page contenant un formulaire permettant de créer un nouveau client. Et un autre onglet nous permettra d'afficher la liste des clients créés. Un exercice a priori simple mais qui nécessite de mobiliser pas mal de compétences React.

Les bases de ReactJS #9/9 : Exercice d'application

Voici les points que nous exploiterons dans cet exercice :

  • Création de composants (Parent & Enfants),
  • Création de routes,
  • Passage de props,
  • Gestion de la hiérarchie Parent / Enfant,
  • Gestions du hook useState.

À la fin de cet exercice, vous aurez pu mettre en application toutes les bases de ReactJS que nous avons vu tout au long de cette série de cours.
Je mets les codes de cet exercice à votre disposition avec les sources.

Épisodes précédents :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Créer la page d'accueil
Chapitre 2
Créer la navigation
Chapitre 3
Créer des clients
Chapitre 4
Afficher la liste des clients
Chapitre 5
Fin de la série

Plan détaillé du cours

Chapitre 1 : Créer la page d'accueil
11m48s
 
Leçon 1Créer le projet react nommé exercice
Leçon 2Lancer React
Leçon 3Créer le composant fonctionnel ClientListe
Leçon 4Créer le fichier css clientListe
Leçon 5Relier tous les fichiers
Leçon 6On vérifie nos composants dans React Developper Tools
Chapitre 2 : Créer la navigation
32m35s
 
Leçon 1Créer le composant de navigation
Leçon 2Importer la zone de navigation
Leçon 3Mettre en forme la zone de navigation
Leçon 4Installer la dépendance React Router Dom
Leçon 5Importer React Router Dom
Leçon 6Déclarer le composant AjouterClient
Leçon 7Importer le composant AjouterClient
Leçon 8Mettre en forme le composant AjouterClient
Leçon 9Déclarer les routes
Leçon 10Déclarer les liens
Leçon 11Mettre en forme les liens
Leçon 12Mettre en forme le lien actif
Leçon 13Inspecter le document
Chapitre 3 : Créer des clients
33m36s
 
Leçon 1Créer un formulaire d'insertion
Leçon 2Mettre en forme le formulaire d'insertion
Leçon 3Mettre en place le hook useState
Leçon 4Garder les valeurs en mémoire
Leçon 5Créer un tableau de mémoire
Chapitre 4 : Afficher la liste des clients
16m42s
 
Leçon 1Déclarer la mémoire dans le composant Parent
Leçon 2Afficher la liste des clients dans le composant ClientListe
Chapitre 5 : Fin de la série
01m21s
 
Leçon 1Conclusion

Avis des apprenants

Détail des avis
2
Apprenants
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Bernard Chabloz
Bernard Chabloz
Publié le 11/02/2024
Jolie série et puissant outil (avec plein de boîtes noires au passage...). Merci pour ce parcours et à + ...
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)
Regis Philippe
Regis Philippe
Publié le 08/02/2024
Merci encore pour cette serie de tuto avec cette application. En attente de vos prochain tuto.
Carl Brison
Carl Brison
Merci beaucoup pour votre confiance ;-)
Philippe Moreno
Philippe Moreno
Publié le 06/02/2024
Superbes séries de formations sur React ! A quand React et PHP ? Philippe
Carl Brison
Carl Brison
Merci beaucoup Philippe, pour votre commentaire très gentil. En fait, il n'y a pas de Php avec React. Cependant, on va apprendre à utiliser React avec Next JS qui lui nous permettra de faire du backend. A suivre, donc ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

React

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le dossier /src/ de l'exercice.

French Days

Attendez ! 🤗

Accédez à plus de 1340 tutos gratuits

Notre politique de protection des données