Retour • 04/08/2024
Comment apprendre React rapidement ?
Écris par Melvyn Malherbe le 04/08/2024
React est la technologie la plus populaire d'après le sondage StackOverFlow !
Mais comment l'apprendre rapidement et efficacement ?
Comment être capable de créer des applications en React de A à Z sans galérer toutes les 2 minutes.
Ce qu'on va voir :
- Les pré-requis élémentaires pour faire du React
- Les concepts à apprendre en priorité
- Les meilleures ressources pour apprendre ces concepts
C'est parti !
Les pré-requis élémentaires
D'abord, il faut savoir que React est une librairie JavaScript qui est fondée sur le langage JavaScript
.
La première étape est de bien connaître JavaScript.
Pour ça, je t'invite à lire mon article pour savoir ce qu'il faut apprendre pour maîtriser JavaScript !
En résumé, les points importants les plus "avancés" :
- Les fonctions JavaScript avec le concept de "scope"
- Les types de fonctions
- Les callback functions
- Les closures
- L'immuabilité
- Les méthodes de tableau (
.map
,.filter
, etc...) - Les objets (
Object.keys
,Object.values
, etc...)
Il faut comprendre un minimum ces concepts.
Je t'ai préparé un quiz JavaScript en français pour tester tes compétences :
Comment apprendre rapidement
Il n'y a pas de secret.
Je t'invite vraiment à pratiquer. Tu peux regarder des vidéos YouTube mais tous les meilleurs développeurs React que j'ai rencontrés ont créé des applications et pratiqué de leur côté.
Crée et donne vie à tes idées.
Je te conseille de regarder des vidéos YouTube juste pour la partie théorique de React
et sinon : pratique !
Les concepts à apprendre en priorité
Maintenant que tu sais faire du JavaScript
, il va falloir passer à React et j'ai envie de te faire une mini roadmap des concepts importants à apprendre en React.
1. JSX
Déjà, il faut apprivoiser le JSX et son fonctionnement, notamment le fait que notre code JSX est transpilé ensuite en simple JavaScript
:
const Component = () => (
<div>
<h1>Hello</h1>
</div>
);
// Est transformé en
const Component = () => {
return React.createElement('div', null, React.createElement('h1', null, 'Hello'));
};
Connaître ce concept est important pour découvrir ensuite à quoi sert la syntaxe de {}
qui permet "d'entrer dans le monde" du JavaScript.
Je t'invite à regarder ma vidéo complète sur le sujet qui traite du JSX et des components React.
2. Components
Avant même de s'amuser avec des hooks
, il va falloir que tu crées des components et encore mieux : que tu comprennes leur utilité !
Un component te permet :
- De séparer ton code en plusieurs petits blocs
- De réutiliser ces "blocs" à plusieurs endroits dans ton application
- D'avoir un code plus "clean" et séparé
Réussir à correctement utiliser les components pour optimiser ces 3 points est essentiel.
3. useState
Le premier hook à découvrir est le useState
et tu vas devoir être capable de comprendre le concept de "render" qu'il produit.
C'est-à-dire que lorsqu'on appelle la méthode setState
, celui-ci provoque un re-render qui est en gros, l'exécution de notre component afin de calculer un nouveau rendu JSX.
4. useEffect
Le hook le plus utilisé ensuite est le useEffect
. Avec uniquement le useState
et useEffect
, tu es déjà capable de créer des applications complexes.
5. Tous les autres hooks
Tu peux ensuite découvrir les hooks comme :
useContext
useId
useMemo
useCallback
- etc...
Ce sera aussi l'occasion de découvrir comment fonctionnent les hooks d'optimisation. Tout ça je le traite dans ma vidéo sur l'optimisation React !
6. State manager
Pour créer une application, tu auras besoin de state managers. Il en existe 2 types :
- Local state manager comme
Zustand
ouRedux
- Async state manager comme
SWR
ouTanstack/ReactQuery
Je t'invite à découvrir tout ce state management.
La suite...
Ensuite, tu vas pouvoir découvrir l'usage de librairies comme NextJS
et plein d'autres.
Les ressources pour apprendre
Il y a beaucoup de ressources en ligne qui vont t'aider à apprendre React rapidement.
1. YouTube
Ma chaîne YouTube avec par exemple ma série sur React va énormément t'aider, j'en suis sûr.
Il existe de nombreuses autres chaînes YouTube intéressantes.
Je te conseille quand même d'éviter les vidéos trop longues ou qui manquent de pratique concrète.
2. La documentation officielle
De très loin, je t'invite à utiliser la documentation officielle de React : React.dev !
Elle est traduite en français ici. !
Elle contient tout ce qu'il faut pour découvrir React et comprendre son fonctionnement. En plus, tu vas créer le jeu du TicTacToe avec leur tutoriel, ce qui est un moyen superbe de pratiquer et découvrir React.
3. BeginReact
BeginReact
est une formation que tu peux tester gratuitement ici : BeginReact
Tu vas non seulement découvrir comment utiliser React
mais tu vas surtout le comprendre tout ça sur une plateforme unique ! Tu n'auras sûrement jamais vu une application aussi "poussée" dans l'apprentissage de React.
Je t'invite vraiment à te rendre sur mes cours React !
Conclusion
Pour apprendre React, il faut commencer par avoir des pré-requis solides et ensuite pratiquer énormément.
Les 3 ressources que je t'ai données ne peuvent que faire exploser tes compétences !