Démarrer un nouveau projet React est très compliqué, avec autant d'outils de build. Il utilise de nombreuses dépendances, fichiers de configuration et autres exigences telles que Babel, Webpack, ESLint avant d'écrire une seule ligne de code React. L'outil CLI Create React App supprime toutes ces complexités et simplifie l'application React. Pour cela, vous devez installer le package à l'aide de NPM, puis exécuter quelques commandes simples pour obtenir un nouveau projet React.

Le créer-réagir-application est un excellent outil pour les débutants, qui vous permet de créer et d'exécuter un projet React très rapidement. Il ne nécessite aucune configuration manuelle. Cet outil encapsule toutes les dépendances requises comme Pack Web , Babel pour le projet React lui-même, vous devez ensuite vous concentrer uniquement sur l'écriture du code React. Cet outil configure l'environnement de développement, offre une excellente expérience de développement et optimise l'application pour la production.

Exigences

L'application Create React est gérée par Facebook et peut fonctionner sur n'importe quel plate-forme , par exemple, macOS, Windows, Linux, etc. Pour créer un projet React à l'aide de create-react-app, vous devez avoir installé les éléments suivants sur votre système.

1. Version du nœud >= 8.10
2. Version NPM >= 5.6

Vérifions la version actuelle de Nœud et MNP dans le système.

Exécutez la commande suivante pour vérifier la version du nœud dans l'invite de commande.

 $ node -v 

Exécutez la commande suivante pour vérifier la version de NPM dans l'invite de commande.

 $ npm -v 

Installation

Ici, nous allons apprendre comment installer React en utilisant ARC outil. Pour cela, nous devons suivre les étapes indiquées ci-dessous.

Installer React

Nous pouvons installer React à l'aide du gestionnaire de packages npm en utilisant la commande suivante. Il n'y a pas lieu de s'inquiéter de la complexité de l'installation de React. Le gestionnaire de packages npm create-react-app gérera tout ce qui est nécessaire au projet React.

 C:Usersjavatpoint> npm install -g create-react-app 

Créer un nouveau projet React

Une fois l'installation de React réussie, nous pouvons créer un nouveau projet React à l'aide de la commande create-react-app. Ici, je choisis le nom « reactproject » pour mon projet.

 C:Usersjavatpoint> create-react-app reactproject 

NOTE:Nous pouvons combiner les deux étapes ci-dessus en une seule commande en utilisantnpx. Le npx est un outil d'exécution de packages fourni avec la version npm 5.2 et supérieure.

 C:Usersjavatpoint> npx create-react-app reactproject 

La commande ci-dessus prendra un certain temps pour installer React et créer un nouveau projet avec le nom « reactproject ». Maintenant, nous pouvons voir le terminal comme ci-dessous.

L'écran ci-dessus indique que le projet React est créé avec succès sur notre système. Maintenant, nous devons démarrer le serveur pour pouvoir accéder à l'application sur le navigateur. Tapez la commande suivante dans la fenêtre du terminal.

 $ cd Desktop $ npm start 

NPM est un gestionnaire de packages qui démarre le serveur et accède à l'application sur le serveur par défaut http://localhost:3000 . Maintenant, nous obtiendrons l’écran suivant.

Ensuite, ouvrez le projet sur l'éditeur de code. Ici, j'utilise Visual Studio Code. La structure par défaut de notre projet ressemble à l'image ci-dessous.

Dans l'application React, il existe plusieurs fichiers et dossiers dans le répertoire racine. Certains d’entre eux sont les suivants :

nœud_modules :Il contient la bibliothèque React et toutes les autres bibliothèques tierces nécessaires.publique:Il détient les actifs publics de l’application. Il contient l'index.html où React montera l'application par défaut sur l'élément.src :Il contient les fichiers App.css, App.js, App.test.js, index.css, index.js et serviceWorker.js. Ici, le fichier App.js toujours chargé d'afficher l'écran de sortie dans React.package-lock.json :Il est généré automatiquement pour toutes les opérations où le package npm modifie soit l'arborescence node_modules, soit package.json. Il ne peut pas être publié. Il sera ignoré s'il trouve un autre emplacement que le package de niveau supérieur.package.json :Il contient diverses métadonnées nécessaires au projet. Il donne des informations à npm, qui permettent d'identifier le projet ainsi que de gérer les dépendances du projet.LISEZMOI.md :Il fournit la documentation à lire sur les sujets React.

Configuration de l'environnement de réaction

Maintenant, ouvrez le src >> App.js fichier et apportez les modifications que vous souhaitez afficher à l’écran. Après avoir apporté les modifications souhaitées, sauvegarder le fichier. Dès que nous enregistrons le fichier, Webpack recompile le code, la page s'actualise automatiquement et les modifications sont reflétées sur l'écran du navigateur. Maintenant, nous pouvons créer autant de composants que nous le souhaitons, importer le composant nouvellement créé dans le App.js fichier et ce fichier sera inclus dans notre principal index.html fichier après compilation par Webpack.

Ensuite, si nous voulons créer le projet pour le mode production, tapez la commande suivante. Cette commande générera la version de production la mieux optimisée.

 $ npm build