Introduction à l'approche composant dans React

Supposons que nous ayons un site web. Sur ce site, nous pouvons distinguer certains blocs : l'en-tête, le contenu, la barre latérale, le pied de page et ainsi de suite. Chaque bloc peut être divisé en sous-blocs plus petits. Par exemple, dans l'en-tête, on peut généralement distinguer le logo, le menu, le bloc de contacts, etc.

Dans React, chaque bloc de ce type est appelé un composant. Chaque composant peut contenir en son sein des composants plus petits, qui à leur tour peuvent en contenir d'encore plus petits, et ainsi de suite.

À chaque composant dans React correspond un module ES6, situé dans le dossier src. Le nom du fichier du module s'écrit avec une lettre majuscule et doit correspondre à la fonction qui est définie dans le code de ce module.

Par exemple, un fichier nommé App.js doit contenir à l'intérieur la fonction App :

import React from 'react';

function App() {
	// code du composant
}

export default App;

Un des composants doit être le composant principal - celui auquel les autres composants sont ajoutés. Dans React, par défaut, ce composant sera le composant App. À ce composant seront connectés les autres composants. Comment cela se fait - nous l'examinerons plus loin dans le tutoriel.