ReactJS - Configuration de l'environnement

Dans ce chapitre, nous allons vous montrer comment configurer un environnement pour un développement React réussi. Notez que de nombreuses étapes sont impliquées, mais cela aidera à accélérer le processus de développement plus tard. Nous aurons besoinNodeJS, donc si vous ne l'avez pas installé, vérifiez le lien dans le tableau suivant.

N ° Sr.	Logiciel et description
1	NodeJS and NPM NodeJS est la plate-forme nécessaire au développement de ReactJS. Consultez notre configuration de l'environnement NodeJS .

Après avoir installé avec succès NodeJS, nous pouvons commencer à installer React dessus en utilisant npm. Vous pouvez installer ReactJS de deux manières

Utilisation de webpack et babel.
En utilisant le create-react-app commander.

Installer ReactJS à l'aide de webpack et babel

Webpackest un bundler de modules (gère et charge des modules indépendants). Il prend des modules dépendants et les compile en un seul (fichier) bundle. Vous pouvez utiliser cet ensemble lors du développement d'applications à l'aide de la ligne de commande ou, en le configurant à l'aide du fichier webpack.config.

Babel est un compilateur et transpilateur JavaScript. Il est utilisé pour convertir un code source en un autre. En utilisant cela, vous pourrez utiliser les nouvelles fonctionnalités ES6 dans votre code où babel le convertit en un ancien ES5 qui peut être exécuté sur tous les navigateurs.

Étape 1 - Créez le dossier racine

Créer un dossier avec un nom reactApp sur le bureau pour installer tous les fichiers requis, à l'aide de la commande mkdir.

C:\Users\username\Desktop>mkdir reactApp
C:\Users\username\Desktop>cd reactApp

Pour créer un module, il est nécessaire de générer le package.jsonfichier. Par conséquent, après avoir créé le dossier, nous devons créer unpackage.jsonfichier. Pour ce faire, vous devez exécuter lenpm init commande à partir de l'invite de commande.

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

Cette commande demande des informations sur le module telles que le nom du pack, la description, l'auteur, etc., vous pouvez les ignorer en utilisant l'option –y.

C:\Users\username\Desktop\reactApp>npm init -y
Wrote to C:\reactApp\package.json:
{
   "name": "reactApp",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "ISC"
}

Étape 2 - Installez React et React Dom

Puisque notre tâche principale est d'installer ReactJS, installez-le, ainsi que ses packages dom, en utilisant install react et react-domcommandes de npm respectivement. Vous pouvez ajouter les packages que nous installons, àpackage.json fichier en utilisant le --save option.

C:\Users\Tutorialspoint\Desktop\reactApp>npm install react --save
C:\Users\Tutorialspoint\Desktop\reactApp>npm install react-dom --save

Ou, vous pouvez tous les installer en une seule commande comme -

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

Étape 3 - Installez Webpack

Puisque nous utilisons webpack pour générer le pack d'installation de bundler, webpack, webpack-dev-server et webpack-cli.

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

Ou, vous pouvez tous les installer en une seule commande comme -

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

Étape 4 - Installez babel

Installez babel et ses plugins babel-core, babel-loader, babel-preset-env, babel-preset-react et html-webpack-plugin

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

Ou, vous pouvez tous les installer en une seule commande comme -

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

Étape 5 - Créez les fichiers

Pour terminer l'installation, nous devons créer certains fichiers à savoir, index.html, App.js, main.js, webpack.config.js et,.babelrc. Vous pouvez créer ces fichiers manuellement ou, en utilisantcommand prompt.

C:\Users\username\Desktop\reactApp>type nul > index.html
C:\Users\username\Desktop\reactApp>type nul > App.js
C:\Users\username\Desktop\reactApp>type nul > main.js
C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
C:\Users\username\Desktop\reactApp>type nul > .babelrc

Étape 6 - Définir le compilateur, le serveur et les chargeurs

Ouvert webpack-config.jsfichier et ajoutez le code suivant. Nous définissons le point d'entrée Webpack sur main.js. Le chemin de sortie est l'endroit où l'application groupée sera diffusée. Nous configurons également le serveur de développement sur8001Port. Vous pouvez choisir le port de votre choix.

webpack.config.js

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

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8001
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

Ouvrez le package.json et supprimer "test" "echo \"Error: no test specified\" && exit 1" à l'intérieur "scripts"objet. Nous supprimons cette ligne car nous ne ferons aucun test dans ce tutoriel. Ajoutons lestart et build commandes à la place.

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Étape 7 - index.html

C'est juste du HTML ordinaire. Nous établissonsdiv id = "app" comme élément racine de notre application et en ajoutant index_bundle.js script, qui est notre fichier d'application fourni.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = 'index_bundle.js'></script>
   </body>
</html>

Étape 8 - App.jsx et main.js

C'est le premier composant React. Nous expliquerons en détail les composants React dans un chapitre suivant. Ce composant rendraHello World.

App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

Nous devons importer ce composant et le rendre à notre racine App élément, afin que nous puissions le voir dans le navigateur.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App />, document.getElementById('app'));

Note - Chaque fois que vous souhaitez utiliser quelque chose, vous devez importle premier. Si vous souhaitez rendre le composant utilisable dans d'autres parties de l'application, vous devezexport après sa création et importez-le dans le fichier où vous souhaitez l'utiliser.

Créer un fichier avec un nom .babelrc et copiez-y le contenu suivant.

{
   "presets":["env", "react"]
}

Étape 9 - Exécution du serveur

La configuration est terminée et nous pouvons démarrer le serveur en exécutant la commande suivante.

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

Il montrera le port que nous devons ouvrir dans le navigateur. Dans notre cas, c'esthttp://localhost:8001/. Après l'avoir ouvert, nous verrons la sortie suivante.

Étape 10 - Génération du bundle

Enfin, pour générer le bundle, vous devez exécuter la commande build dans l'invite de commande en tant que -

C:\Users\Tutorialspoint\Desktop\reactApp>npm run build

Cela générera le bundle dans le dossier actuel comme indiqué ci-dessous.

Utilisation de la commande create-react-app

Au lieu d'utiliser webpack et babel, vous pouvez installer ReactJS plus simplement en installant create-react-app.

Étape 1 - Installez create-react-app

Parcourez le bureau et installez l'application Create React à l'aide de l'invite de commande comme indiqué ci-dessous -

C:\Users\Tutorialspoint>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\Tutorialspoint\Desktop>npx create-react-app my-app

Cela créera un dossier nommé my-app sur le bureau et y installera tous les fichiers requis.

Étape 2 - Supprimez tous les fichiers source

Parcourez le dossier src dans le dossier my-app généré et supprimez tous les fichiers qu'il contient comme indiqué ci-dessous -

C:\Users\Tutorialspoint\Desktop>cd my-app/src
C:\Users\Tutorialspoint\Desktop\my-app\src>del *
C:\Users\Tutorialspoint\Desktop\my-app\src\*, Are you sure (Y/N)? y

Étape 3 - Ajouter des fichiers

Ajouter des fichiers avec des noms index.css et index.js dans le dossier src comme -

C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.css
C:\Users\Tutorialspoint\Desktop\my-app\src>type nul > index.js

Dans le fichier index.js, ajoutez le code suivant

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Étape 4 - Exécutez le projet

Enfin, exécutez le projet à l'aide de la commande start.

npm start

↰ Previous page Next page ↱

ReactJS - Configuration de l'environnement

Installer ReactJS à l'aide de webpack et babel

Étape 1 - Créez le dossier racine

Étape 2 - Installez React et React Dom

Étape 3 - Installez Webpack

Étape 4 - Installez babel

Étape 5 - Créez les fichiers

Étape 6 - Définir le compilateur, le serveur et les chargeurs

Étape 7 - index.html

Étape 8 - App.jsx et main.js

Étape 9 - Exécution du serveur

Étape 10 - Génération du bundle

Utilisation de la commande create-react-app

Étape 1 - Installez create-react-app

Étape 2 - Supprimez tous les fichiers source

Étape 3 - Ajouter des fichiers

Étape 4 - Exécutez le projet

Tutoriel ReactJS

Ressources utiles ReactJS