26
Premiers pas avec ReactJS: les fondamentaux
L'article original, vous pouvez le trouver dans mon blog personnel Blog
Avant de commencer à apprendre ReactJS, vous devez comprendre les fondamentaux de ReactJS
Pourquoi comprendre les fondamentaux vous facilitera l’apprentissage de ReactJS ?
Je vais vous répondre avec un exemple facile :
Imaginons on veut apprendre à conduire une moto mais on n’y connait rien. Du coup, on monte dessus sans l'avoir démarrée et on pousse avec les pieds car on ne sait pas comment la démarrer. Dans ce cas là on ne va pas faire grand
chose juste on restant comme ça jusqu'à ce qu’on comprenne les essentiels d'une moto qui sont par exemple qu’elle s'allume à l'aide d'une clé, elle a un embrayage pour changer les vitesses, un accélérateur etc.
Mais une fois qu'on a compris les fondamentaux d’une moto, on pourra très bien le démarrer au moins et pour pouvoir conduire comme un pro il va falloir du temp pour bien maîtriser tous les éléments d'une moto.
C'est la même chose avec React, si vous prenez React et essayez de coder avec sans savoir vraiment ce qu'il vous permet de faire, vous n'allez pas faire grand chose comme avec la moto, ou peut-être vous allez pouvoir coder mais vous allez galérer !
Maintenant que vous avez compris que les fondamentaux sont essentiels pour bien démarrer l’apprentissage, je vais vous présenter une liste avec tous les "building blocks" (on va appeler comme ça parce que ce sera plus facile pour vous quand vous ferez des recherches sur Google)
1 Components
2 JSX
3 State
4 Props
Les composants sont des morceaux de code indépendants et réutilisables. Ils ont le même objectif que les fonctions JavaScript, mais fonctionnent de manière isolée et renvoient du HTML via un return( ).
Les composants sont de deux types, les composants de classe et les composants de fonction. Ici nous nous concentrerons sur les composants fonctionnels.
A quoi ressemblent les composants, exemple:
On va créer un composant ensemble pas à pas.
Comme on a dit tout à l'heure, un composant est comme une fonction JavaScript.
Commencez par écrire une fonction et donnez lui un nom.
Entre les accolades vous écrivez return et ouvrez les parenthèses, à l’intérieur du return vous pouvez créer un div et à l’intérieur du div un h1 avec le texte que vous voulez.
Et à la fin exportez le composant grâce au module ES6
Attention, il y a quelques règles à respecter !
Le nom du fichier doit commencer par une majuscule sinon ça va vous donner une erreur.
Aussi, à l’intérieur du return vous devez soit utiliser des guillemets vides soit un élément qui deviendra l’élément parent et à l’intérieur vous mettez d’autres éléments enfant, mais il ne peut y avoir en aucun cas deux éléments parent comme premier élément du return voir les exemples
Ok 👍
Ok 👍
NO OK 👎
Le JSX est du « sucre syntaxique » uniquement là pour faciliter l’expérience de développement, grâce au JSX on peut écrire du "HTML" et JavaScript en un seul endroit.
Vu qu'il a une syntaxe comme HTML, cela va vous permettre de comprendre plus vite React. Perso, depuis que j'ai découvert JSX, je ne peux plus écrire du code sans.
Vous pouvez utilisez React sans JSX bien sûr mais je ne vous le recommande pas. Pourquoi ? Je vais vous montrer deux exemples de code avec et sans JSX.
Sans JSX
Avec JSX
Attention !
Même si la syntaxe de JSX est semblable à celle de HTML il y a quand même quelques différences, par exemple pour donner une class à un élément vous ne pouvez plus utiliser juste "class" car cela est un mot réserve en JavaScript mais vous devez écrire className="name_of_your_class"
State, ou l'état en français, c'est une espèce de variable qui contient un état actuel qui peut-être changé plus tard, en React ce type de variables s'appellent « hooks d'état »
Un exemple de hook d'état
Dans ce cas par exemple on vois que l'état par défaut est 0 !
Dans ce hook d'état, le count contient la valeur et on peut accéder à la valeur grâce à ce nom. Par exemple : console.log(count) // resultat: 0
Mais setCount a une autre fonction, setCount ne nous permet pas d’accéder à la valeur mais elle servira à mettre à jour l'état, par exemple:
Chaque fois qu'on clique sur le bouton on va prendre l'état actuel et on va lui ajouter +1 donc l'état ne sera plus 0 mais 1 ensuite 2 etc
Vous pouvez considérer le hook d'état comme une variable mais en plus avancé.
Props, je préfère l'appeler "transporteur de données" et vous allez voir pourquoi.
On a parlé au tout début des composants, parent et enfant etc.
Lorsqu’on a un composant parent et un autre composant enfant, comment fait-on pour passer
des données d'un composant à l'autre ?
Eh bien c'est ici qu'entrent en jeu les props.
Je vais écrire un petit code pour vous montrer comment utiliser les props.
Vous voyez le nom John Doe, on a pu l'utiliser dans deux composants grâce aux props.
Pour envoyer une donnée avec props on va d’abord lui donner un nom (ça peut être n'importe quel nom) et on va lui attribuer les données qu'on veut dans ce cas on lui attribue le variable "guest".
En ce qui concerne la réception des données, il faut qu'on utilise les props comme vu dans l’exemple, ça veut dire que pour accéder a ces données, on utilise d'abord le nom props ensuite on lui ajoute le nom du props qu'on a défini plus tôt donc props.guest et ça va nous donner John Doe dans notre composant Enfant.
Ne vous inquiétez pas si vous ne comprenez pas tout, tout de suite, et surtout ne paniquez pas car moi aussi ça m’a pris un peu de temps pour les comprendre. L'important est juste d'avoir une connaissance générale de ces concepts et plus tard vous allez avoir le fameux "Ahhhhhh oui je comprend maintenant !"
Donc voila, on arrive à la fin de cet article, n’hésitez pas à aller creuser un peu plus sur ces concepts qu'on a abordé aujourd'hui mais surtout, ne vous découragez pas !
L'article original, vous pouvez le trouver dans mon blog personnel Blog
26