**Composant de Classe : <input
import React, { Component } from 'react'; type="text"
value={inputValue}
class MonComposant extends Component { onChange={handleChange}
render() { />
return <div>Hello World!</div>; <p>Valeur du champ : {inputValue}</p>
} </div>
} );
}
export default MonComposant;
export default MyComponent;
**Composant Fonctionnel : **hooks
// Dans [Link]
import React from 'react'; import React, { useEffect, useState } from 'react';
function MonComposant() { const MonComposant = () => {
return <div>Hello World!</div>; const [count, setCount] = useState(0);
}
useEffect(() => {
export default MonComposant; [Link]('Le composant a été mis à jour');
}, [count]);
**Les propriétés
Ils sont immuables (non modifiables) et sont passés de return (
manière unidirectionnelle, c'est-à-dire du parent vers le <div>
composant enfant. <p>Count: {count}</p>
// [Link] <button onClick={() => setCount(count +
import React from 'react'; 1)}>Incrémenter</button>
import ChildComponent from './ChildComponent'; </div>
);
function ParentComponent() { }
return (
<div> export default MonComposant;
<ChildComponent nom="Jean" /> Opérateur conditionnel (ternaire)
</div> return (
); <li className="item">
} {isPacked ? name + ' ✔' : name}
</li>
export default ParentComponent; );
// [Link] **reduce
import React from 'react'; const myList = [1, 2, 3, 4, 5];
function ChildComponent(props) { const sum = [Link]((accumulator, currentValue) =>
return ( accumulator + currentValue, 0);
<div>
<p>Bonjour {[Link]}!</p> return (
</div> <div>
); Total: {sum}
} </div>
**state );
export default ChildComponent; **filter
//handlechange const myList = [1, 2, 3, 4, 5];
import React, { useState } from 'react';
const filteredList = [Link](item => item % 2 === 0);
function MyComponent() {
const [inputValue, setInputValue] = useState(''); // Utilisation dans le rendu JSX
return (
const handleChange = (event) => { <ul>
setInputValue([Link]); {[Link](item => <li key={item}>{item}</li>)}
}; </ul>
);
return ( **MAP
<div> //[Link]
const myList = [1, 2, 3, 4, 5]; export default App;
**hook personnel
const myListElements = [Link](item => <li import { useState } from 'react';
key={item}>{item}</li>);
function useToggle(initialValue = false) {
return ( const [value, setValue] = useState(initialValue);
<ul>
{myListElements} const toggle = () => {
</ul> setValue(!value);
); };
**LIFE CYCLE
lass Clock extends [Link] { return [value, toggle];
constructor(props) { }
super(props);
[Link] = {date: new Date()}; export default useToggle;
} redux
npm install redux react-redux
componentDidMount() {
[Link] = setInterval( **Créer un store Redux :
() => [Link](), Dans votre application, vous devez créer un magasin Redux qui
1000 contient l'état global de votre application. Cela se fait généralement
); dans un fichier [Link]
}
import { createStore } from 'redux';
componentWillUnmount() { import rootReducer from './reducers'; // Importez vos réducteurs
clearInterval([Link]); combinés ici
}
const store = createStore(rootReducer);
tick() { [Link]({ date: new Date() }); }
render() { export default store;
return ( Créer des réducteurs :
<div> Les réducteurs définissent comment l'état de votre application
<h1>Bonjour, monde !</h1> change en réponse aux actions envoyées au magasin Redux
<h2>Il est {[Link]()}.</h2> // exemple de [Link]
</div> const initialState = {
); count: 0
} };
}
function counterReducer(state = initialState, action) {
const root = switch ([Link]) {
[Link]([Link]('root')); case 'INCREMENT':
[Link](<Clock />); return { ...state, count: [Link] + 1 };
case 'DECREMENT':
**route return { ...state, count: [Link] - 1 };
// Dans [Link] default:
import React from 'react'; return state;
import { BrowserRouter as Router, Route, Switch } from 'react- }
router-dom'; }
import Accueil from './Accueil';
import APropos from './APropos'; export default counterReducer;
**Créer des actions :
const App = () => { Les actions sont des objets JavaScript qui représentent les intentions
return ( d'effectuer un changement dans l'état de votre application. Elles
<Router> sont dispatchées vers le store Redux.
<Switch> // exemple d'[Link]
<Route exact path="/" component={Accueil} /> export const increment = () => {
<Route path="/a-propos" component={APropos} /> return {
</Switch> type: 'INCREMENT'
</Router> };
); };
} export const decrement = () => {
return {
type: 'DECREMENT' Créez des actions pour effectuer les appels Fetch et mettre à jour
}; l'état de l'application. Par exemple, vous pouvez avoir un fichier
}; `[Link]` :
**Connecter vos composants : // [Link]
import React from 'react'; export const FETCH_DATA_REQUEST =
import { connect } from 'react-redux'; 'FETCH_DATA_REQUEST';
import { increment, decrement } from './actions'; export const FETCH_DATA_SUCCESS =
'FETCH_DATA_SUCCESS';
function Counter({ count, increment, decrement }) { export const FETCH_DATA_FAILURE =
return ( 'FETCH_DATA_FAILURE';
<div> export const fetchDataRequest = () => ({
<p>Count: {count}</p> type: FETCH_DATA_REQUEST
<button onClick={increment}>Increment</button> });
<button onClick={decrement}>Decrement</button> export const fetchDataSuccess = data => ({
</div> type: FETCH_DATA_SUCCESS,
); payload: data
} });
const mapStateToProps = (state) => { export const fetchDataFailure = error => ({
return { type: FETCH_DATA_FAILURE,
count: [Link] payload: error
}; });
}; export const fetchData = () => {
export default connect(mapStateToProps, { increment, decrement }) return dispatch => {
(Counter); dispatch(fetchDataRequest());
Fournir le store Redux à votre application : fetch('[Link]
import React from 'react'; .then(response => [Link]())
import ReactDOM from 'react-dom'; .then(data => {
import { Provider } from 'react-redux'; dispatch(fetchDataSuccess(data));
import store from './store'; })
import App from './App'; .catch(error => {
dispatch(fetchDataFailure(error));
[Link]( });
<Provider store={store}> };
<App /> };
</Provider>,
[Link]('root') 3. **Créer les Reducers** :
);
Bien sûr ! Voici un exemple simple de l'utilisation de Redux avec Définissez les reducers pour mettre à jour l'état de l'application en
l'API Fetch dans une application ReactJS. Dans cet exemple, nous fonction des actions. Par exemple, vous pouvez avoir un fichier
allons créer une application qui récupère des données d'un service `[Link]` :
web et les affiche à l'aide de Redux pour gérer l'état global de // [Link]
l'application. import { combineReducers } from 'redux';
npm install redux react-redux import { FETCH_DATA_REQUEST, FETCH_DATA_SUCCESS,
Ensuite, voici comment vous pouvez créer une application : FETCH_DATA_FAILURE } from './actions';
1. **Configurer Redux** :
const initialState = {
Tout d'abord, vous devez configurer Redux dans votre application. data: [],
Créez un fichier `[Link]` où vous allez configurer votre store loading: false,
Redux : error: null
};
```javascript
// [Link] const dataReducer = (state = initialState, action) => {
import { createStore, applyMiddleware } from 'redux'; switch ([Link]) {
import thunk from 'redux-thunk'; case FETCH_DATA_REQUEST:
import rootReducer from './reducers'; return {
...state,
const store = createStore(rootReducer, applyMiddleware(thunk)); loading: true,
error: null
export default store; };
2. **Définir les Actions** : case FETCH_DATA_SUCCESS:
return {
...state,
loading: false,
data: [Link] Assurez-vous d'importer et de connecter correctement votre store
}; Redux avec votre application React, généralement dans le
case FETCH_DATA_FAILURE: composant racine ([Link]).
return {
...state,
loading: false,
error: [Link]
};
default:
return state;
}
};
const rootReducer = combineReducers({
data: dataReducer
});
export default rootReducer;
4. **Créer le Composant React** :
Maintenant, vous pouvez créer un composant React pour afficher
les données et dispatcher l'action pour récupérer les données. Par
exemple :
// [Link]
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchData } from './actions';
function App() {
const dispatch = useDispatch();
const data = useSelector(state => [Link]);
const loading = useSelector(state => [Link]);
const error = useSelector(state => [Link]);
useEffect(() => {
dispatch(fetchData());
}, [dispatch]);
if (loading) {
return <div>Loading...</div>;
}
if (error) {
return <div>Error: {error}</div>;
}
return (
<div>
<h1>API Data</h1>
<ul>
{[Link](item => (
<li key={[Link]}>{[Link]}</li>
))}
</ul>
</div>
);
}
export default App;
Dans cet exemple, nous utilisons `useSelector` pour extraire les
parties de l'état de Redux dans notre composant, et `useDispatch`
pour obtenir une fonction de dispatch. Nous lançons l'action
`fetchData` dès que le composant est monté grâce à `useEffect`.
