React 解释 — 它是什么，为什么需要它，以及如何正确设置
Source: Dev.to
请提供您希望翻译的正文内容，我将按照要求将其译成简体中文并保留原有的格式、Markdown 语法以及技术术语。
Introduction
Hey!
Before we start — have you ever built something with JavaScript and thought:
“Why is this getting so complicated so fast?”
You’re not alone. Every developer hits that wall.
That’s exactly why React exists. By the end of this post you’ll know what React is, why it matters, and how to get started with it the right way.
Let’s go.
1. 什么是 React?
React 是一个由 Facebook（现为 Meta）于 2013 年创建的 JavaScript 库。
它用于构建 用户界面——应用中用户看到并与之交互的部分。
React 并不取代 JavaScript。它本身是用 JavaScript 编写的，但它提供了一种更智能、更简洁的方式来构建复杂的 UI。
类比
| JavaScript | React |
|---|---|
| 原始原料——面粉、鸡蛋、黄油。你可以做蛋糕，但需要付出很多努力，过程很快会变得凌乱。 | 一个烘焙套件——所有东西都已组织、结构化，旨在让过程更快且更少出错。 |
| 相同的原料。 | 效果好得多。 |
Source: …
2. 为什么我们需要 React 而不是纯 JavaScript？
纯 JavaScript 能工作。你可以用它构建任何东西。但随着应用的增长，问题会逐渐显现。
真实案例
想象你正在构建一个社交媒体动态。你有：
- 一系列帖子
- 每个帖子的点赞按钮
- 当有人评论时会更新的评论计数
- 当有变化时会更新的通知铃铛
- 页面顶部的用户资料区
在纯 JavaScript 中，每次有变化时，你必须手动在 DOM 中找到相应的元素并更新它：
// Plain JavaScript — updating manually every time
document.getElementById("like-count").innerText = newCount;
document.getElementById("notification-bell").innerText = newNotifications;
document.getElementById("comment-count").innerText = newComments;现在想象为页面上 50 个不同的部分都这样操作。
代码会变得凌乱、变慢，而且一次小小的失误就可能导致整个页面崩溃。
React 通过一个核心理念——组件和虚拟 DOM——来解决这些问题。
Source: …
3. React 如何解决这个问题
组件
组件是 UI 的一个小型、可复用的片段。
与其编写一个巨大的 HTML 文件，你可以把页面拆分成独立的片段。
function LikeButton() {
return Like;
}
function Post() {
return (
<div>
<h2>This is a post</h2>
</div>
);
}每个组件管理自己的逻辑和显示。构建一次——随处使用。
虚拟 DOM
快速提问： 当你点击帖子上的“点赞”时——是应该重新加载整个页面，还是仅更新点赞计数？
显然只需要更新点赞计数。在纯 JavaScript 中，你必须自行判断并手动更新相应的元素。
React 使用 虚拟 DOM 自动处理此过程：
- React 在内存中保存真实 DOM 的副本——即虚拟 DOM。
- 当有变化时，React 会创建一个新的虚拟 DOM。
- 它比较旧的虚拟 DOM 与新的虚拟 DOM。
- 找出到底哪些地方发生了变化。
- 只在真实 DOM 中更新那一部分。
结果： 更新更快，工作量更少，无需手动寻找 DOM。
4. What Is a Single‑Page Application (SPA)?
在继续之前，你需要了解这个概念，因为 React 正是为它而构建的。
-
传统网站 在每次点击链接时都会重新加载整个页面。
- 你点击 “About” → 浏览器请求一个新的 HTML 页面 → 整个页面重新加载。
- 这是一种 多页应用 (Multi‑Page Application, MPA)。
-
单页应用 (Single‑Page Applications, SPAs) 在开始时只加载一个 HTML 页面。之后，React 接管。当你进行导航时，React 只替换屏幕上的内容——没有完整的页面刷新，也没有请求新的页面。
Analogy: 想象一台电视。当你换频道时，电视本身并不会重新启动；只有屏幕上播放的内容在变化。这正是 SPA 的工作方式。
Quick question
当你使用 Gmail 时，是否注意到打开邮件时页面从未完全重新加载？你只会看到邮件内容出现在右侧。那就是 SPA 正在发挥作用。
5. 单页应用 vs 多页应用
| 特性 | 单页应用 (SPA) | 多页应用 (MPA) |
|---|---|---|
| 工作原理 | 单个 HTML 文件，内容在屏幕上切换 | 每个路由对应独立的 HTML 页面 |
| 页面重新加载 | 导航时不进行完整刷新 | 每次导航都会完整刷新 |
| 加载后的速度 | 非常快 | 取决于服务器响应 |
| 首次加载 | 略慢（一次性加载所有内容） | 首次加载更快 |
| SEO | 需要额外的 SEO 设置 | 天然适合 SEO |
| 适用场景 | 仪表盘、应用、工具 | 博客、电子商务、内容站点 |
| 示例 | Gmail、Notion、Figma | 维基百科、新闻站点、Amazon |
6. 如何设置 React
有两种流行的方式来搭建 React 项目：
- Create React App (CRA)
- Vite
在你做出选择之前，让我们先了解这两种方式。
7. Create React App (CRA)
CRA 曾是启动 React 项目的官方方式，使用时间很长。只需运行一条命令，它就会为你配置好所有内容——React、Webpack、Babel 以及开发服务器。
npx create-react-app my-app
cd my-app
npm start就这么简单。你的 React 应用会运行在 [URL omitted]。
项目结构
my-app/
├─ node_modules/
├─ public/
│ └─ index.html
├─ src/
│ ├─ App.js
│ └─ index.js
└─ package.jsonsrc/App.js– 编写 React 代码的地方。public/index.html– React 注入的唯一 HTML 文件。
8. Vite
Vite 是一个更新、更快的构建工具。它并不是专门为 React 构建的，但对 React 支持得非常好，已成为当今大多数开发者的首选。
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev你的 React 应用运行在 [URL omitted]。
项目结构
my-app/
├─ node_modules/
├─ public/
├─ src/
│ ├─ App.jsx
│ └─ main.jsx
├─ index.html
├─ package.json
└─ vite.config.jsQuick Summary — 5 Things to Remember
- React 是一个用于构建用户界面的 JavaScript 库。
- 组件 让你将 UI 拆分为可重用、隔离的块。
- 虚拟 DOM 使 UI 更新快速且高效。
- 单页应用（SPA） 加载单个 HTML 页面，并在不进行完整刷新时切换内容。
- 你可以使用 Create React App 或 Vite（根据需求）来启动 React 项目。
使用可复用组件构建用户界面
React 解决了 DOM 问题——不需要手动更新页面，React 会找出变化的部分并仅使用 Virtual DOM 更新那一块。
React 为 SPA（单页应用）而生——页面只加载一次，随后在不进行完整页面刷新 的情况下切换内容，使其既快速又流畅。
SPA 与 MPA
- SPA 最适合应用程序和仪表盘。
- MPA 最适合内容丰富、需要开箱即用 SEO 的站点。
使用 Vite，而不是 CRA
- CRA 已被弃用。
- Vite 更快、更轻量，并且仍在积极维护。
- 对于今天的所有新 React 项目，它是正确的选择。
React 起初可能会感觉跨度很大。但一旦你理解了 组件、状态 以及 Virtual DOM 的工作原理——一切就会迎刃而解。
学习 React 的最佳方式是用它构建实际项目。
从小项目开始：计数器、待办事项列表、天气卡片。挑一个并实现它。
如果这篇文章帮助你更好地理解了 React，欢迎在下方留言。你打算先构建什么？
感谢阅读，继续创作。