Tutoriel ReactJS : Créer Votre Première Application React

Bonjour à tous, futurs développeurs React ! Je suis excité de vous accompanyer dans ce voyage alors que nous plongons dans le monde de ReactJS. En tant que quelqu'un qui enseigne l'informatique depuis plus d'une décennie, je peux vous assurer que React est non seulement puissant mais aussi incroyablement amusant à apprendre. Alors, c'est parti !

Qu'est-ce que ReactJS ?

React est une bibliothèque JavaScript pour construire des interfaces utilisateur. Elle a été développée par Facebook et est depuis devenue l'une des bibliothèques front-end les plus populaires au monde. Mais ne vous inquiétez pas si cela semble intimidant - nous allons le décomposer étape par étape.

Pourquoi React ?

Imaginez que vous construisez une maison de cartes. Chaque fois que vous voulez changer quelque chose, vous devez ajuster soigneusement chaque carte, n'est-ce pas ? React est comme avoir des cartes magiques qui s'ajustent automatiquement lorsque vous changez une partie. Cela rend la construction et la mise à jour des applications web beaucoup plus faciles et rapides.

Prérequis

Avant de plonger dedans, assurons-nous que nous avons tout ce dont nous avons besoin :

1. Compréhension de base de HTML et CSS
2. Familiarité avec JavaScript (ne vous inquiétez pas, nous reverrons au fur et à mesure)
3. Un éditeur de texte (je recommande Visual Studio Code)
4. Node.js installé sur votre ordinateur

Créer Votre Premier Projet React

Commençons par créer notre premier projet React. Nous allons utiliser un outil appelé Create React App, qui configure tout ce dont nous avons besoin avec une seule commande.

1. Ouvrez votre terminal ou invite de commande
2. Navigatez jusqu'au dossier où vous souhaitez créer votre projet
3. Exécutez la commande suivante :

npx create-react-app mon-premier-react-app

Cela peut prendre quelques minutes. Une fois terminé, naviguez dans le dossier de votre nouveau projet :

cd mon-premier-react-app

Maintenant, lançons notre application :

npm start

Voilà ! Vous devriez voir une nouvelle fenêtre de navigateur s'ouvrir avec votre première application React en cours d'exécution. Ce n'est pas grand-chose encore, mais nous n'en sommes qu'au début !

Comprendre la Structure du Projet

Jetons un œil à ce que Create React App a configuré pour nous :

mon-premier-react-app/
README.md
node_modules/
package.json
public/
index.html
favicon.ico
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg

Les fichiers les plus importants pour nous actuellement se trouvent dans le dossier src. App.js est celui où nous écrivons la plupart de notre code.

Votre Premier Composant React

Ouvrez src/App.js dans votre éditeur de texte. Vous devriez voir quelque chose comme ceci :

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Modifiez <code>src/App.js</code> et enregistrez pour recharger.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Apprendre React
</a>
</header>
</div>
);
}

export default App;

Ceci est un composant React. Ne vous inquiétez pas si cela paraît confus - nous allons le décomposer :

1. Nous importons React et d'autres fichiers nécessaires
2. Nous définissons une fonction appelée App
3. Cette fonction retourne du JSX (JavaScript XML) - une syntaxe spéciale qui ressemble à HTML mais nous permet d'utiliser JavaScript à l'intérieur
4. Enfin, nous exportons le composant pour qu'il puisse être utilisé ailleurs

Modifions ce composant pour le rendre notre propre :

import React from 'react';
import './App.css';

function App() {
return (
<div className="App">
<h1>Bienvenue dans Mon Premier App React !</h1>
<p>J'ai hâte d'apprendre React !</p>
</div>
);
}

export default App;

Enregistrez le fichier et vérifiez votre navigateur - il devrait se mettre à jour automatiquement !

Ajouter de l'Interactivité avec l'État

Maintenant, rendons notre application un peu plus interactive en ajoutant un bouton qui compte le nombre de fois où il a été cliqué.

Remplacez le contenu de App.js par ceci :

import React, { useState } from 'react';
import './App.css';

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

function handleClick() {
setCount(count + 1);
}

return (
<div className="App">
<h1>Bienvenue dans Mon Premier App React !</h1>
<p>J'ai hâte d'apprendre React !</p>
<button onClick={handleClick}>
Vous m'avez cliqué {count} fois
</button>
</div>
);
}

export default App;

Décomposons cela :

1. Nous importons useState, un hook React qui nous permet d'ajouter un état à notre composant
2. Nous utilisons useState(0) pour créer une variable d'état count et une fonction setCount pour la mettre à jour
3. Nous définissons une fonction handleClick qui augmente le compteur
4. Dans notre JSX, nous ajoutons un bouton qui affiche le compteur et appelle handleClick lorsque le bouton est cliqué

Enregistrez et vérifiez votre navigateur - vous devriez maintenant avoir un bouton qui compte vos clics !

Créer un Nouveau Composant

À mesure que notre application grandit, nous voulons la diviser en petits composants réutilisables. Créons un nouveau composant pour notre compteur.

Créez un nouveau fichier src/Counter.js et ajoutez ce code :

import React, { useState } from 'react';

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

function handleClick() {
setCount(count + 1);
}

return (
<div>
<button onClick={handleClick}>
Vous m'avez cliqué {count} fois
</button>
</div>
);
}

export default Counter;

Maintenant, utilisons ce nouveau composant dans notre App.js :

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
return (
<div className="App">
<h1>Bienvenue dans Mon Premier App React !</h1>
<p>J'ai hâte d'apprendre React !</p>
<Counter />
<Counter />
</div>
);
}

export default App;

Regardez cela ! Nous avons maintenant deux compteurs indépendants sur notre page.

Conclusion

Félicitations ! Vous venez de construire votre première application React, d'apprendre sur les composants, l'état, et même de créer un composant réutilisable. C'est juste le début de votre voyage avec React, mais vous avez déjà accompli tellement de choses.

N'oubliez pas, apprendre à coder est comme apprendre une nouvelle langue - cela prend de la pratique et de la patience. Ne soyez pas découragé si quelque chose ne vous vient pas tout de suite. Continuez à expérimenter, continuez à construire, et surtout, continuez à prendre du plaisir !

Dans notre prochaine leçon, nous plongerons plus profondément dans les props React, une gestion d'état plus complexe, et commencerons à construire une application plus substantielle. Jusque-là, bon codage !

Credits: Image by storyset