Dans ce tutoriel, vous allez apprendre à installer reactjs sur ubuntu 20.04.
ReactJS est une bibliothèque frontale open source pour développer des applications Web, elle est basée sur JavaScript et dirigée par l’équipe Facebook et par une communauté d’individus et d’entreprises.
Conditions préalables
Ce guide suppose que vous utilisez Ubuntu 20.04. Avant de commencer, vous devez disposer d’un compte utilisateur avec des privilèges d’installation et disposer d’un accès illimité à tous les sites Web mentionnés dans ce document.
Configuration requise
- Ubuntu 20.04
- 4 GB RAM
- 10 GB free space
Installer ReactJS sur Ubuntu
Pour installer les outils de React, nous avons besoin de nodejs et npm. Voyons d’abord de quoi il s’agit et pourquoi nous en avons besoin.
Qu’est-ce que Nodejs et pourquoi avez-vous besoin pour le développement de réaction?
Node.js est un environnement d’exécution JavaScript multiplateforme open source qui exécute du code JavaScript en dehors d’un navigateur.
Node.js permet aux développeurs d’utiliser JavaScript pour développer une grande variété d’applications telles que des applications réseau, des outils de ligne de commande, des API Web, des applications Web.
Vous avez besoin de nodejs pour les outils de développement (comme un serveur Web local avec des fonctionnalités de rechargement en direct) et une expérience de développement, vous n’avez pas besoin de nodejs pour exécuter react en production.
Qu’est-ce que npm et pourquoi avez-vous besoin pour le développement de réaction?
NPM signifie Node Package Manager, c’est un outil de gestion des dépendances pour les applications javascript. Cet outil aidera à installer et les bibliothèques et autres outils pour soutenir le développement de réaction.
Commençons par l’installation de nodejs après l’achèvement sur nodejs, nous installerons l’outil en ligne de commande create-react-app et créerons un nouveau projet react
Installation de Nodejs
Pour vous obtenir une version plus récente de Node.js installée sur ubuntu, il faut ajouter un PPA (archive de paquets personnels) maintenu par NodeSource.
Ouvrez le terminal et exécutez les commandes ci-dessous,
cd ~ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
Exécutez le script téléchargé en utilisant la commande ci-dessous
sudo bash nodesource_setup.sh
Le PPA sera ajouté à votre configuration et votre cache de paquet local sera mis à jour automatiquement, maintenant pour installer nodejs, exécutez la commande suivante:
sudo apt-get install nodejs -y
Tester de l’installation de nodejs
Sur le terminal, exécutez la commande ci-dessous pour tester l’installation de nodejs
node -v
Tester de version de NPM
Sur le terminal, exécutez la commande ci-dessous pour tester npm =
npm -v
LIRE AUSSI: Comment installer Angular CLI sur Ubuntu 20.04
Installation de l’outil Create React App
La mise en place d’un environnement de développement react nécessiterait de configurer des outils tels que babel, webpack, qui sont complexes à configurer pour un débutant dans le monde react.
Il existe plusieurs outils qui aident à atténuer ce problème, parmi lesquels create-react-app est l’outil le plus simple et le plus fin avec des configurations de qualité de production pré-construites.
L’avantage de cet outil est qu’il vous permet de modifier la configuration en éjectant l’application create-react.
Nous installerons create-react-app en utilisant npm.
Dans le terminal, exécutez la commande d’installation ci-dessous:
npm install -g create-react-app
Tester create-react-app
Pour tester l’application create-react-app, exécutez la commande ci-dessous:
create-react-app --version
Félicitations, vous avez installé avec succès create-react-app.
LIRE AUSSI: Comment installer Ionic sur Ubuntu 20.04
Créer votre première application React
1. Créez une application react en utilisant la ligne de commande create-react-app en utilisant la commande ci-dessous
create-react-app hello-react
Cette commande crée un nouveau dossier nommé hello-react et crée tous les fichiers et configure les bibliothèques nécessaires dans ce dossier et rend le projet react prêt à être exécuté sans aucune configuration supplémentaire
2. Une fois le projet créé, accédez au répertoire du projet et exécutez l’application à l’aide de la commande npm start comme indiqué ci-dessous
La commande npm start démarre le serveur de développement Webpack qui à son tour exécute tout le processus de construction et ouvre une fenêtre de navigateur et charge l’URL de l’application qui s’exécute à http://www.localhost:3000/ par défaut.
Vous verrez une belle fenêtre comme ci-dessous qui vous montre l’icône de réaction et du texte.
Conclusion
Dans ce tutoriel, vous avez appris à installer Reactjs sur Ubuntu 20.04 et tout les outils nécessaire à la mise en place d’un environnement de développement.
Leave a Comment