Maintenant que vous avez installé un environnement de développement, nous allons nous intéresser de plus prés au fonctionnement même de ReactJS. Commençons par analyser le template que vous propose create-react-app
Le point d'entrée de votre application est le fichier index.js. Même si vous aurez tout le loisir de le nommer comme vous voulez dans vos différents développements, c'est celui-ci qui nous intéresse pour le moment.
J'ai volontairement supprimé des lignes qui font du "bruit" dont on n'a pas besoin dans l'immédiat.
A travers ces quelques lignes, nous pouvons déjà expliquer le fonctionnement de cette librairie qui utilise 2 packages :
react est le package qui permet... de faire du React! Cela paraît évident mais il est important de le rappeler. Vous pouvez tout a fait créer des composants React mais ne pas les afficher... a quoi bon ? C'est là qu'entre en jeu react-dom.
Ce package va vous permettre de définir ce que vous souhaitez rendre, ou, quand et comment. Il expose 3 fonctions :
Pour l'instant, nous allons nous intéresser uniquement à la fonction render qui est utilisé dans notre application. Nous verrons également plus tard qu'il existe 2 autres fonctions qui sont exposés dans le package react-dom/server (renderToString et renderToStaticMarkup).
Suite à ça, que doit-on comprendre avec cette ligne :
Avec le package react-dom, nous utilisons la fonction render. En premier argument nous souhaitons rendre notre composant qui s'appelle App sur l'élément du DOM avec un ID qui est root. Voici à quoi ressemble notre fichier HTML (public/index.html)
La balise div avec l'ID root existe bel et bien. Cela veut donc dire que nous "rendons" notre composant dans la balise que nous souhaitons. Cela veut également dire que nous pouvons rendre plusieurs composants... dans plusieurs balises!
C'est ici le point de démarrage entre une Single Page Application et le fait d'avoir plusieurs modules. Si vous souhaitez contrôler l'intégralité de votre HTML en ReactJS, vous n'allez avoir qu'un module. En revanche, rien ne vous interdit d'en avoir plusieurs pour qu'ils se chargent chacun dans différentes parties du site.
Nous pourrions donc avoir :
Cet exemple doit vous permettre de comprendre que ReactJS est modulaire et n'est en rien un framework comme Angular. Typiquement, vous n'auriez pas besoin d'un router pour l'exemple ci-dessus où l'on souhaite juste charger un module dans un élement HTML spécifique.
Revenons sur notre exemple d'un seul module. On remarque que l'on charge un seul composant à un seul endroit. Il est donc important de comprendre que ReactJS n'est qu'une suite de composants qui ont à la fin, un seul "grand parent".
Pour notre composant <App />, c'est le module principal qui contiendra une suite d'enfants, de petits enfants, etc... Si nous devions représenter en schématisant notre module ou une application complète sur ReactJS, c'est toujours la même chose :
Comme pour un arbre HTML, il n'y a qu'une balise principale qui se trouve être <html>//...</html>, pas plus, pas moins et elle contient tout un arbre de différentes balises.
Cela est vrai même si vous utilisez différentes librairies comme Redux. En réalité, vous avez un composant qui "wrap" les autres composants. Typiquement, le fameux <Provider /> de Redux entoure lui-même vos composants là où vous souhaitez charger Redux. Mais Provider est bel et bien un autre composant React ; ce n'est pas du JavaScript obscur.
Le problème qui se posera plus tard, c'est de comprendre comment l'on va pouvoir communiquer entre les différents composants, qu'ils soient à côté, éloigné, enfant ou parent.