Comment installer React sur Windows ? Le guide complet

ReactJS est une bibliothèque JavaScript gratuite et open source qui a considérablement modifié les techniques de développement frontend séculaires. Rendu public en 2013, React était un projet interne de Facebook. Depuis lors, React a été adopté par diverses organisations et startups. Les développeurs frontaux ayant une connaissance suffisante de JavaScript, HTML et CSS peuvent créer des interfaces utilisateur interactives pour les applications Web et mobiles. L'un des principaux avantages de ReactJS est son approche basée sur les composants. La construction de composants réutilisables encapsulés avec leur propre état indépendant simplifie les interfaces utilisateur complexes.

Fait intéressant, tout ce que nous écrivons dans ReactJS peut ressembler à du HTML, mais ce n'est pas le cas. Il est connu sous le nom de JSX, fichier JavaScript XML. Ce JSX produit des « éléments » React, qui sont rendus dans le modèle d'objet de document. En termes simples, JSX nous permet d'écrire une logique JavaScript dans le corps HTML. Rendant ainsi React beaucoup plus simple et facile à comprendre.

Afin d'en faire une utilisation idéale, apprenons à installer React JS sous Windows.

Comment installer React JS sur Windows ?

Configuration système requise pour Windows

Bien que l'utilisation de ReactJs soit assez indolore, le processus d' installation de React JS dans Windows peut être assez fastidieux. Étant donné que ReactJS est un projet open source, ce n'est pas aussi simple que de télécharger un logiciel sur Internet. Tout d'abord, il existe certaines conditions préalables à l'utilisation de ReactJS sur votre Windows.

1. Version Windows : Windows XP, Windows 7 (32/64 bits) ou supérieur.
2. Minimum 4 Go de RAM requis.
3. Un minimum de 10 Go d'espace disque sur votre disque dur.
4. Un navigateur Internet tel que Chrome, Microsoft Edge, Firefox, etc.
5. Un éditeur pour déboguer et tester le code écrit en ReactJS.

Apprenez des cours de développement de logiciels en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Téléchargement et installation de Node.js

Node.js est le serveur qui vous aide à exécuter le code ReactJS sur votre système. Tout comme ReactJS, il est également open source. Le programme d'installation de Node.js inclut NPM (Node Package Manager), qui contient divers modules de nœud que les développeurs utilisent pour héberger et publier leurs propres modules dans des communautés open source. Ainsi, le nœud fonctionne côte à côte avec le registre NPM, ce qui facilite l'installation de tout package à l'aide de la CLI NPM. Le nœud regroupe en outre l'application ReactJS en un seul à l'aide de packs Web pour une installation facile.

Voici la procédure par étapes pour télécharger et installer Node.js :

1. Pour installer Node.js, rendez-vous sur https://nodejs.org/en/ .
2. En fonction de la version de votre système d'exploitation Windows, vous devez choisir un programme d'installation approprié.
3. La page d'accueil de Node.js recommande une version LTS en fonction de votre système d'exploitation. Cliquer dessus lancera automatiquement le téléchargement.
4. Vous trouverez le programme d'installation dans le dossier des téléchargements. Exécutez le programme d'installation.
5. Un assistant de configuration apparaîtra à l'écran, qui demandera le contrat de licence de l'utilisateur final. Acceptez les termes et conditions pour procéder à l'installation.
6. Ensuite, l'utilisateur doit sélectionner un dossier de destination avec le chemin par défaut du programme d'installation. Cliquez sur suivant pour continuer.
7. Le programme d'installation affiche ensuite les fonctionnalités qui seront installées et définit également les variables de chemin d'environnement à l'invite de commande. Cliquez sur suivant pour commencer l'installation.
8. Une fois l'installation terminée, vérifiez Node.js dans votre système à l'aide de l'invite de commande.
9. Tapez "node -v" dans l'invite de commande pour vérifier la version de Node.js installée.
10. Tapez "npm -v" dans l'invite de commande pour vérifier également l'installation de npm.

Installation de React

Après l'installation de Node.js, nous pouvons installer React JS sur Windows en utilisant deux techniques :

• Utilisation du pack Web et de Babel

1. Création du dossier racine

Avant d'installer ReactJS, créez un dossier racine avec le nom "reactFile" en utilisant les commandes suivantes dans l'invite de commande.

C:\Users\username\Desktop>mkdir reactFile

C:\Users\username\Desktop>cd reactFile

Après avoir créé le répertoire, générez un fichier package.json à l'aide de la commande suivante dans l'invite de commande. Un fichier package.json aide à créer des modules.

C:\Users\username\Desktop>reactFile> npm init

L'invite de commande demande alors des informations concernant le module ; ignorez-le en sélectionnant l'option "-y".

2. Installez React et react-dom

Installez les packages React et react-dom à l'aide des commandes npm suivantes et ajoutez les packages au fichier package.json à l'aide de la commande "-save".

C:\Users\username\Desktop>reactFile> npm install react –save

C:\Users\username\Desktop>reactFile> npm install react-dom –save

Explorez nos cours gratuits de développement de logiciels

3. Installez Webpack

Installez webpack, webpack-dev-server et webpack-cli à l'aide des commandes suivantes.

C:\Users\username\Desktop>reactFile> npm install webpack webpack-dev-server webpack-cli –save

4. Installez Babel

Babel est un transpileur qui convertit le code JavaScript en quelque chose que le navigateur comprend. Ainsi, l'installation de Babel et de ses plugins suivants, à savoir babel-loader, babel-preset-env, babel-preset-react et html-webpack-plugin, est très importante.

Utilisez la commande suivante pour installer tous les plugins babel en même temps.

C:\Users\username\Desktop\reactFile>npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin –save-dev

5. Créer des fichiers ReactJS

Pour terminer le processus d'installation, nous devons créer manuellement certains fichiers à l'aide de l'invite de commande.

C:\Users\username\Desktop\reactFile>type nul > index.html

C:\Users\username\Desktop\reactFile>type nul > App.js

C:\Users\username\Desktop\reactFile>type nul > main.js

C:\Users\username\Desktop\reactFile>type nul > webpack.config.js

C:\Users\username\Desktop\reactFile>type nul > .babelrc

6. Configurer le compilateur, les serveurs et les chargeurs

Une fois ces fichiers ReactJS créés dans le dossier "reactFile", vous pouvez préparer le serveur de déploiement en le configurant sur le port 8001 ou sur tout port de votre choix dans webpack.-config.js.

Utilisez le code suivant dans le fichier webpack-config.js,

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entrée : './main.js',

sortir: {

chemin : chemin.join(__dirname, '/bundle'),

nom de fichier : 'index_bundle.js'

},

devServer : {

en ligne : vrai,

port : 8001

},

module : {

règles: [

{

tester : /\.jsx?$/,

exclure : /node_modules/,

chargeur : 'babel-loader',

mettre en doute: {

préréglages : ['es2015', 'réagir']

}

}

]

},

plugins :[

nouveau plug-in HtmlWebpack({

modèle : './index.html'

})

]

}

7. Configuration de index.html

Dans index.html, écrivez un code HTML normal avec div id="app" comme élément racine, puis ajoutez le script index_bundle.js dans le corps HTML.

Compétences en développement de logiciels à la demande

8. Configurer App.js et main.js

Écrivez le composant React dans App.js pour restituer une classe ou une fonction. Insérez le texte que vous souhaitez rendre à l'intérieur du composant, qui apparaîtra sur le navigateur une fois compilé. Importez ensuite le composant dans notre élément racine App à l'intérieur du main.js afin que les résultats apparaissent sur le navigateur.

Créez un fichier « .babelrc » et insérez les lignes de code suivantes,

{

"préréglages": ["env", "réagir"]

}

9. Affichage du contenu sur la page Web

La configuration est enfin terminée et le serveur sera opérationnel une fois que vous aurez tapé la commande suivante dans l'invite de commande.

C:\Users\username\Desktop\reactFile>npm start

Dès que vous appuyez sur Entrée, le navigateur vous montrera le message que vous avez rendu à l'intérieur du composant.

• Utilisation de la commande create-react-app

1. Installer créer-réagir-app

Ouvrez l'invite de commande et écrivez le code suivant pour installer le create-react-app.

C:\Users\username\Desktop>npx create-react-app mon-application

Cette commande installe tous les fichiers et dossiers requis dans le dossier "my-app" de votre bureau. Cette seule ligne de code termine l'installation de React sur votre système en quelques minutes.

2. Exécutez le serveur

Allez à l'invite de commande et tapez

C:\Users\username\Desktop>cd my-app

C:\Users\Tutorialspoint\Desktop>mon-application> démarrage npm

Votre projet React est opérationnel sur votre navigateur à l'aide de localhost, qui héberge votre projet sur le port disponible.

Explorez nos cours populaires de génie logiciel

Conclusion

ReactJS a changé le jeu de développement frontal depuis sa sortie et est devenu l'une des bibliothèques JavaScript open source les plus populaires. Plusieurs entreprises, telles que Meta, Netflix et Slack, utilisent ReactJS. L'un des principaux avantages est la possibilité de réutiliser les composants pour rendre les modifications apportées à la page Web. Plusieurs applications React sont déployées sur Azure Web App à l'aide d'Azure DevOps. C'est l'une des compétences les plus recherchées dans l'industrie informatique actuellement.

Si vous êtes un développeur React, vous pouvez améliorer vos compétences en connaissant Azure DevOps grâce au programme de certificat avancé d'upGrad en DevOps de IIIT Bangalore . Le cours offre plus de 250 heures de modules d'apprentissage ainsi qu'un guide de préparation aux entretiens. Vous pourrez également assister à des sessions de mentorat de carrière avec des experts DevOps qui peuvent vous donner une feuille de route claire de ce que l'industrie attend. Vous recevez un certificat et le statut d'ancien de l'IIITB à la fin du cours, ce qui en fait un ajout exceptionnel à votre CV !