Créez des sites internet interactifs avec React et Redux

Présentation

Bienvenue sur le cours sur React, le seul cours dont vous avez besoin pour apprendre à utiliser React, même en partant de zéro.

Avec plus de 23 heures, ce cours est sans doute le plus complet que vous puissiez trouver. Même si vous n'avez aucune expérience en programmation avec React, vous passerez du niveau débutant à celui de professionnel grâce à ce cours. Voici pourquoi :

• Ce cours est enseigné par le formateur emblématique de BELIEVEMY, l'un des meilleurs acteurs de la pédagogie dans le domaine du développement web

• Ce cours a été entièrement mis à jour pour la toute dernière version de React, vous apprendrez les toutes dernières nouveautés et les meilleures astuces de programmation du moment

• Ce cours n'est pas un cours magistral : vous allez passer par toutes les émotions et vous allez pratiquer dans des dizaines de cas concrets, avec notamment trois vrais projets

• L'ensemble du contenu du cours a été vu et revu pendant plusieurs mois par plusieurs développeurs professionnels de React pour être parfaitement en adéquation avec les besoins professionnels des entreprises

• Plus de 100.000 étudiants ont déjà appris le développement web grâce à nos cours

• Ce cours est constamment mis à jour avec de nouveaux contenus et de nouveaux projets proposés par les étudiants : c'est-à-dire par vous !

Nous allons y aller pas à pas, nous avancerons méthodiquement et astucieusement pour que vous puissiez toujours comprendre ce que vous faites et pour que vous puissiez apprécier vos résultats.

Prérequis

Des connaissances de base en HTML ainsi que de véritables connaissances en JavaScript sont nécessaires pour suivre ce cours.

Partie 1 : Avant de commencer
1. Bienvenue dans ce cours !
Extrait
Bienvenue dans ce cours !
2. Prérequis
Extrait
Prérequis
3. Comment réussir cette formation ?
Extrait
Comment réussir cette formation ?
4. Comment poser mes questions ?
Extrait
Comment poser mes questions ?
Partie 2 : Orientation
5. Commencez la formation selon votre niveau
Partie 3 : Partons sur de bonnes bases
6. Qu'est-ce que React ?
Extrait
Qu'est-ce que React ?
7. Comprendre la différence entre des sites « Single Page » et « Multi Page »
8. Quels logiciels utiliser ?
9. Quelles extensions installer ?
Partie 4 : Quelques rappels sur les nouveautés de JavaScript
10. Revoyons ensemble les nouveautés de JavaScript
Extrait
Revoyons ensemble les nouveautés de JavaScript
11. Oubliez « var », utilisez « let » et « const »
12. Les fonctions fléchées
13. Les objets
14. Les classes (constructeur, propriétés et méthodes)
15. Les modules (import et export)
16. L'affectation par décomposition
17. Le REST parameter
18. Les types primitifs et les types par référence
19. Nous voici prêts pour entrer sur la planète React
Partie 5 : Nos premiers pas avec React
20. Notre première application avec React (sautons dans le grand bain tout de suite)
Extrait
Notre première application avec React (sautons dans le grand bain tout de suite)
CodePen : https://codepen.io/believemy/pen/gOLmgQX
21. Créer notre premier projet (create-react-app)
22. Comprendre les dossiers et fichiers qui ont été créés
23. Avant de continuer : utiliser la console de Visual Studio Code
24. Qu'est-ce qu'un composant ?
25. Les trois façons de créer un composant
26. Et qu'est-ce que JSX ?
27. [Récapitulatif] Composant par classe VS Composant par fonction
28. Ajoutons un nouveau composant
29. À la découverte des "props" (propriétés)
30. Utiliser du JavaScript dans du JSX
31. La propriété "children"
Extrait
La propriété "children"
32. Et si on stockait des données ? (Le state)
33. [Récapitulatif] Props VS State
34. Les composants Statefull et Stateless
35. Changer le state grâce aux événements
36. [Liste] Les événements disponibles
37. Modifier proprement le state
38. Voir et modifier les props et les states depuis son navigateur
39. Partager des méthodes entre les composants
40. [Récapitulatif] Quand mettre des parenthèses ?
Partie 6 : Le cycle de vie d'une application React
41. Qu'est-ce que le cycle de vie d'une application ?
42. Analysons les différents états
43. Eviter l'actualisation d'un composant inutilement
Partie 7 : Prenons un voyage pour le futur : les React Hook
44. Qu'est-ce que les React Hook ?
45. Comment utiliser le State avec React Hook ?
46. Les autres états
47. Limiter la mise à jour d'instructions inutilement
Partie 8 : Projet #1 - Un prévisualisateur de markdown
48. Qu'allons-nous faire dans ce projet ?
Extrait
Qu'allons-nous faire dans ce projet ?
49. Avant de se lancer : préparer son projet
50. Etape 1 - Créer le HTML et le CSS
51. Etape 2 - Détecter le changement du texte
52. Etape 3 - Installer MarkedJS
53. Etape 4 - Transformer le texte en HTML
54. Correction
Partie 9 : Parlons design avec React
55. Qu'allons-nous apprendre dans cette section ?
56. Qu'est-ce qu'un module CSS ?
57. Initialisons les modules CSS
58. Modifions dynamiquement le CSS avec les modules
59. Appliquer un style global sans aucune transformation
60. Modifier dynamiquement le style en utilisant JavaScript
61. Gérer dynamiquement les classes
62. Qu'est-ce que Styled Components ?
63. Utilisons Styled Components sur notre site
64. Modifions dynamiquement le CSS avec Styled Components
65. Ajouter un effet de hover
66. Personnaliser dynamiquement Styled Components
67. Résoudre les messages d'erreur
Partie 10 : Entraînons-nous au design avec React
68. Exercice 1 : Pratiquer Styled Component
69. Exercice 1 : Correction
Partie 11 : La logique avec React
70. Utiliser les conditions ternaires pour afficher du contenu
71. Utiliser les conditions "if / else" pour afficher du contenu
72. Lister dynamiquement des composants
73. Supprimer dynamiquement des composants
74. Modifier dynamiquement des composants
75. Modifier en temps réel un composant
Partie 12 : Projet #2 - Une TO-DO list
76. Qu'allons-nous faire dans ce projet ?
Extrait
Qu'allons-nous faire dans ce projet ?
77. Avant de se lancer : préparer son projet
78. Etape 1 - Découper le code en composants
79. Etape 2 - Configurer les modules CSS
80. Etape 3 - Créer le state
81. Etape 4 - Gérer la suppression
82. Etape 5 - Gérer le "checkage"
83. Etape 6 - Gérer l'ajout d'une nouvelle tâche
84. Correction
Partie 13 : Plongeons dans les profondeurs de React
85. Les Reacts Fragments
86. Les HOC (composant d'ordre supérieur)
87. Les Refs
88. Les Refs dans les composants par classe
89. Le context API
90. Le context API dans les composants par classe
Partie 14 : Connectons-nous au monde extérieur (Firebase / Axios)
91. Qu'allons-nous faire dans cette section ?
92. Créer une application sur firebase
93. Installer Axios pour gérer les requêtes AJAX
94. Créer une base de données
95. Ajouter des données
96. Récupérer des données
97. Récupérer des données spécifiques
98. Supprimer des données
99. Modifier des données
100. Gérer les erreurs
101. Ajouter un spinner pendant le chargement des données
102. Améliorons notre code en créant une instance Axios
Partie 15 : Projet #3 - Une TO-DO list améliorée
103. Qu'allons-nous faire dans ce projet ?
Extrait
Qu'allons-nous faire dans ce projet ?
104. Avant de se lancer : préparer son projet
105. Etape 1 - Créer le focus à l'affichage de la page
106. Etape 2 - Configurer firebase
107. Etape 3 - Permettre l'ajout d'une tâche sur Firebase
108. Etape 4 - Récupérer les tâches depuis Firebase
109. Etape 5 - Permettre la mise à jour d'une tâche sur Firebase
110. Etape 6 - Permettre la suppresion d'une tâche sur Firebase
111. Correction
Partie 16 : Projet #4 - Un véritable blog
112. Qu'allons-nous faire dans les prochaines sections ?
Extrait
Qu'allons-nous faire dans les prochaines sections ?
Partie 17 : Faisons un site avec plusieurs pages
113. Plusieurs pages... dans une seule page ?
114. Créons un nouveau projet
115. Mettre en place un routeur
116. Afficher des pages selon l'adresse visitée
117. Ajouter des liens (Link)
118. Mettons en place notre navigation
119. Ajouter du style sur le lien de la page actuelle (NavLink)
120. Passer des paramètres dans les urls du routeur
121. Passer des ancres et utiliser les requêtes GET
122. Redirigeons notre utilisateur directement
123. Allons encore plus loin dans les redirections
124. Essayons de rediriger un utilisateur dans un sous-composant
125. Que faire si la page demandée n'existe pas ?
126. Utiliser des routes imbriquées
127. Les liens relatifs VS Les liens absolus
128. Stocker les routes dans un fichier de configuration
Partie 18 : React et les formulaires
129. Les formulaires et React ?
130. Créons notre composant input
131. Affichons nos inputs dynamiquement
132. Autorisons notre utilisateur à écrire
133. Ajoutons des vérifications
134. Changeons le style des inputs en cas d'erreur
135. Affichons un message lorsqu'il y a une erreur
136. Ajoutons un article sur Firebase
137. Et si on stockait également la date et une accroche ?
138. Affichons nos articles depuis Firebase
139. N'oublions pas la page d'accueil
140. Lister un seul article
141. Améliorons notre page
142. Supprimer un article
143. Modifier un article
144. Rediriger l'utilisateur si l'article n'existe pas
145. Afficher uniquement les articles publiés
146. Réalisons les finitions
Partie 19 : L'authentification avec React
147. Comment fonctionne l'authentification avec React ?
148. Ajoutons un formulaire d'inscription et de connexion
149. Activer les utilisateurs sur Firebase
150. Finalisons la logique du formulaire
151. Installer la librairie Firebase
152. Inscrire un nouvel utilisateur
153. Détecter si l'utilisateur est connecté
154. Déconnecter un utilisateur
155. Connecter un utilisateur
156. Protéger ses données sur firebase
157. Protéger les urls selon l'état de connexion
158. Corrigeons le nom d'un composant
Partie 20 : Projet #5 - Minions : À la conquête du monde
159. Qu'allons-nous faire dans les prochaines sections ?
Extrait
Qu'allons-nous faire dans les prochaines sections ?
Partie 21 : Redux
160. Qu'est-ce que Redux et pourquoi l'utiliser ?
161. Comprenons le fonctionnement de Redux
162. Connecter Redux avec React
163. Connecter le store avec React
164. Connecter les actions avec React
165. Passer des données dynamiques avec les actions
166. Protégeons le nom des actions
167. Et si on combinait plusieurs reducers en même temps ?
168. Sauvegardons le nombre d'infiltrés
169. Combinons le state local avec Redux
Partie 22 : Redux version avancée
170. Qu'est-ce qu'un middleware ?
171. Ajoutons un middleware
Extrait
Ajoutons un middleware
172. Suivre les states avec Redux DevTools
173. Lier Redux DevTools avec un projet React
174. Les "actions creators"
175. Ajoutons Redux Thunk
176. [Optionnel] Une autre architecture pour utiliser Redux
177. Utiliser un reducer simple grâce à useReducer
Partie 23 : Envoyer son projet sur internet
178. Comment allons-nous faire ?
179. Changer le basename
180. Créer un build du projet
181. Envoyer le projet avec Firebase
Partie 24 : Les petits plus qui font toute la différence
182. Ajouter des notifications
183. Afficher la date dans la langue de molière
184. Modifier dynamiquement la balise <head>
185. Utiliser Bootstrap avec React
186. Utiliser des types avec PropTypes
Partie 25 : Conclusion
187. Félicitations, vous avez réussi !