react.md

# Introduction à React
---
## Composants

<small>Exemple de composant :</small>

```jsx []
import React from 'react';

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

export default HelloWorld;
```

---
## Composants

<small>Exemple d'utilisation d'un composant :</small>

```jsx [5-11]
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';

function App() {
    return (
        <div>
            <HelloWorld />
        </div>
    );
}

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

---
## Props
<small>Les props sont des arguments passés à des composants.</small>

```jsx []
import React from 'react';

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

export default Hello;
```

```jsx []
<Hello name="Alice" />
```

---
## Gestion d'état avec useState
<small>useState permet aux composants de gérer leur état.</small>

```jsx [1-15|4|8|10]
import React, { useState } from 'react';

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

  return (
    <div>
      <p>Compteur: {count}</p>
      <button 
          onClick={() => setCount(count + 1)}>
          Incrémenter
      </button>
    </div>
  );
}
```
---
## Effets avec useEffect
<small>useEffect permet d'effectuer des opérations en réponse à des changements dans le composant.</small>

```jsx []
import React, { useState, useEffect } from 'react';

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

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

    return () => clearInterval(timer);
  }, [seconds]);

  return <p>Temps écoulé: {seconds} secondes</p>;
}
```

---
## Contexte en React
<small>Le contexte permet de transmettre des données à travers l'arbre des composants sans avoir besoin de passer explicitement des props à chaque niveau.</small>

```jsx [1-15|4|6-12|14]
import React, { createContext, useContext } from 'react';

// Création du contexte
const ThemeContext = createContext('light');

// Composant fournissant le contexte
function App() {
    return (
        <ThemeContext.Provider value="dark">
            <Toolbar />
        </ThemeContext.Provider>
    );
}

// Composant consommant le contexte
function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

// Composant consommant le contexte avec le hook useContext
function ThemedButton() {
    const theme = useContext(ThemeContext);
    return <button>{theme}</button>;
}

export default App;
```

---
## Gestion d'événements dans un contexte

```jsx []
import React, { createContext, useContext, useState } from 'react';

// Création du contexte
const ThemeContext = createContext();

// Composant fournissant le contexte
function App() {
    const [theme, setTheme] = useState('light'); // État du thème

// Fonction pour basculer entre les thèmes
    const toggleTheme = () => {
        setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
    };

// Fonction de gestion d'événement
    const handleButtonClick = () => {
        console.log('Le bouton a été cliqué!');
    };

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme, handleButtonClick }}>
            <Toolbar />
        </ThemeContext.Provider>
    );
}

// Composant consommant le contexte
function Toolbar() {
    return (
        <div>
            <ThemedButton />
        </div>
    );
}

// Composant consommant le contexte avec le hook useContext
function ThemedButton() {
    const { theme, toggleTheme, handleButtonClick } = useContext(ThemeContext);
    return (
        <button onClick={toggleTheme} onMouseEnter={handleButtonClick}>
            Changer de thème ({theme})
        </button>
    );
}

export default App;
```