ReactJS 環(huán)境設(shè)置

在本章中，我們將向您展示如何為React開發(fā)成功設(shè)置環(huán)境。請注意，涉及到許多步驟，但這將有助于加快以后的開發(fā)過程。我們將需要NodeJS，因此如果您沒有安裝它，請檢查下表中的鏈接。

序號	軟件和說明
1	NodeJS and NPM NodeJS是ReactJS開發(fā)所需的平臺。檢查我們的NodeJS環(huán)境設(shè)置。

在成功安裝NodeJS之后，我們可以開始使用npm安裝React-on。您可以用兩種方式安裝ReactJS

• 使用webpack和babel。

• 使用create-react-app命令。

使用webpack和babel安裝ReactJS

Webpack是一個模塊捆綁器（管理和加載獨立的模塊）。它采用相關(guān)模塊并將其編譯為單個（文件）捆綁包。您可以在使用命令行或通過使用webpack.config文件配置應(yīng)用程序開發(fā)應(yīng)用程序時使用此捆綁包。

Babel是JavaScript編譯器和編譯器。它用于將一個源代碼轉(zhuǎn)換為其他源代碼。使用此功能，您將能夠在代碼中使用ES6的新功能，而babel會將其轉(zhuǎn)換為可以在所有瀏覽器上運行的普通ES5。

第1步-創(chuàng)建根文件夾

使用 mkdir 命令在桌面上創(chuàng)建一個名為 reactApp 的文件夾，以安裝所有必需的文件。

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

要創(chuàng)建任何模塊，都需要生成 package.json 文件。因此，在創(chuàng)建文件夾之后，需要創(chuàng)建 package.json 文件。為此，您需要從命令提示符運行 npm init 命令。

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

該命令詢問有關(guān)模塊的信息，例如軟件包名稱，描述，作者等。您可以使用 –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"
}

第2步-安裝React和React dom

因為我們的主要任務(wù)是安裝 ReactJS，安裝它和它的 dom 包，分別使用 npm 的 install react 和 react-dom 命令。可以使用 -- save 選項將我們安裝的軟件包添加到 package.json 文件中。

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

或者，您可以將它們?nèi)堪惭b在單個命令中，如下所示：

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

第3步-安裝Webpack

由于我們使用webpack生成捆綁程序，因此請安裝webpack，webpack-dev-server和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

或者，您可以在單個命令中安裝所有這些程序，如:

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

步驟4-安裝Babel

安裝babel及其插件babel-core，babel-loader，babel-preset-env，babel-preset-react和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

或者，您可以在單個命令中安裝所有這些程序，如-

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

第5步-創(chuàng)建文件

要完成安裝，我們需要創(chuàng)建某些文件，即index.html，App.js，main.js，webpack.config.js和.babelrc?？梢允謩觿?chuàng)建這些文件，也可以使用命令提示符創(chuàng)建這些文件。

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

第6步-設(shè)置編譯器，服務(wù)器和加載器

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

打開 package.json 并在“ scripts”對象中刪除 "test" "echo \"Error: no test specified\" && exit 1"。我們正在刪除這一行，因為我們不會在本教程中做任何測試。讓我們添加 start 和 build 命令。

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

第7步-index.html

這只是普通的HTML。我們將設(shè)置div id = "app"為應(yīng)用程序的根元素，并添加index_bundle.js腳本（捆綁的應(yīng)用程序文件）。

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

第8步-App.jsx和main.js

這是第一個React組件。我們將在下一章中深入解釋React組件。此組件將渲染Hello World。

App.js

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

我們需要導(dǎo)入該組件并將其呈現(xiàn)到我們的根App元素，以便我們可以在瀏覽器中看到它。

main.js

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

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

創(chuàng)建一個具有名稱的文件，.babelrc并將以下內(nèi)容復(fù)制到該文件中。

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

步驟9-運行服務(wù)器

設(shè)置完成，我們可以通過運行以下命令來啟動服務(wù)器。

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

它將顯示我們需要在瀏覽器中打開的端口。在我們的情況下為http://localhost:8001/。打開它之后，我們將看到以下輸出。

步驟10-生成包

最后，要生成捆綁包，您需要在命令提示符下運行build命令，如下所示：

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

這將在當前文件夾中生成分發(fā)包，如下所示。

使用create-react-app命令

除了使用webpack和babel之外，您還可以通過安裝create-react-app來更簡單地安裝ReactJS。

第1步-安裝create-react-app

瀏覽桌面并使用命令提示符安裝Create React App，如下所示-

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

這將在桌面上創(chuàng)建一個名為my-app的文件夾，并在其中安裝所有必需的文件。

第2步-刪除所有源文件

瀏覽生成的my-app文件夾中的src文件夾，并刪除其中的所有文件，如下所示-

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

第3步-添加文件

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

C:\Users\nhooo\Desktop\my-app\src>type nul > index.css
C:\Users\nhooo\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