Code modulaire
Un des forces de React, c'est de permettre d'imbriquer des modules. Bon, c'est le cas de tout framework moderne, pas forcément JS. Mais avec React, on réfléchit en composants.
Nous allons concrètement mettre en oeuvre cette philosophie en créant un assemblage de composants à travers un layout (disposition en bon français).
Pour cela, créons un composant Layout.js à la racine du projet React (c'est-à-dire app/Resources/js) :
Plus propre, n'est-ce pas ? Il faut maintenant les fichiers Header, Footer et Home (importés au début du fichier). Après avoir créé les dossiers vides layout
et components
, on peut les remplir avec les fichiers js suivants :
layout/Header.js (la copie du menu dans le fichier component.js)
layout/Footer.js (avec, au passage, du style en mode inline, c'est-à-dire sans passer par un fichier css externe)
components/Home.js
On peut désormais supprimer le fichier component.js et mettre à jour le fichier app.js comme ceci :
Par convention, les composants ont une majuscule en début de nom, mais ce n'est pas une obligation technique.
Le code est du JSX, l'extension syntaxique type XML développée par Facebook pour React. Les fichiers pourraient donc avoir l'extension .jsx. Cependant, ça n'a pas d'importance pour Webpack au moment de la compilation.
Comme les composants créés sont stateless (on verra dans une autre partie ce qu'est l'état dans une application React), j'ai utilisé des fonctions plutôt que des classes dans chaque composant :
const Home = () => {
Sauf pour Layout :
class Layout extends React.Component {
Ceci permet de conserver le HMR (Hot Module Replacement) qui permet de recharger les éléments changés sans rafraichir le navigateur.
Par exemple, en modifiant "Hello world!" en "Hello!" dans Home.js : après avoir enregistré, le navigateur doit se rafraichir tout seul. Ceci grâce au fait que Layout n'est pas une fonction mais une classe.
La prochaine version de HMR devrait permettre d'avoir ce rechargement automatique même sur les composants stateless avec une fonction.
Last updated