React 16+ Le Guide Complet (+Redux, React Router & Firebase)

React en profondeur à partir de zéro. Apprends Reactjs, Redux, React Router 4, Authentification, BDD et bien plus !

4.15 (2090 reviews)
Udemy
platform
Français
language
Web Development
category
instructor
7,176
students
10 hours
content
Jul 2020
last update
$19.99
regular price

What you will learn

Créer une application ou un site React.js de A à Z.

Comprendre les Components React.js et écrire en JSX.

Créer et maintenir les States d'une application.

Faire passer des données entre plusieurs parties d'un site web.

Faire persister des données grâce au localStorage.

Stocker des informations dans une base de données avec Firebase.

Créer un code lisible et maintenable.

Naviguer d'une URL à une autre en utilisant React Router 4.

Coder plus efficacement grâce aux possibilités qu'offre ES6.

Lancer une application ou un site React.js sur le web.

Travailler avec create-react-app et Webpack.

Créer des animations dans React.js

Mettre en place un système d'authentification.

Description

*** La meilleure formation React en Français ! ***

Dernière mise à jour pour Redux le 27 Juillet 2020.

Dernière mise à jour pour React v16.6.0 et React Router v4.3.1 !

...

Est-ce que tu cherches le meilleur moyen de construire des applications ou des sites web modernes ?

Tu as déjà essayé plein de cours sur React mais ils ne sont ni très clairs ni en français ?

Tu as envie de donner un bon coup d’accélérateur dans ton apprentissage de JavaScript ?

Cette formation est exactement ce qu'il te faut !

...

Quels sont les avantages de cette formation ?

Avantage 1 : Le cours est entièrement orienté autour de projets réels

Tu ne vas pas apprendre React comme dans une salle de classe. Je mets un point d'honneur à proposer des formations qui s'articulent autour de projets concrets.

Tu vas créer 3 applications de A à Z. Dans un ordre de difficulté crescendo. Comme ça, même si tu es un peu effrayé par React tu auras le temps de l'apprivoiser à ton rythme.

Tu pourras ensuite créer tous les projets de sites ou d'applications qui te passent par la tête.

Avantage 2 : Tu vas apprendre bien plus que simplement coder en React.js

Écrire des lignes de code c'est très bien, c'est la base. Mais ça ne suffit pas pour être complètement autonome sur tes projets. 

C'est pourquoi on va aller beaucoup plus loin que simplement coder. Ça inclut de créer des animations, mettre en place une base de données, créer un système d'authentification, gérer des routages d'URL, utiliser des lignes de commande, envoyer ton site sur un serveur web, coder avec les dernières fonctionnalités de JavaScript (ES6 et ES7)...

Avantage 3 : Dès que tu auras fini la formation tu auras en main 3 vraies applications

A la fin du cours tu auras 3 sites complets en ligne qui fonctionnent sur ordinateurs, tablettes et smartphones. 

Bien sur je te fournis tous les fichiers sources que j'ai divisé étape par étape pour que tu puisses suivre encore plus facilement.

Tu peux regarder la vidéo de présentation pour voir la démo des 3 projets que tu va créer.

Avantage 4 : J'ai tout fait pour rendre React.js fun

J'ai tourné plus de 300 tutoriels gratuits sur Youtube et j'ai appris à rendre un cours vivant. Non seulement on va coder côte à côte mais on va le faire en se faisant plaisir.

Toute la formation est structurée pour que tu progresses étape par étape même si tu es débutant (les plus avancés iront simplement plus vite).

Avantage 5 : Plusieurs sections théoriques

Des bases jusqu'au concepts avancés... On fait le point sur tout pour que tu puisses travailler 100% en autonomie à la suite du cours. Tu auras une vision globale de ce qu'il est possible de faire avec React.

Avantage 6 : Toutes les nouveautés

  • React 16+

  • Redux

  • React Router 4

  • create-react-app 2

  • context API

  • ref API

  • Fragment

  • HOC

  • ES6+

  • {...}

...

Voici tout ce que tu vas recevoir en t'inscrivant à la formation :

  • Un accès à vie aux vidéos HD. Tu apprends au rythme qui te convient et d'où tu veux.

  • Toutes mes vidéos sont téléchargeables et légères. Tu peux te former même sans connexion internet, dans les transports par exemple.

  • Tu as accès à tous les fichiers sources. Tu peux te baser sur ce code comme point de départ pour tes futurs projets.

...

Commence à apprendre React en t'inscrivant tout de suite à la formation et crée ton premier projet.

On se retrouve dans la première vidéo !



Content

Introduction

Introduction
React c'est quoi ?
Pourquoi apprendre et utiliser React ?
Single Page App VS Multi Page App
Plan du cours
Outils nécessaires
Liens vers les outils
Comment suivre cette formation ?
Code source des Exercices

Les bases de React

Un Workflow Moderne
Utiliser create-react-app
Comprendre la structure du dossier
C'est quoi un Component ?
Comprendre le JSX
Particularités du JSX
Créer un Component Stateless
Réutiliser les Components
Du JavaScript dans le JSX
Les Props
La Props Children
Le State
Gérer les Événements
Modifier le State
Passer des Méthodes entre les Components
Gérer les Inputs
Ajouter du style avec du CSS
Utiliser le style Inline

Projet 1 : l'Éditeur de Markdown

Création du Projet
Écrire du HTML avec JSX
Importer du JavaScript Perso
Utiliser et Modifier le State
Du Markdown avec Marked.js
Sauvegarder le State avec le localStorage

Rendu Conditionnel et Liste

Base du Rendu Conditionnel
Rendu Conditionnel Complexe
Rendre une Liste
Manipuler le State via un Élément d'une Liste
Utiliser et Comprendre les "keys"
Event et Argument dans une liste
Résumé

Projet 2 : la Chat Box

Initialisation du Projet
Formulaire de Connexion
Découverte de React Router V4
Changement de Page avec React Router V4
Création des Components
Enregistrer les Messages dans le State
Gestion de Nouveaux Events
Afficher notre State
Découverte de Firebase
Connecter Firebase et React
Synchroniser notre State et la Realtime Database
Les Ref dans React : createRef()
Supprimer des Éléments du State
Rendu Conditionnel des Messages
Gérer les Animations en React
Résumé

Projet 3 : la Boîte à Recettes

Introduction
Initialisation du projet
Créer le Header
Remplir le State en un clic
Afficher le State
Component Card
Images dynamiques
Connecter l'app avec Firebase
Ajouter une recette
Formulaire avec React
Modifier le State via le formulaire
Modifier les recettes
Gérer le formulaire de modification
Supprimer une recette
Activer l'authentification Facebook dans Firebase
Gérer l'authentification
Gérer la déconnexion
Persister la connexion entre les sessions
Code des règles de Firebase
Règles de sécurité de Firebase
Résumé

Notions avancées

Organiser les fichiers
Les cycles de vie de React
Les cycles de vie concrètement
Éléments JSX adjacents
Higher-Order Components (HOC)
HOC concrètement
Les PropTypes
React Context API
Résumé

Mettre une App React en ligne

Le Build
Déployer sur Netlify
Paramètres d'authentification
Gérer les redirections
Héberger une App React sur un Serveur Apache

Aller plus loin

Exemples de sites utilisant React
React côté serveur avec Next.js
Générateur de sites avec Gatsby.js
Des apps mobiles avec React Native
Librairie de Components : Ant Design
Une App pour Apprendre à Coder ?

Screenshots

React 16+ Le Guide Complet (+Redux, React Router & Firebase) - Screenshot_01React 16+ Le Guide Complet (+Redux, React Router & Firebase) - Screenshot_02React 16+ Le Guide Complet (+Redux, React Router & Firebase) - Screenshot_03React 16+ Le Guide Complet (+Redux, React Router & Firebase) - Screenshot_04

Reviews

Farin
July 21, 2023
Le cours, les TPs et les sources pour les TPs n'ont pas évoluées depuis 2018... donc même en suivant scrupuleusement le cours, on tombe face à des problèmes de compilation liées aux versions utilisées. Heureusement, donc les commentaires, d'autres utilisateurs donnent des pistes pour les résoudre mais nous n'avons pas tous le temps de réinstaller 15 fois nos environnements de développement. De même, on doit se débrouiller pour trouver les "bonnes" vieilles versions car elles ne sont pas précisées dans le cours. Vraiment dommage pour une formation payante, même si son tarif a baissé. Elle valait certainement le coup il y a quelques années.
Dominique
June 19, 2023
Bon début de formation, mais fichiers complètements inutilisables à partir de la section 5 ! Et, aucune réponse aux questions posées !!
Erwan
February 13, 2023
Le cours n'est pas dutout à jour à partir du projet avec Redux et Firebase et ne permet pas d'avancer malgrè les nombreux commentaires faisant remonter ce problème
FRANCOU
February 3, 2023
Formation intéressante et complète pour découvrir React. Cependant, les projets / TPs ne semblent pas à jour. J'ai dû installer une version plus ancienne de Node (10.10.0) pour faire tourner les projets 2 (chatbox) et 3 (recette) .
Ranaivo
September 12, 2022
J'aurais du me fier aux commentaires le cours n'est pas du tout a jour et les explications sont plutot sommaires
Antoine
August 28, 2022
Le cours est super par contre les projets ne sont pas à jour , il faut chercher un peu pour les faire fonctionner. Pour ma part pour le projet 2 par exemple (changer de version node, upgrade le package babel et firebase ) C'est un mal pour un bien car ça nous apprends à nous débrouiller aussi ^^
Jeremy
June 25, 2022
Le formateur clique à tout va, il ne finit pas ses phrases, il parle rapidement... tout l'inverse d'une bonne formation.
Nicolas
May 21, 2022
Dommage, déjà quelque soucis dés le début et pas mal de chose à changer mais ça devient la catastrophe complète à partir du projet 2. Je ne recommande pas du tout se tuto sauf mise à jour pour passé a React 18 et des dépendances plus a jours ...
Thibault
March 29, 2022
Le cours paraît bien, L'intervenant explique bien et clairement, il est compréhensible et pédagogue. MAIS, le cours n'est pas du tout à jours. beaucoup de modules utilisés sont obsolète et non maintenus, par exemple impossible d'utiliser re-base donc de lier le chatbox à firebase. Beaucoup de promesses non tenues pour ce cours actuellement, peut-être qu'il était bien jusqu'en mi 2020 ...
Marouane
February 1, 2022
le formateur ne répond pas aux questions, certaines étapes ont étés faites mais pas du tout expliquées
Alexis
January 20, 2022
la formation est bonne mais devient obsolète avec avec certaine dépendances dans les projets. Cependant il est possible de se débrouiller avec les dernières versions des packages et ça pousse à comprendre certaines logiques et à pratiquer.
Tibo
December 28, 2021
La pédagogie est bonne mais malheureusement les cours sont obsolètes pour certaines parties. Les projets ne sont plus faisables dû à l'obsolescence totale des technos utilisées. Les cours mériteraient une mise à jour drastique car en ce jour les projets proposés ne sont pas faisables pour un débutant. Le fait que le formateur ne réponde pas aux élèves n'aide en rien à la chose...
Nathan
December 11, 2021
Excellent début ! Le cours a l'air très complet. Excellent rapport qualité / prix pour l'instant ! :)
Simon
September 15, 2021
React a été mis à jour mais pas le cours, donc impossible de suivre correctement. Une mise à jour et avec plaisir je mets 5 étoiles ! ^^
Thomas
July 31, 2021
C'est un bon cours ! Il faudrait juste indiquer plus clairement les erreurs potentiels avec firebase du fait de l'ancienneté du tuto. La solution de changer la version de firebase pour "firebase": "^8.0.1" avant de lancer npm start est un super conseil trouvé dans les QR

Charts

Price

React 16+ Le Guide Complet (+Redux, React Router & Firebase) - Price chart

Rating

React 16+ Le Guide Complet (+Redux, React Router & Firebase) - Ratings chart

Enrollment distribution

React 16+ Le Guide Complet (+Redux, React Router & Firebase) - Distribution chart
1847900
udemy ID
8/9/2018
course created date
7/28/2019
course indexed date
Bot
course submited by