ReactJS 菜鸟教程
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
