React 标准 SPA 项目 入门学习记录

一、React 是什么？

React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库。它采用组件化思想，让 UI 开发更高效、可复用、易维护。

核心特点：

• 组件化开发
• 虚拟 DOM（高性能）
• 单向数据流
• JSX 语法（JavaScript + HTML）

二、标准 React SPA 项目

SPA（Single Page Application）单页应用，整个应用只有一个 HTML 页面（通常是 index.html）。
页面切换时，不刷新整个页面，而是通过 JavaScript 动态替换部分内容（如使用 React Router）。
用户体验更流畅，类似原生 App。首次加载会下载所有（或大部分）JS/CSS 资源，后续路由跳转无需重新请求 HTML。

标准项目结构如下：

my-react-app/
├── public/
│   └── index.html          ← 唯一的 HTML 入口（SPA 核心）
├── src/
│   ├── App.jsx             ← 根组件
│   ├── main.jsx            ← 应用入口（渲染到 #root）
│   ├── components/         ← 可复用 UI 组件
│   ├── pages/              ← 页面级组件（配合路由）
│   ├── hooks/              ← 自定义 Hook
│   ├── assets/             ← 图片、字体等静态资源
│   └── index.css           ← 全局样式
├── package