配置环境ReactJS

In questa sezione, vi mostreremo come configurare con successo l'ambiente per React. Si prega di notare che ci sono molti passaggi, ma questo aiuterà a velocizzare il processo di sviluppo futuro. Avremo bisogno di NodeJS, quindi se non l'avete installato, controllate i link nella tabella sottostante.

Dopo aver installato con successo NodeJS, possiamo iniziare a installare ReactJS utilizzando npm. Puoi installare ReactJS in due modi

• Usa webpack e babel.

• Usacreate-react-appcomando.

Installare ReactJS utilizzando webpack e babel

WebpackÈ un bundler di moduli (gestisce e carica moduli indipendenti). Assorbe moduli correlati e li compila in un singolo (file) bundle. Puoi usarlo per sviluppare applicazioni utilizzando la riga di comando o configurando l'applicazione attraverso il file webpack.config.js.

Babel è un compilatore JavaScript e un compilatore. Serve a trasformare un codice sorgente in un altro codice sorgente. Utilizzando questa funzione, potrai utilizzare le nuove funzionalità di ES6 nel codice e Babel le trasformerà in codice ES5 che può essere eseguito su tutti i browser.

Passo 1 - Creare la cartella principale

Usa il comando mkdir per creare una cartella chiamata reactApp sulla scrivania per installare tutti i file necessari.

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

Per creare qualsiasi modulo, è necessario generare il file package.json. Pertanto, dopo aver creato la cartella, è necessario creare il file package.json. Per fare questo, devi eseguire il comando npm init dalla riga di comando.

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

Il comando chiede informazioni sul modulo, come il nome del pacchetto, la descrizione, l'autore ecc. Puoi usare l'opzione –y per saltare queste informazioni.

C:\Users\username\Desktop\reactApp>npm init -y
Scritto in C:\reactApp\package.json:
{
　　　"name": "reactApp",
　　　"version": "1.0.0",
　　　"description": "",
　　　"main": "index.js",
　　　"scripts": {
　　　　　　"test": "echo \
　　　},
　　　"keywords": [],
　　　"author": "",
　　　"license": "ISC"
}

Passo 2 - Installare React e React dom

Poiché il nostro compito principale è installare ReactJS, installarlo e il suo pacchetto dom separatamente utilizzando i comandi npm install react e react-dom. Può utilizzare l'opzione --save per aggiungere i pacchetti installati al file package.json.

C:\Utenti\w3codebox\Desktop\reactApp>npm install react --save
C:\Utenti\w3codebox\Desktop\reactApp>npm install react-dom --save

Ora, può installare tutti questi con un singolo comando, come ad esempio:

C:\Utenti\w3codebox\Desktop\reactApp>npm install react react-dom --save

Passo 3 - Installare Webpack

Poiché utilizziamo webpack per generare bundle, è necessario installare webpack, webpack-dev-server e webpack-cli.

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

Ora, può installare tutti questi programmi con un singolo comando, come:

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

Passo 4 - Installare Babel

Installare babel e i suoi plugin babel-core, babel-loader, babel-preset-env, babel-preset-react e html-webpack-plugin

C:\Utenti\username\Desktop\reactApp>npm install babel-core --save-dev
C:\Utenti\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

O, puoi installare tutti questi programmi in un singolo comando, come -

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

Passo 5 - Creazione dei file

Per completare l'installazione, dobbiamo creare alcuni file, ovvero index.html, App.js, main.js, webpack.config.js e .babelrcPuoi creare questi file manualmente o utilizzando il prompt dei comandi.

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

Passo 6 - Impostazione del compilatore, del server e dei 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'
　　　　　　)
　　　]
}

Apri package.json e elimina nel'oggetto "scripts" "test" "echo \"Error: no test specified\" && exit 1". Stiamo rimuovendo questa riga perché non faremo alcun test in questo tutorial. Aggiungiamo i comandi start e build.

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

Passo 7 - index.html

Questo è un comune HTML. Stiamo configurandodiv id = "app"Per l'elemento radice dell'applicazione e aggiungiindex_bundle.jsScript (file applicazione compresso).

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

Passo 8 - App.jsx e main.js

Questo è il primo componente React. Inizieremo a spiegare i componenti React nel prossimo capitolo. Questo componente verrà渲染.

App.js

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

Dobbiamo importare il componente e presentarlo al nostro rootAppun elemento, in modo che possiamo vederlo nel browser.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));

Crea un file con nome.babelrce copia il seguente contenuto in quel file.

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

Passo 9 - Eseguire il server

Dopo aver completato la configurazione, possiamo avviare il server eseguendo il seguente comando.

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

Questo mostrerà la porta che dobbiamo aprire nel browser. Nel nostro caso èhttp://localhost:8001/. Dopo averlo aperto, vedremo i seguenti output.

Passo 10 - Generare il pacchetto

Infine, per generare il pacchetto, devi eseguire il comando build nel prompt dei comandi, come indicato di seguito:

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

Questo creerà un pacchetto di distribuzione nella cartella corrente, come indicato di seguito.

utilizzando il comando create-react-app

Oltre a utilizzare webpack e babel, puoi anche installarecreate-react-appper installare ReactJS in modo più semplice.

Passo 1 - Installare create-react-app

Sfoglia l'area desktop e installa Create React App utilizzando il prompt dei comandi, come indicato di seguito-

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

这将在桌面上创建一个名为my-app的文件夹，并在其中安装所有必需的文件。

第2步-删除所有源文件

浏览生成的my-app文件夹中的src文件夹，并删除其中的所有文件，如下所示-

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

第3步-添加文件

在src文件夹中添加具有名称index.css和index.js文件的文件-

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

在index.js文件中添加以下代码

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

步骤4-运行项目

最后，使用start命令运行项目。

npm start