NOUS LES DEVS

Un premier composant

A la conquête de React partie 2

Niveau : débutant(e)

</> </> </>

Tout est composant

Dans React, tout est histoire de composants. Ils sont imbriqués les uns dans les autres pour former toute l’application. Il y a des composants pour tout, que ce soit pour un formulaire, un menu, un paragraphe, un slider, un h1, un calendrier, une section Youtube, etc. Bref tu l’auras compris, tout peut-être un composant (ou presque) ! Certains seront plus gros que d’autres et pourront contenir beaucoup de logique métier. Les plus génériques pourront être appelés à plusieurs endroits différents. On pourra subdiviser un composant en composants plus petits et réutilisables ailleurs.

App.js est le composant par défaut appelé par React. C’est à l’intérieur de celui-ci que je vais pouvoir ajouter les miens.

import './App.css';

function App() {
	return (
		<div className="App">

		</div>
	);
}

export default App;

Le premier composant que je vais créer sera le menu de mon application. J’ajoute un dossier menu à l’intérieur duquel je crée le fichier Menu.js. Chose importante, le nom d’un composant doit toujours commencer par une majuscule. Donc lorsque j’écris ma fonction, je choisis un nom avec la première lettre en majuscule, dans mon cas ça sera « Menu ».

Voici à quoi ressemble mon premier composant.

function Menu() {
	return (
		<ul className="mon-menu">
			<li>Home</li>
			<li>Timer</li>
			<li>Project</li>
			<li>Team</li>
		</ul>
	);
}

export default Menu;

Une seule balise parente

À l’intérieur d’un fichier JavaScript, je n’écris pas directement du JS mais du JSX, une extension syntaxique pour créer des composants React. En JSX, il y a une petite particularité lorsque je place du code dans le return, il ne peut y avoir qu’une seule balise parente. C’est-à-dire que je ne peux pas mettre une autre balise à côté de l’ul mais seulement à l’intérieur.

className

La seconde particularité, c’est que je ne peux pas écrire class=«quelquechoses» dans mes composants, car ce n’est pas du HTML mais du JSX, et que derrière, ça reste du JavaScript. Comme class est un mot-clé réservé du langage, je ne peux donc pas l’utiliser pour désigner une classe CSS. Pour écrire l’attribut class pour un élément HTML, je dois écrire « className ». C’est une habitude qui prend un peu de temps à venir.

<ul className="mon-menu">

Export

Pour finir, j’exporte mon composant.

Je pourrais aussi ajouter plusieurs sous-composants au sein du même fichier et exporter le composant principal. Ça marche correctement et le composant Li est bien embarqué par le composant Menu (sans rien faire de plus).

function Li() {
	return (
		<li>un truc</li>
	)
}

function Menu() {
	return (
		<ul className="mon-menu">
			<Li />
		</ul>

	);
}

export default Menu;

Insérer le composant dans l'App

Il ne me reste plus qu’à appeler mon composant dans le composant parent App. Il y a deux étapes. D’abord, faire un import de mon composant via l’instruction suivante :

import Menu from './menu/Menu'

Ensuite, ajouter mon Menu à mon application, un peu comme si c’était une balise HTML. Sans être sûr, je dirais que c’est pour cette raison qu’il faut une majuscule au composant, afin de distinguer les tags HTML des composants React.

Le composant App ressemble maintenant à cela :

function App() {
	return (
		<div className="App">
			<Menu />
		</div>
	);
}

Composant fonctionnel

Mon premier composant est maintenant créé et l’application affiche correctement mon menu. Jusqu’ici pas de surprise, j’ai réalisé plusieurs tests et le système m’avertit à chaque fois des erreurs, que ce soit dans la console ou directement dans la page.

08/07/2023

Yann Vangampelaere - nouslesdevs -

React4