On est si impatient de faire des applications modernes avec NextJS qu'on oublie souvent que pour utiliser NextJS, il vaut mieux maîtriser les bases de React avant de se lancer dans ce framework.
Un framework est très pratique, mais il est important de bien comprendre les bases avant de se lancer dans quelque chose de plus complexe, comme je l'explique dans cette vidéo YouTube.
Cet article va te guider dans chaque concept qu'il faut comprendre avant de passer à NextJS et potentiellement suivre mon cours NextReact.
Le JavaScript à connaître
Si tu fais du React, c'est sûrement que tu maîtrises déjà le JavaScript. Mais si ce n'est pas le cas, je te conseille de lire mon autre article :
Le JSX
Le JSX est un langage qui permet de déclarer des éléments HTML dans du JavaScript. Il est très proche du HTML mais il te permet d'ajouter des variables et des fonctions.
J'aime bien dire que le JSX c'est juste le fait de :
Pouvoir écrire du JS dans du HTML.
Il faut comprendre que le JSX n'est qu'une "syntaxe simplifiée" qui est transformée en JavaScript, comme ceci :
Pour aller plus loin sur le JSX :
Les composants
Les composants en soi sont des pièces d'UI qui sont réutilisables dans ton application. En React, ils s'écrivent sous forme de fonction qui prend en paramètre des props et qui retourne du JSX.
On dit que React est "Component Driven Development", une toute autre philosophie où ton objectif est de tout diviser en petits composants atomiques qui ont chacun leurs props, leur propre état et leur propre style.
Quand React est sorti, c'était une nouveauté ! Le fait qu'on ne sépare plus HTML/CSS/JS, mais qu'on ait tout dans le même fichier.
Voici un simple composant React :
Pour aller plus loin :
Les listes
Le fonctionnement des listes et la manière d'afficher des données dans React sont des concepts très importants à comprendre. De plus, les listes sont le premier moyen de découvrir les "keys" avec les règles des clés.
Il est important de maîtriser le rendu des listes et de bien comprendre pourquoi tu as besoin de clés.
Regarde la différence quand tu te concentres sur un input, quand tu as la clé et quand tu ne l'as pas. (exemple de BeginReact)
Pour aller plus loin :
Gérer les formulaires
Les formulaires en React sont un art controversé. Il y a beaucoup de moyens d'arriver au même résultat. Ce que je te conseille de connaître c'est :
- Les formulaires basiques (mon article)
- Les formulaires avec React Hook Form
Pour aller plus loin :
Les hooks
Enfin ! Évidemment, les hooks sont plus qu'à connaître, ils sont à maîtriser. Voici les hooks minimum à maîtriser :
useState(ma vidéo sur useState)useEffect(guide visuel du useEffect)useContext(ma vidéo sur useContext)useRef(ma vidéo sur useRef)
Le reste est important, mais pas essentiel pour faire du NextJS.
Ce qui est intéressant, c'est aussi que tu comprennes comment fonctionnent ces différents hooks ainsi que les customs hooks.
Fetch des données
Le fetch des données est une longue histoire en React. La majorité des développeurs le font très mal... et il n'y a pas qu'une solution !
Le gros problème du useEffect, c'est qu'il est fait pour synchroniser et pas pour faire des fetchs "lors du premier render" de ton composant.
Mais tu dois quand même savoir comment fetcher des données en React avec un useEffect (même si ce n'est pas optimal).
React travaille actuellement sur des solutions, comme le hook use qui n'est pas encore sorti (15 février 2023).
Les renders
Comment fonctionnent les rendus en React ? Il y a pas mal de règles qui permettent de mieux comprendre la philosophie de React.
Pour cela, il faut déjà comprendre comment fonctionne le ReactDOM avec la "réconciliation" et le "diffing" que tu peux retrouver dans ma masterclass React d'une heure.
Une fois que tu as compris ces concepts, il faut pouvoir répondre aux questions suivantes :
- Quand un composant est-il re-rendu ?
- C'est quoi un rendu ?
- Quels sont les événements qui font que ton composant est re-rendu ?
Pour aller plus loin :
Conclusion
Si tu as lu tout ce que j'ai mis dans cette section, tu es prêt pour passer au niveau supérieur et découvrir les concepts avancés de React.
Cette article à été créer pour la formation NextReact !
Recommendations
Écris par Melvyn Malherbe
J'ai aidé 200 personnes à apprendre React et Next.js. Je suis un créateur de contenu et un développeur web. Plus de 2'600 personnes reçoivent mes newsletter par email chaque semaine.
En apprendre plus à propos de moi