编辑这个页面须要登录或更高权限！

ReactJS 环境设置

在本章中，我们将向您展示如何为React开发成功设置环境。请注意，涉及到许多步骤，但这将有助于加快以后的开发过程。我们将需要NodeJS，因此如果您没有安装它，请检查下表中的链接。

序号软件和说明
1

NodeJS and NPM

NodeJS是ReactJS开发所需的平台。检查我们的NodeJS环境设置。

在成功安装NodeJS之后，我们可以开始使用npm安装React-on。您可以用两种方式安装ReactJS

  • 使用webpack和babel。

  • 使用create-react-app命令。

使用webpack和babel安装ReactJS

Webpack是一个模块捆绑器（管理和加载独立的模块）。它采用相关模块并将其编译为单个（文件）捆绑包。您可以在使用命令行或通过使用webpack.config文件配置应用程序开发应用程序时使用此捆绑包。

Babel是JavaScript编译器和编译器。它用于将一个源代码转换为其他源代码。使用此功能，您将能够在代码中使用ES6的新功能，而babel会将其转换为可以在所有浏览器上运行的普通ES5。

第1步-创建根文件夹

使用 mkdir 命令在桌面上创建一个名为 reactApp 的文件夹，以安装所有必需的文件。

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

要创建任何模块，都需要生成 package.json 文件。因此，在创建文件夹之后，需要创建 package.json 文件。为此，您需要从命令提示符运行 npm init 命令。

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

该命令询问有关模块的信息，例如软件包名称，描述，作者等。您可以使用 –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

因为我们的主要任务是安装 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

或者，您可以将它们全部安装在单个命令中，如下所示：

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步-创建文件

要完成安装，我们需要创建某些文件，即index.html，App.js，main.js，webpack.config.js和.babelrc。可以手动创建这些文件，也可以使用命令提示符创建这些文件。

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步-设置编译器，服务器和加载器

打开 webpack-config.js 文件并添加以下代码。我们将webpack入口点设置为main.js。输出路径是提供绑定应用的地方。我们还将开发服务器设置为8001端口。您也可以选择任何您想要的端口。

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。我们将设置div id = "app"为应用程序的根元素，并添加index_bundle.js脚本（捆绑的应用程序文件）。

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

我们需要导入该组件并将其呈现到我们的根App元素，以便我们可以在浏览器中看到它。

main.js

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

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

注意: 当你想要使用某样东西时，你需要先导入它。如果你想让组件在应用程序的其他部分可用，你需要在创建后导出它，并导入到你想要使用它的文件中。

创建一个具有名称的文件，.babelrc并将以下内容复制到该文件中。

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

步骤9-运行服务器

设置完成，我们可以通过运行以下命令来启动服务器。

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

它将显示我们需要在浏览器中打开的端口。在我们的情况下为http://localhost:8001/。打开它之后，我们将看到以下输出。

运行服务器

步骤10-生成包

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

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

这将在当前文件夹中生成分发包，如下所示。

产生捆绑

使用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

这将在桌面上创建一个名为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

运行项目

ReactJS 组件ReactJS 概述