React : Développer votre première application

Partie 1 : Découvrir React
Préambule
5 Étapes
1. Les versions des libraries utilisées
2. Comment est structuré le cours ?
3. Les ressources du cours
4. Dernières recommandations
5. Remerciements
Chapitre 1 : Présentation de React
10 Étapes
1. C’est quoi, « React » ?
2. Site Web versus Application Web
3. Pourquoi utiliser React ?
4. La philosophie de React
5. Le fonctionnement global d’une application React
5.1. Un composant en React
5.2. Les Props
5.3. Le DOM virtuel
5.4. La syntaxe JSX
6. Conclusion
Chapitre 2 : ECMAScript 6
11 Étapes
1. C’est quoi, ECMAScript 6 ?
2. Le nouveau monde d’ES6
2.1. L’héritage
2.2. Les paramètres par défaut
2.3. Les nouveaux mots clés : « let » & « const »
2.4. Un raccourci pour créer des objets
2.5. Les promesses
2.6. Les fonctions fléchées, ou « Arrow Functions »
2.7. Les Template Strings
2.8. Les Affectations déstructurées, ou le ‘Destructuring’
3. Conclusion
Chapitre 3 : Découvrir TypeScript
8 Étapes
1. C’est quoi, « TypeScript » ?
2. React et TypeScript
3. « Hello, TypeScript ! »
4. Pas de limites avec TypeScript
4.1. TypeScript et les fonctions
4.2. Les classes avec TypeScript
4.3. La Généricité
5. Conclusion
Chapitre 4 : Les Web Components
7 Étapes
1. Introduction aux Web Components
2. Les éléments personnalisés
3. Le DOM de l’ombre
4. Les templates HTML
5. Les imports HTML
6. React et les Composants Web
7. Conclusion
Chapitre 5 : Premiers pas avec React
10 Étapes | 1 Questionnaire
1. Installer son environnement de développement
2. Démarrer un projet React
2.1. Le fichier package.json
2.2. Le fichier tsconfig.json
2.3. Installer les dépendances
3. Créer notre premier composant
4. Créer un point d’entrée pour notre application
5. Héberger notre application
6. Démarrer l’application
7. Conclusion
Questionnaire 1 : Démarrer avec React
Partie 2 : Acquérir les bases de React
Chapitre 6 : Les Composants
14 Étapes
1. Les types de composants React
1.1. Les limites des composants de fonctions
2. Présentation des Hooks
3. Présentation d’un state
3.1. Le Hook d’état
3.2. Utiliser useState avec TypeScript
3.3. Exercice : Créer un état pour gérer nos Pokémons
3.4. Correction : Créer un état pour gérer nos Pokémons
4. Le cycle de vie d’un composant
4.1. Le Hook d’effet
4.2. Exercice : Utiliser le Hook d’effet pour initialiser un composant
4.3. Correction : Utiliser le Hook d’effet pour initialiser un composant
5. Quelques règles supplémentaires sur les Hooks
6. Conclusion
Chapitre 7 : Le DOM virtuel avec JSX
7 Étapes
1. Afficher des données
2. Gérer les interactions de l’utilisateur
3. Conditionner un affichage
4. Afficher une liste ou un tableau
5. Exercice : Afficher la liste des pokémons
6. Correction : Afficher la liste des pokémons
7. Conclusion
Chapitre 8 : Les Props
7 Étapes
1. L’importance des props
2. Créer un composant avec des props
3. Les props et TypeScript
4. Passer une prop depuis le composant parent
5. Ajouter des props par défaut
6. Ajouter de l’interactivité sur nos pokémons
7. Conclusion
Chapitre 9 : Les Hooks personnalisés
8 Étapes
1. Présentation des propriétés calculées
2. Ajouter une propriété calculée pour les dates
3. Ajouter une propriété calculée pour les types
4. Factoriser les comportements communs
5. Présentation des Hooks personnalisés
6. Créer un Hook personnalisé
7. Utiliser un Hook personnalisé
8. Conclusion
Chapitre 10 : Les Routes
7 Étapes | 1 Questionnaire
1. Le fonctionnement de la navigation
2. Ajouter un nouveau composant
3. Présentation du système de navigation
4. Créer les routes de notre application
5. Utiliser le Hook useHistory
6. Gérer les erreurs 404
7. Conclusion
Questionnaire 2 : Acquérir les bases sur React
Partie 3 : Aller plus loin avec React
Chapitre 11 : Les Formulaires
10 Étapes
1. Introduction
2. Présentation du formulaire d’édition
3. Créer notre formulaire
4. Intégration du formulaire
5. Initialiser un état pour le formulaire
6. Modifier l’état du formulaire en fonction des interactions utilisateurs
7. Gérer la soumission du formulaire
8. Ajouter des règles de validation
9. Prévenir l’utilisateur en cas d’erreurs
10. Conclusion
Chapitre 12 : Effectuer des requêtes HTTP
11 Étapes
1. Simuler une API Rest
2. Démarrer notre API Rest
3. Consommer une API Rest
4. Factoriser nos requêtes dans un service
5. Gérer les erreurs
6. Modifier un pokémon
7. Sauvegarder les modifications de l’utilisateur
8. Supprimer un pokémon
9. Exercice : Ajouter un pokémon
10. Correction : Ajouter un pokémon
11. Conclusion
Chapitre 13 : Un système d’autocomplétion
6 Étapes
1. Construire un champ de recherche
2. Ajouter une méthode de recherche
3. Mettre en place le composant de recherche
4. Afficher le champ de recherche
5. Ajouter une icône de chargement
6. Conclusion
Chapitre 14 : Authentification
4 Étapes
1. Mettre en place une authentification
2. Ajouter un formulaire de connexion
3. Protéger l’accès aux routes
4. Conclusion
Chapitre 15 : Déployer votre application
9 Étapes | 1 Questionnaire
1. Le processus de déploiement
2. Se préparer pour la production
3. Créer un livrable pour notre application
4. Déployer sur Firebase Hosting
5. Créer le projet sur Firebase
6. Installer la boîte à outil de Firebase
7. Configurer votre projet pour le déploiement
8. Déployer l’application
9. Conclusion
Questionnaire 3 : Aller plus loin avec React
Partie 4 : Bonus
Bonus n°1 : Débogguer votre application
Partie 5 : Obtenir votre sticker React
Obtenir votre sticker

Questionnaire 1 : Démarrer avec React

React : Développer votre première application Chapitre 5 : Premiers pas avec React Questionnaire 1 : Démarrer avec React

L’objectif de ce questionnaire est de valider les acquis théoriques de cette première partie, ainsi que la mise en place du socle pour une application React.

👉Vous devez répondre correctement à 8 questions.

👉Vous avez 15 minutes pour terminer le questionnaire.

👉Vous avez droit à 1 seule tentative. 😈

Vous pouvez commencer le questionnaire dès que vous vous sentez prêt. Bon courage à vous !