ReactJS - 创建 React 应用程序

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

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

使用 Rollup 捆绑器

Rollup是小型且快速的 JavaScript 捆绑器之一。让我们在本章中学习如何使用 rollup 捆绑器。

打开终端并转到您的工作区。

cd /go/to/your/workspace

接下来，创建一个文件夹，expense-manager-rollup并移至新创建的文件夹。另外，在您喜欢的编辑器或 IDE 中打开该文件夹。

mkdir expense-manager-rollup 
cd expense-manager-rollup

接下来，创建并初始化项目。

npm init -y

接下来，安装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

接下来，在根文件夹下创建一个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 捆绑程序。

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并包含我们的入口点（public/index.js 和 public/styles.css）以及用于构建和运行应用程序的命令。

...
"main": "public/index.js",
"style": "public/styles.css",
"files": [
   "public"
],
"scripts": {
   "start": "rollup -c -w",
   "build": "rollup"
},
...

接下来，在应用程序的根目录中创建一个 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来确认我们的设置工作正常。在 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;

接下来，在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')
);

接下来，在根目录中创建一个公用文件夹。

接下来，创建一个 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命令将执行汇总并将我们的应用程序捆绑到单个文件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并按回车键。服务应用程序将为我们的网页提供服务，如下所示。

你好世界

使用包裹捆绑器

Parcel是零配置的快速捆绑器。它只需要应用程序的入口点，它将解决依赖关系本身并捆绑应用程序。本章让我们学习如何使用parcelbundler。

首先，安装包裹捆绑器。

npm install -g parcel-bundler

打开终端并转到您的工作区。

cd /go/to/your/workspace

接下来，创建一个文件夹，expense-manager-parcel并移至新创建的文件夹。另外，在您喜欢的编辑器或 IDE 中打开该文件夹。

mkdir expense-manager-parcel 
cd expense-manager-parcel

接下来，创建并初始化项目。

npm init -y

接下来，安装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"
   ]
}

接下来，更新 package.json 并包含我们的入口点 (src/index.js) 以及用于构建和运行应用程序的命令。

... 
"main": "src/index.js", 
"scripts": {
   "start": "parcel public/index.html",
   "build": "parcel build public/index.html --out-dir dist" 
},
...

接下来，在应用程序的根目录中创建一个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消息。

import React from "react";

class HelloWorld extends React.Component {
   render() {
      return (
         <div>
            <h1>Hello World!</h1>
         </div>
      );
   }
}
export default HelloWorld;

接下来，在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')
);

接下来，在根目录中创建一个公用文件夹。

接下来，创建一个 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并按回车键。

你好世界

要创建应用程序的生产包以将其部署在生产服务器中，请使用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

√  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