Chat history

chat.openai.com

React.js est une bibliothèque JavaScript populaire utilisée pour la création

d'interfaces utilisateur interactives et réactives. Elle facilite le développement de
composants réutilisables et modulaires, permettant ainsi la construction
d'applications web complexes.

Voici un cours complet sur React.js, accompagné d'exemples de code pour vous
aider à comprendre son fonctionnement.

1. Installation de React.js
Pour commencer, vous devez installer React.js et créer
un nouveau projet. Vous pouvez utiliser l'outil de ligne de commande create-
react-app pour configurer rapidement un projet React.js. Voici les étapes à suivre
:

shell

npx create-react-app mon-projet-react

cd mon-projet-react

npm start

Ces commandes vont créer un nouveau projet React.js appelé "mon-projet-react"

et lancer le serveur de développement.

2. Composants React
Les composants sont les éléments de base de React.js. Ils
permettent de découper l'interface utilisateur en petits morceaux réutilisables. Voici
un exemple de code pour créer un composant React simple :

1/18
 jsx

import React from 'react';

class MonComposant extends React.Component {

render() {

return <h1>Bienvenue sur mon site !</h1>;

export default MonComposant;

Dans cet exemple, nous avons créé un composant de classe MonComposant qui
affiche un titre <h1>.

3. Rendu des composants

Pour afficher un composant React dans une page
web, vous devez utiliser la méthode ReactDOM.render(). Voici comment cela
fonctionne :

jsx

import React from 'react';

import ReactDOM from 'react-dom';

import MonComposant from './MonComposant';

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

Dans cet exemple, nous utilisons ReactDOM.render() pour rendre le composant

MonComposant dans l'élément DOM avec l'ID "root".

4. Propriétés (Props)
Les propriétés (ou "props") sont des données que vous
pouvez passer à un composant React. Elles permettent de personnaliser le
comportement ou l'apparence d'un composant. Voici un exemple d'utilisation des
props :

2/18
 jsx

import React from 'react';

class MonComposant extends React.Component {

render() {

return <h1>Bienvenue sur {this.props.site} !</h1>;

export default MonComposant;

Dans cet exemple, nous utilisons la prop site pour personnaliser le texte affiché
dans le composant.

5. État (State)
L'état (ou "state") est un concept fondamental de React.js. Il permet
de stocker et de gérer les données qui peuvent changer au fil du temps. Voici un
exemple d'utilisation de l'état dans un composant :

3/18
 jsx

import React from 'react';

class MonComposant extends React.Component {

constructor(props) {

super(props);

this.state = {

count: 0,

};

incrementCount() {

this.setState({ count: this.state.count + 1 });

render() {

return (

<div>

<p>Le compteur est à : {this.state.count}</p>

<button onClick={() =>

this.incrementCount()}>Incrémenter</button>

</div>

);

export default MonComposant;

Dans cet exemple, nous utilisons l'état pour stocker et mettre à jour la valeur d'un
compteur. Lorsque le bouton est cliqué, la méthode incrementCount() est
appelée pour mettre à jour l'état.

6. Cycle de vie des composants

React.js offre des méthodes de cycle de vie qui
sont appelées à des moments précis lorsqu'un composant est monté, mis à jour ou
démonté. Vous pouvez les utiliser pour effectuer des actions spécifiques à chaque
étape. Voici un exemple des méthodes de cycle de vie :

4/18
 jsx

import React from 'react';

class MonComposant extends React.Component {

componentDidMount() {

console.log('Le composant est monté.');

componentDidUpdate() {

console.log('Le composant a été mis à jour.');

componentWillUnmount() {

console.log('Le composant est démonté.');

render() {

return <h1>Bienvenue sur mon site !</h1>;

export default MonComposant;

Dans cet exemple, nous utilisons les méthodes componentDidMount(),

componentDidUpdate(), et componentWillUnmount() pour afficher des messages
dans la console à chaque étape du cycle de vie du composant.

7. Gestion des événements

React.js permet de gérer les événements de
manière déclarative. Vous pouvez associer des gestionnaires d'événements aux
éléments JSX pour réagir aux interactions de l'utilisateur. Voici un exemple :

5/18
 jsx

import React from 'react';

class MonComposant extends React.Component {

handleClick() {

console.log('Le bouton a été cliqué !');

render() {

return <button onClick={() => this.handleClick()}>Cliquez-

moi</button>;

export default MonComposant;

Dans cet exemple, nous utilisons l'événement onClick pour appeler la méthode
handleClick() lorsque le bouton est cliqué.

8. Rendu conditionnel
React.js permet d'effectuer un rendu conditionnel en
fonction de certaines conditions. Vous pouvez utiliser des expressions JavaScript
ou des opérateurs ternaires pour conditionner le rendu des éléments JSX. Voici un
exemple :

6/18
 jsx

import React from 'react';

class MonComposant extends React.Component {

render() {

const isLoggedIn = this.props.isLoggedIn;

return (

<div>

{isLoggedIn ? (

<p>Bienvenue, vous êtes connecté.</p>

) : (

<p>Veuillez vous connecter.</p>

)}

</div>

);

export default MonComposant;

Dans cet exemple, le rendu dépend de la valeur de isLoggedIn. Si la valeur est

true, le message de bienvenue sera affiché, sinon le message de connexion sera
affiché.

9. Boucles et listes
Vous pouvez utiliser des boucles ou des méthodes de
manipulation de tableaux pour afficher des listes d'éléments dans React.js. Voici
un exemple d'utilisation de la méthode map() pour afficher une liste de noms :

7/18
 jsx

import React from 'react';

class MonComposant extends React.Component {

render() {

const names = ['Alice', 'Bob', 'Charlie'];

return (

<ul>

{names.map((name, index) => (

<li key={index}>{name}</li>

))}

</ul>

);

export default MonComposant;

Dans cet exemple, nous utilisons la méthode map() pour itérer sur le tableau
names et afficher chaque nom dans un élément de liste <li>. L'attribut key est
utilisé pour donner une clé unique à chaque élément de la liste.

10. Communication entre composants

React.js permet de communiquer entre
les composants en utilisant les props et les callbacks. Vous pouvez passer des
données d'un composant parent à un composant enfant en utilisant les props, et
vous pouvez également passer des fonctions en tant que props pour permettre
aux composants enfants de communiquer avec le composant parent. Voici un
exemple :

8/18
 jsx

import React from 'react';

class ParentComposant extends React.Component {

handleButtonClick() {

console.log('Le bouton a été cliqué dans le composant enfant.');

render() {

return (

<ChildComponent onClick={this.handleButtonClick} />

);

class ChildComponent extends React.Component {

render() {

return (

<button onClick={this.props.onClick}>Cliquez-moi</button>

);

export default ParentComponent;

Dans cet exemple, nous passons la fonction handleButtonClick() du composant

parent au composant enfant en tant que prop onClick. Lorsque le bouton est
cliqué dans le composant enfant, la fonction du composant parent est appelée.

11. Formulaires
React.js facilite la gestion des formulaires en gardant l'état des
éléments de formulaire dans le state du composant. Vous pouvez utiliser les
événements onChange pour mettre à jour l'état lorsqu'un utilisateur saisit des
données. Voici un exemple :

9/18
jsx

import React from 'react';

class MonComposant extends React.Component {

constructor(props) {

super(props);

this.state = {

username: '',

password: ''

};

handleInputChange(event) {

const { name, value } = event.target;

this.setState({ [name]: value });

handleSubmit(event) {

event.preventDefault();

// Effectuer des actions avec les données du formulaire

render() {

return (

<form onSubmit={(event) => this.handleSubmit(event)}>

<label>

Nom d'utilisateur:

<input

type="text"

name="username"

value={this.state.username}

onChange={(event) => this.handleInputChange(event)}

/>

</label>

<label>

Mot de passe:

<input

type="password"

name="password"

value={this.state.password}

onChange={(event) => this.handleInputChange(event)}

/>

</label>

<button type="submit">Envoyer</button>

</form>

);

export default MonComposant;

10/18
Dans cet exemple, nous utilisons les événements onChange pour mettre à jour
l'état du composant lorsqu'un utilisateur saisit des données dans les champs de
formulaire. La méthode handleInputChange() est appelée à chaque changement
et met à jour l'état correspondant. La méthode handleSubmit() est appelée
lorsque le formulaire est soumis, vous pouvez y ajouter des actions spécifiques
comme l'envoi des données à un serveur.

12. Récupération de données à partir d'une API

React.js peut être utilisé pour
récupérer et afficher des données à partir d'une API. Vous pouvez utiliser les
méthodes de cycle de vie de React pour effectuer des appels API et mettre à jour
l'état avec les données récupérées. Voici un exemple :

jsx

import React from 'react';

class MonComposant extends React.Component {

constructor(props) {

super(props);

this.state = {

users: []

};

componentDidMount() {

fetch('https://api.example.com/users')

.then(response => response.json())

.then(data => this.setState({ users: data }));

render() {

const { users } = this.state;

return (

<div>

<h1>Liste des utilisateurs</h1>

<ul>

{users.map(user => (

<li key={user.id}>{user.name}</li>

))}

</ul>

</div>

);

export default MonComposant;

11/18
Dans cet exemple, nous utilisons la méthode componentDidMount() pour effectuer
une requête API à l'URL spécifiée. Une fois les données récupérées, nous mettons
à jour l'état avec les données et affichons les utilisateurs dans la liste.

13. Routage
Le routage est essentiel pour créer des applications React avec
plusieurs pages. La bibliothèque react-router est souvent utilisée pour gérer le
routage dans React.js. Voici un exemple de configuration de base :

jsx

import React from 'react';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-

router-dom';

const PageAccueil = () => <h1>Bienvenue sur la page d'accueil !</h1>;

const PageAPropos = () => <h1>À propos de nous</h1>;

class MonComposant extends React.Component {

render() {

return (

<Router>

<nav>

<ul>

<li>

<Link to="/">Accueil</Link>

</li>

<li>

<Link to="/a-propos">À propos</Link>

</li>

</ul>

</nav>

<Switch>

<Route exact path="/">

<PageAccueil />

</Route>

<Route path="/a-propos">

<PageAPropos />

</Route>

</Switch>

</Router>

);

export default MonComposant;

Dans cet exemple, nous utilisons react-router pour définir les routes et les
composants correspondants. L'élément Link est utilisé pour créer des liens de
navigation, et les composants Route définissent les correspondances entre les

12/18
URL et les composants à afficher.

14. Gestion de l'état global

Dans les applications React.js de grande envergure,
il peut être nécessaire de gérer un état global partagé entre plusieurs composants.
Pour cela, vous pouvez utiliser des bibliothèques de gestion d'état telles que
Redux ou MobX. Voici un exemple utilisant Redux :

jsx

// store.js

import { createStore } from 'redux';

const initialState = {

count: 0

};

function reducer(state = initialState, action) {

switch (action.type) {

case 'INCREMENT':

return { ...state, count: state.count + 1 };

case 'DECREMENT':

return { ...state, count: state.count - 1 };

default:

return state;

const store = createStore(reducer);

export default store;

13/18
 jsx

// App.js

import React from 'react';

import { connect } from 'react-redux';

class App extends React.Component {

increment() {

this.props.dispatch({ type: 'INCREMENT' });

decrement() {

this.props.dispatch({ type: 'DECREMENT' });

render() {

return (

<div>

<h1>Count: {this.props.count}</h1>

<button onClick={() => this.increment()}>Increment</button>

<button onClick={() => this.decrement()}>Decrement</button>

</div>

);

function mapStateToProps(state) {

return {

count: state.count

};

export default connect(mapStateToProps)(App);

Dans cet exemple, nous utilisons Redux pour gérer un état global count. Le
composant App est connecté au store Redux via la fonction connect pour accéder
à l'état global et envoyer des actions pour modifier cet état.

15. Tests unitaires

Les tests unitaires sont essentiels pour assurer la qualité du
code. React.js offre plusieurs outils et bibliothèques pour effectuer des tests
unitaires. Parmi eux, on trouve Jest, Enzyme et React Testing Library. Voici un
exemple de test unitaire avec Jest :

14/18
 jsx

// MonComposant.test.js

import React from 'react';

import { render, screen } from '@testing-library/react';

import MonComposant from './MonComposant';

test('affiche le titre correctement', () => {

render(<MonComposant />);

const titreElement = screen.getByText(/Bienvenue sur mon site/i);

expect(titreElement).toBeInTheDocument();

});

Dans cet exemple, nous utilisons @testing-library/react pour rendre le

composant MonComposant et effectuer des assertions sur son rendu. Le test vérifie
si le titre est correctement affiché.

16. Déploiement
Pour déployer une application React.js, vous devez créer une
version de production optimisée de votre application et la déployer sur un serveur.
Voici les étapes générales :

1. Générez une version de production de votre application avec la commande :

shell

npm run build

Cela va créer un répertoire build contenant les fichiers optimisés de votre

application.

2. Déployez les fichiers du répertoire build sur votre serveur. Vous pouvez
utiliser des services d'hébergement comme Netlify, Vercel, GitHub Pages,
AWS S3, etc., pour héberger votre application React.js.

3. Assurez-vous que le serveur est correctement configuré pour servir les

fichiers statiques de votre application. La configuration du serveur dépendra
du service d'hébergement utilisé.

17. Ressources supplémentaires

Pour approfondir vos connaissances sur
React.js, voici quelques ressources supplémentaires que vous pouvez consulter :

15/18
Ces ressources vous fourniront des informations détaillées, des exemples avancés
et des bonnes pratiques pour développer des applications React.js de qualité.

Bien sûr ! Poursuivons avec la suite de notre cours complet sur React.js.

18. React Hooks

Les React Hooks sont une fonctionnalité introduite dans React
16.8 qui permet aux fonctionnels composants de gérer l'état et d'autres
fonctionnalités auparavant réservées aux composants de classe. Voici un exemple
d'utilisation du hook d'état (useState) :

jsx

import React, { useState } from 'react';

function MonComposant() {

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

const increment = () => {

setCount(count + 1);

};

return (

<div>

<h1>Count: {count}</h1>

<button onClick={increment}>Increment</button>

</div>

);

export default MonComposant;

Dans cet exemple, nous utilisons le hook useState pour gérer l'état count. La
fonction useState renvoie une paire de valeurs : la valeur de l'état actuel (count)
et une fonction pour le mettre à jour (setCount). Lorsque le bouton est cliqué, la
fonction increment est appelée et met à jour la valeur de l'état avec une nouvelle
valeur.

19. React Router Hooks

En plus des composants, React Router propose
également des hooks pour faciliter la navigation dans votre application React.js.
Voici un exemple d'utilisation du hook useHistory :

16/18
 jsx

import React from 'react';

import { useHistory } from 'react-router-dom';

function MonComposant() {

const history = useHistory();

const handleClick = () => {

history.push('/page-suivante');

};

return (

<div>

<h1>Mon Composant</h1>

<button onClick={handleClick}>Page Suivante</button>

</div>

);

export default MonComposant;

Dans cet exemple, nous utilisons le hook useHistory pour obtenir l'objet history,
qui contient des méthodes de navigation telles que push pour naviguer vers une
autre page. Lorsque le bouton est cliqué, la fonction handleClick est appelée et
utilise history.push pour naviguer vers la page suivante.

20. Styled Components

Styled Components est une bibliothèque qui permet
d'écrire du CSS en utilisant des composants JavaScript. Cela facilite la création et
la gestion des styles pour vos composants React.js. Voici un exemple d'utilisation
de Styled Components :

17/18
 jsx

import React from 'react';

import styled from 'styled-components';

const StyledButton = styled.button`

background-color: blue;

color: white;

font-size: 16px;

padding: 10px 20px;

`;

function MonComposant() {

return (

<div>

<h1>Mon Composant</h1>

<StyledButton>Cliquez-moi</StyledButton>

</div>

);

export default MonComposant;

Dans cet exemple, nous utilisons la fonction styled de Styled Components pour
créer un composant de bouton avec des styles personnalisés. Nous pouvons
ensuite utiliser ce composant StyledButton comme n'importe quel autre
composant React.

Ceci conclut notre cours complet sur React.js. J'espère que ces exemples et
explications supplémentaires vous aideront à approfondir vos connaissances de
React.js et à développer des applications web réactives. N'hésitez pas à explorer
davantage la documentation de React.js et de ses bibliothèques associées pour
en savoir plus sur les fonctionnalités avancées et les bonnes pratiques. Bonne
continuation !

18/18