Introduction aux composants React

Regardons n'importe quel site web. Il est constitué d'un ensemble de blocs indépendants : en-tête, barres latérales, pied de page, contenu. On peut dire que ces blocs sont des composants dans le sens où cela est sous-entendu dans React.

Si on regarde le même en-tête, que peut-on y distinguer ? Un bloc avec le logo, un bloc de contacts, un bloc avec le menu et ainsi de suite. C'est-à-dire que les composants peuvent être constitués d'autres sous-composants.

De la même manière, les choses se passent dans React - le site est construit à partir d'un ensemble de composants, qui à leur tour peuvent contenir d'autres composants.

Dans React, chaque composant représente un module distinct. Habituellement, le développement commence par le composant principal App, qui contient les autres.

Entraînons-nous à créer de nouveaux composants.

Supposons par exemple que nous ayons besoin d'un composant affichant les données d'un produit. Pour cela, nous devons dans le dossier de travail créer un fichier Product.js et y ajouter le code suivant :

import React from 'react';

function Product() {
	return <p>
		product
	</p>;
}

export default Product;

Comme vous le voyez, pour l'instant notre composant retourne un paragraphe avec du texte. Dans les prochaines leçons, nous ajusterons ce texte afin qu'il retourne les données du produit, formatées dans le balisage souhaité. Mais pour l'instant, pour s'échauffer, laissons simplement un paragraphe avec un texte d'exemple.

Maintenant, affichons notre composant créé dans le composant App. Supposons que pour l'instant notre App ait le code suivant :

import React from 'react';

function App() {
	return <div>
		text
	</div>;
}

export default App;

Pour commencer, nous devons importer le composant de produit que nous avons créé :

import React from 'react';
import Product from './Product'; // importons le produit

function App() {
	return <div>
		text
	</div>;
}

export default App;

Après une telle importation, à l'intérieur du composant App il est possible d'utiliser le composant Product.