<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
