React 16+ - Le Guide Complet (+ React Router 4 & Firebase)
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO React 16+ - Le Guide Complet (+ React Router 4 & Firebase)

Anthony Welc
29,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Apprendre React avec la formation la plus complète

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 React en vidéo 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. 
    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+, 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 :

  • Une formation en vidéo, découpée par notion et chapitre. Tu apprends au rythme qui te convient et d'où tu veux.
  • Tu as accès à tous les fichiers sources. Tu peux te baser sur ce code comme point de départ pour tes futurs projets.
  • Un accès un salon d'entraide pour soumettre tes questions.
  • Un QCM pour valider tes connaissances théoriques.

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
Les Bases de React
Chapitre 3
Exercice : l'Éditeur de Markdown
Chapitre 4
Rendu Conditionnel et Liste
Chapitre 5
Exercice : la Chat Box
Chapitre 6
Exercice : la Boîte à Recettes
Chapitre 7
Notions avancées

Plan détaillé du cours

Chapitre 1 : Introduction
24m49s
 
Leçon 1 Introduction
Leçon 2 React c'est quoi ?
Leçon 3Pourquoi apprendre et utiliser React ?
Leçon 4Single Page App VS Multi Page App
Leçon 5Plan du cours
Leçon 6Outils nécessaires
Leçon 7Comment suivre cette formation ?
Chapitre 2 : Les Bases de React
1h27m
 
Leçon 1Un Workflow Moderne
Leçon 2Utiliser create-react-app
Leçon 3Comprendre la structure du dossier
Leçon 4C'est quoi un Component ?
Leçon 5Comprendre le JSX
Leçon 6Particularités du JSX
Leçon 7Créer un Component Stateless
Leçon 8Réutiliser les Components
Leçon 9Du JavaScript dans le JSX
Leçon 10Les Props
Leçon 11La Props Children
Leçon 12Le State
Leçon 13Gérer les Événements
Leçon 14Modifier le State
Leçon 15Passer des Méthodes entre les Components
Leçon 16Gérer les Inputs
Leçon 17Ajouter du style avec du CSS
Leçon 18Utiliser le style Inline
Chapitre 3 : Exercice : l'Éditeur de Markdown
30m39s
 
Leçon 1Création du Projet
Leçon 2Écrire du HTML avec JSX
Leçon 3Importer du JavaScript Perso
Leçon 4Utiliser et Modifier le State
Leçon 5Du Markdown avec Marked.js
Leçon 6Sauvegarder le State avec le localStorage
Chapitre 4 : Rendu Conditionnel et Liste
33m12s
 
Leçon 1Base du Rendu Conditionnel
Leçon 2Rendu Conditionnel Complexe
Leçon 3Rendre une Liste
Leçon 4Manipuler le State via un Élément d'une Liste
Leçon 5Utiliser et Comprendre les "keys"
Leçon 6Event et Argument dans une liste
Leçon 7Résumé
Chapitre 5 : Exercice : la Chat Box
1h42m
 
Leçon 1Initialisation du Projet
Leçon 2Formulaire de Connexion
Leçon 3Découverte de React Router V4
Leçon 4Changement de Page avec React Router V4
Leçon 5Création des Components
Leçon 6Enregistrer les Messages dans le State
Leçon 7Gestion de Nouveaux Events
Leçon 8Afficher notre State
Leçon 9Découverte de Firebase
Leçon 10Connecter Firebase et React
Leçon 11Synchroniser notre State et la Realtime Database
Leçon 12Les Ref dans React : createRef()
Leçon 13Supprimer des Éléments du State
Leçon 14Rendu Conditionnel des Messages
Leçon 15Gérer les Animations en React
Leçon 16Résumé
Chapitre 6 : Exercice : la Boîte à Recettes
1h51m
 
Leçon 1Introduction
Leçon 2Initialisation du projet
Leçon 3Créer le Header
Leçon 4Remplir le State en un clic
Leçon 5Afficher le State
Leçon 6Component Card
Leçon 7Images dynamiques
Leçon 8Connecter l'app avec Firebase
Leçon 9Ajouter une recette
Leçon 10Formulaire avec React
Leçon 11Modifier le State via le formulaire
Leçon 12Modifier les recettes
Leçon 13Gérer le formulaire de modification
Leçon 14Supprimer une recette
Leçon 15Activer l'authentification Facebook dans Firebase
Leçon 16Gérer l'authentification
Leçon 17Gérer la déconnexion
Leçon 18Persister la connexion entre les sessions
Leçon 19Règles de sécurité de Firebase
Leçon 20Résumé
Chapitre 7 : Notions avancées
58m16s
 
Leçon 1Organiser les fichiers
Leçon 2Les cycles de vie de React
Leçon 3Les cycles de vie concrètement
Leçon 4Éléments JSX adjacents
Leçon 5Higher-Order Components (HOC)
Leçon 6HOC concrètement
Leçon 7Les PropTypes
Leçon 8React Context API
Leçon 9Résumé
Chapitre 8 : Mettre une App React en ligne
13m37s
 
Leçon 1Le Build
Leçon 2Déployer sur Netlify
Leçon 3Paramètres d'authentification
Leçon 4Gérer les redirections
Chapitre 9 : Aller plus loin
20m37s
 
Leçon 1Exemples de sites utilisant React
Leçon 2React côté serveur avec Next.js
Leçon 3Générateur de sites avec Gatsby.js
Leçon 4Des apps mobiles avec React Native
Leçon 5Librairie de Components : Ant Design
Leçon 6Une App pour Apprendre à Coder ?

Aperçus

Avis des apprenants

Détail des avis
58
Apprenants
2
Commentaires
4,5/5
Note moyenne
5/5
1
4/5
1
3/5
0
2/5
0
1/5
0
Xaelis14
Xaelis14
Publié le 02/10/2020
Cours très bien conçu, assez complet et efficace pour comprendre la logique de React et développer son appli rapidement. J'aime beaucoup, merci !
Clément Tanguy
Clément Tanguy
Publié le 13/12/2018
Tuto très complet permettant d'acquérir de solides bases afin de s'initier puis d'aller plus loin. Moins académique que patient, soucieux du détail, l'auteur Antho privilégie d'abord les live-codes concrets. A suivre si vous êtes curieux de découvrir un des langages incontournables des années à venir.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

React

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données