Le Framework JS
React de A à Z
Apprenez à utiliser le Framework le plus populaire.
Il reste encore aujourd'hui le Framework le plus demandé. Vous pouvez trouver chaque jour des centaines de missions React sur les sites de Freelancing.
C'est la meilleure portée d'entrée vers les Frameworks JS.
Grâce à son immense communauté et au grand nombre de tutoriels, blogs, dépôts et codes sources disponibles en ligne, tu pourras facilement trouver de l'aide. Tu comprendras également mieux les autres Frameworks en commençant par React.
Dans cette formation, tu vas :
- 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
- Gérer les données des composants avec le state et les props.
- Centraliser le state avec l'API de contexte
- Utiliser les React Hooks
- Apprendre à utiliser Redux avec React
- Consommer des APIs avec React
- Créer une app complète et professionnelle
- Etc ...
Quels sont les prérequis ?
Il faut maîtriser JavaScript, avoir déjà utilisé des fonctions callback, du JavaScript moderne, bien comprendre le destructuring, let & const, la portée, etc ... Il faut également avoir des connaissances basiques en HTML CSS. Enfin il faut de la volonté et une bonne dose de discipline.
Besoin d'aide ?
Rejoignez la communauté sur Discord, ou suivez les tutoriels de l'École du Web sur Youtube.
Contenu du cours
- Let, const et var (15:17)
- Les template strings (4:31)
- Les différences entre les fonctions fléchées et les fonctions classiques (16:53)
- Le spread operator (6:11)
- Le destructuring (15:14)
- Le rest operator et les paramètres par défaut (1:35)
- Les fonctions pures (5:58)
- Les fonctions d'ordre supérieur (7:15)
- Les méthodes des tableaux partie 1 (8:44)
- Les méthodes des tableaux partie 2 (8:11)
- Astuces syntaxiques (2:31)
- La méthode fetch() (11:03)
- Utiliser les modules es6 (11:11)
- Mise en place du dossier et des extensions (6:50)
- Pourquoi faut-il toujours retourner un seul élément ? (5:43)
- La syntaxe et les fonctionnalités JSX (12:52)
- Notre premier composant (2:42)
- Utiliser des évènements (4:39)
- Le state (9:39)
- Les props (9:46)
- Utiliser du CSS (2:57)
- Créer une liste d'éléments (5:58)
- Utiliser des images (8:09)
- Rendu conditionnel avec if (4:27)
- Rendu conditionnel avec une opération ternaire (6:24)
- Rendu conditionnel avec une opération de court-circuit (3:43)
- Exemple de toggle d'une classe html (4:58)
- Utiliser useRef() pour une valeur persistante (5:10)
- Utiliser useRef() pour sélectionner un élément (5:42)
- Les inputs controllés (6:41)
- Les inputs incontrollés (3:14)
- Les Fragments (3:16)
- Les règles des hooks (6:15)
- Le hook useEffect (6:00)
- Le cycle de vie d'un composant (3:45)
- La fonction de nettoyage (7:26)
- Ajouter un évènement global (5:09)
- Appler une API (14:57)
- Utiliser un observateur (9:14)
- Utiliser setInterval (8:07)
- Sélectionner plusieurs éléments statiques (5:01)
- Sélectionner une liste dynamique (10:53)
- Comprendre les "props.children" (3:16)
- Utiliser memo et useCallback() (9:16)
- Le hook useMemo (12:17)
- Comprendre useReducer (7:52)
- Créer un hook personnalisé (18:11)
- Utiliser des CSS Modules (5:16)
- Utiliser TailwindCSS (9:48)
- Introduction et mise en place (4:53)
- Architecture classique (11:52)
- Envoyer une action avec dispatch (9:20)
- Créer l'UI du projet Fruity (5:15)
- Création de des données de l'inventaire (6:47)
- Ajouter et enlever un fruit (8:23)
- Afficher les fruits sélectionnés (6:26)
- Comprendre les extraReducers (4:25)
- Utiliser un custom middleware (5:43)
- Utiliser le middleware "logger" (1:44)
- Appeler une API avec le thunk middleware (10:22)
- Afficher les données (5:41)
- Créer un chrono (10:35)
- Mise en place du projet (9:04)
- Mise en place du store redux et des states (10:05)
- Création du panneau de configuration et des onglets (14:05)
- Afficher les composants des propriétés de la box (3:56)
- Mettre en place les inputs range liés à la boîte (7:23)
- Mettre en place l'input color lié à la boîte (2:52)
- Afficher la liste des ombres (7:18)
- Ajouter les inputs des ombres (10:31)
- Gérer l'input color des ombres (4:20)
- Gérer les inputs range des ombres (1:45)
- Ajouter les checkboxes (9:02)
- Petites rectifications d'UI (2:54)
- Ajouter la visualisation (3:56)
- Donner les valeurs du state à la box (9:43)
- Activer la modale (3:14)
- Créer le contenu de la modale (7:22)
- Copier les valeurs et empêcher le scroll quand la modale est ouverte (6:03)
- Gérer la suppression des ombres (4:48)
Cliquez sur les questions
Foire aux questions.
Oui, il vous suffit de cliquer sur votre profil > gérer les abonnements > annuler l'abonnement.
Il vous suffit de rejoindre le serveur Discord dans lequel vous pouvez discuter développement web, demander de l'aide ou encore participer à des concours ou des exercices.
Le Parcours Front-End est une feuille de route vous permettant de suivre les cours qui feront de vous un développeur Front-End dans l'ordre.
Il est très important de pratiquer quand on apprend de nouvelles compétences, c'est pourquoi j'ai une page spécialement remplie de dizaines de cours et de projets pratiques!
Rejoignez des milliers d'étudiants