ReactJS - 创建 React 应用程序
正如我们之前所了解的，React 库既可用于简单应用程序，也可用于复杂应用程序。简单应用程序通常在其脚本部分中包含 React 库。在复杂应用程序中，开发人员必须将代码拆分为多个文件，并将代码组织成标准结构。在这里，React 工具链提供了预定义的结构来引导应用程序。此外，开发人员可以自由使用自己的项目结构来组织代码。
让我们看看如何创建简单和复杂的 React 应用程序 −
使用 Rollup 捆绑器
Rollup 是一款小巧快速的 JavaScript 捆绑器。让我们在本章中学习如何使用 Rollup Bundler。
以下是使用 Rollup Bundler 创建应用程序的步骤 −
步骤 1 − 打开终端并转到您的工作区。
cd /go/to/your/workspace
步骤 2 − 接下来，创建一个文件夹 expense-manager-rollup 并移动到新创建的文件夹。另外，在您最喜欢的编辑器或 IDE 中打开该文件夹。
mkdir fee-manager-rollup cd fee-manager-rollup
然后，创建并初始化项目。
npm init -y
步骤 3 −要安装 React 库(react 和 react-dom)，请按照以下命令操作。
npm install react@^17.0.0 react-dom@^17.0.0 --save
然后使用以下命令安装 babel 及其预设库作为开发依赖项。
npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D
接下来，安装 rollup 及其插件库作为开发依赖项。
npm i -D rollup postcss@8.1 @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-livereload rollup-plugin-postcss rollup-plugin-serve postcss@8.1 postcss-modules@4 rollup-plugin-postcss
接下来，安装 corejs 和 regenerator 运行时，用于异步编程。
npm i regenerator-runtime core-js
步骤 4 − 稍后，在根文件夹下创建一个 babel 配置文件 .babelrc，用于配置 babel 编译器。
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": "> 0.25%, not dead"
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
rollup.config.js:
接下来，在根文件夹中创建一个 rollup.config.js 文件来配置汇总捆绑器。
import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';
import postcss from 'rollup-plugin-postcss'
export default {
input: 'src/index.js',
output: {
file: 'public/index.js',
format: 'iife',
},
plugins: [
commonjs({
include: [
'node_modules/**',
],
exclude: [
'node_modules/process-es6/**',
],
}),
resolve(),
babel({
exclude: 'node_modules/**'
}),
replace({
'process.env.NODE_ENV': JSON.stringify('production'),
}),
postcss({
autoModules: true
}),
livereload('public'),
serve({
contentBase: 'public',
port: 3000,
open: true,
}), // index.html should be in root of project
]
}
package.json
接下来，更新 package.json 并包含我们的入口点 (public/index.js 和 public/styles.css) 以及用于构建和运行应用程序的命令。
...
"main": "public/index.js",
"style": "public/styles.css",
"files": [
"public"
],
"scripts": {
"start": "rollup -c -w",
"build": "rollup"
},
...
步骤 5 − 接下来，在应用程序的根目录中创建一个 src 文件夹，该文件夹将保存应用程序的所有源代码。
接下来，在 src 下创建一个文件夹 components 以包含我们的 React 组件。我们的想法是创建两个文件，<component>.js 来编写组件逻辑，<component.css> 来包含组件特定的样式。
应用程序的最终结构将如下所示 −
|-- package-lock.json |-- package.json |-- rollup.config.js |-- .babelrc `-- public |-- index.html `-- src |-- index.js `-- components | |-- mycom.js | |-- mycom.css
现在，让我们创建一个新组件 HelloWorld 来确认我们的设置运行正常。
HelloWorld.js
在 components 文件夹下创建一个文件 HelloWorld.js，并编写一个简单的组件来发出 Hello World 消息。
import React from "react";
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
export default HelloWorld;
index.js
接下来，在 src 文件夹下创建我们的主要文件 index.js，并调用我们新创建的组件。
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(
<React.StrictMode>
<HelloWorld />
</React.StrictMode>,
document.getElementById('root')
);
在根目录中创建一个 public 文件夹。
index.html
接下来，创建一个 html 文件 index.html(在 public 文件夹* 下)，它将是我们应用程序的入口点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Expense Manager :: Rollup version</title>
</head>
<body>
<div id="root"></div>
<script type="text/JavaScript" src="./index.js"></script>
</body>
</html>
最后，构建并运行应用程序。
npm start
npm build 命令将执行 rollup 并将我们的应用程序捆绑到单个文件 dist/index.js 中，并开始为应用程序提供服务。dev 命令将在源代码更改时重新编译代码，并在浏览器中重新加载更改。
> expense-manager-rollup@1.0.0 build /path/to/your/workspace/expense-manager-rollup > rollup -c rollup v2.36.1 bundles src/index.js → dist\index.js... LiveReload enabled http://localhost:10001 -> /path/to/your/workspace/expense-manager-rollup/dist created dist\index.js in 4.7s waiting for changes...
打开浏览器，在地址栏中输入 http://localhost:3000，然后按 Enter。serve 应用程序将提供我们的网页，如下所示。
使用 Parcel 捆绑器
Parcel 是零配置的快速捆绑器。它只需要应用程序的入口点，它将自行解析依赖项并捆绑应用程序。让我们在本章中学习如何使用 parcel 捆绑器。
步骤 1 −首先，安装 parcel bundler。
npm install -g parcel-bundler
然后，打开终端并转到您的工作区。
cd /go/to/your/workspace
步骤 2 − 接下来，创建一个文件夹 expense-manager-parcel 并移动到新创建的文件夹。此外，在您最喜欢的编辑器或 IDE 中打开该文件夹。
mkdir fee-manager-parcel cd fee-manager-parcel
使用以下命令创建并初始化项目。
npm init -y
步骤 3 −安装 React 库(react 和 react-dom)。
npm install react@^17.0.0 react-dom@^17.0.0 --save
安装 babel 及其预设库作为开发依赖项。
npm install @babel/preset-env @babel/preset-react @babel/core @babel/plugin-proposal-class-properties -D
然后，在根文件夹下创建一个 babel 配置文件 .babelrc 来配置 babel 编译器。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
步骤 4 − 更新 package.json 并包含我们的入口点 (src/index.js) 以及用于构建和运行应用程序的命令。
...
"main": "src/index.js",
"scripts": {
"start": "parcel public/index.html",
"build": "parcel build public/index.html --out-dir dist"
},
...
步骤 5 − 在应用程序的根目录中创建一个 src 文件夹，该文件夹将保存应用程序的所有源代码。
接下来，在 src 下创建一个文件夹 components 以包含我们的 React 组件。我们的想法是创建两个文件，<component>.js 来编写组件逻辑，<component.css> 来包含组件特定的样式。
应用程序的最终结构将如下所示 −
|-- package-lock.json |-- package.json |-- .babelrc `-- public |-- index.html `-- src |-- index.js `-- components | |-- mycom.js | |-- mycom.css
让我们创建一个新组件 HelloWorld 来确认我们的设置运行正常。在 components 文件夹下创建一个文件 HelloWorld.js，并编写一个简单的组件来 发出 Hello World 消息。
HelloWorld.js
import React from "react";
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
export default HelloWorld;
index.js
现在，在 src 文件夹下创建我们的主要文件 index.js，并调用我们新创建的组件。
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
ReactDOM.render(
<React.StrictMode>
<HelloWorld />
</React.StrictMode>,
document.getElementById('root')
);
接下来，在根目录中创建一个 public 文件夹。
index.html
创建一个 html 文件 index.html(在 public 文件夹中)，它将成为我们应用程序的入口点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Expense Manager :: Parcel version</title>
</head>
<body>
<div id="root"></div>
<script type="text/JavaScript" src="../src/index.js"></script>
</body>
</html>
最后，构建并运行应用程序。
npm start
npm build 命令将执行 parcel 命令。它将动态捆绑并提供应用程序。每当源代码发生更改时，它都会重新编译，并在浏览器中重新加载更改。
> expense-manager-parcel@1.0.0 dev /go/to/your/workspace/expense-manager-parcel > parcel index.html Server running at http://localhost:1234 √ Built in 10.41s.
打开浏览器，在地址栏中输入 http://localhost:1234，然后按 Enter。
要创建应用程序的生产包以将其部署到生产服务器中，请使用 build 命令。它将在 dist 文件夹下生成一个包含所有捆绑源代码的 index.js 文件。
npm run build > expense-manager-parcel@1.0.0 build /go/to/your/workspace/expense-manager-parcel > parcel build index.html --out-dir dist &sqrt; Built in 6.42s. dist\src.80621d09.js.map 270.23 KB 79ms dist\src.80621d09.js 131.49 KB 4.67s dist\index.html 221 B 1.63s
