ReactJS - 创建 React 应用程序

更新于 2025/3/23 8:22:17

正如我们之前所了解的，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

❮ ReactJS 架构 ReactJS JSX ❯

ReactJS 教程

Hooks

ReactJS 高级

其他概念

ReactJS 有用资源

ReactJS - 创建 React 应用程序

使用 Rollup 捆绑器

使用 Parcel 捆绑器

颜色选择器

读后有收获微信请站长喝咖啡

错误报告

您的建议:

感谢您的帮助！