Qu'est-ce que React ⚛️ et le concept des composants

React ⚛️ est une puissante bibliothèque JavaScript permettant de créer des interfaces utilisateur. Développé par Facebook en 2013, il a révolutionné le développement de l'interface utilisateur avec son architecture basée sur les composants et son approche déclarative. Que vous créiez une application Web simple ou un système complexe, React rend la création d'interfaces utilisateur dynamiques et réutilisables efficace et agréable.

Cet article plonge dans les fondamentaux de React et son concept de base : les Composants, avec de nombreux exemples de code pour illustrer ces idées.

Qu'est-ce que React ?

À la base, React est une bibliothèque JavaScript conçue pour créer des interfaces utilisateur dynamiques et interactives. Il se concentre sur la couche de vue d'une application, suivant l'architecture Model-View-Controller (MVC). React facilite la création d'interfaces qui se mettent à jour efficacement à mesure que les données de votre application changent.

Pourquoi choisir React ?

1. Composants réutilisables : Développez des interfaces utilisateur modulaires en les divisant en composants indépendants et réutilisables.
2. DOM virtuel : Mises à jour plus rapides en calculant les modifications dans un DOM virtuel léger avant de mettre à jour le DOM réel.
3. Déclaratif : Décrivez ce que vous voulez voir dans l'interface utilisateur et React s'occupe du reste.
4. Écosystème riche : Tirez parti des bibliothèques telles que Redux, React Router et Next.js pour étendre les capacités de React.

Le concept de composants dans React

Les applications React sont construites à l'aide de composants, qui sont les éléments constitutifs d'une application React. Un composant est un élément indépendant de l'interface utilisateur qui encapsule sa logique, sa structure et son style.

Composants fonctionnels

Les composants fonctionnels sont de simples fonctions JavaScript qui acceptent les props comme entrée et renvoient des éléments React. Il s'agit du type de composant le plus courant dans les applications React modernes.

Exemple : un composant fonctionnel de base

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
}

// Usage
<welcome name="Alice"></welcome>;

Composants de classe

Les composants de classe sont des classes ES6 qui étendent la classe React.Component. Ils étaient couramment utilisés avant l'introduction des crochets.

Exemple : un composant de classe de base

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
}

// Usage
<welcome name="Alice"></welcome>;

L'anatomie d'un composant

Exemple : composant fonctionnel avec état

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

// Usage
<welcome name="Alice"></welcome>;

Panne:

1. Gestion de l'état : Le hook useState est utilisé pour gérer l'état (compte) au sein du composant.
2. Props : Les données peuvent être transmises au composant via des accessoires.
3. Événements : Le gestionnaire d'événements onClick met à jour l'état lorsque le bouton est cliqué.

Accessoires contre État

Feature	Props	State
Definition	Data passed to a component from its parent.	Data managed within the component.
Mutability	Immutable (cannot be changed by the receiving component).	Mutable (can be updated within the component).
Usage	Used for passing data to child components.	Used for dynamic data that changes over time.

Fonctionnalité Accessoires État ête> Définition Données transmises à un composant depuis son parent. Données gérées au sein du composant. Mutabilité Immuable (ne peut pas être modifié par le composant récepteur). Mutable (peut être mis à jour dans le composant). Utilisation Utilisé pour transmettre des données aux composants enfants. Utilisé pour les données dynamiques qui changent au fil du temps.

État dans les composants

State est un objet spécial dans React utilisé pour stocker les données qu'un composant doit restituer. Les composants fonctionnels utilisent le hook useState pour la gestion de l'état.

Exemple : compteur avec état

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}!</h1>;
}

// Usage
<welcome name="Alice"></welcome>;

Accessoires dans les composants

Les accessoires sont des arguments transmis d'un composant parent à un composant enfant, permettant aux données de circuler dans la hiérarchie des composants.

Exemple : passer des accessoires

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>;
  }
}

// Usage
<welcome name="Alice"></welcome>;

Composer des composants

React encourage les composants imbriqués à créer des interfaces utilisateur complexes à partir de blocs de construction plus petits et réutilisables.

Exemple : composants imbriqués

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

Méthodes de cycle de vie dans les composants de classe

Les composants de classe incluent des méthodes de cycle de vie pour effectuer des actions pendant les phases de montage, de mise à jour et de démontage. Pour les composants fonctionnels, les hooks React comme useEffect remplacent ces méthodes de cycle de vie.

Exemple : méthodes de cycle de vie

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onclick="{()"> setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
;

Exemple : cycle de vie avec useEffect

function Greeting({ name }) {
  return <h1 id="Welcome-name">Welcome, {name}!</h1>;
}

function App() {
  return <greeting name="John"></greeting>;
}

// Renders: Welcome, John!

Gestion des événements dans React

React simplifie la gestion des événements. Les gestionnaires d'événements sont transmis en tant qu'accessoires aux éléments et exécutés lorsque l'événement se produit.

Exemple : clic sur un événement

function Header() {
  return <header><h1 id="My-Website">My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>© 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <header></header>
      <main></main>
      <footer></footer>
    </div>
  );
}

// Usage
<app></app>;

Exemple : gestion des entrées

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<timer></timer>;

Rendu conditionnel

React vous permet de restituer des composants ou des éléments de manière conditionnelle en fonction de la logique de l'application.

Exemple : rendu conditionnel

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<timer></timer>;

Listes et clés

Lors du rendu des listes dans React, il est important d'attribuer une clé unique à chaque élément pour aider React à identifier les changements.

Exemple : rendu d'une liste

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onclick="{handleClick}">Click Me</button>;
}

// Usage
<button></button>;

Composants réutilisables

React encourage la création de composants pouvant être réutilisés dans l'ensemble de l'application afin de réduire la redondance.

Exemple : composant de bouton réutilisable

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value="{text}" onchange="{handleChange}">
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<inputexample></inputexample>;

Conclusion

React est un outil puissant pour créer des applications Web modernes. Son architecture basée sur des composants, associée à des fonctionnalités telles que les accessoires, l'état et les hooks, permet de créer des interfaces utilisateur dynamiques, efficaces et réutilisables. En maîtrisant les concepts fondamentaux de React et en utilisant efficacement ses outils, les développeurs peuvent offrir des expériences utilisateur exceptionnelles tout en maintenant des bases de code propres et maintenables. Prêt à commencer ? Créez votre première application React et découvrez la magie des composants en action ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!