React环境安装和配置完全解读 – ReactJS实战教程

上一章ReactJS实战教程请查看：ReactJS入门和版本介绍
在本节中，我们将学习如何为ReactJS应用程序的成功开发进行环境安装，以及相关React配置。
ReactJS安装和配置i的基本准备

NodeJS和NPM
React和React DOM
Webpack
Babel

安装ReactJS的方法【React环境安装和配置完全解读 – ReactJS实战教程】有两种方法可以为成功的ReactJS应用程序设置环境，它们列在下面。

使用npm命令
使用create-react-app命令

使用npm命令安装ReactJS安装NodeJS和NPM
NodeJS和NPM是开发任何ReactJS应用程序所需的平台，你可以通过下面的链接安装NodeJS和NPM包管理器，这里推荐使用NodeJS包管理器nvm进行安装，简单快捷。

OS X使用nvm安装NodeJS和NPM
windows使用nvm安装NodeJS和NPM

要验证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 = 'http://www.srcmini.com/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包管理器。

OS X使用nvm安装NodeJS和NPM
windows使用nvm安装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=http://www.srcmini.com/{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。
运行服务器
完成安装过程后，可以通过运行以下命令启动服务器。