React 16+ Le Guide Complet (+Redux, React Router & Firebase)
4.4 (1,357 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,592 students enrolled

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 !
Bestseller
4.4 (1,357 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,592 students enrolled
Created by Antho Welc
Last updated 7/2020
French
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 10 hours on-demand video
  • 4 articles
  • 6 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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.
Course content
Expand all 115 lectures 10:00:10
+ Les bases de React
18 lectures 01:27:00
Utiliser create-react-app
03:37
Comprendre la structure du dossier
08:59
C'est quoi un Component ?
04:54
Comprendre le JSX
03:40
Particularités du JSX
05:18
Créer un Component Stateless
06:40
Réutiliser les Components
02:01
Du JavaScript dans le JSX
02:39
Les Props
06:01
La Props Children
04:18
Le State
04:21
Gérer les Événements
02:32
Modifier le State
05:40
Passer des Méthodes entre les Components
07:08
Gérer les Inputs
06:18
Ajouter du style avec du CSS
03:25
Utiliser le style Inline
04:22
+ Projet 1 : l'Éditeur de Markdown
6 lectures 30:36
Création du Projet
03:37

En React on ne code pas directement en HTML, on utilise du JSX. C'est un langage spécifique à Reactjs qui ressemble au HTML avec quelques particularités.

Écrire du HTML avec JSX
05:16

React ce n'est que du JavaScript et parfois on a besoin d'importer des fichiers perso pour ajouter des fonctions ou des données.

Importer du JavaScript Perso
02:45

Dans React on ne modifie pas directement ce qui est affiché, on met à jour le State !

Utiliser et Modifier le State
03:46

On peut importer dans React d'autres librairies pour étendre ses fonctions. Ici on va importer Marked.js qui va nous permettre de convertir automatiquement du markdown en HTML !

Du Markdown avec Marked.js
06:17

Le localStorage est une option de HTML5. Il va nous permettre de stocker notre State React dans le navigateur de l'utilisateur. Comme ça il pourra reprendre son édition où il en était.

Sauvegarder le State avec le localStorage
08:55
+ Rendu Conditionnel et Liste
7 lectures 33:08
Base du Rendu Conditionnel
07:01
Rendu Conditionnel Complexe
04:18
Rendre une Liste
06:26
Manipuler le State via un Élément d'une Liste
04:43
Utiliser et Comprendre les "keys"
04:21
Event et Argument dans une liste
03:42
Résumé
02:37
+ Projet 2 : la Chat Box
16 lectures 01:42:19
Initialisation du Projet
07:45
Formulaire de Connexion
05:47
Découverte de React Router V4
08:14
Changement de Page avec React Router V4
07:00
Création des Components
06:15
Enregistrer les Messages dans le State
14:43
Gestion de Nouveaux Events
06:37
Afficher notre State
03:51
Découverte de Firebase
06:33
Connecter Firebase et React
05:03
Synchroniser notre State et la Realtime Database
04:32
Les Ref dans React : createRef()
04:47
Supprimer des Éléments du State
05:01
Rendu Conditionnel des Messages
04:10
Gérer les Animations en React
10:01
Résumé
02:00
+ Projet 3 : la Boîte à Recettes
21 lectures 01:51:07
Introduction
04:02
Initialisation du projet
05:00
Créer le Header
04:57
Remplir le State en un clic
03:52
Afficher le State
04:40
Component Card
07:07
Images dynamiques
02:44
Connecter l'app avec Firebase
06:25
Ajouter une recette
06:09
Formulaire avec React
08:25
Modifier le State via le formulaire
05:16
Modifier les recettes
05:36
Gérer le formulaire de modification
07:34
Supprimer une recette
03:16
Activer l'authentification Facebook dans Firebase
04:12
Gérer l'authentification
18:53
Gérer la déconnexion
02:45
Persister la connexion entre les sessions
04:03
Code des règles de Firebase
00:08
Règles de sécurité de Firebase
04:09
Résumé
01:54
+ Notions avancées
9 lectures 58:11
Organiser les fichiers
04:54
Les cycles de vie de React
06:30
Les cycles de vie concrètement
06:53
Éléments JSX adjacents
03:47
Higher-Order Components (HOC)
08:34
HOC concrètement
09:03
Les PropTypes
06:48
React Context API
09:45
Résumé
01:57
+ Découverte de Redux
18 lectures 01:58:29
Présentation
01:16
Intro
02:29
Redux
04:56
Bases
04:08
Reducer
03:42
Store
03:39
Linker le Store
07:05
Action
11:34
Redux Thunk
05:42
Promise All
15:17
API et Redux
07:41
Pokelist
05:50
Pending
06:34
Gérer le chargement
03:01
Affichage
12:21
Améliorer l'affichage
05:31
Créer un événement
12:06
Modifier les images
05:37
+ Mettre une App React en ligne
5 lectures 13:43
Le Build
01:36
Déployer sur Netlify
03:50
Paramètres d'authentification
04:48
Gérer les redirections
03:23
Héberger une App React sur un Serveur Apache
00:06
+ Aller plus loin
6 lectures 20:36
Exemples de sites utilisant React
02:57
React côté serveur avec Next.js
02:41
Générateur de sites avec Gatsby.js
03:19
Des apps mobiles avec React Native
03:50
Librairie de Components : Ant Design
02:51
Une App pour Apprendre à Coder ?
04:58
Requirements
  • Les bases de JavaScript (boucle, condition, fonction...).
  • Les bases du HTML et du CSS.
  • Etre capable de penser un peu différemment car React.js ne ressemble à rien de ce qu'on peut voir habituellement en développement web.
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 !



Who this course is for:
  • Toutes les personnes qui souhaitent mettre à jour leurs compétences de développement front-end.
  • Développeurs JavaScript débutants ou experts (les experts iront simplement plus vite).
  • Les utilisateurs de PHP et Wordpress qui veulent ajouter du dynamisme à leur site.
  • Les utilisateurs d'autres frameworks (Vue, Angular, Ember, Backbone) curieux de comprendre le fonctionnement de React.js.
  • Les développeurs jQuery qui veulent passer à la vitesse supérieure.
  • De manière générale n'importe qui souhaitant booster ses compétences en JavaScript.