ReactJS - 创建 React 应用

正如我们之前了解到的，React 库可用于简单和复杂的应用程序。简单的应用程序通常在其脚本部分包含 React 库。在复杂的应用程序中，开发人员必须将代码拆分成多个文件并将代码组织成标准结构。在这里，React 工具链提供预定义的结构来引导应用程序。此外，开发人员可以自由使用他们自己的项目结构来组织代码。

让我们看看如何创建简单和复杂的 React 应用程序：

使用 Rollup 打包器

Rollup 是一个小型且快速的 JavaScript 打包器。让我们在本节中学习如何使用 Rollup 打包器。

以下是使用 Rollup 打包器创建应用程序的步骤：

步骤 1 - 打开终端并进入您的工作区。

cd /go/to/your/workspace

步骤 2 - 接下来，创建一个文件夹 expense-manager-rollup 并移动到新创建的文件夹。同时，在您喜欢的编辑器或 IDE 中打开该文件夹。

mkdir expense-manager-rollup 
cd expense-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 [email protected] @rollup/plugin-babel 
@rollup/plugin-commonjs @rollup/plugin-node-resolve 
@rollup/plugin-replace rollup-plugin-livereload 
rollup-plugin-postcss rollup-plugin-serve [email protected] 
postcss-modules@4 rollup-plugin-postcss

接下来，为异步编程安装 corejs 和 regenerator runtime。

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 文件来配置 rollup 打包器。

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 组件。我们的想法是创建两个文件，`.js` 来编写组件逻辑和 `` 来包含组件特定的样式。

应用程序的最终结构如下：

|-- 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 命令将在源代码更改时重新编译代码，并在浏览器中重新加载更改。

> [email protected] build /path/to/your/workspace/expense-manager-rollup 
> rollup -c 
rollup v2.36.1 
bundles src/index.js → dist\index.js... 
LiveReload enabled 
https://127.0.0.1:10001 -> /path/to/your/workspace/expense-manager-rollup/dist 
created dist\index.js in 4.7s 

waiting for changes...

打开浏览器并在地址栏中输入 https://127.0.0.1:3000 并按 Enter 键。serve 应用程序将提供我们的网页，如下所示。

使用 Parcel 打包器

Parcel 是一个快速且零配置的打包器。它只需要应用程序的入口点，它将自己解析依赖项并打包应用程序。让我们在本节中学习如何使用 Parcel 打包器。

步骤 1 - 首先，安装 Parcel 打包器。

npm install -g parcel-bundler

然后，打开终端并进入您的工作区。

cd /go/to/your/workspace

步骤 2 - 接下来，创建一个文件夹 expense-manager-parcel 并移动到新创建的文件夹。同时，在您喜欢的编辑器或 IDE 中打开该文件夹。

mkdir expense-manager-parcel 
cd expense-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 命令。它将立即捆绑和提供应用程序服务。它会在源代码更改时重新编译，并在浏览器中重新加载更改。

> [email protected] dev /go/to/your/workspace/expense-manager-parcel 
> parcel index.html Server running at https://127.0.0.1:1234 
√ Built in 10.41s.

打开浏览器并在地址栏中输入 https://127.0.0.1:1234 并按 Enter 键。

要创建应用程序的生产包以将其部署到生产服务器，请使用 build 命令。它将在 dist 文件夹下生成一个包含所有捆绑源代码的 index.js 文件。

npm run build
> [email protected] 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

打印页面