Configuration de l'environnement ReactJS

Dans ce chapitre, nous vous montrerons comment configurer avec succès l'environnement pour le développement de React. Notez que cela implique de nombreux étapes, mais cela aidera à accélérer le processus de développement futur. Nous aurons besoin de NodeJS, donc si vous ne l'avez pas installé, veuillez vérifier les liens dans le tableau suivant.

Après l'installation réussie de NodeJS, nous pouvons commencer à utiliser npm pour installer React-on. Vous pouvez installer ReactJS de deux manières

• Utilisez webpack et babel.

• UtilisezEn plus d'utiliser webpack et babel, vous pouvez également installer-codebox\Desktop>npx　create-codebox\Desktop>cd　mycommande.

Installer ReactJS en utilisant webpack et babel

Webpackest un bundler de modules (gestion et chargement de modules indépendants). Il prend les modules pertinents et les compile en un seul (fichier) bundle. Vous pouvez utiliser ce bundle pour développer une application en utilisant la ligne de commande ou en configurant l'application via le fichier webpack.config.

Babel est un compilateur JavaScript et un compilateur. Il est utilisé pour convertir un code source en un autre code source. En utilisant cette fonctionnalité, vous pourrez utiliser ES6de nouvelles fonctionnalités, et Babel les convertit en code ES5。

N)?　y1Étape-Créer le dossier racine

Utilisez la commande mkdir pour créer un dossier nommé reactApp sur le bureau pour installer tous les fichiers nécessaires.

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

Pour créer tout module, vous devez générer le fichier package.json. Par conséquent, après avoir créé le dossier, vous devez créer le fichier package.json. Pour cela, vous devez exécuter la commande npm init à 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 paquet, la description, l'auteur, etc. Vous pouvez utiliser l'option –y pour ignorer ces informations.

C:\Users\username\Desktop\reactApp>npm init　-y
Written 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"
}

N)?　y2Étape-Installer React et React dom

Comme notre tâche principale est l'installation de ReactJS, nous installons ReactJS et son paquet dom respectivement en utilisant npm install react et react-commande dom. Vous pouvez utiliser -- save option ajoute les paquets installés à la fichier package.json.

C:\Users\w3codebox\Desktop\reactApp>npm install react　--enregistrer
C:\Users\w3codebox\Desktop\reactApp>npm install react-dom　--enregistrer

Ou, vous pouvez les installer tous en une seule commande, comme montré ci-dessous:

C:\Utilisateurs\username\Dossier\reactApp>npm　install　react　react-dom　--enregistrer

N)?　y3Étape-Installer Webpack

Puisque nous utilisons webpack pour générer les packages, veuillez installer webpack, webpack-dev-serveur et webpack-cli.

C:\Utilisateurs\username\Dossier\reactApp>npm　install　webpack　--enregistrer
C:\Utilisateurs\username\Dossier\reactApp>npm　install　webpack-dev-server　--enregistrer
C:\Utilisateurs\username\Dossier\reactApp>npm　install　webpack-cli　--enregistrer

Ou, vous pouvez installer tous ces programmes en une seule commande, comme:

C:\Utilisateurs\username\Dossier\reactApp>npm　install　webpack　webpack-dev-serveur　webpack-cli　--enregistrer

Étapes4-Installer Babel

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

C:\Utilisateurs\username\Dossier\reactApp>npm　install　babel-core　--enregistrer-dev
C:\Utilisateurs\username\Dossier\reactApp>npm　install　babel-loader　--enregistrer-dev
C:\Utilisateurs\username\Dossier\reactApp>npm　install　babel-preset-env　--enregistrer-dev
C:\Utilisateurs\username\Dossier\reactApp>npm　install　babel-preset-codebox\Desktop>npx　create　--enregistrer-dev
C:\Utilisateurs\username\Dossier\reactApp>npm　install　html-webpack-plugin　--enregistrer-dev

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

C:\Utilisateurs\username\Dossier\reactApp>npm　install　babel-core　babel-loader　babel-preset-env　
　　　babel-preset-react　html-webpack-plugin　--enregistrer-dev

N)?　y5Étape-Créer des fichiers

Pour terminer l'installation, nous devons créer certains fichiers, à savoir index.html, App.js, main.js, webpack.config.js et .babelrcIl est possible de créer ces fichiers manuellement, ou d'utiliser le prompt de commande pour le faire.

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

N)?　y6Étape-Set compiler, server, and loader

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'
　　　　　　}
　　　]
}

Open package.json and delete in the "scripts" object "test" "echo \"Error: no test specified\" && exit" 1". We are removing this line because we will not be doing any testing in this tutorial. Let's add the start and build commands.

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

N)?　y7Étape-index.html

This is just ordinary HTML. We will setdiv id = "app"as the root element of the application, and addindex_bundle.jsScript (bundled application file).

<!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>

N)?　y8Étape-App.jsx et main.js

C'est le premier composant React. Nous allons expliquer en détail les composants React au prochain chapitre. Ce composant va rendreHello 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 dans notre racineAppé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'));

Créez un fichier nommé.babelrcet copiez le contenu suivant dans ce fichier.

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

Étapes9-Démarrer le serveur

Une fois configuré, nous pouvons démarrer le serveur en exécutant la commande suivante.

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

Il affichera le port que nous devons ouvrir dans le navigateur. Dans notre cas, c'esthttp://localhost:8001/Après l'ouverture, nous verrons les sorties suivantes.

Étapes10-Générer le paquet

Enfin, pour générer le bundle, vous devez exécuter la commande build dans leinvite de commande, comme suit :

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

Cela générera un paquet de distribution dans le répertoire courant, comme suit.

Pour générer un paquet de distribution dans le dossier courant, comme suit.-codebox\Desktop>npx　create-Utilisez create

commande appEn plus d'utiliser webpack et babel, vous pouvez également installer-codebox\Desktop>npx　create-codebox\Desktop>cd　mycreate

N)?　y1Étape-Pour installer ReactJS de manière plus simple.-codebox\Desktop>npx　create-codebox\Desktop>cd　my

Installer create-

C:\Users\w3Parcourir le bureau et installer Create React App avec la commande invite à exécuter, comme suit3codebox>cd　C:\Users\w
C:\Users\w3codebox\Desktop\-codebox\Desktop>npx　create-react-codebox\Desktop>cd　my

app my-Cela créera un dossier nommé my sur le bureau

N)?　y2Étape-Le dossier app, et installez tous les fichiers nécessaires à l'intérieur.

Supprimez tous les fichiers source-Parcourir les fichiers générés my-

C:\Users\w3Le dossier src dans le dossier app, et supprimez tous les fichiers qu'il contient, comme suit-codebox\Desktop>cd　my/app
C:\Users\w3codebox\Desktop\my-src　*
C:\Users\w3codebox\Desktop\my-app\src>del*app\src\/,　Are　you　sure　(Y

N)?　y3Étape-Ajouter un fichier

Ajoutez un fichier nommé dans le dossier srcindex.cssetindex.jsLe fichier du fichier-

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

Ajoutez le code suivant dans le fichier index.js

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

Étapes4-Exécuter le projet

Enfin, exécutez la commande start pour exécuter le projet.

npm start