后端开发教程 - Java、Spring Boot 实战 - msg200.com
React 教程：初学者综合指南（2023）
通过本课程学习 React 并构建这个待办事项项目。
你想学习 React 并从零开始构建 Web 应用并部署吗？那么，本课程正适合你！
本 React 教程将帮助初学者了解 React 概念以及如何实现它们来构建高性能的 React 应用程序。
对于当今的开发者来说，学习 React 是一个绝佳的选择。许多初创公司和大型企业都直接或间接地通过 Next.js、Gatsby 等框架采用了这项技术，用于构建高性能、可扩展且可维护的 Web 应用程序。
为什么你应该参加这门课程
以下是你应该学习 React 的一些原因：
- 您将在短时间内构建理想的应用程序。与许多其他框架/库相比，React 的学习曲线更短。
- React 拥有庞大而强大的社区。你几乎不会遇到找不到成熟解决方案的问题。
- 如果您想开发移动应用程序，您可以轻松过渡到使用 React native 构建原生应用程序。
- React 很有名并且很受欢迎。
先决条件
为了学习本课程，我们希望您熟悉以下主题：
- HTML 和 CSS
- JavaScript 基础知识，例如对象、数组、条件等
- JavaScript ES6 功能，如箭头函数、对象解构等。
如果你还在学习 JavaScript，别担心！你可以一边阅读，一边跟着我们一起写 React 应用程序。我们会用最浅显易懂的语言解释每一段代码。
在本 React 教程课程结束时，我们的工具箱中将包含以下 React 项目：
本课程旨在全面讲解 React。因此，我们将学习历程划分为几个系列，本课程为第一部分。
现在，我们可以开始了！
什么是 React？
React（有时也称为 React.js）是一个源自 Facebook 的 JavaScript 库，用于构建交互式用户界面（UI）。它允许开发者通过集成一小段独立的代码片段来创建大型 Web 应用或复杂的 UI。
React.js 在某些方面通常被称为框架，因为它的行为和构建成熟应用程序的能力。然而，从技术上讲，它是一个库；它需要更多库来构建复杂的解决方案。例如，我们需要额外的库来解决标准的应用程序需求，例如路由、数据获取等。另一方面，像 AngularJS、Vue.js 和 Ember.js 这样的 JavaScript 框架几乎包含了构建完整应用程序所需的所有内容。
声明式编程和 React
来自原始 JavaScript，给出div如下 HTML 容器：
<body>
<div id="root"></div>
</body>
我们可以在脚本文件中div写入以下代码来渲染一个段落：
const root = document.getElementById('root');
const paragraph = document.createElement('p');
const paragraphContent = document.createTextNode("I'm a paragraph!");
paragraph.appendChild(paragraphContent);
root.appendChild(paragraph);
在上面的代码中，我们说：
- 获取
div具有 root 的元素id。 - 创建一个
p元素。 - 为元素创建一个文本节点
p。 - 将文本添加到
p元素 p最后，在中添加元素div。
当我们向编译器提供执行任务（在我们的例子中是更新 UI）的分步说明时，我们使用命令式编程风格。然而，React 允许我们以声明式的方式描述我们想要的内容，而不是提供具体步骤，它会自行决定如何完成任务。
因为我们只关心渲染p元素，所以我们需要做的就是渲染如下内容：
<p>I'm a paragraph!</p>
声明式方法将有助于加快开发过程，因为我们不会编写代码指令来告诉编译器如何执行任务。
React 组件的思考
为了使用 React 构建应用程序，我们将用户界面视为一堆封装、隔离且可重用的代码片段，称为组件。
现在，将组件视为一个简单的函数，我们可以通过一些输入来调用它并呈现一些输出。
正如我们可以复用函数一样，我们也可以复用组件，合并它们并创建复杂的用户界面。让我们看一下我们主要项目的 UI：
为了使用 React 构建此应用程序或任何其他应用程序（即使像 Twitter 一样复杂），我们首先将用户界面分解为更小且封装的单元，如图所示。
每个单元都是一个组件，负责完成一项任务。在图中，我们标记了各个组件，使其与以下组件名称相对应：
- TodoApp：父组件或根组件。它包含两个直接子组件。
- 标题：显示待办事项标题文本。
- TodosLogic：包含应用程序逻辑。它包含两个直接子组件。
- InputTodo：将接受用户的输入。
- TodosList：作为待办事项的容器。
- TodoItem：呈现单个待办事项项目。
我们看到，用户界面由六个组件组成。如果任何组件变得复杂，我们可以进一步将其分解成更小的组件。例如，我们可以将TodoItem分解成更小的组件：一个包含复选框，一个包含待办事项的文本，最后一个包含编辑和删除按钮。
这种模块化有助于确保我们构建灵活且可维护的应用程序。
在课程的后续部分，我们将在开始使用多页面路由时添加更多组件。在此之前，我们将使用上面提到的组件。
React 虚拟 DOM
在构建 Web 应用程序时，我们经常会执行一些操作来操纵浏览器的 DOM。例如，使用 DOM API，我们可以添加或删除页面元素、修改其外观以及对元素执行一些操作。
这些 DOM 操作更轻量且非常快。然而，当 UI 状态发生变化时，它会触发重新渲染，这可能会很昂贵！
以下代码使用 JavaScript 模拟重新渲染页面：
const update = () => {
// JavaScript
const element2 = `
<h3>JavaScript:</h3>
<form>
<input type="text"/>
</form>
<span>Time: ${new Date().toLocaleTimeString()}</span>
`;
document.querySelector('#root2').innerHTML = element2;
};
setInterval(update, 1000);
回调setInterval()允许我们每秒触发一次用户界面的模拟重新渲染。如下所示，DOM 元素在每次更新时都会重新绘制。文本输入字段也会因为这种重新渲染而丢失其状态：
您可以在 Codepen 上看到该演示。
上面 GIF 中的重新渲染行为需要优化。不同的 JavaScript 框架都有各自的解决方案和策略来优化重新渲染。对于 React，团队部署了虚拟 DOM 的概念。
探索 React 虚拟 DOM
顾名思义，虚拟 DOM 是实际 DOM 的“虚拟”表示。React 使用它来复制真实 DOM，从而高效地优化重新渲染。
React 部署了虚拟 DOM 的概念，因为它符合其声明式方法，使我们能够编写更可预测的代码。使用虚拟 DOM，我们无需担心状态转换。一旦 UI 状态更新，React 会确保只有受影响的节点在实际 DOM 中得到更新。
React 如何实现虚拟 DOM
当我们渲染 React 应用程序的 UI 时，会创建一个代表该 UI 的虚拟 DOM 树并保存在内存中。下次更新时，React 将创建一个新的虚拟 DOM 树，并使用 diffing 算法将其与上一个快照进行比较，以检测必要的更改。这个过程称为协调 (reconciliation)。
之后，React 将使用渲染库来更新已渲染的应用程序。该库将确保真实的 DOM 仅接收并重新绘制更新的节点。
将 React 添加到 HTML 页面
让我们看看 React 如何处理重新渲染，与上面的原生 JavaScript 示例相比有何不同。我们将 React 添加到 HTML 页面的某个部分。
下面的 HTML 代码包括一个div用于保存 React 内容的容器元素和两个指向 React CDN 的脚本。
<body>
<h1>React in HTML</h1>
<!-- React container -->
<div id="root1"></div>
<!-- React scripts -->
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<!-- load script file. -->
<script src="script.js"></script>
</body>
接下来，在脚本文件中，我们将添加以下 React js 代码：
const rootElement = document.querySelector('#root1');
const root = ReactDOM.createRoot(rootElement);
const update = () => {
const element1 = React.createElement(
'div',
null,
React.createElement(
'form',
null,
React.createElement('input', {
type: 'text',
})
),
React.createElement(
'span',
null,
'Time: ',
new Date().toLocaleTimeString()
)
);
root.render(element1);
};
setInterval(update, 1000);
我们先忽略该update函数的大部分内容；稍后再讨论。在代码的其他部分，我们访问了 HTML 文件中包含的 DOM 元素，然后使用它创建了一个 React 应用程序：
const rootElement = document.querySelector('#root1');
const root = ReactDOM.createRoot(rootElement);
React 使用来确保真实 DOM 只接收并重绘必要的内容。然后，我们在 DOM 内部ReactDOM渲染了分配给 的内容：element1
root.render(element1);
我们渲染的内容称为React 元素。它们描述了我们在屏幕上看到的内容。如果我们在浏览器控制台中打印 React 元素：
let element1 = React.createElement(
// ...
);
console.log(element1)
我们将得到一个代表虚拟 DOM 的对象：
每当我们渲染 React 元素时，React 都会创建这个对象并将其保存在内存中的某个位置。如果渲染过程中发生更改，React 还会创建一个新的虚拟 DOM 树，并将其与之前的快照进行比较，以确定发生了哪些更改。
React 之所以能快速完成这项工作，是因为虚拟 DOM（代表 UI 的对象）的创建成本非常低，而且不像实际的 DOM 那样绘制用户界面。React 完成必要的更新后，会确保真实 DOM 接收并重新绘制更新后的节点。
下面的 GIF 演示了该行为：
可以看到，每次重新渲染时，只有状态发生变化的渲染时间会被重新绘制。同样，当 UI 状态发生变化时，输入值也不会丢失。请参阅Codepen 上的代码和演示。
您可以在本文中阅读有关虚拟 DOM 的更多信息。
React Element 和 JSX
之前，我们了解了如何渲染 React 元素来描述用户界面。使用 React 语法，我们可以完成一个 React 应用程序。然而，React 提供了一种更直接的方式来描述用户界面。
如果我们看一下上面 GIF 中的 HTML DOM 结构，我们会得到如下内容：
<div>
<form>
<input type="text" />
</form>
<span>Time: ##:##:## PM</span>
</div>
如果我们将代码复制并粘贴到Babel repl 编辑器中，我们将获得之前使用过的等效 React 元素：
使用 Babel，我们可以将编辑器左侧的代码转换为 React 右侧能够理解的代码。由于左侧的代码看起来更直观、更熟悉，因此 React 允许我们使用这种语法来构建 UI，而无需编写复杂的 React 元素。
如果我们用熟悉的语法更新上一节中的 React 代码示例，我们将得到以下内容：
let element1 = (
<div>
<form>
<input type="text" />
</form>
<span>Time: {new Date().toLocaleTimeString()}</span>
</div>
);
并且该应用程序也可以运行。
那么，为什么我们要用 HTML 替换 JavaScript/React 代码呢？你可能会问！因为在 React 中，上面的代码不是 HTML，而是 JSX。
什么是 JSX？
正如我们上面所见，编写 JavaScript/React 代码来描述 UI 并不简单。这使得 React 作者不得不创建类似于 HTML 的 JavaScript 版本，称为 JSX 或 JavaScript XML。
JSX 是 JavaScript 的一种语法扩展，它提供了一种更简便的用户界面描述方式。由于浏览器无法读取 JSX 代码，因此在运行时，JSX 会被转换为常规的 JavaScript 版本。在整个 React.js 教程系列中，我们将使用 JSX 来描述项目的 UI。
关于 JSX 的一些注意事项：
- 我们可以通过花括号在 JSX 内编写有效的 JavaScript 表达式
{}。 - 元素的属性和事件处理程序始终采用驼峰命名法。少数例外情况是
aria-*和data-*属性必须使用小写。
设置工作环境
我们已经介绍了如何通过在 HTML 文件中编写 React 代码来快速与 React 交互。在本节中，我们将为生产级应用程序准备开发环境。我们将使用create-react-app CLI 等工具链搭建开发环境，构建Vite等工具，并介绍如何从头开始搭建项目。
CLIcreate-react-app
CLIcreate-react-app捆绑了普通开发者启动 React 应用程序所需的一切。它包含 React 以及我们需要的其他第三方库，例如 Webpack 和 Babel，它们让我们能够使用 JSX 和现代 JavaScript 特性。
要安装 CLI，我们必须在机器上安装 Node 才能访问 NPM（Node 包管理器）工具。
在终端中运行
node -v和 ，npm -v分别检查是否安装了 node 和 npm。确保 node>=14.0.0 且 npm>=5.6
如果您尚未安装它们，请前往 Node下载并安装最新的稳定版本。
接下来，cd进入一个目录来保存项目。例如，cd Desktop运行：
npx create-react-app react-todo-app
此命令创建一个react-todo-app项目文件夹，并包含所有启动文件。让我们用代码编辑器打开该文件夹：
cd react-todo-app
code .
在本项目中，我们使用 Visual Studio Code。您也可以使用自己喜欢的代码编辑器。
我们将看到如下所示的文件结构：
react-todo-app
├── node_modules
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── reportWebVitals.js
│ └── setupTest.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
项目文件夹内
包含node_modules项目依赖项的文件，包括react和其他第三方库。该public文件夹包含我们应用程序的公共资源；它是静态文件所在的位置。文件夹index.html中public包含一个div容器元素，我们的应用程序将在其中显示。
该src文件夹包含工作文件。目录index.js中的文件src将作为我们应用程序的入口点。
我们先忽略文件夹中的其他文件src，一切从头开始编写。该.gitignore文件列出了提交到代码库时需要忽略的目录和文件。它ReadME.md旨在提供有关项目的说明。最后，package.json它包含项目的元信息。此外，它还包含项目依赖项列表和一些有用的脚本命令。
运行开发服务器
如果我们打开package.json文件并查找scripts属性，我们将看到一个脚本命令列表：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
我们使用该npm run ####命令运行任何脚本，其中####是脚本名称。我们可以忽略run命令中的start和test脚本。
要启动开发服务器，我们将运行以下命令：
npm run start
#or
npm start
该应用程序应在浏览器窗口的3000端口上自动启动。如果没有任何反应，请localhost:3000在浏览器地址栏中访问 以查看默认应用程序。
我们可以使用 来停止开发服务器Ctrl + c。
Vite 的工作环境
Vite 是一款构建工具，可用于设置 React 项目。与create-react-appCLI 相比，它提供更快的安装速度和即时服务器启动时间。这使得它成为大多数开发者创建 React 项目的首选解决方案。查看 npm 趋势create-react-app：
我们来设置一下吧。
从终端，让我们运行以下命令并按照提示进行操作：
npm create vite@latest
我们将输入项目名称（例如react-todo-app），然后从框架列表中选择React ：
系统将提示我们在JavaScript和TypeScript之间选择一个变体。我们选择JavaScript。
完成后，让我们cd进入项目文件夹并运行npm install以在本地文件夹中安装必要的依赖项node_modules。
cd react-todo-app
npm install
让我们用代码编辑器打开项目：
code .
然后，打开该package.json文件可以看到如下脚本：
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
正如我们之前所了解的，我们可以通过运行 来启动开发服务器（在本例中）npm run dev。应用程序应该会在浏览器窗口中的可用端口上自动启动。如果没有任何反应，请检查终端并访问其中打印的 URL：
Create React App 与 Vite：比较文件夹结构
与 CRA 类似，srcVite 项目内的文件夹也包含工作文件。但是，CRA 使用index.js文件作为入口点，而 Vite 使用main.jsx。
对于文件扩展名，CRA 比较宽松，因为它允许.js和.jsx文件都编写 React JSX 代码。但 Vite.jsx默认要求文件必须包含 JSX 代码。在本课程中，我们将使用 Vite 创建项目。不过，您也可以使用自己喜欢的解决方案继续学习。
从头开始设置 React 环境
如果不使用 Vite 和 CRA 等工具，构建 React 应用程序需要额外的努力。我们将安装并配置一些工具在后台为我们安装的库。
虽然大多数情况下，我们会使用 create-react-app CLI、Vite 或其他一些解决方案来启动 React 项目。然而，有时我们的项目可能需要一些简单的设置，其中一些可用的工具可能包含我们不需要的东西。
例如，它create-react-app添加了很多抽象，使得在不弹出应用程序的情况下添加自定义构建配置变得非常困难。因此，了解如何设置项目以实现灵活性是明智之举。让我们开始吧！
创建文件夹并初始化项目
创建一个项目文件夹，cd进入其中，并使用代码编辑器打开它：
mkdir react-project-no-cra
cd react-project-no-cra
code .
之后，运行npm init -y生成一个package.json文件。这让我们可以添加脚本并跟踪项目依赖关系。
安装依赖项
我们首先安装两个基本的 React 依赖项：react，这是实际的库，以及react-dom，它让我们将 React 与 DOM 一起使用。
npm install react react-dom
接下来，我们需要一个像 Webpack 这样的打包工具来打包我们的代码及其依赖项，以及一个像 Babel 这样的编译器来将我们的代码转换为所有浏览器都能理解的代码。我们将这两个包及其相关的依赖项作为开发依赖项进行安装。
从 Webpack 开始，让我们运行以下命令：
npm install --save-dev webpack webpack-cli webpack-dev-server
然后，让我们也添加 babel：
npm install --save-dev @babel/core babel-loader @babel/preset-react @babel/preset-env
接下来，我们将安装一个插件来帮助将 Webpack 捆绑文件添加到 HTML 文件中：
npm install --save-dev html-webpack-plugin
配置 Webpack
由于开发环境和生产环境的目标不同，Webpack 允许我们创建针对不同环境的配置文件，并另设一个文件来维护通用配置。这意味着我们将在项目根目录中创建三个文件：webpack.common.js、webpack.dev.js和webpack.prod.js。
在中webpack.common.js，我们添加通用配置：
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
clean: true,
},
plugins: [
new HTMLWebpackPlugin({
template: './src/index.html',
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{ loader: 'babel-loader' }],
},
],
},
};
为了将通用配置包含在特定于环境的配置（即开发和生产）中，我们将安装一个名为的实用程序webpack-merge。
npm install --save-dev webpack-merge
现在打开webpack.dev.js文件，并添加特定于设备的配置：
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
port: 3001,
open: true,
hot: true,
compress: true,
},
});
然后，在文件中添加以下内容webpack.prod.js：
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
});
保存所有文件。
module.exports在该文件的对象中webpack.common.js，我们指定了一个entry选项，告诉 Webpack 从哪里开始构建打包文件。因此，让我们src/index.js在项目根目录中创建一个文件；稍后我们将向该文件中添加代码。该output对象就是我们告诉 Webpack 输出打包文件的位置。
这HTMLWebpackPlugin允许我们使用自定义 HTML 模板，它会为我们注入所有必要的打包文件。让我们创建一个src/index.html并添加以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>React application</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
这里的重点是根div容器。与我们之前在 HTML 中编写 React 的方式类似，我们将访问这个 DOM 元素来显示我们的应用程序。
配置文件module.rules中允许我们设置模块规则。我们告诉 Webpack 如何使用它们babel-loader来转译 JavaScript 文件。此外，我们还需要向 Babel 加载器提供进一步的指令来执行该任务。
让我们.babelrc在项目根目录中创建一个名为 babel 配置文件并添加以下代码：
{
"presets": [
"@babel/preset-env",
["@babel/preset-react", {
"runtime" : "automatic"
}]
]
}
现在，Webpack 已配置为运行 React 应用程序。
定义脚本
接下来，我们将修改文件中的脚本package.json以使用配置文件。让我们更新脚本，使其具有以下内容：
"scripts": {
"start": "webpack serve --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
保存文件。
渲染 React 代码
在运行脚本之前，让我们打开src/index.js文件并添加以下代码：
import React from 'react';
import ReactDOM from 'react-dom/client';
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<h1>Hello from React application</h1>);
与我们之前在 HTML 文件中渲染 React 元素的方式类似，上面的代码在根容器中渲染了一个简单的 JSX 元素。在这里，我们导入了React和 ，而ReactDOM不是从它们各自的 CDN 加载它们。
该语句是 ES6 的一项功能，它允许我们从各自的模块中
import引入React和对象。ReactDOM
如果我们保存所有文件并运行npm start，则项目应在指定端口3001 的浏览器窗口中自动启动。
如果我们尝试该命令，项目根目录中将会生成npm run build一个可用于生产的文件夹。dist
处理其他文件
在我们的 中module.rules，我们只添加了针对 JavaScript/JSX 文件的规则。让我们告诉 Webpack 如何处理其他文件类型。
资产文件：
如果我们添加一个src/images/react.svg文件，然后导入它来渲染图像，src/index.js看起来如下：
// ...
import reactLogo from './images/react.svg';
root.render(
<div>
<h1>Hello from React application</h1>
<img src={reactLogo} className="logo react" alt="React logo" />
</div>
);
如果我们启动服务器，我们将会收到错误。
我们需要更新module.rules以webpack.common.js包含资产资源类型：
module: {
rules: [
// ...
{
test: /\.(png|svg|jpg|gif)$/i,
type: 'asset/resource',
},
],
},
然后，更新output对象以包含assetModuleFilename：
output: {
// ...
assetModuleFilename: 'images/\[name\][ext][query]',
},
CSS 文件：
如果我们添加一个src/styles/app.css文件并包含如下 CSS 规则：
body {
color: #ff2778;
}
之后，在src/index.js文件中导入CSS文件：
import './styles/app.css';
如果运行开发服务器，我们会收到错误。同样，我们需要告知 Webpack 用于转换 CSS 文件的 loader 类型。因此，让我们安装以下内容：
npm install --save-dev mini-css-extract-plugin css-loader
在webpack.common.js文件中，MiniCssExtractPlugin像这样在顶部导入：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
之后，将插件添加到plugins数组中：
plugins: [
// ...
new MiniCssExtractPlugin({
filename: 'styles.css',
}),
],
然后，更新module.rules以使用加载器，如下所示：
module: {
rules: [
// ...
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
如果我们保存所有文件并测试我们的工作，它应该可以工作！
做得好！
由此可见，从头搭建开发环境可能非常繁琐。不过，这应该是一个一次性的设置，你可以在其他 React 项目中重复使用。你可以在这个 GitHub 仓库中找到源代码。
同样，我们经常会使用
create-react-app命令或 Vite 或基于 React 的框架来启动一个新的 React 项目。
第一课就是这样。
我们已经为构建出色的 React 应用程序和成为一名 React 开发者奠定了基础。希望您已经学到了一些关于 React 的新知识。值得一提的是，这只是 React 系列教程的预告。
在下一部分中，您将了解 React 组件和数据模型，并开始实现它们来构建 React 项目。
如果您喜欢阅读这篇文章，请花点时间在 Twitter 上关注 Ibas，这样您就可以了解所有 Web 开发技巧和窍门。