Le Framework React
Utilier la "Context API"
Créer un projet type "Blog"
Créer une Todo List
Créer une app de Contact
React Router
Les composants
State et Props
Des outils de l'écosystème React
Des techniques pour mieux coder avec React
Faire des requêtes HTTP
Échanger des données avec une API
Utiliser axios
React Hooks
Dans cette formation tu vas apprendre à utiliser le Framework Javascript le plus populaire : React.
Il reste encore le Framework le plus demandé en 2021.
Tu peux trouver des centaines de missions chaque jour sur les sites de Freelance liés au code.
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’attends tu pour apprendre 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 State et Props
- Créer une application qui contient plusieurs “pages” avec React-Router.
- Centraliser le State avec l’API de contexte
- Utiliser les “React Hooks”
- Apprendre à utiliser Redux avec React
- Consommer des APIs avec React
- Créer un “dark/light mode”
- Faire des rendus conditionnels
- Créer un blog
- et bien d’autres choses !
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.
Cette formation sera constamment mise à jour, car l’écosystème de React évolue très rapidement.
Ton instructeur, Enzo.
Introduction
1
Introduction
2
Code source
Rappel ES6 et JavaScript moderne
1
Créer son dossier et Let & Const
2
Fonctions fléchées et fonctions classiques
3
Spread & Rest
4
Les fonctions pures
5
Les fonctions d'ordre supérieur
6
Les fonctions d'ordre supérieur des tableaux
7
Destructuring
Les bases de React
1
Mettre en place une web app
2
Explication des fichiers
3
Qu'est ce que le JSX ?
4
Notre premier composant
5
Découverte de useState()
6
Modifier le state
7
Les "props"
8
Remonter le state
9
Utiliser du CSS avec React
10
Utiliser des images
11
Utiliser des inputs
Les rendus conditionnels et les listes
1
Créer un rendu conditionnel avec "if"
2
L'opérateur ternaire
3
Faire un "toggle" de classes et de css
4
Créer des listes
Créer une To-Do Liste
1
Créer l'interface
2
Afficher la liste
3
ID et suppression
4
Ajouter des éléments
React dans le détail
1
Les règles des Hooks
2
Le hook "useEffect"
3
Un appel à une API avec useEffect
4
Utiliser "setInterval" avec React
5
La destruction d'un composant
6
Les "React fragments"
7
Le hook "useRef()"
8
Sélection un tableau d'éléments
9
Utiliser "addEventListener"
10
Ne jamais changer le state directement dans un tableau/objet
11
Comprendre "props.children"
12
Utiliser "usememo" et "react.memo"
13
Compléter le tout avec "useCallback"
14
Créer un "hook" personnalisé
Créer des composants courants
1
Créer une fenêtre modale
2
Créer un accordéon
3
Coder une navbar responsive
Créer un système de routes avec React-router
1
Installation de react-router
2
Utiliser un Router et un Switch
3
Créer des liens et des navlinks
4
La page 404 et "history"
5
Les hooks "useLocation" et "useParams"
Découverte de l'API de contexte de React
1
À quoi sert l'API de contexte ?
2
Mise en place
3
Notre premier contexte
4
Créer un "Dark-light mode"
Apprendre à utiliser Redux avec React
1
Installation de Redux
2
Création du store
3
Utiliser "useSelector"
4
Créer un "Reducer"
5
Le "payload" avec un "dispatch"
6
Combiner plusieurs reducers
7
Qu'est ce qu'un middleware?
8
Appel asynchrone avec Redux
Créer un blog avec React
1
Mise en place
2
Création de l'accueil et d'une carte
3
Création du store et du reducer
4
Afficher les articles
5
Ajouter un article
ANCIEN COURS Introduction
1
LISEZ MOI
2
Introduction
3
Comment suivre ce cours ?
4
Ressources
ANCIEN COURS Rappel ES6
1
ES6 : Let et Const
2
ES6 : Les Fonctions Fléchées
3
ES6 : Spread et Destructuring
4
ES6 : Les Classes
ANCIEN COURS Les Bases de React
1
Conseils
2
Utiliser "create-react-app" pour mettre en place son dossier.
3
Explication des fichiers présents
4
Introduction aux composants et à JSX
5
Créer notre premier Composant
6
Les propriétés "props"
7
Qu'est ce que "state" ?
8
Les composants de type fonction
9
Vérifier ses props avec "proptypes"
10
Du CSS avec React
11
Mettre en place Bootstrap
Garantie de remboursement de 30 jours
Inclut
14 heures de vidéo à la demande
Durée totale du cours
Accès sur le mobile et la télévision
Certificat d'achèvement
