React

https://fr.legacy.reactjs.org/docs/
Admin
React is a declarative, component-based JavaScript library for building user interfaces, primarily...
Tokens:77,077
Snippets:256
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Installer Babel CLI et Preset React

Source: https://fr.legacy.reactjs.org/docs/add-react-to-a-website

Commandes pour installer les outils nécessaires à la compilation JSX en vue d'une utilisation en production, en utilisant npm pour gérer les dépendances.

```bash
npm init -y
npm install babel-cli@6 babel-preset-react-app@3
```

--------------------------------

### React Element Example

Source: https://fr.legacy.reactjs.org/docs/glossary

Demonstrates the basic structure of a React element using JSX, which describes what should be rendered on the screen. Elements are immutable.

```jsx
const element = <h1>Bonjour, monde</h1>;
```

--------------------------------

### Import ReactDOM Client (ES5/npm)

Source: https://fr.legacy.reactjs.org/docs/react-dom-client

Shows how to import the react-dom/client package when using ES5 with npm, typically in older Node.js environments or build setups.

```javascript
var ReactDOM = require('react-dom/client');
```

--------------------------------

### React Re-rendering Example

Source: https://fr.legacy.reactjs.org/docs/implementation-notes

Demonstrates React's ability to re-render an application without recreating the DOM or resetting state, by reusing existing DOM nodes.

```JavaScript
root.render(<App />);
// Devrait réutiliser le DOM existant :
root.render(<App />);
```

--------------------------------

### Rendering and Testing React Components

Source: https://fr.legacy.reactjs.org/docs/testing-recipes

This snippet demonstrates how to render a React component in a test environment, simulate prop changes, and assert on the resulting DOM output. It includes essential setup (`beforeEach`) to create a DOM container and teardown (`afterEach`) to clean up the rendered component and DOM element.

```jsx
// hello.js
import React from "react";

export default function Hello(props) {
  if (props.name) {
    return <h1>Bonjour, {props.name} !</h1>;
  } else {
    return <span>Salut, étranger</span>;
  }
}
```

```javascript
// hello.test.js
import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";

import Hello from "./hello";

let container = null;
beforeEach(() => {
  // setup a DOM element as a render target
  container = document.createElement("div");
  document.body.appendChild(container);
});

afterEach(() => {
  // cleanup on exiting
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it("s’affiche avec ou sans nom", () => {
  act(() => {
    render(<Hello />, container);
  });
  expect(container.textContent).toBe("Salut, étranger");

  act(() => {
    render(<Hello name="Jenny" />, container);
  });
  expect(container.textContent).toBe("Bonjour, Jenny !");

  act(() => {
    render(<Hello name="Margaret" />, container);
  });
  expect(container.textContent).toBe("Bonjour, Margaret !");
});
```

--------------------------------

### hydrateRoot() Usage Example

Source: https://fr.legacy.reactjs.org/docs/react-dom-client

This snippet shows the basic signature of hydrateRoot, which is similar to createRoot but for server-rendered content. React expects identical server and client markup.

```javascript
hydrateRoot(container, element[, options])
```

--------------------------------

### React Class Component Lifecycle Structure

Source: https://fr.legacy.reactjs.org/docs/state-and-lifecycle

Illustrates the fundamental structure of a React class component, including the constructor for state initialization and essential lifecycle methods like componentDidMount and componentWillUnmount for managing component setup and cleanup.

```javascript
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {  }
  componentWillUnmount() {  }
  render() {
    return (
      <div><h1>Bonjour, monde !</h1><h2>Il est {this.state.date.toLocaleTimeString()}.</h2></div>
    );
  }
}
```

--------------------------------

### React API Reference

Source: https://fr.legacy.reactjs.org/docs/react-api

Reference for React API elements. This section details core features like Suspense, Transitions, and Hooks, providing links to further documentation and usage examples where available.

```APIDOC
Suspense:
  Description: Allows components to 'wait' for something before rendering. Currently supports dynamic component loading with React.lazy. Future support for other use cases like remote data fetching.
  Related:
    - React.lazy
    - React.Suspense

Transitions:
  Description: A concurrent feature (React 18+) that marks updates as interruptible, preventing fallback UI for already visible content.
  Related:
    - React.startTransition
    - React.useTransition

Hooks:
  Description: Functions that let you use state and other React features without writing a class. API detailed separately.
  Categories:
    - Basic Hooks:
      - useState
      - useEffect
      - useContext
    - Additional Hooks:
      - useReducer
      - useCallback
      - useMemo
      - useRef
      - useImperativeHandle
      - useLayoutEffect
      - useDebugValue
      - useDeferredValue
      - useTransition
      - useId
    - Library Hooks:
      - useSyncExternalStore
      - useInsertionEffect

React.Component:
  Description: Base class for creating React components using ES6 classes.
  Note: This content is out of date. Refer to new React documentation for Component.
  Example:
    class Greeting extends React.Component {
      render() {
        return <h1>Bonjour {this.props.name}</h1>;
      }
    }
  Reference:
    - Link to React.Component API page for full list of methods and properties.
```

--------------------------------

### Prop Drilling Example in React

Source: https://fr.legacy.reactjs.org/docs/context

Démontre le passage de props (user, avatarSize) à travers plusieurs niveaux de composants pour atteindre des composants imbriqués comme Avatar. Met en évidence la verbosité et les problèmes de maintenance de ce modèle.

```jsx
<Page user={user} avatarSize={avatarSize} />
// ... qui affiche ...
<PageLayout user={user} avatarSize={avatarSize} />
// ... qui affiche ...
<NavigationBar user={user} avatarSize={avatarSize} />
// ... qui affiche ...
<Link href={user.permalink}><Avatar user={user} size={avatarSize} /></Link>
```

--------------------------------

### Testing Component Rendering with act()

Source: https://fr.legacy.reactjs.org/docs/test-utils

The act() function is used to prepare components for assertions by wrapping rendering and update code. It ensures tests run in an environment similar to the browser. This example demonstrates testing a Counter component's initial render and updates.

```javascript
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.title = `Vous avez cliqué ${this.state.count} fois`;
  }
  componentDidUpdate() {
    document.title = `Vous avez cliqué ${this.state.count} fois`;
  }
  handleClick() {
    this.setState(state => ({
      count: state.count + 1,
    }));
  }
  render() {
    return (
      <div><p>Vous avez cliqué {this.state.count} fois</p><button onClick={this.handleClick}>
          Cliquez ici
        </button></div>
    );
  }
}

```

```javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('peut afficher et mettre à jour un compteur', () => {
  // Teste le premier affichage et l'appel à componentDidMount
  act(() => {    ReactDOM.createRoot(container).render(<Counter />);  });  const button = container.querySelector('button');
  const label = container.querySelector('p');
  expect(label.textContent).toBe('Vous avez cliqué 0 fois');
  expect(document.title).toBe('Vous avez cliqué 0 fois');

  // Teste un second affichage et l'appel à componentDidUpdate
  act(() => {    button.dispatchEvent(new MouseEvent('click', {bubbles: true}));  });  expect(label.textContent).toBe('Vous avez cliqué 1 fois');
  expect(document.title).toBe('Vous avez cliqué 1 fois');
});

```

--------------------------------

### Replacing String-Based Rendering with React (jQuery)

Source: https://fr.legacy.reactjs.org/docs/integrating-with-other-libraries

Illustrates how to migrate from jQuery's string-based HTML insertion (`.html()`) to a React component-based approach. This example shows the initial step of replacing a jQuery-rendered button with a simple React component.

```javascript
/* jQuery implementation */
$('#container').html('<button id="btn">Dis bonjour</button>');
$('#btn').click(function() {
  alert('Bonjour !');
});

/* React equivalent */
function Button() {
  return <button id="btn">Dis bonjour</button>;
}

// Note: The click handler would typically be managed within React's lifecycle or props.
```

--------------------------------

### React Class Component with State Update (tick method)

Source: https://fr.legacy.reactjs.org/docs/state-and-lifecycle

Provides a complete React class component example that uses `componentDidMount` to start a timer, `componentWillUnmount` to clear it, and a `tick` method to update the component's state with the current time using `this.setState()`, triggering re-renders.

```javascript
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }
  render() {
    return (
      <div><h1>Bonjour, monde !</h1><h2>Il est {this.state.date.toLocaleTimeString()}.</h2></div>
    );
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);
```

--------------------------------

### FAQ React - Babel, JSX, et Build Steps

Source: https://fr.legacy.reactjs.org/docs/design-principles

Explications sur l'utilisation de Babel, JSX et les étapes de construction dans les projets React.

```APIDOC
FAQ - Babel, JSX, Build Steps:
  - JSX: Une syntaxe qui ressemble à du XML, transformée en appels `React.createElement` par Babel.
  - Babel: Un transpileur JavaScript qui convertit le code moderne (ES6+) et JSX en code compatible avec les navigateurs plus anciens.
  - Build Tools: Outils comme Webpack, Parcel ou Vite sont utilisés pour bundler le code, optimiser les assets et gérer le processus de build.
```

--------------------------------

### Install ESLint React Hooks Plugin

Source: https://fr.legacy.reactjs.org/docs/hooks-rules

Command to install the ESLint plugin for React Hooks as a development dependency. This plugin helps enforce the rules of Hooks automatically.

```bash
npm install eslint-plugin-react-hooks --save-dev
```

--------------------------------

### React MouseTracker Component Example

Source: https://fr.legacy.reactjs.org/docs/render-props

An example demonstrating how to use the Mouse component with a render prop. The MouseTracker component passes a function to the Mouse component's 'render' prop, which in turn renders a Cat component with the mouse coordinates.

```jsx
class Cat extends React.Component {
  render() {
    return (
      <img src="/cat.jpg" style={{ position: 'absolute', left: this.props.mouse.x, top: this.props.mouse.y }} />
    );
  }
}

class MouseTracker extends React.Component {
  render() {
    return (
      <div><h1>Déplacez votre souris sur l’écran !</h1><Mouse render={mouse => (
          <Cat mouse={mouse} />
        )}/></div>
    );
  }
}
```

--------------------------------

### Référence API ReactDOMServer

Source: https://fr.legacy.reactjs.org/docs/design-principles

Documentation pour l'API ReactDOMServer, utilisée pour le rendu côté serveur des applications React.

```APIDOC
ReactDOMServer API Reference:
  - renderToString: Rend un composant React en une chaîne HTML.
  - renderToStaticMarkup: Rend un composant React en une chaîne HTML sans attributs supplémentaires.
  - renderToNodeStream: Rend un composant React en un flux de nœuds.
  - ... et les méthodes pour le rendu côté serveur.
```

--------------------------------

### React Router V4 Parent-Child Communication Example

Source: https://fr.legacy.reactjs.org/docs/legacy-context

Demonstrates how components like React Router use context principles to enable communication between parent and child components. This example uses `react-router-dom` to set up routing and navigation.

```javascript
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const BasicExample = () => (
  <Router><div><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/topics">Topics</Link></li></ul><hr /><Route exact path="/" component={Home} /><Route path="/about" component={About} /><Route path="/topics" component={Topics} /></div></Router>
);
```

--------------------------------

### Exemple Bonjour Monde React

Source: https://fr.legacy.reactjs.org/docs/hello-world

Un exemple de base pour afficher 'Bonjour, monde !' en utilisant ReactDOM.createRoot et render. Ce code initialise la racine de l'application React et rend un élément h1.

```javascript
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Bonjour, monde !</h1>);
```

--------------------------------

### FAQ React - Styles et CSS

Source: https://fr.legacy.reactjs.org/docs/design-principles

Informations sur les différentes approches pour styliser les composants React.

```APIDOC
FAQ - Styles & CSS:
  - CSS classique: Utiliser des fichiers `.css` importés.
  - CSS Modules: Styles encapsulés par composant pour éviter les conflits de noms.
  - Styled-Components / Emotion: Bibliothèques CSS-in-JS pour écrire du CSS directement dans les fichiers JavaScript.
  - Inline Styles: Appliquer des styles directement sur les éléments JSX avec des objets JavaScript.
```

--------------------------------

### Props Immutability Example

Source: https://fr.legacy.reactjs.org/docs/glossary

Illustrates that props are read-only and should not be modified within a component. Attempting to change props will result in errors.

```javascript
// Erroné !
props.number = 42;
```

--------------------------------

### Référence API ReactDOM

Source: https://fr.legacy.reactjs.org/docs/design-principles

Documentation pour l'API ReactDOM, utilisée pour interagir avec le DOM du navigateur, y compris le rendu et la gestion des événements.

```APIDOC
ReactDOM API Reference:
  - ReactDOM.render: Rend un élément React dans le DOM.
  - ReactDOM.createRoot: Crée une racine pour le rendu côté client.
  - ReactDOM.hydrate: Hydrate un conteneur côté serveur avec le contenu React.
  - ReactDOM.unmountComponentAtNode: Supprime un composant React monté du DOM.
  - ... et les méthodes associées pour le rendu côté client et serveur.
```

--------------------------------

### Inclure Babel pour le support JSX côté client

Source: https://fr.legacy.reactjs.org/docs/add-react-to-a-website

Ajoute la bibliothèque Babel Standalone via une balise script pour permettre l'utilisation de JSX directement dans les fichiers HTML chargés par le navigateur.

```html
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
```

--------------------------------

### JSX vs React.createElement en JavaScript

Source: https://fr.legacy.reactjs.org/docs/introducing-jsx

Illustre la conversion du JSX en appels React.createElement(), montrant deux syntaxes équivalentes pour créer un élément React.

```javascript
const element = (
  <h1 className="greeting">
    Bonjour, monde !
  </h1>
);
```

```javascript
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Bonjour, monde !'
);
```

--------------------------------

### React.Component Class Example

Source: https://fr.legacy.reactjs.org/docs/react-api

Demonstrates the basic structure of a React component using ES6 classes. This is the base class for creating components with state and lifecycle methods.

```javascript
class Greeting extends React.Component {
  render() {
    return <h1>Bonjour {this.props.name}</h1>;
  }
}
```

--------------------------------

### Référence API ReactDOMClient

Source: https://fr.legacy.reactjs.org/docs/design-principles

Documentation pour l'API ReactDOMClient, utilisée pour le rendu côté client dans les applications React modernes.

```APIDOC
ReactDOMClient API Reference:
  - createRoot: Crée une racine pour le rendu côté client.
  - root.render: Rend l'application React dans le DOM.
  - root.unmount: Désinstalle l'application React du DOM.
  - ... et les méthodes pour la gestion du cycle de vie du rendu côté client.
```

--------------------------------

### Importing ReactDOM

Source: https://fr.legacy.reactjs.org/docs/react-dom

Demonstrates how to import the ReactDOM package using both ES Modules (ESM) and CommonJS module systems.

```javascript
import * as ReactDOM from 'react-dom';
```

```javascript
var ReactDOM = require('react-dom');
```

--------------------------------

### React componentDidMount for Timer Setup

Source: https://fr.legacy.reactjs.org/docs/state-and-lifecycle

Demonstrates the use of the componentDidMount lifecycle method to initialize a timer using `setInterval`. The timer ID is stored on the component instance (`this.timerID`) for later access and cleanup.

```javascript
componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
```

--------------------------------

### Use React.PureComponent for Automatic Shallow Comparison

Source: https://fr.legacy.reactjs.org/docs/optimizing-performance

React.PureComponent provides a built-in optimization by performing a shallow comparison of props and state. This example shows how to use it as a simpler alternative to manually implementing shouldComponentUpdate for common cases.

```javascript
class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Compteur : {this.state.count}</button>
    );
  }
}
```

--------------------------------

### Structure d'un élément React

Source: https://fr.legacy.reactjs.org/docs/introducing-jsx

Présente la structure simplifiée d'un objet élément React, tel que généré par React.createElement(), décrivant son type et ses propriétés.

```javascript
// Remarque : cette structure est simplifiée
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Bonjour, monde !'
  }
};
```

--------------------------------

### useTransition: Handling Pending State

Source: https://fr.legacy.reactjs.org/docs/hooks-reference

This example shows how to use the `isPending` state returned by `useTransition` to conditionally render a loading indicator (Spinner) while a transition is active.

```javascript
function App() {
  const [isPending, startTransition] = useTransition();
  const [count, setCount] = useState(0);
  
  function handleClick() {
    startTransition(() => {
      setCount(c => c + 1);
    });
  }

  return (
    <div>{isPending && <Spinner />}<button onClick={handleClick}>{count}</button></div>
  );
}
```

--------------------------------

### ReactMount and ReactNativeMount

Source: https://fr.legacy.reactjs.org/docs/implementation-notes

These files contain the code equivalent to mountTree() and unmountTree() from the tutorial. They handle the mounting and unmounting of root components. ReactMount is for the DOM renderer, and ReactNativeMount is its counterpart for React Native.

```javascript
/*
 * ReactMount.js: Handles mounting and unmounting of root components for React DOM.
 * Equivalent to mountTree() and unmountTree() in the tutorial.
 */
// ... implementation details ...

/*
 * ReactNativeMount.js: Handles mounting and unmounting of root components for React Native.
 * The counterpart to ReactMount.js.
 */
// ... implementation details ...
```

--------------------------------

### ReactDOM API Reference

Source: https://fr.legacy.reactjs.org/docs/react-dom

Details the methods exported by the react-dom package, including current and legacy functions. It provides signatures, descriptions, and usage notes for each method.

```APIDOC
ReactDOM Methods:

createPortal(child, container)
  - Creates a portal, allowing children to be rendered into a DOM node outside the component's DOM hierarchy.
  - Parameters:
    - child: Any renderable React child.
    - container: A DOM element to which the child will be appended.
  - Note: This content is out of date. Read the new React documentation for [`createPortal`](https://react.dev/reference/react-dom/createPortal).

flushSync(callback)
  - Forces React to flush any updates inside the provided callback synchronously, ensuring immediate DOM updates.
  - Parameters:
    - callback: A function containing state updates to be flushed.
  - Returns: Undefined.
  - Usage Example:
    ```javascript
    // Force this state update to be synchronous.
    flushSync(() => {
      setCount(count + 1);
    });
    // By this point, DOM is updated.
    ```
  - Notes:
    - Can significantly hurt performance; use sparingly.
    - May force pending Suspense boundaries to show their fallback state.
    - May run pending effects and synchronously apply updates before returning.
    - May flush updates outside the callback when necessary.
  - Note: This content is out of date. Read the new React documentation for [`flushSync`](https://react.dev/reference/react-dom/flushSync).

Legacy Methods (Replaced in React 18):

render(element, container[, callback])
  - Legacy method for rendering React elements into a DOM node. Replaced by `createRoot` in React 18.
  - Note: Will warn that the app behaves as if running React 17.

hydrate(element, container[, callback])
  - Legacy method for hydrating a server-rendered React application. Replaced by `hydrateRoot` in React 18.
  - Note: Will warn that the app behaves as if running React 17.

findDOMNode(component)
  - Legacy method to find the DOM node for a React component instance.
  - Returns: The DOM node or null.

unmountComponentAtNode(container)
  - Legacy method to unmount a React component from a DOM node.
  - Returns: True if a component was unmounted, false otherwise.
```

--------------------------------

### Référence API React

Source: https://fr.legacy.reactjs.org/docs/design-principles

Accès à la documentation de référence pour l'API principale de React, y compris les composants, les méthodes et les concepts.

```APIDOC
React API Reference:
  - React.Component: Documentation sur la création de composants basés sur des classes.
  - React.createElement: Création d'éléments React.
  - React.Fragment: Utilisation de fragments pour regrouper des éléments sans ajouter de nœud DOM supplémentaire.
  - React.PureComponent: Composant de base optimisé pour la comparaison des props et de l'état.
  - React.memo: Fonction d'ordre supérieur pour optimiser les composants fonctionnels.
  - React.useCallback: Hook pour mémoriser les fonctions.
  - React.useContext: Hook pour accéder au contexte.
  - React.useEffect: Hook pour gérer les effets secondaires.
  - React.useImperativeHandle: Hook pour personnaliser la valeur d'instance exposée aux composants parents.
  - React.useLayoutEffect: Hook similaire à useEffect, mais qui se déclenche de manière synchrone après toutes les mutations du DOM.
  - React.useReducer: Hook pour la gestion d'état complexe.
  - React.useRef: Hook pour accéder aux éléments DOM ou aux valeurs persistantes.
  - useState: Hook pour gérer l'état local dans les composants fonctionnels.
  - ... et d'autres utilitaires et concepts de l'API React.
```

--------------------------------

### React Fragment Usage with Correct HTML

Source: https://fr.legacy.reactjs.org/docs/fragments

Shows the corrected version of the previous example using React.Fragment. This ensures that the component returns the expected table structure without invalid intermediate elements.

```jsx
class Columns extends React.Component {
  render() {
    return (
      <React.Fragment><td>Bonjour</td><td>Monde</td></React.Fragment>
    );
  }
}
```

--------------------------------

### Composant BlogPost avec abonnement à DataSource

Source: https://fr.legacy.reactjs.org/docs/higher-order-components

Exemple de composant React qui s'abonne à une source de données externe (`DataSource`) pour récupérer et afficher un article de blog. Il implémente une logique similaire à `CommentList` pour la gestion des abonnements.

```javascript
class BlogPost extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      blogPost: DataSource.getBlogPost(props.id)
    };
  }

  componentDidMount() {
    DataSource.addChangeListener(this.handleChange);
  }

  componentWillUnmount() {
    DataSource.removeChangeListener(this.handleChange);
  }

  handleChange() {
    this.setState({
      blogPost: DataSource.getBlogPost(this.props.id)
    });
  }

  render() {
    return <TextBlock text={this.state.blogPost} />;
  }
}
```

--------------------------------

### ReactDOMClient API: createRoot and hydrateRoot

Source: https://fr.legacy.reactjs.org/docs/react-dom-client

Details the primary client-side initialization methods for React applications. createRoot is used for client-side rendering, while hydrateRoot is for server-rendered applications.

```APIDOC
createRoot(container[, options])
  - Creates a React root for the supplied `container` and returns the root.
  - The root can be used to render a React element into the DOM with `render`.
  - Parameters:
    - container: The DOM element to render React into.
    - options (optional): An object with configuration options.
      - onRecoverableError: Optional callback called when React automatically recovers from errors.
      - identifierPrefix: Optional prefix React uses for ids generated by `React.useId`. Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix used on the server.
  - Example Usage:
    const root = createRoot(container);
    root.render(element);
  - Unmounting:
    root.unmount();
  - Notes:
    - `createRoot()` controls the contents of the container node. Existing DOM elements inside are replaced when render is called.
    - `createRoot()` does not modify the container node itself, only its children.
    - Using `createRoot()` to hydrate a server-rendered container is not supported; use `hydrateRoot()` instead.

hydrateRoot(container, initialChildren[, options])
  - Hydrates a server-rendered React application on the client.
  - Parameters:
    - container: The DOM element that was rendered by the server.
    - initialChildren: The React children to render into the container.
    - options (optional): An object with configuration options, similar to `createRoot`.
  - Example Usage:
    const root = hydrateRoot(container, <App />);
  - Notes:
    - This is the client-side entry point for server-rendered React.
    - It assumes the server has already rendered the initial HTML for the app.
```

--------------------------------

### useTransition Hook API

Source: https://fr.legacy.reactjs.org/docs/hooks-reference

The useTransition hook provides a way to manage the state of background updates. It returns a boolean indicating if a transition is pending and a function to start a transition.

```APIDOC
useTransition(): [boolean, (callback: () => void) => void]

Description:
  Marks state updates within the callback as transitions. Transitions yield to more urgent updates (like clicks) and do not show fallbacks for re-suspended content, allowing continued interaction.

Returns:
  - isPending: A boolean value. True if a transition is currently active, false otherwise.
  - startTransition: A function that accepts a callback. Updates within this callback are treated as transitions.

Example Usage:
  const [isPending, startTransition] = useTransition();
  startTransition(() => {
    setCount(c => c + 1);
  });

Notes:
  - Updates in a transition yield to more urgent updates.
  - Updates in a transition will not show a fallback for re-suspended content.
```

--------------------------------

### Implement shouldComponentUpdate for Manual Optimization in React

Source: https://fr.legacy.reactjs.org/docs/optimizing-performance

This example demonstrates how to manually control component updates by implementing the shouldComponentUpdate lifecycle method. It checks specific prop and state changes to determine if a re-render is necessary, preventing unnecessary updates.

```javascript
class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
      <button
        color={this.props.color}
        onClick={() => this.setState(state => ({count: state.count + 1}))}>
        Compteur : {this.state.count}</button>
    );
  }
}
```

--------------------------------

### Import ReactDOM Client (ES Modules)

Source: https://fr.legacy.reactjs.org/docs/react-dom-client

Demonstrates how to import the react-dom/client package using standard ES module syntax.

```javascript
import * as ReactDOM from 'react-dom/client';
```

--------------------------------

### FAQ React - AJAX et API

Source: https://fr.legacy.reactjs.org/docs/design-principles

Réponses aux questions fréquentes concernant la gestion des requêtes AJAX et l'interaction avec les API dans React.

```APIDOC
FAQ - AJAX & APIs:
  - Fetching Data: Utiliser `fetch` ou des bibliothèques comme Axios dans `useEffect` pour récupérer des données.
  - State Management: Stocker les données récupérées dans l'état du composant (`useState`) ou via une solution de gestion d'état globale.
  - Error Handling: Implémenter des blocs `try...catch` et gérer les états d'erreur pour les requêtes.
  - Loading States: Afficher des indicateurs de chargement pendant que les données sont récupérées.
```

--------------------------------

### Simulating getDerivedStateFromProps with State Updates

Source: https://fr.legacy.reactjs.org/docs/hooks-faq

Provides an example of how to mimic the behavior of `getDerivedStateFromProps` in functional components by updating state during the render phase. This is useful for comparing prop changes and updating internal state accordingly, as shown with tracking scroll direction.

```javascript
function ScrollView({row}) {
  const [isScrollingDown, setIsScrollingDown] = useState(false);
  const [prevRow, setPrevRow] = useState(null);

  if (row !== prevRow) {
    // Row a changé depuis le dernier rendu. Met à jour isScrollingDown.
    setIsScrollingDown(prevRow !== null && row > prevRow);
    setPrevRow(row);
  }

  return `On défile vers le bas : ${isScrollingDown}`;
}
```

--------------------------------

### ESLint Configuration for React Hooks

Source: https://fr.legacy.reactjs.org/docs/hooks-rules

Example ESLint configuration to enable the React Hooks plugin and its rules. The 'rules-of-hooks' rule flags violations of the Hooks rules, while 'exhaustive-deps' warns about missing dependencies in useEffect, useMemo, and useCallback.

```json
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error", // Checks the Rules of Hooks
    "react-hooks/exhaustive-deps": "warn"  // Checks effect dependencies
  }
}
```

--------------------------------

### React Import Syntax

Source: https://fr.legacy.reactjs.org/docs/react-api

Illustre comment importer React dans un projet, que ce soit avec la syntaxe ES6 via npm ou la syntaxe ES5.

```javascript
import React from 'react'
```

```javascript
var React = require('react')
```

--------------------------------

### Import ReactDOMServer

Source: https://fr.legacy.reactjs.org/docs/react-dom-server

Demonstrates how to import the ReactDOMServer module in both ES Modules and CommonJS environments for server-side rendering.

```javascript
// Modules ES
import * as ReactDOMServer from 'react-dom/server';

// CommonJS
var ReactDOMServer = require('react-dom/server');
```

--------------------------------

### React Automatic Batching

Source: https://fr.legacy.reactjs.org/docs/hooks-reference

Explains React's automatic batching feature, which groups multiple state updates into a single re-render for performance. This is enabled by default for all updates starting with React 18.

```javascript
// Before React 18, only updates inside React event handlers were batched.
// Starting with React 18, batching is enabled for all updates by default.
// React may group several state updates into a single re-render to improve performance.
// If you need to force a synchronous DOM update, use flushSync.
```

--------------------------------

### Tests React - Utilitaires

Source: https://fr.legacy.reactjs.org/docs/design-principles

Documentation sur les utilitaires de test pour React, permettant de tester les composants et les interactions.

```APIDOC
Test Utilities API:
  - render: Rend un composant React dans un conteneur de test.
  - cleanup: Nettoie les composants montés après chaque test.
  - fireEvent: Simule des événements DOM sur des éléments.
  - waitFor: Attend que certaines conditions soient remplies.
  - ... et d'autres fonctions pour faciliter les tests unitaires et d'intégration.
```

--------------------------------

### React Button Component with Event Handling

Source: https://fr.legacy.reactjs.org/docs/integrating-with-other-libraries

Shows a more idiomatic React way to handle events, avoiding reliance on DOM IDs. This example defines a reusable `Button` component that accepts an `onClick` prop and a parent component `HelloButton` that provides the event handler.

```javascript
function Button(props) {
  return <button onClick={props.onClick}>Dis bonjour</button>;
}

function HelloButton() {
  function handleClick() {
    alert('Bonjour !');
  }
  return <Button onClick={handleClick} />;
}
```

--------------------------------

### Tests React - Moteur de rendu

Source: https://fr.legacy.reactjs.org/docs/design-principles

Documentation sur le moteur de rendu de test pour React, utilisé pour tester les composants sans dépendance au DOM.

```APIDOC
Test Renderer API:
  - create: Crée une instance de rendu pour un composant.
  - renderer.act: Exécute des mises à jour de manière synchrone.
  - renderer.getSnapshot: Obtient le rendu actuel du composant.
  - ... et les méthodes pour interagir avec le rendu de test.
```

--------------------------------

### React Context API - React.createContext

Source: https://fr.legacy.reactjs.org/docs/context

Crée un objet Context. Lorsque React affiche un composant qui s'abonne à cet objet Context, il lit la valeur actuelle du contexte depuis le Provider le plus proche situé plus haut dans l'arborescence. La valeur par défaut est utilisée uniquement lorsqu'aucun Provider correspondant n'est trouvé au-dessus.

```APIDOC
React.createContext(defaultValue)

- Crée un objet Context.
- Paramètres:
  - defaultValue: La valeur par défaut à utiliser lorsque le composant consommateur n'a pas de Provider correspondant au-dessus de lui dans l'arborescence. Passer `undefined` comme valeur au Provider n'entraîne pas l'utilisation de `defaultValue` par les composants consommateurs.
```

--------------------------------

### Stale State in React setTimeout Callback

Source: https://fr.legacy.reactjs.org/docs/hooks-faq

Illustrates a common issue where `setTimeout` callbacks capture stale state values from the render cycle they were created in. This example shows how a `count` variable inside `handleAlertClick` retains its value from when the button was clicked, not the latest state.

```javascript
function Example() {
  const [count, setCount] = useState(0);

  function handleAlertClick() {
    setTimeout(() => {
      alert('Vous avez cliqué à ' + count);
    }, 3000);
  }

  return (
    <div><p>Vous avez cliqué {count} fois</p><button onClick={() => setCount(count + 1)}>
        Cliquez ici
      </button><button onClick={handleAlertClick}>
        Afficher un message
      </button></div>
  );
}
```
Tokens:
Raw