React de A à Z (React Hooks inclus)
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

TUTO React de A à Z (React Hooks inclus)

Enzo Ustariz
Promo -50% Jusqu'au 19 avril, 23:00
25,00€50,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans cette formation en ligne, vous allez apprendre à utiliser le Framework Javascript le plus populaire : React.
Il reste encore en 2019 (aux coudes à coudes avec Angular), le Framework le plus demandé. Des sites de missions Freelance comme Malt ou Codeur proposent chaque jour des centaines de missions.
Les agences web et les entreprises s'arrachent les développeurs qui ont ces compétences.

C'est simple, la demande est beaucoup plus grande que l'offre.
 

Alors qu'attendez-vous pour apprendre React ?

Dans cette formation nous allons :

  • Faire un rappel ES6, car nous allons utiliser beaucoup de JavaScript moderne (fonctions fléchées, const, let, destructuring...),
  • Découvrir les bases de React,
  • Maîtriser les différents types de composants,
  • Gérer les données des composants avec State et Props,
  • Créer une application qui contient plusieurs "pages" avec React-Router,
  • Centraliser le State avec "Context API",
  • Utiliser les "React Hooks",
  • Réaliser 3 projets concrets en React,
  • et bien d'autres choses !

Cette formation en vidéo sera constamment mise à jour, car l'écosystème de React évolue très rapidement.
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 
Un QCM de fin vous permettra de valider vos nouvelles connaissances !

Bonne découverte de React !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Introduction
Chapitre 2
1. Rappel JavaScript moderne
Chapitre 3
2. Créer une app avec React
Chapitre 4
3. Les bases de React
Chapitre 5
4. Projet : To-do list
Chapitre 6
5. React dans le détail
Chapitre 7
Créer des composants courants

Plan détaillé du cours

Chapitre 1 : Introduction
10m33s
 
Leçon 1Introduction
Leçon 2Mise en place de l'éditeur de code et conseils
Chapitre 2 : 1. Rappel JavaScript moderne
1h54m
 
Leçon 1Let, const et var
Leçon 2Les template strings
Leçon 3Les différences entre les fonctions fléchées et les fonctions classiques
Leçon 4Le spread operator
Leçon 5Le destructuring
Leçon 6Le rest operator et les paramètres par défaut
Leçon 7Les fonctions pures
Leçon 8Les fonctions d'ordre supérieur
Leçon 9Les méthodes des tableaux partie 1
Leçon 10Les méthodes des tableaux partie 2
Leçon 11Astuces syntaxiques
Leçon 12La méthode fetch()
Leçon 13Utiliser les modules es6
Chapitre 3 : 2. Créer une app avec React
33m37s
 
Leçon 1Qu'est-ce qu'une application web ?
Leçon 2Utiliser react sans un bundler
Leçon 3Un bundler, qu'est-ce que c'est ?
Leçon 4Création d'une app web avec Vite et explication de l'architecture du dossier
Chapitre 4 : 3. Les bases de React
1h49m
 
Leçon 1Mise en place du dossier et des extensions
Leçon 2Pourquoi faut-il toujours retourner un seul élément ?
Leçon 3La syntaxe et les fonctionnalités JSX
Leçon 4Notre premier composant
Leçon 5Utiliser des évènements
Leçon 6Le state
Leçon 7Les props
Leçon 8Utiliser du CSS
Leçon 9Créer une liste d'éléments
Leçon 10Utiliser des images
Leçon 11Rendu conditionnel avec if
Leçon 12Rendu conditionnel avec une opération ternaire
Leçon 13Rendu conditionnel avec une opération de court-circuit
Leçon 14Exemple de toggle d'une classe html
Leçon 15Utiliser useRef() pour une valeur persistante
Leçon 16Utiliser useRef() pour sélectionner un élément
Leçon 17Les inputs controllés
Leçon 18Les inputs incontrollés
Chapitre 5 : 4. Projet : To-do list
39m40s
 
Leçon 1Mise en place
Leçon 2Création du contenu
Leçon 3Explication de React.strictMode
Leçon 4Création et suppression d'éléments
Leçon 5Ajouter un élément et validation
Chapitre 6 : 5. React dans le détail
2h26m
 
Leçon 1Les Fragments
Leçon 2Les règles des hooks
Leçon 3Le hook useEffect
Leçon 4Le cycle de vie d'un composant
Leçon 5La fonction de nettoyage
Leçon 6Ajouter un évènement global
Leçon 7Appeler une API
Leçon 8Utiliser un observateur
Leçon 9Utiliser setInterval
Leçon 10Sélectionner plusieurs éléments statiques
Leçon 11Sélectionner une liste dynamique
Leçon 12Comprendre les "props.children"
Leçon 13Utiliser memo et useCallback()
Leçon 14Le hook useMemo
Leçon 15Comprendre useReducer
Leçon 16Créer un hook personnalisé
Leçon 17Utiliser des CSS Modules
Leçon 18Utiliser TailwindCSS
Chapitre 7 : Créer des composants courants
57m23s
 
Leçon 1Coder une fenêtre modale
Leçon 2Créer un système d'onglets
Leçon 3Coder une Navbar responsive
Leçon 4Mise en place d'un système de validation
Leçon 5Contrôler les inputs
Leçon 6Créer les conditions de validation
Leçon 7Montrer les messages d'erreur
Chapitre 8 : React router
27m59s
 
Leçon 1Mettre en place React Router
Leçon 2Les routes dynamiques
Leçon 3Créer une "page 404"
Leçon 4Utiliser les liens et les Navlinks
Leçon 5Créer des routes imbriquées
Chapitre 9 : L'API de contexte
20m13s
 
Leçon 1Mise en place
Leçon 2Création du contexte
Chapitre 10 : Redux Toolkit
1h31m
 
Leçon 1Introduction et mise en place
Leçon 2Architecture classique
Leçon 3Envoyer une action avec dispatch
Leçon 4Créer l'UI du projet Fruity
Leçon 5Création de des données de l'inventaire
Leçon 6Ajouter et enlever un fruit
Leçon 7Afficher les fruits sélectionnés
Leçon 8Comprendre les extraReducers
Leçon 9Utiliser un custom middleware
Leçon 10Utiliser le middleware "logger"
Leçon 11Appeler une API avec le thunk middleware
Leçon 12Afficher les données
Leçon 13Créer un chrono
Chapitre 11 : Projet : Boxy-generator
1h58m
 
Leçon 1Mise en place du projet
Leçon 2Création du panneau de configuration et des onglets
Leçon 3Mise en place du store redux et des states
Leçon 4Afficher les composants des propriétés de la box
Leçon 5Mettre en place les inputs range liés à la boîte
Leçon 6Mettre en place l'input color lié à la boîte
Leçon 7Afficher la liste des ombres
Leçon 8Ajouter les inputs des ombres
Leçon 9Gérer l'input color des ombres
Leçon 10Gérer les inputs range des ombres
Leçon 11Ajouter les checkboxes
Leçon 12Petites rectifications d'UI
Leçon 13Ajouter la visualisation
Leçon 14Donner les valeurs du state à la box
Leçon 15Activer la modale
Leçon 16Créer le contenu de la modale
Leçon 17Copier les valeurs et empêcher le scroll quand la modale est ouverte
Leçon 18Gérer la suppression des ombres

Avis des apprenants

Détail des avis
65
Apprenants
5
Commentaires
5/5
Note moyenne
5/5
5
4/5
0
3/5
0
2/5
0
1/5
0
Cédric Pommier
Cédric Pommier
Publié le 02/04/2021
très bien !!! Merci pour tes tutos, ils sont vraiment de bonne qualité avec de bonnes explications. Pour l'installation de uuid, petite modif : npm i react-uuid puis pour l'import: import uuid from 'react-uuid'
Redouane Guechoud
Redouane Guechoud
Publié le 25/02/2021
Excellentissime. Y-a rien à redire.
Florian Coudert
Florian Coudert
Publié le 22/11/2020
super cours, clair, concis. merci

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