Qu'est-ce que React ? Un aperçu des concepts et de la terminologie de React.js

Qu'est-ce que React ?

• React est une bibliothèque JavaScript utilisée pour créer des interfaces utilisateur, en particulier des applications monopage (SPA). Il permet aux développeurs de créer des composants réutilisables qui gèrent leur état local et gèrent les interactions des utilisateurs. React suit un flux de données unidirectionnel, c'est-à-dire que les données circulent des composants parent vers les composants enfants, favorisant ainsi une meilleure gestion des données et de l'état de l'interface utilisateur.

Terminologies et concepts clés de React

Composants dans React

• Les composants sont les éléments constitutifs des applications React. Ils représentent des éléments autonomes de l’interface utilisateur qui peuvent être réutilisés plusieurs fois.

function MyComponent() {
  return <h1>Hello, World!</h1>;
}

JSX : écriture de JavaScript dynamique dans React

• JSX (JavaScript XML) est une extension de syntaxe de JavaScript qui permet d'écrire du code de type HTML dans JavaScript. Il ne s'agit pas de véritable HTML mais plutôt d'une syntaxe qui est transformée en code JavaScript à l'aide d'appels React.createElement(). JSX facilite l'utilisation de React en combinant balisage et logique.

const element = <h1>Hello, World!</h1>;

Props (Propriétés) dans React : transmission de données entre les composants

• Les accessoires sont utilisés pour transmettre des données d'un composant à un autre, généralement d'un composant parent à un composant enfant. Les accessoires sont en lecture seule et ne doivent pas être modifiés par le composant enfant.

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

function ParentComponent() {
  return <ChildComponent message="Hello from parent" />;
}

Utiliser Key dans React pour un rendu optimisé

• La clé est un attribut spécial utilisé lors du rendu de listes d'éléments dans React. Il aide React à identifier les éléments qui ont été modifiés, ajoutés ou supprimés, optimisant ainsi le rendu.

const items = ['Apple', 'Banana', 'Cherry'];

const list = items.map((item, index) => <li key={index}>{item}</li>);

Le rendu dans React expliqué

• Le rendu dans React fait référence à la conversion du code JSX en éléments DOM et à son affichage dans le navigateur. React utilise le DOM virtuel (plus d'informations ci-dessous) pour gérer cela efficacement.

Comprendre le DOM virtuel dans React

• Le DOM virtuel est une copie légère du DOM réel. React l'utilise pour améliorer les performances en mettant à jour uniquement les parties de l'interface utilisateur qui ont changé plutôt que de restituer la page entière. Lorsque l'état d'un composant change, React compare le nouveau DOM virtuel avec le précédent (appelé « diffing ») et applique le nombre minimum de modifications au DOM réel.

État immuable

• Dans React, l'état est immuable (Not Changeable), ce qui signifie que vous ne le modifiez pas directement. Au lieu de cela, vous faites une copie de l’état existant, appliquez les modifications nécessaires, puis définissez le nouvel état.

const [numbers, setNumbers] = React.useState([1, 2, 3]);

// Correct way to update state:
setNumbers([...numbers, 4]); // Adds 4 to the array

Directives

• Des directives telles que « utiliser le client » et « utiliser le serveur » sont utilisées dans des frameworks comme Next.js, qui étendent React. Ils demandent au framework de traiter des composants spécifiques comme des composants côté client ou côté serveur. Ceci est utile pour déterminer où se produit l’exécution du code. par exemple :

"use client";

export default function ClientComponent() {
  return <p>This component runs on the client side.</p>;
}

Mode React Strict : Détection des problèmes potentiels

• Le mode strict est un outil de React qui permet de détecter les problèmes potentiels dans une application pendant le développement. Il ne restitue aucune interface utilisateur mais active des vérifications et des avertissements supplémentaires pour ses descendants. Cela n’affecte pas directement le code de production, mais cela permet d’identifier les problèmes dès le début.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

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!