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 :

• Faire le quiz JavaScript

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 ou Redux
• Async state manager comme SWR ou Tanstack/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 !