ReactJS - Installation: A Beginner's Guide

Bonjour là-bas, futurs développeurs React ! Je suis ravi de vous guider sur ce voyage passionnant dans le monde de ReactJS. En tant que quelqu'un qui enseigne l'informatique depuis des années, je peux vous assurer que'apprendre React, c'est comme apprendre à rouler à vélo - cela peut sembler intimidant au début, mais une fois que vous aurez pris l'habitude, vous serez en train de rouler en un rien de temps !

ReactJS - Installation

Qu'est-ce que ReactJS ?

Avant de plonger dans l'installation, comprenons rapidement ce qu'est ReactJS. React est une bibliothèque JavaScript populaire pour construire des interfaces utilisateur, en particulier pour les applications à page unique. Il s'agit de créer des composants UI réutilisables qui gèrent leur propre état, ce qui rend plus facile la construction d'interfaces complexes.

Maintenant, mettons les mains dans le cambouis et commençons à configurer React !

La chaîne d'outils : Votre boîte à outils React

Lorsque vous travaillez avec React, nous utilisons un ensemble d'outils appelé une "chaîne d'outils". Pensez-y comme votre couteau suisse React - il a tout ce dont vous avez besoin pour commencer à construire des applications web incroyables.

Outils Essentiels dans Notre Chaîne d'Outils

Outil	But
Node.js	Environment d'exécution JavaScript
npm (Node Package Manager)	Gestionnaire de packages pour JavaScript
Babel	Compileur JavaScript
Webpack	捆包 d' modules
ESLint	Analyseur de code
Jest	Framework de test

Ne vous inquiétez pas si ces termes vous semblent comme une langue extraterrestre pour le moment. Nous explorerons chacun d'eux au fur et à mesure !

Le Serveur Statique : Votre Terrain de Jeu Local

Avant de plonger dans des configurations complexes, commencerons par quelque chose de simple - un serveur statique. Cela nous permettra de servir notre application React localement sur notre ordinateur.

Configuration d'un Serveur Statique Simple

Assurez-vous d'avoir Node.js installé. Vous pouvez le télécharger depuis nodejs.org.
Ouvrez votre terminal ou invite de commande et exécutez :

npm install -g serve

Cette commande installe le package 'serve' globalement sur votre système.

Maintenant, créez un nouveau répertoire pour votre projet :

mkdir my-react-app
cd my-react-app

Créez un fichier HTML simple nommé index.html :

<!DOCTYPE html>
<html>
<head>
<title>Ma Première Application React</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Bonjour, React !</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

Maintenant, exécutez la commande serve :

serve

Voilà ! Vous devriez voir un message vous indiquant où votre application est servie. Habituellement, c'est à http://localhost:5000. Ouvrez cette URL dans votre navigateur, et vous verrez votre première application React !

Le Compileur Babel : Traduire le Futur

Souvenez-vous de Babel dans notre chaîne d'outils ? Il est temps de rencontrer ce traducteur magique ! Babel est un compileur JavaScript qui vous permet d'utiliser les dernières fonctionnalités de JavaScript même si les navigateurs ne les supportent pas encore.

Pourquoi Avons-Nous Besoin de Babel ?

Imaginez que vous écrivez une lettre à un ami qui parle une langue différente. Babel est comme avoir un traducteur qui peut instantanément convertir votre lettre dans la langue de votre ami. Dans le monde de React, Babel traduit le JavaScript moderne et JSX (l'extension de syntaxe de React) en une version de JavaScript que tous les navigateurs peuvent comprendre.

Utilisation de Babel dans Notre Projet

Nous avons en fait déjà inclus Babel dans notre fichier HTML simple ci-dessus. Decomposons cette partie :

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Votre code React ici
</script>

La première ligne inclut la bibliothèque Babel standalone. La deuxième ligne indique à Babel de compiler le code à l'intérieur de la balise script.

La Chaîne d'Outils Create React App : La Solution Tout-en-Un

Maintenant que nous avons mis les pieds dans les eaux de React, plongons avec la chaîne d'outils Create React App. C'est un environnement confortable et riche en fonctionnalités pour apprendre et construire de nouvelles applications React à page unique.

Configuration de Create React App

Ouvrez votre terminal et exécutez :

npx create-react-app my-app

Une fois terminé, naviguez vers votre nouvelle application :

cd my-app

Démarrez le serveur de développement :

npm start

Votre nouvelle application React devrait s'ouvrir automatiquement dans votre navigateur, généralement à http://localhost:3000.

Quoi à l'Intérieur ?

Create React App configure un environnement de développement entièrement configuré. Jetons un coup d'œil à ce que nous obtenons :

Fonctionnalité	Description
React	La bibliothèque.core React
webpack	Bundles votre code et vos actifs
Babel	Compile le JavaScript moderne
ESLint	Vérifie votre code pour des erreurs
Jest	Vous permet d'écrire des tests
Hot Reloading	Voir instantanément vos modifications dans le navigateur

Votre Premier Composant

Créons un composant React simple. Ouvrez src/App.js et remplacez son contenu par :

import React from 'react';

function App() {
return (
<div>
<h1>Bienvenue dans Mon Application React</h1>
<p>Ceci est mon premier composant !</p>
</div>
);
}

export default App;

Enregistrez le fichier et vérifiez votre navigateur. Vous devriez voir votre nouveau composant rendu !

Conclusion

Félicitations ! Vous avez刚刚迈出了进入React开发激动人心的世界的第一步。我们涵盖了大量内容 - de la configuration d'un serveur statique simple à l'utilisation de la puissante chaîne d'outils Create React App.

N'oubliez pas, apprendre React est un voyage. Ne vous inquiétez pas si tout ne becomes pas immédiatement clair. Continuez à pratiquer, continuez à construire, et surtout, continuez à vous amuser !

Dans notre prochaine leçon, nous plongerons plus profondément dans les composants React et commencerons à construire des applications plus complexes. Jusqu'alors, bon codage !

Credits: Image by storyset

Tutoriel précédent:

ReactJS - Introduction

Tutoriel suivant:

ReactJS - Fonctionnalités