ReactJS - Exemple : Un guide complet pour les débutants

Bonjour à tous, aspirants développeurs ! Je suis ravi de vous guider dans cette excitante aventure dans le monde de ReactJS. En tant que quelqu'un qui enseigne l'informatique depuis plus d'une décennie, j'ai vu des centaines d'étudiants briller当他们掌握React的强大力量。 Alors, plongeons dedans et créons quelque chose d'incroyable ensemble !

Qu'est-ce que ReactJS ?

Avant de nous plonger dans notre exemple, parlons rapidement de ce qu'est ReactJS. Imaginez que vous construisez une maison en briques de Lego. ReactJS, c'est comme avoir un ensemble magique de briques de Lego qui peuvent changer de forme et de couleur toutes seules ! C'est une bibliothèque JavaScript qui nous aide à construire des interfaces utilisateur (les parties des sites web et des applications que vous voyez et avec lesquelles vous interagissez) de manière vraiment intelligente et efficace.

Fonctionnalités de ReactJS

Voyons quelques-unes des fonctionnalités clés qui rendent React si spécial :

Fonctionnalité	Description
Basé sur des composants	React nous permet de construire des UI en utilisant des pièces réutilisables appelées composants
DOM Virtuel	Une copie légère du DOM réel pour des mises à jour plus rapides
JSX	Une extension de syntaxe qui nous permet d'écrire du code HTML-like dans JavaScript
Flux de données unidirectionnel	Les données circulent dans un seul sens, rendant nos applications plus prévisibles
React Native	Nous permet de construire des applications mobiles en utilisant React

Maintenant que nous avons un aperçu, créons un exemple simple de React pour voir ces fonctionnalités en action !

Configuration de notre environnement React

Premierement, nous devons configurer notre environnement de développement. Ne vous inquiétez pas, c'est plus simple qu'il n'y paraît ! Nous allons utiliser un outil appelé Create React App, qui configure tout pour nous avec une seule commande.

Ouvrez votre terminal et tapez :

npx create-react-app mon-premier-react-app
cd mon-premier-react-app
npm start

Voilà ! Vous venez de créer votre première application React. Si vous ouvrez votre navigateur et allez à http://localhost:3000, vous devriez voir l'application React par défaut en cours d'exécution.

Création de notre premier composant

Maintenant, créons notre premier composant React. Nous allons faire un simple composant de salutation qui dit "Bonjour" à quelqu'un.

Ouvrez le fichier src/App.js et remplacez son contenu par ceci :

import React from 'react';

function Greeting(props) {
return <h1>Bonjour, {props.name} !</h1>;
}

function App() {
return (
<div className="App">
<Greeting name="Apprenant React" />
</div>
);
}

export default App;

Reprenons cela :

1. Nous importons React (même si nous ne l'utilisons pas explicitement, c'est nécessaire pour JSX).
2. Nous définissons un composant Greeting qui prend props (propriétés) comme argument.
3. Le composant Greeting renvoie du JSX, qui ressemble à du HTML mais est en réalité du JavaScript.
4. Nous utilisons le composant Greeting dans notre composant App, en lui passant une prop name.

Lorsque vous enregistrez ce fichier, vous devriez voir "Bonjour, Apprenant React !" dans votre navigateur. Félicitations, vous venez de créer votre premier composant React !

Ajout de l'état à notre composant

Maintenant, rendons notre application un peu plus interactive en ajoutant de l'état. Nous allons créer un bouton qui, lorsque vous cliquez dessus, change le nom dans notre salutation.

Mettez à jour votre App.js pour qu'il ressemble à ceci :

import React, { useState } from 'react';

function Greeting(props) {
return <h1>Bonjour, {props.name} !</h1>;
}

function App() {
const [name, setName] = useState('Apprenant React');

const changeName = () => {
setName('Expert React');
};

return (
<div className="App">
<Greeting name={name} />
<button onClick={changeName}>Devenir un expert</button>
</div>
);
}

export default App;

Voici ce qui est nouveau :

1. Nous importons useState, un hook React qui nous permet d'ajouter de l'état à notre composant.
2. Nous utilisons useState pour créer une variable d'état name et une fonction setName pour la mettre à jour.
3. Nous créons une fonction changeName qui met à jour notre état name.
4. Nous ajoutons un bouton qui appelle changeName lorsque vous cliquez dessus.

Maintenant, lorsque vous cliquez sur le bouton "Devenir un expert", la salutation devrait passer de "Bonjour, Apprenant React !" à "Bonjour, Expert React !". Cela démontre le flux de données unidirectionnel de React : le changement d'état déclenche un re-rendu de notre composant.

Utilisation du DOM Virtuel

Vous vous demandez peut-être : "Pourquoi la page entière ne s'est-elle pas rechargée lorsque nous avons cliqué sur le bouton ?" C'est là que rentre en jeu le DOM Virtuel de React. Lorsque nous changeons l'état, React crée un nouvel arbre DOM virtuel, le compare avec l'ancien, et met à jour uniquement les parties du DOM réel qui ont changé. Cela rend notre application super rapide et efficace !

Conclusion

Et voilà, les amis ! Nous avons créé une application React simple qui demonstrates certaines des fonctionnalités core de React : les composants, les props, l'état, et le DOM virtuel. Nous n'avons gratté que la surface de ce que React peut faire, mais j'espère que cet exemple vous a donné un avant-goût de sa puissance et de sa flexibilité.

N'oubliez pas, apprendre à coder, c'est comme apprendre une nouvelle langue. Ça prend du temps, de la pratique et de la patience. Ne soyez pas découragé si tout ne vous vient pas tout de suite. Continuez à expérimenter, continuez à construire, et surtout, continuez à vous amuser !

Dans notre prochaine leçon, nous plongerons plus profondément dans des concepts React plus avancés. Jusque-là, bon codage, et que vos composants se rendent toujours sans accroc !

Credits: Image by storyset