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 reactAppPour 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 initCette 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 --saveOu, 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 --saveOu, 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-devOu, 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 startIl 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 buildCela 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-appCela 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.jsDans 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