À propos du cours
La formation complète sur React.js de + de 18 heures de vidéos avec projets pratiques vous plongera dans un univers dynamique et réactif, en vous offrant une maîtrise approfondie de cette bibliothèque JavaScript largement utilisée pour créer des interfaces utilisateur interactives. Vous acquerrez des compétences essentielles pour développer des applications web modernes et évolutives, tout en découvrant des outils complémentaires comme Redux, Zustand, React Router DOM, React Hook Form, Material-UI et TanStack Query.
Nous commencerons par poser des bases solides en explorant les concepts fondamentaux de React.js, tels que la création de composants modulaires, la gestion de l’état et les cycles de vie des composants. Ces notions sont cruciales pour bâtir des applications robustes et fonctionnelles.
Nous aborderons ensuite la gestion de l’état avec Redux et Zustand, vous permettant de gérer des applications complexes tout en maintenant une architecture claire. Vous apprendrez à utiliser React Router DOM pour gérer la navigation, y compris les routes imbriquées et dynamiques, essentielles pour une expérience utilisateur fluide.
De plus, nous explorerons React Hook Form pour une gestion efficace des formulaires, ainsi que Material-UI pour concevoir des interfaces élégantes et réactives. Enfin, vous découvrirez TanStack Query pour gérer les requêtes API et l’état des données, vous permettant de synchroniser votre interface avec les changements de données en temps réel.
À l’issue de cette formation, vous serez doté d’une expertise complète en React.js et d’une maîtrise des bibliothèques associées, prêt à concevoir des applications web modernes et à adopter les meilleures pratiques de développement. Embarquez dans cette aventure passionnante et enrichissante pour transformer votre passion en expertise concrète !
Qu’allez-vous apprendre ?
- Fondamentaux de React : Compréhension des concepts de base, y compris les composants, les props et l'état.
- Gestion de l'état avec Redux : Mise en place de Redux pour une gestion centralisée et prévisible de l'état de l'application.
- Routing avec React Router DOM : Création de navigations complexes et gestion des routes dans vos applications React.
- TanStack Query : Intégration de TanStack Query pour la gestion efficace des données asynchrones et le caching des requêtes.
- Zustand : Utilisation de Zustand pour une gestion de l'état simple et sans boilerplate, idéal pour des applications légères.
- Conception d'interfaces avec Material-UI (MUI) : Création d'interfaces utilisateur modernes et responsives en utilisant les composants MUI.
- Gestion des formulaires avec React Hook Form : Création de formulaires performants avec validation et gestion des erreurs.
- Intégration de bibliothèques tierces : Utilisation de bibliothèques tierces pour enrichir vos applications, comme des graphiques, des tables et des notifications.
- Optimisation des performances : Techniques pour améliorer la performance et la réactivité de vos applications React.
- Déploiement d'applications React : Apprendre à déployer vos applications React sur des plateformes comme Vercel ou Netlify.
Contenu du cours
Introduction et préparation
-
Introduction
02:24 -
Préparation à la formation + Fichiers sources
02:04 -
Installer React JS et explications des fichiers
07:04 -
C’est quoi React JS
02:29
Les bases de React JS
-
JSX
13:56 -
Composants et props
08:44 -
Les médias et les icones
03:27 -
Exercice – Section contact
35:30 -
Installer, Supprimer et mettre jour une dépendances
02:24 -
useState
13:42 -
Le flux
06:00 -
Exercice – Todolist – présentation
01:17 -
Exercice – Todolist
33:46 -
useEffect
04:47 -
Les APIS
05:42 -
Exercice – Weather app – présentation
01:37 -
Exercice – Weather app
36:10 -
useMemo
04:26 -
Exercice – Team app – présentation
01:48 -
Exercice – Team app
35:13 -
useRef
05:30 -
Exercice – Emojis Picker – Présentation
00:56 -
Exercice – Emojis Picker
39:30 -
Créer des hooks personnalisés
20:00 -
Le Hook useCallback()
04:53 -
Les React.memo
04:41 -
Les Portals
02:59 -
ErrorBoundary
06:37 -
Le Hook useContext()
07:59 -
Exercice – Home Coca – présentation
00:37 -
Exercice – Home Coca
26:47 -
Déployer une Application React avec Vercel et GitHub
04:58
Redux & Redux ToolKit
-
Introduction et Installation
05:28 -
Le concept de Redux
03:26 -
Les actions
02:32 -
Les reducers
03:53 -
Le store
05:09 -
Le provider
03:36 -
Use Dispatch et Use Selector
06:31 -
Restock (Reselect)
02:22 -
Function bindActionCreators
02:45 -
Multiple Reducer
05:36 -
Combiner les Reducers
03:15 -
Immer
09:29 -
Les middlewares
04:18 -
Thunk
10:27 -
Redux ToolKit
02:10 -
Les Slices
08:20 -
Les Middlewares avec Toolkit
02:14 -
Les DevTools de Redux Toolkit
02:51 -
CreateAsyncThunk
14:34
Zustand
-
Installation et SetUp
03:49 -
Création du Store
07:34 -
Changer l’état en dehors du contexte
03:03 -
Les sélecteurs
03:01 -
Auto-sélecteurs
02:49 -
Le hook useCombineStore
05:34 -
Devtolls et Persist
05:46 -
Immer
04:29
React Router Dom
-
Introduction et Installation
04:53 -
Configuration des routes
05:24 -
Le composant « Link »
04:24 -
Le composant « NavLink »
03:24 -
La navigation programmée
05:25 -
Not Found
02:05 -
Routes Imbriquées
06:03 -
Routes Index
01:05 -
Route Dynamique
05:21 -
useParams
02:27 -
useSearchParams
05:17 -
Lazy
05:32 -
Exercice – Modal présentation
00:39 -
Exercice – Modal
18:18 -
Authentification et routes protégées
20:14 -
Exercice – Books app – présentation
01:02 -
Exercices – Books app
54:03
React Hook Form
-
Introduction à React Hook Form
02:21 -
Préparation et mise en place d’un formulaire
10:56 -
Le Hook UseForm
05:47 -
DevTools
03:12 -
Rerenders
02:24 -
Submission
03:14 -
Validation
04:22 -
Display Errors
04:09 -
Validation custom
03:46 -
Valeurs par default
01:43 -
Les objets
03:28 -
Les tableaux
03:34 -
Les inputs dynamiques
08:02 -
Les dates et les valeurs de type number
06:11 -
La fonction WATCH
04:36 -
La fonction GetValues
04:35 -
La fonction SetValue
04:14 -
Touched et Dirty
05:26 -
Disabled
01:52 -
La fonction onErrors
02:55 -
Disabled Submission
01:45 -
Les fonctions de validations
04:02 -
La fonction Reset
03:20 -
Les modes de validations
04:55 -
Asynchrone
03:08 -
La fonction Trigger
02:15 -
Intégration Yup
05:22 -
Intégration Zod
03:40 -
Formulaire avec MUI
12:05
MUI
-
Introduction
02:32 -
Introduction à MUI + SeTuP
06:47 -
Typography
09:03 -
Buttons
09:52 -
ButtonsGroup
03:32 -
Toggle
04:14 -
Rating
05:58 -
Autocomplete
03:51 -
Box
06:37 -
Stack
06:09 -
Grid
05:31 -
Card
04:30 -
Accordion
03:29 -
Galerie images
04:36 -
Navbar
03:13 -
Link
04:18 -
Breadcrumb
02:11 -
Menu
04:19 -
Menu mobil
07:45 -
SpeedDial
06:48 -
NavBottom
04:16 -
Avatar
03:29 -
Badges
03:11 -
List
02:28 -
Chip
04:45 -
ToolTip
03:19 -
Table
05:25 -
Alert
02:01 -
Snackbar
06:47 -
Boites de dialogue
04:33 -
Progress
02:15 -
Skeleton
01:50 -
Button loader
03:33
Tanstack Query
-
Installation, SetUp et fichiers sources
04:39 -
QueryClient et QueryClientProvider
02:14 -
UseQuery
12:58 -
ReactQueryDevTools
04:22 -
QueryCache
06:43 -
StaleState concept
02:26 -
Refetch
02:03 -
Le Polling
01:28 -
OnSuccess et OnError
02:13 -
Custom hook
04:08 -
Queries ID
11:35 -
Requêtes parallèles
08:15 -
InitialQueryData
04:22 -
Pagination
05:57 -
UseMutation
06:21
Mise à jour React version 19
-
Introduction mise à jour React 19
01:02 -
Le hook useTransition
05:52 -
Le hook useActionState
06:26 -
Le hook useFormStatus
06:43 -
Changement avec les Refs
03:33 -
Changement avec l’API Context
03:50 -
L’ API use
03:50 -
Les actions
06:04 -
Les server components
06:16 -
Les métadonnées
02:43 -
Préchargement et chargement
02:37 -
Prise en charge des scripts asynchrones
01:26 -
Le hook useDeferredValue
04:36 -
Le hook useOptimistic
06:03
Projet final
-
Projet final – Cloner Disney +
01:05:32
Quiz
-
Quiz React JS
Conclusion
-
Et apres ?
01:19
Obtenez un certificat
Ajoutez ce certificat à votre CV pour démontrer vos compétences et augmenter vos chances .