Les Composants React

Comprendre les Composants dans React

Les composants sont les blocs de construction fondamentaux dans React. Ils représentent des morceaux autonomes d'interface utilisateur réutilisables qui permettent de structurer et d'organiser une application de manière modulaire. Dans ce blog, nous allons plonger dans le monde des composants dans React et explorer leur utilisation, leur rôle et leur création.

Qu'est-ce qu'un composant dans React ?

De manière conceptuelle, les composants agissent comme des fonctions JavaScript. Ils prennent en entrée diverses données (appelées "props") et retournent des éléments React qui décrivent ce qui doit être affiché à l'écran.

Types de composants :

Dans React, il existe deux types principaux de composants : les Fonctions composants et les composants de classe.

1. Fonctions composants

   Ce sont littéralement des fonctions JavaScript qui renvoient un élément React. Ils sont simples et légers.

   exemple: function Bienvenue(props) {

     return <h1>Bonjour, {props.name}</h1>;

   }

2. Composants à base de classes

Ce sont des classes JavaScript qui étendent la classe React.Component. Ils possèdent un état interne et des méthodes de cycle de vie, ce qui les rend plus adaptés aux composants complexes et interactifs.

exemple : class Bienvenue extends React.Component {

  render() {

    return <h1>Bonjour, {this.props.name}</h1>;

  }

Assez de théorie, passons à la pratique en créant un composant

Pour cela, nous allons utiliser un outil en ligne gratuit appelé CodeSandbox. Il offre un environnement de développement prêt à l'emploi.

On va pour cela créer un Sandbox (figure suivante)

On va ensuite choisir React

On aura 3 fichiers importants :

index.html: Ce fichier contient un élement div avec un id="root".

app.js : Ce fichier contient un composant React nommé "Bienvenue". 

index.js : Le fichier JavaScript utilise la méthode render fournie par ReactDOM pour rendre un composant React dans le DOM.

Conclusion :

Dans ce blog, nous avons exploré les composants dans React, qui sont les éléments essentiels de la construction d'applications React. Nous avons appris que les composants agissent comme des fonctions JavaScript, prenant des données en entrée (appelées "props") et retournant des éléments React pour afficher du contenu à l'écran. Nous avons également examiné deux types de composants : les Fonctions composants et les composants de classe, en fournissant des exemples pour chacun.

Références : 

1. Alexia TOULMET, "Débutez avec React", dans Openclassrooms, https://openclassrooms.com/fr/courses/7008001-debutez-avec-react/7134800-ecrivez-du-code-modulaire-avec-les-composants-en-jsx (page consulté le 17 février 2024).