Cours n°2 : State, Events, CSS & Props

Introduction

Dans ce tutoriel, nous allons apprendre à créer des applications interactives en React en explorant les notions suivantes étape par étape :

1. Composants React
2. State pour gérer les données dynamiques
3. Gestion des événements avec onClick et onChange
4. Styles dynamiques et application de styles via des fichiers CSS séparés

Étape 1 : Création de Composants Simples

Qu’est-ce qu’un composant ?

Un composant est une brique fondamentale de React. Il représente une partie réutilisable de l’interface utilisateur.

Créez un Composant Fonctionnel Simple

Commençons par créer un composant qui affiche un message de bienvenue.

Welcome.jsx

function Welcome() {

    return <h1>Bienvenue sur notre site !</h1>;
}

export default Welcome;

Explication :

• Welcome est un composant fonctionnel qui retourne un élément JSX (<h1>).
• Le composant est ensuite exporté pour être utilisé dans d’autres parties de l’application.

Utilisez ce composant dans App.js :

App.jsx

import Welcome from './Welcome';

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

export default App;

Lancez l’application et vous verrez “Bienvenue sur notre site !” affiché.

Étape 2 : Utilisation du State

Qu’est-ce que le State ?

Le state est un moyen de stocker et de gérer des données dynamiques dans un composant React. Avec useState, nous pouvons mettre à jour ces données de manière réactive.

Ajoutez un Compteur Dynamique

Créez un composant qui affiche un compteur et un bouton pour l’incrémenter.

Counter.jsx

import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0); // Initialisation du state

    return (
        <div>
            <p>Compteur : {count}</p>
            <button onClick={() => setCount(count + 1)}>Incrémenter</button>
        </div>
    );
}

export default Counter;

Explication :

• useState(0) initialise le compteur à 0.
• setCount met à jour le compteur.
• Lorsqu’on clique sur le bouton, le compteur est incrémenté de 1.

Ajoutez-le dans App.jsx :

App.jsx

import Counter from './Counter';

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

export default App;

Vous verrez le compteur s’incrémenter chaque fois que vous cliquez sur le bouton.

Étape 3 : Gestion des Événements avec onChange

3.1 Création d’un Champ de Texte Dynamique

Nous allons créer un champ de saisie qui affiche en temps réel le texte saisi par l’utilisateur.

TextInput.jsx

import { useState } from 'react';

function TextInput() {
const [text, setText] = useState('');

    return (
        <div>
            <input
                type="text"
                placeholder="Saisissez du texte"
                onChange={(e) => setText(e.target.value)}
            />
            <p>Texte saisi : {text}</p>
        </div>
    );
}

export default TextInput;

Explication :

• onChange est un événement qui se déclenche chaque fois que l’utilisateur saisit quelque chose.
• La valeur de l’input est récupérée via e.target.value et mise à jour dans le state text.

Ajoutez-le dans App.js :

App.css

import TextInput from './TextInput';

function App() {
return (
    <div>
        <Welcome />
        <Counter />
        <TextInput />
    </div>
);
}

export default App;

Essayez de taper dans le champ : le texte apparaît en temps réel sous le champ de saisie.

Étape 4 : Styles Dynamiques avec CSS Inline

Modifier la Couleur d’un Élément avec useState

Nous allons créer une boîte dont la couleur change dynamiquement lorsqu’un bouton est cliqué.

StyledBox.jsx

import { useState } from 'react';

function StyledBox() {
const [isBlue, setIsBlue] = useState(false);

    const boxStyle = {
        width: '100px',
        height: '100px',
        backgroundColor: isBlue ? 'blue' : 'gray',
        margin: '10px auto'
    };

    return (
        <div>
            <div style={boxStyle}></div>
            <button onClick={() => setIsBlue(!isBlue)}>Changer la couleur</button>
        </div>
    );
}

export default StyledBox;

Explication :

• Le state isBlue détermine la couleur de fond.
• Le style est défini dynamiquement dans boxStyle.
• Le bouton bascule la couleur entre bleu et gris.

Ajoutez-le dans App.jsx :

import StyledBox from './StyledBox';

function App() {
return (
    <div>
        <Welcome />
        <Counter />
        <TextInput />
        <StyledBox />
    </div>
);
}

export default App;

Étape 5 : Utilisation de Fichiers CSS Séparés

Ajoutez des Styles Externes

Nous allons appliquer des styles à un composant via un fichier CSS.

.box {
width: 150px;
height: 150px;
background-color: lightcoral;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border: 2px solid darkred;
border-radius: 10px;
margin: 20px auto;
}

Fichier : StyledComponent.jsx

StyledComponent.jsx

import './StyledComponent.css';

function StyledComponent() {
return (
    <div className="box">
        Je suis stylée !
    </div>
);
}

export default StyledComponent;

Explication :

• Les styles sont définis dans un fichier CSS séparé.
• Le fichier est importé via import './StyledComponent.css'.

Ajoutez-le dans App.js :

import StyledComponent from './StyledComponent';

function App() {
return (
    <div>
        <Welcome />
        <Counter />
        <TextInput />
        <StyledBox />
        <StyledComponent />
    </div>
);
}

export default App;

Conclusion

À travers ces étapes, vous avez appris à :

• Créer des composants React.
• Utiliser le state pour des données dynamiques.
• Gérer des événements comme onClick et onChange.
• Appliquer des styles dynamiques et utiliser des fichiers CSS séparés.

Vous pouvez maintenant combiner ces concepts pour créer des interfaces utilisateur interactives et élégantes avec React !