Les bases de React

Voici une explication de la terminologie clé de React avec des exemples :

1. Composant

Un composant est la pierre angulaire d'une application React. Il s'agit d'une fonction ou d'une classe JavaScript qui renvoie une partie de l'interface utilisateur (interface utilisateur).

Composant fonctionnel (commun dans React moderne) :

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

Composant de classe (ancien style) :

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

2. JSX (JavaScript XML)

JSX vous permet d'écrire une syntaxe de type HTML dans JavaScript. C'est du sucre syntaxique pour React.createElement().

Exemple :

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

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');

3. Accessoires (Propriétés)

Les accessoires sont la manière dont les données sont transmises d'un composant à un autre. Ils sont en lecture seule et permettent aux composants d'être dynamiques.

Exemple :

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

<Greeting name="Alice" />

4. État

State est un objet JavaScript qui contient des données dynamiques et affecte la sortie rendue d'un composant. Il peut être mis à jour avec setState (composants de classe) ou le hook useState (composants fonctionnels).

Exemple avec useState dans les composants fonctionnels :

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

5. Crochets

Les hooks sont des fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React dans les composants fonctionnels.

useState : gère l'état des composants fonctionnels.
useEffect : exécute des effets secondaires dans les composants fonctionnels.

Exemple d'utilisationEffet :

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}

6. DOM Virtuel

Le Virtual DOM est une copie légère du vrai DOM. React l'utilise pour suivre les modifications et mettre à jour efficacement l'interface utilisateur en restituant uniquement les parties du DOM qui ont changé, plutôt que la page entière.

7. Gestion des événements

React utilise camelCase pour les gestionnaires d'événements au lieu des minuscules, et vous transmettez des fonctions en tant que gestionnaire d'événements au lieu de chaînes.

Example:

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

  return <button onClick={handleClick}>Click me</button>;
}

8. Rendu

Le rendu est le processus par lequel React envoie les éléments DOM au navigateur. Les composants restituent l'interface utilisateur en fonction des accessoires, de l'état et d'autres données.

Exemple :

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

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

9. Rendu conditionnel

Vous pouvez restituer différents composants ou éléments en fonction des conditions.

Exemple :

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

10. Listes et clés

Dans React, vous pouvez restituer des listes de données à l'aide de la méthode map(), et chaque élément de liste doit avoir une clé unique.

Exemple :

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

11. Relever l'État

Parfois, plusieurs composants doivent partager le même état. Vous « élevez l'État » jusqu'à leur ancêtre commun le plus proche afin qu'il puisse être transmis comme accessoire.

Exemple :

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

Ce sont les concepts de base qui constituent la base du développement de React.

Les bases de React, partie 2

Pranav Bakare ・ 18 septembre

#javascript #réagir

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!