Créez une application React, créez votre première application avec React Ubuntu 20.04

Dans le prochain article, nous examinerons comment nous pouvons créer notre première application avec ReactJS sur Ubuntu 20.04 en utilisant Create React App. ReactJS est une bibliothèque JavaScript open source utilisée pour créer l'interface utilisateur, maintenue par Facebook et la communauté des développeurs. ReactJS peut être utilisé dans le développement d'applications Web ou d'applications mobiles.

Dans React, également connu sous le nom de ReactJS, les données sont traitées dans le DOM. Des bibliothèques supplémentaires pour le routage et la gestion de l'état sont nécessaires pour exécuter l'application React. Quelques exemples de ces bibliothèques sont Redux y Routeur React.

Installer React sur Ubuntu 20.04

Pour installer React sur notre système, nous devons d'abord savoir ce qu'est npm et comprendre pourquoi nous en avons besoin. Npm signifie Node Package Manager, et c'est le plus grand registre de logiciels open source au monde. Contient plus de 800.000 XNUMX packages de codes. L'utilisation de Npm est gratuite et tout logiciel public peut être téléchargé et utilisé sans inscription ni connexion.

Npm est un outil de gestion des dépendances pour les applications javascript, qui aide à installer toutes les bibliothèques et autres outils pour soutenir le développement des applications JS.

Installer npm

Pour installer nodejs, qui inclut npm, nous n'aurons plus qu'à ouvrir un terminal (Ctrl + Alt + T) et exécuter la commande suivante:

sudo apt install nodejs

Après avoir terminé l'installation de npm, nous pouvons vérifiez votre version et celle de node. Nous pouvons le faire avec la commande:

npm -v

La version de npm installée dépend de la date d'installation, car la mise à jour est effectuée fréquemment. Il faut s'assurer que nous avons une version supérieure à 5 installée.

Pour vérifier la version installée du nœud, la commande à utiliser sera:

node -v

Si vous n'avez pas la dernière version de npm installée sur votre système, vous pouvez mettre à jour Node Package Manager (npm) vers la dernière version exécution de cette commande dans le terminal:

sudo npm install -g npm@latest

Installez create-react-app

Pour installer un environnement React productif, nous devrons configurer des outils tels que babel, webpack, etc ... ce qui est complexe à configurer pour les débutants dans le monde React. Mais nous pouvons trouver plusieurs outils qui nous aideront dans la configuration. Parmi eux, nous trouverons create-react-app, qui est l'outil le plus simple à utiliser et à configurer.

Create React App est un environnement confortable pour apprendre React, et c'est le meilleur moyen de commencer à créer une nouvelle application d'une seule page à l'aide de React.

Create React App configurez votre environnement de développement afin que vous puissiez utiliser les dernières fonctionnalités Javascript, en offrant une bonne expérience de développement et en optimisant votre application pour la production. Comme indiqué sur leur site Web, il est nécessaire d'avoir Node> = 8.10 et npm> = 5.6 installés sur votre machine.

Nous pourrons installer create-react-app en utilisant npm. Pour ce faire, dans un terminal (Ctrl + Alt + T), il suffit d'exécuter la commande d'installation suivante:

sudo npm install -g create-react-app

Une fois l'installation de l'application create-react-app terminée dans notre système, nous pouvons vérifier la version installée exécution de la commande suivante:

create-react-app --version

Création de la première application React

Notre première application React peut être créée simplement en utilisant create-react-app. Nous n'aurons qu'à utiliser la commande suivante:

create-react-app mi-primera-app

La commande ci-dessus va créer une application React appelée ma-première-application. En même temps un nouveau dossier portant le même nom de l'application sera créé qui comprend tous les fichiers, configurations et bibliothèques nécessaires.

Exécuter l'application React

Une fois le projet React créé, nous devrons nous déplacer dans le répertoire du projet et exécuter l'application React à l'aide de la commande suivante dans le terminal (Ctrl + Alt + T):

npm start

La commande npm début démarrer le serveur de développement qui effectuera tout le processus de construction.

Le terminal nous dira que nous devons ouvrez le navigateur et chargez l'application qui s'exécutera à l'URL http: // localhost: 3000 par défaut. Lorsque le navigateur s'ouvre, nous verrons le logo et les textes React à l'écran.

Désinstaller create-react-app et npm

Utilisateurs nous pouvons désinstaller n'importe quelle bibliothèque installée à partir de npm en utilisant la commande de désinstallation de npm. Exécutez la commande suivante dans le terminal (Ctrl + Alt + T) pour désinstaller créer-réagir-app:

sudo npm uninstall -g create-react-app

De même, nous pouvons désinstaller npm en utilisant cette autre commande dans le même terminal:

sudo apt remove nodejs

Vous trouverez plus d'informations sur cette bibliothèque JavaScript pour la création d'interfaces utilisateur dans le documentation du projet.