Créer ses premiers composants React

Introduction

Maintenant que nous avons installé un projet React, il est temps de découvrir l'un des concepts les plus importants de cette librairie : les composants. Un composant en React est un bout de code réutilisable qui permet d'afficher une partie de l'interface utilisateur. Aujourd'hui, nous allons voir comment créer et utiliser des composants en React.

1. Qu'est-ce qu'un composant en React ?

Un composant est une fonction ou une classe qui renvoie du JSX (une syntaxe proche de HTML mais qui permet d'insérer du JavaScript). React utilise ces composants pour construire des interfaces modulaires et réutilisables.

Il existe deux types de composants en React (c'était important avant l'existence des hooks) :

• Les composants fonctionnels (Stateless)
• Les composants basés sur des classes (Stateful)

Dans ce blog, nous nous concentrerons sur les composants fonctionnels.

2. Créer un composant fonctionnel

Un composant fonctionnel est une fonction JavaScript qui retourne du JSX. Voici un exemple simple :

1import React from 'react';
2
3function Bonjour() {
4  return <h1>Bonjour, bienvenue sur le site de Ali !</h1>;
5}
6
7export default Bonjour;

Ce composant affiche simplement un message de bienvenue.

3. Utiliser un composant dans une application React

Une fois le composant créé, nous pouvons l'utiliser dans d'autres parties de notre application. Par exemple, dans App.js qui est lui-même un composant :

1import React from 'react';
2import Bonjour from './Bonjour';
3
4function App() {
5  return (
6    <div>
7      <Bonjour />
8    </div>
9  );
10}
11
12export default App;

L'importation et l'utilisation du composant Bonjour se font en l'incluant comme une balise JSX (<Bonjour />).

4. Ajouter des Props

Les props (pour propriétés) permettent de passer des données à un composant. Voici un exemple :

1function Bonjour(props) {
2  return <h1>Bonjour, {props.nom} !</h1>;
3}

À quoi ça ressemble sur App.js :

1function App() {
2  return (
3    <div>
4      <Bonjour nom="Ali" />
5      <Bonjour nom="Marie" />
6    </div>
7  );
8}

Dans cet exemple, props.nom permet d'afficher un nom différent selon la valeur passée avec les props.

Conclusion

Pour conclure, les composants sont très important sur React. Ils permettent de diviser une application en petites parties réutilisables et modulaires. Aujourd'hui, nous avons vu comment créer des composants fonctionnels en leur passant des props pour afficher des valeurs dynamiques.

Dans le prochain blog, je vais vour montrer les hooks, une autre merveille de React.

Sources

The Net Ninja. (2020, 22 décembre). Full React Tutorial #3 - Components & Templates YouTube. https://www.youtube.com/watch?v=9D1x7-2FmTA&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=4

The Net Ninja. (2012, 4 janvier). Full React Tutorial #11 - Props YouTube. https://www.youtube.com/watch?v=PHaECbrKgs0&list=PL4cUxeGkcC9gZD-Tvwfod2gaISzfRiP9d&index=11