React 下载安装配置
在本节中，我们将学习如何为成功开发ReactJS应用程序设置环境。
ReactJS的前提条件
NodeJS和NPM
React和ReactDOM
Webpack
Babel
安装ReactJS的方式
有两种方法可以为成功的ReactJS应用程序设置环境。它们在下面给出。
使用npm命令
使用create-react-app命令
1、使用npm命令
安装NodeJS和NPM
要验证NodeJS和NPM，请使用下图所示的命令。
安装React和React DOM
创建一个名为 root 的文件夹在桌面上或您想要的位置上使用reactApp 。在这里，我们在桌面上创建它。您可以直接创建文件夹，也可以使用下面给出的命令。
现在，您需要创建一个 package.json 文件。要创建任何模块，需要在项目文件夹中生成package.json文件。为此，您需要运行以下命令，如下图所示。
lidihuo@root:~/Desktop/reactApp> npm init-y
创建package.json文件后，需要安装在终端窗口中使用以下npm命令进行React及其DOM 程序包，如下图所示。
lidihuo@root:~/Desktop/reactApp>npm install react react-dom--save
您也可以单独使用上述命令，如下所示。
lidihuo@root:~/Desktop/reactApp>npm install react--save
lidihuo@root:~/Desktop/reactApp>npm install react-dom--save
安装Webpack
Webpack用于模块包装，开发和生产管道自动化。在开发过程中，我们将使用 webpack-dev-server ， webpack 创建生产版本，并且 webpack CLI 提供了一组命令。 Webpack将它们编译成一个文件(捆绑)。要安装webpack，请使用下图所示的命令。
lidihuo@root:~/Desktop/reactApp>npm install webpack webpack-dev-server webpack-cli--save
您还可以单独使用上述命令，如下所示。
lidihuo@root:~/Desktop/reactApp>npm install webpack--save
lidihuo@root:~/Desktop/reactApp>npm install webpack-dev-server--save
lidihuo@root:~/Desktop/reactApp>npm install webpack-cli--save
安装Babel
Babel是一个JavaScript编译器和编译器，用于将一个源代码转换为其他源代码。它编译了可在所有浏览器上运行的React JSX和ES6到ES5 JavaScript。我们需要 babel-loader 用于JSX文件类型， babel-preset-react 可以在代码发生任何更改时自动更新浏览器，而不会丢失应用程序的当前状态。 ES6支持需要 babel-preset-env Babel预设。要安装webpack，请使用下图所示的以下命令。
lidihuo@root:~/Desktop/reactApp>npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin--save-dev
您也可以单独使用上述命令，如下所示。
lidihuo@root:~/Desktop/reactApp>npm install babel-core--save-dev
lidihuo@root:~/Desktop/reactApp>npm install babel-loader--save-dev
lidihuo@root:~/Desktop/reactApp>npm install babel-preset-env--save-dev
lidihuo@root:~/Desktop/reactApp>npm install babel-preset-react--save-dev
lidihuo@root:~/Desktop/reactApp>npm install babel-webpack-plugin--save-dev
创建文件
要完成安装过程，您需要在项目文件夹中添加以下文件。这些文件是 index.html，App.js，main.js，webpack.config.js 和 .babelrc。。您可以手动创建这些文件，也可以使用命令提示符。
lidihuo@root:~/Desktop/reactApp>touch index.html
lidihuo@root:~/Desktop/reactApp>touch App.js
lidihuo@root:~/Desktop/reactApp>touch main.js
lidihuo@root:~/Desktop/reactApp>touch webpack.config.js
lidihuo@root:~/Desktop/reactApp>touch .babelrc
设置React应用程序的编译器，加载器和服务器
配置Webpack
您可以在webpack.config.js 文件，方法是添加以下代码。它定义了您的应用程序入口点，构建输出以及将自动解析的扩展名。还将开发服务器设置为 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 文件并删除 " test"" echo \"错误: 未指定测试\" &&退出1" 放入 "脚本" 对象中，然后添加开始和构建命令。这是因为我们不会在此应用中执行任何测试。
{
"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的HTML Webpack模板
我们可以使用 HtmlWeb-添加自定义模板以生成 index.html packPlugin 插件。这使我们能够添加视口标签以支持应用程序的移动响应缩放。还将 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>
App.jsx和main.js
这是第一个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文件
创建名称为 .babelrc 的文件并将以下代码复制到其中
.babelrc
{
"presets":[
"@babel/preset-env", "@babel/preset-react"]
}
运行服务器
完成安装过程并设置应用程序后，可以通过运行以下命令来启动服务器。
lidihuo@root:~/Desktop/reactApp>npm start
它将显示我们需要在浏览器中打开的端口号。打开它之后，您将看到以下输出。
生成捆绑包
现在，为您的应用生成捆绑包。捆绑是指跟踪导入的文件并将其合并为一个文件的过程: "捆绑"。然后可以将该捆绑文件包含在网页上以一次加载整个应用。要生成此文件，您需要在命令提示符下运行build命令，如下所示。
lidihuo@root:~/Desktop/reactApp> npm run build
此命令将在当前文件夹(您的应用所属的文件夹)中生成捆绑包，如下图所示。
2、使用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软件包管理器。
https: //www.lidihuo.com/install-nodejs-on-linux-ubuntu-centos
安装React
您可以使用npm软件包管理器来安装React下面的命令。无需担心React安装的复杂性。 create-react-app npm软件包将负责处理此问题。
lidihuo@root:~/>npm install-g create-react-app
创建一个新的React项目
安装React之后，您可以使用create-react-app命令创建一个新的React项目。在这里，我为项目选择 jtp-reactapp 名称。
lidihuo@root:~/>create-react-app jtp-reactapp
注意: 注意: 您可以使用npx在单个命令中结合上述两个步骤。 npx是npm 5.2及更高版本随附的打包运行程序工具。
lidihuo@root:~/>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>
Welcome To lidihuo.
<p>To get started, edit src/App.js and save to reload.</p>
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
注意: 注意: 您还可以选择自己喜欢的代码编辑器来编辑项目。但就我而言，我选择Eclipse。使用下面的链接，您可以下载Eclipse for Ubuntu并进行安装。
运行服务器
完成安装过程后，可以通过运行以下命令来启动服务器。
lidihuo@root:~/Desktop>cd jtp-reactapp
lidihuo@root:~/Desktop/jtp-reactapp>npm start
它将显示我们需要在浏览器中打开的端口号。打开它之后，您将看到以下输出。
