Installation de ReactJS
Introduction
Ce chapitre explique l'installation de la bibliothèque React et de ses outils connexes dans votre machine. Avant de passer à l'installation, vérifions d'abord les prérequis.
React fournit des outils CLI pour le développeur afin d'accélérer la création, le développement et le déploiement de l'application web basée sur React. Les outils React CLI dépendent de Node.js et doivent être installés sur votre système. Avec un peu de chance, vous avez installé Node.js sur votre machine. Nous pouvons le vérifier en utilisant la commande ci-dessous :
node --version
Vous pouvez voir la version de Nodejs que vous avez installé. Elle est affichée comme ci-dessous pour moi,
v19.1.0
Si Nodejs n'est pas installé, vous pouvez le télécharger et l'installer en visitant https://nodejs.org/en/download/.
Toolchain
Pour développer des fonctionnalités légères telles que la validation de formulaire, le dialogue de modèle, etc., la bibliothèque React peut être directement incluse dans l'application web via le réseau de diffusion de contenu (CDN). C'est similaire à l'utilisation de la bibliothèque jQuery dans une application web. Pour les applications de taille moyenne à grande, il est conseillé d'écrire l'application sous forme de plusieurs fichiers, puis d'utiliser des bundlers tels que webpack, parcel, rollup, etc. pour compiler et regrouper l'application avant de déployer le code.
React toolchain aide à créer, construire, exécuter et déployer l'application React. React toolchain fournit essentiellement un modèle de projet de démarrage avec tout le code nécessaire pour amorcer l'application.
Parmi les chaînes d'outils les plus populaires pour développer des applications React figurent :
- Create React App − Chaîne d'outils orientée SPA.
- Next.js − Chaîne d'outils orientée vers le rendu côté serveur.
- Gatsby − Chaîne d'outils orientée contenu statique.
Les outils nécessaires pour développer une application React sont :
- Le serve, un serveur statique pour servir notre application pendant le développement.
- Compilateur Babel.
- Créer une application React CLI.
Dans ce cours, nous allons apprendre les bases des outils mentionnés ci-dessus et comment les installer.
Le serveur statique de service
Le serveur serve est un serveur web léger. Il sert les sites statiques et les applications à page unique. Il se charge rapidement et consomme un minimum de mémoire. Il peut être utilisé pour servir une application React. Installons l'outil en utilisant le gestionnaire de paquets npm dans notre système.
npm install serve -g
Créons un site statique simple et servons l'application en utilisant serve app.
Ouvrez une invite de commande et allez dans votre espace de travail.
cd /go/to/your/workspace
Créez un nouveau dossier, static_site et changez de répertoire pour le dossier nouvellement créé.
mkdir static_site
cd static_site
Ensuite, créez une page web simple dans le dossier en utilisant votre éditeur html préféré.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Static website</title>
</head>
<body>
<div><h1>Hello!</h1></div>
</body>
</html>
Ensuite, exécutez la commande serve.
serve .
Nous pouvons également servir un seul fichier, index.html, au lieu du dossier entier.
serve ./index.html
Ensuite, ouvrez le navigateur et entrez http://localhost:5000 dans la barre d'adresse et appuyez sur entrée. L'application devrait s'ouvrir en affichant le message "Hello!".
Le serveur va servir l'application en utilisant le port par défaut, 5000. S'il n'est pas disponible, il choisira un port aléatoire et le spécifiera.
│ Serving! │
│ │
│ - Local: http://localhost:57311 │
│ - On Your Network: http://192.168.56.1:57311 │
│ │
│ This port was picked because 5000 is in use. │
│ │
│ Copied local address to clipboard!
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !
