Créer une application React avec create-react-app

Étape 1 : Installation de create-react-app

Pour commencer, assurez-vous que Node.js et npm sont installés sur votre ordinateur. Vous pouvez vérifier cela en exécutant les commandes suivantes dans votre terminal :

📋 Copier le code

node -v
npm -v
		

Explication :

• node -v : Vérifie la version de Node.js installée.
• npm -v : Vérifie la version de npm installée.

Étape 2 : Création de l'application React

Utilisez la commande suivante pour créer une nouvelle application React :

📋 Copier le code

npx create-react-app mon-projet-react
		

Explication :

• npx : Outil permettant d'exécuter des packages npm sans les installer globalement. Sur les versions récente de node.js il est installé avec npm.
• create-react-app : Commande utilisée pour générer une application React prête à l'emploi.
• mon-projet-react : Nom du répertoire où sera créée votre application.

Gestion d'états avec useState

React permet de gérer l'état (state) des composants grâce au hook useState. Cela permet de rendre les composants dynamiques en fonction des interactions utilisateur.

Exemple 1 : Créer un compteur simple

Dans cet exemple, nous allons créer un compteur qui incrémente ou décrémente une valeur à chaque clic sur un bouton.

📋 Copier le code

import React, { useState } from 'react';

function Compteur() {
// Initialisation de l'état avec useState
const [compte, setCompte] = useState(0);

return (
	<div>
		<h2>Compteur : {compte}</h2>
		<button onClick={() => setCompte(compte + 1)}>Incrémenter</button>
		<button onClick={() => setCompte(compte - 1)}>Décrémenter</button>
	</div>
);
}

export default Compteur;

Explication :

• import React, { useState } : Importe la bibliothèque React et le hook useState.
• const [compte, setCompte] = useState(0) : Initialise l'état compte avec une valeur par défaut de 0. setCompte est une fonction pour mettre à jour cet état.
• onClick={() => setCompte(compte + 1)} : Augmente la valeur de compte lorsqu'un clic est effectué sur le bouton "Incrémenter".
• onClick={() => setCompte(compte - 1)} : Diminue la valeur de compte lorsqu'un clic est effectué sur le bouton "Décrémenter".

Exemple 2 : Formulaire de saisie de texte

Un autre usage courant de useState est la gestion des entrées utilisateur dans un formulaire. Voici un exemple où l'utilisateur peut saisir son nom, et ce nom est affiché en temps réel.

📋 Copier le code

import React, { useState } from 'react';

function SaisieNom() {
const [nom, setNom] = useState('');

function handleChange(event) {
	setNom(event.target.value);
}

return (
	<div>
		<h2>Saisissez votre nom :</h2>
		<input type="text" value={nom} onChange={handleChange} />
		<p>Bonjour, {nom || 'inconnu'} !</p>
	</div>
);
}

export default SaisieNom;

Explication :

• const [nom, setNom] = useState('') : Initialise l'état nom avec une chaîne vide.
• onChange={handleChange} : Écoute les modifications dans l'input et met à jour l'état via la fonction setNom.
• {nom || 'inconnu'} : Affiche le nom saisi ou "inconnu" si aucun nom n'a été entré.

Navigation avec React Router

Pour ajouter des pages multiples et naviguer entre elles dans une application React, utilisez React Router, une bibliothèque populaire pour la gestion des routes.

Installation de React Router

Installez React Router DOM en exécutant la commande suivante :

📋 Copier le code

npm install react-router-dom

Exemple 1 : Configuration de base

Cet exemple montre comment configurer deux pages (Accueil et APropos) avec des liens de navigation.

📋 Copier le code

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Accueil() {
return <h2>Page d'accueil</h2>;
}

function APropos() {
return <h2>À propos</h2>;
}

function App() {
return (
	<Router>
		<div>
			<nav>
				<Link to="/">Accueil</Link> | <Link to="/apropos">À propos</Link>
			</nav>

			<Routes>
				<Route path="/" element={<Accueil />} />
				<Route path="/apropos" element={<APropos />} />
			</Routes>
		</div>
	</Router>
);
}

export default App;

Explication :

• BrowserRouter : Enveloppe l'application pour activer la navigation basée sur l'URL.
• Routes : Définit les différentes routes possibles.
• Route : Associe une URL (par exemple, "/") à un composant spécifique (par exemple, Accueil).
• Link : Crée des liens de navigation entre les pages sans recharger la page entière.

Exemple 2 : Passer des paramètres dans les URLs

React Router permet également de passer des paramètres dans les URLs. Par exemple, vous pouvez avoir une route comme `/utilisateur/:id` pour afficher les détails d'un utilisateur.

📋 Copier le code

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

function DetailsUtilisateur() {
let { id } = useParams();
return <h2>Détails de l'utilisateur : {id}</h2>;
}

function App() {
return (
	<Router>
		<div>
			<nav>
				<Link to="/utilisateur/1">Utilisateur 1</Link> | 
				<Link to="/utilisateur/2">Utilisateur 2</Link>
			</nav>

			<Routes>
				<Route path="/utilisateur/:id" element={<DetailsUtilisateur />} />
			</Routes>
		</div>
	</Router>
);
}

export default App;

Explication :

• :id : Paramètre dynamique dans l'URL qui peut varier selon la route visitée.
• useParams() : Hook React Router pour accéder aux paramètres de l'URL.
• {id} : Valeur extraite depuis l'URL et affichée dans le composant.

Étape 3 : Démarrer le serveur de développement

Une fois l'application créée, naviguez vers le répertoire du projet et lancez le serveur de développement :

📋 Copier le code

cd mon-projet-react
npm start
		

Explication :

• cd mon-projet-react : Change de répertoire vers votre projet.
• npm start : Lance le serveur de développement React, accessible généralement à l'URL http://localhost:3000.

Étape 4 : Structure de base d'une application React

Explorez la structure générée par create-react-app. Voici les principaux fichiers :

• src/App.js : Fichier principal contenant le composant racine.
• src/index.js : Point d'entrée de l'application.
• public/index.html : Template HTML utilisé par React.

Voici un exemple simple de composant React dans App.js :

📋 Copier le code

import React from 'react';

function App() {
return (
	<div className="App">
		<h1>Bienvenue dans votre première application React !</h1>
	</div>
);
}

export default App;
		

Explication :

• import React from 'react' : Importe la bibliothèque React.
• function App() : Définit un composant fonctionnel appelé App.
• return (...) : Renvoie le JSX (syntaxe similaire à HTML) qui représente l'interface utilisateur.
• export default App : Exporte le composant pour qu'il soit utilisable dans d'autres fichiers.

Conclusion

Félicitations ! Vous avez maintenant configuré votre environnement de développement React et créé votre première application. Explorez davantage les fonctionnalités de React, comme la gestion d'états avec useState ou la navigation avec React Router.