Composants et approche orientée composants

Les composants sont l'élément central de React et constituent la base du développement d'applications React. Dans cette section, nous explorerons en détail les composants React, ainsi que l'approche de développement orientée composants. Nous aborderons la création et l'utilisation de composants fonctionnels et de composants de classe.

Introduction aux composants React

Les composants sont des blocs de construction réutilisables qui permettent de structurer et de gérer l'interface utilisateur d'une application React. Ils encapsulent la logique et l'interface utilisateur liées à une partie spécifique de l'application.

L'approche de développement orientée composants consiste à diviser l'interface utilisateur en composants indépendants, chacun étant responsable de son propre état et de son rendu. Cette approche facilite la réutilisation, la maintenance et le test du code.

Statefull vs Stateless Components

Il existe deux types de composants principaux dans React : les composants avec état (statefull components) et les composants sans état (stateless components).

• Composants avec état (statefull components) : Ces composants ont leur propre état interne qui peut être modifié au fil du temps. Ils utilisent la classe Component de React pour définir leur logique et leur état. Les composants avec état sont utilisés lorsque vous avez besoin de gérer des données dynamiques ou de gérer des interactions utilisateur complexes.

Exemple de composant avec état :

import React, { Component } from 'react'
 
class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = { count: 0 }
    }
 
    increment() {
        this.setState({ count: this.state.count + 1 })
    }
 
    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={() => this.increment()}>Increment</button>
            </div>
        )
    }
}

• Composants sans état (stateless components) : Ces composants ne gèrent pas d'état interne et sont généralement des fonctions qui prennent des propriétés (props) en entrée et renvoient un rendu basé sur ces propriétés. Les composants sans état sont utilisés lorsque vous avez des composants simples qui ne nécessitent pas de logique interne ou de gestion de l'état.

Exemple de composant sans état :

import React from 'react'
 
const Greeting = (props) => {
    return <h1>Bonjour, {props.name} !</h1>
}

Création et utilisation de composants fonctionnels

Les composants fonctionnels sont des fonctions JavaScript qui prennent des propriétés (props) en entrée et renvoient un rendu basé sur ces propriétés. Ils sont simples à écrire et ont une syntaxe plus légère que les composants de classe. Les composants fonctionnels sont souvent utilisés pour des composants sans état.

Voici un exemple de création et d'utilisation d'un composant fonctionnel :

import React from 'react'
 
const MyComponent = (props) => {
    return <div>{props.text}</div>
}
 
// Utilisation du composant
;<MyComponent text='Mon composant fonctionnel' />

Dans cet exemple, nous avons créé un composant fonctionnel appelé MyComponent qui prend une propriété text en entrée et renvoie un élément div contenant le texte spécifié. Le composant est ensuite utilisé avec la propriété text définie.

Création et utilisation de composants de classe

Les composants de classe sont définis en utilisant la classe Component de React. Ils permettent de gérer un état interne et d'utiliser des méthodes de cycle de vie pour effectuer des actions à des moments spécifiques du cycle de vie du composant.

Voici un exemple de création et d'utilisation d'un composant de classe :

import React, { Component } from 'react'
 
class MyComponent extends Component {
    render() {
        return <div>{this.props.text}</div>
    }
}
 
// Utilisation du composant
;<MyComponent text='Mon composant de classe' />

Dans cet exemple, nous avons créé un composant de classe appelé MyComponent qui étend la classe Component de React. Le composant définit une méthode render() qui renvoie un élément div contenant le texte spécifié. Le composant est ensuite utilisé avec la propriété

text définie.

Conclusion

Les composants sont la pierre angulaire du développement d'applications React. L'approche de développement orientée composants permet de diviser l'interface utilisateur en blocs réutilisables et de gérer l'état et la logique de manière modulaire. Les composants peuvent être de deux types : les composants avec état et les composants sans état, chacun étant adapté à des besoins spécifiques. Les composants fonctionnels sont simples à écrire et sont utilisés pour des composants sans état, tandis que les composants de classe permettent de gérer un état interne et d'utiliser des méthodes de cycle de vie. En comprenant ces concepts fondamentaux, vous serez en mesure de créer des applications React robustes et bien structurées.