Créez des sites internet interactifs avec React et Redux

Un véritable incontournable pour se professionnaliser avec JavaScript, apprenez React et créez des sites internet aux interfaces interactives ! Des sites complets à de vrais jeux en ligne, React vous permet de réaliser tout vos rêves.

Créez des sites internet interactifs avec React et Redux
23 heures
Tous les niveaux

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 30.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.

Plan du cours

Tout ouvrir
    Partie 1 : Avant de commencer
  • 1. Bienvenue dans ce cours !
    Extrait
  • 2. Prérequis
    Extrait
  • 3. Comment réussir cette formation ?
    Extrait
  • 4. Comment poser mes questions ?
    Extrait
  • Partie 2 : Orientation
  • 5. Commencez la formation selon votre niveau
  • Partie 3 : Partons sur de bonnes bases
  • 6. Qu'est-ce que React ?
    Extrait
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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. Finisalisons 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
  • 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
  • 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 !
Proposé par Believemy

Gratuit

Disponible depuis partout : ordinateur, smartphone, tablette
Contenus vidéos en Full HD
Certificat de fin de formation
OU