ReactJS - 创建 React 应用程序

上一页
下一页

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

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

使用 Rollup bundler

Rollup 是小而快速的 JavaScript 打包器之一。在本章中，让我们学习如何使用 rollup bundler。

以下是使用 Rollup bundler 创建应用程序的步骤 -

步骤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 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 文件以配置 rollup bundler。


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用于编写组件逻辑，<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

创建一个文件，HelloWorld.js components 文件夹下，并编写一个简单的组件来发出 Hello World 消息。


import React from "react";

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

index.js

接下来，创建我们的主文件，index.js src 文件夹下并调用我们新创建的组件。


import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
	 	<React.StrictMode>
	 	 	 <HelloWorld />
	 	</React.StrictMode>,
	 	document.getElementById('root')
);

在根目录中创建一个公用文件夹。

index.html

接下来，创建一个 html 文件，index.html（在 public folder* 下），这将是应用程序的入口点。


<!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，然后按回车键。SERVE 应用程序将为我们的网页提供服务，如下所示。

世界您好

使用 Parcel bundler

包裹是零配置的快速打包机。它只期望应用程序的入口点，它将解决依赖项本身并捆绑应用程序。在本章中，让我们学习如何使用包裹打包器。

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

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 组件。这个想法是创建两个文件，<组件>.js用于编写组件逻辑，<component.css>用于包含组件特定样式。

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


|-- package-lock.json
|-- package.json
|-- .babelrc
`-- public
	 	|-- index.html
`-- src
	 	|-- index.js
	 	`-- components
	 	| 	|-- mycom.js
	 	| 	|-- mycom.css

让我们创建一个新组件 HelloWorld，以确认我们的设置运行正常。创建一个文件，HelloWorld.js components 文件夹下，并编写一个简单的组件来发出 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

现在，创建我们的主文件，index.js src 文件夹下并调用我们新创建的组件。


import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

ReactDOM.render(
	 	<React.StrictMode>
	 	 	 <HelloWorld />
	 	</React.StrictMode>,
	 	document.getElementById('root')
);

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

index.html

创建一个 html 文件，index.html（在公共文件夹中），这将是应用程序的入口点。


<!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

&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
打印本页
上一页
下一页