srcmini上一章ReactJS实战教程请查看：ReactJS入门和版本介绍
在本节中，我们将学习如何为ReactJS应用程序的成功开发进行环境安装，以及相关React配置。
ReactJS安装和配置i的基本准备
- NodeJS和NPM
- React和React DOM
- Webpack
- Babel
安装ReactJS的方法
有两种方法可以为成功的ReactJS应用程序设置环境，它们列在下面。
- 使用npm命令
- 使用create-react-app命令
使用npm命令安装ReactJS
安装NodeJS和NPM
NodeJS和NPM是开发任何ReactJS应用程序所需的平台，你可以通过下面的链接安装NodeJS和NPM包管理器，这里推荐使用NodeJS包管理器nvm进行安装，简单快捷。
要验证NodeJS和NPM，使用如下图所示的命令。
安装React和React DOM
在桌面上或你想要的地方创建一个名为reactApp的根文件夹。在这里，我们在VSCode中创建它，你可以直接创建文件夹。
现在，你需要创建一个package.json文件。要创建任何模块，都需要在项目文件夹中生成一个package.json文件。为此，你需要运行如下图所示的命令。
创建package.json文件之后，你需要使用下面的npm命令在终端窗口中安装react及其DOM包，如下图所示。
reactApp>npm install react react-dom --save 
你还可以单独使用上面的命令，如下所示。
reactApp>npm install react --save
reactApp>npm install react-dom --save 安装Webpack
Webpack用于模块打包、开发和生产流水线自动化。我们将在开发期间使用webpack-dev-server, webpack用于创建产品构建，而webpack CLI提供了一组命令。Webpack将它们编译成一个文件(包)。要安装webpack，请使用如下图所示的命令。
reactApp>npm install webpack webpack-dev-server webpack-cli --save 
你还可以单独使用上面的命令，如下所示。
reactApp>npm install webpack --save
reactApp>npm install webpack-dev-server --save
reactApp>npm install webpack-cli --save 安装Babel
Babel是一个JavaScript编译器和编译器，用于将一个源代码转换成其他源代码。它编译React JSX和ES6到ES5 JavaScript，可以在所有浏览器上运行。我们需要用于JSX文件类型的Babel -loader，当代码发生任何更改时，Babel-preset-react使你的浏览器自动更新，而不会丢失应用程序的当前状态。ES6支持需要Babel -preset-env Babel预置。要安装webpack，请使用如下图所示的命令。
reactApp>npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin --save-dev 
你还可以单独使用上面的命令，如下所示。
reactApp>npm install babel-core --save-dev
reactApp>npm install babel-loader --save-dev
reactApp>npm install babel-preset-env --save-dev
reactApp>npm install babel-preset-react --save-dev
reactApp>npm install babel-webpack-plugin --save-dev 创建文件
要完成安装过程，需要在项目文件夹中添加以下文件，这些文件分别是index.html、App.js、main.js、webpack.config.js和.babelrc，你可以手动创建这些文件，或者使用命令提示符（unix下）。
reactApp>touch index.html
reactApp>touch App.js
reactApp>touch main.js
reactApp>touch webpack.config.js
reactApp>touch .babelrc 为React应用程序配置编译器、加载器和服务器
配置webpack
通过添加以下代码，你可以在webpack.config.js文件中配置webpack。它定义了你的应用入口点，构建输出和自动解析的扩展。它还将开发服务器设置为8080端口。它定义了用于处理应用程序中使用的各种文件类型的加载器，并通过添加开发过程中需要的插件来结束。
webpack.config.json
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: 8080
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
})
]
} 现在，打开package.json文件，在”script”对象中删除”test” “echo \” Error: no test specified\” && exit 1″，然后添加start和build命令，因为我们不会在这个app中执行任何测试。
{
"name": "reactApp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1"
},
"devDependencies": {
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.30.0"
}
} 用于index.html的webpack模板
我们可以使用HtmlWeb-packPlugin插件添加一个自定义模板来生成index.html，这使我们能够添加一个viewport标签来支持应用程序的移动响应缩放。它还设置div id = “app”作为应用程序的根元素，并添加index_bundl .js脚本，这是我们绑定的应用程序文件。
<!DOCTYPE html>
<html lang = "zh_CN">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = 'index_bundle.js'></script>
</body>
</html> App.jsx和main.js
这是第一个React组件，即app入口点，它会渲染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文件
创建一个名为.babelrc的文件，并将以下代码复制到该文件中。
.babelrc
{
"presets":[
"@babel/preset-env", "@babel/preset-react"]
} 运行服务器
完成安装过程并设置应用程序后，可以运行以下命令启动服务器。注意：使用以下命令之前有必要先运行npm install更新项目依赖，否则有可能报错。
reactApp>npm start 它将显示我们需要在浏览器中打开的端口号，打开它之后，你将看到以下输出。
npm build打包
现在，为你的应用程序生成绑定包，打包是将导入的文件合并成一个文件的过程，这个包可以包含一个网页，一次加载整个应用程序。要生成此命令，你需要在命令提示符中运行build命令，如下所示。
reactApp> npm run build 该命令将在当前文件夹(应用程序所属的文件夹)中生成bundle，如下图所示。
使用create-react-app命令
如果你不想使用webpack和babel来安装react，那么你可以选择create-react-app来安装react。“create-react-app”是Facebook自己维护的一个工具，这适合初学者，不需要手动处理诸如webpack和babel之类的转换工具。在本节中，我将向你展示如何使用CRA工具安装React。
安装NodeJS和NPM
NodeJS和NPM是开发任何ReactJS应用程序所需的平台，你可以通过下面的链接安装NodeJS和NPM包管理器。
安装React
你可以使用下面的命令使用npm包管理器安装React，没有必要担心React安装的复杂性，create-react-app npm包将处理它。
>npm install -g create-react-app 创建一个新的React项目
安装React之后，可以使用create-react-app命令创建一个新的React项目。在这里，这里的项目选择了jtp-reactapp名称。
>create-react-app jtp-reactapp 注意：你可以使用npx将上述两个步骤合并到一个命令中，npx是npm 5.2及以上版本的包运行器工具。
>npx create-react-app jtp-reactapp 上面的命令将安装react并创建一个名为jtp-reactapp的新项目。本应用程序默认包含一些主要子文件夹和文件，如下图所示。
现在，要开始，打开src文件夹并对所需的文件进行更改。默认情况下，src文件夹包含文件如下图所示：
例如，打开App.js并对其代码进行如下所示的更改。
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
欢迎来到srcmini!
<p>react项目开发，编辑src/App.js并保存以重新加载.</p>
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App; 注意：你也可以选择自己喜欢的代码编辑器来编辑你的项目，如Nodepad++或VSCode。
运行服务器
完成安装过程后，可以通过运行以下命令启动服务器。
>cd jtp-reactapp
Desktop/jtp-reactapp>npm start 它将显示我们需要在浏览器中打开的端口号，打开它之后，你将看到以下输出。
评论前必须登录！
注册