React基础-第一章：React 简介与开发环境搭建
📘 第一章：React 简介与开发环境搭建
1. 什么是 React？
React 是一个由 Facebook（现 Meta）开发并维护的前端 JavaScript 库，用于构建用户界面，尤其是单页应用（SPA）。
✅ 核心特点：
- 组件化开发：把 UI 拆分成独立可复用的组件。
- 声明式编程：你描述“想要什么”，而不是一步步操作 DOM。
- 虚拟 DOM（Virtual DOM）：高效更新视图，提升性能。
- 支持服务端渲染（SSR）和移动端（React Native）
💡 类比：HTML/CSS/JS 是盖房子的砖头水泥，React 就是预制板 + 起重机 —— 更快更高效地搭建复杂结构。
2. JSX 是什么？
React 使用JSX（JavaScript XML），它是一种语法扩展，允许你在 JS 中写类似 HTML 的代码。
const element = <h1>Hello, React!</h1>;这看起来像 HTML，但其实是会被编译成 JavaScript 函数调用（React.createElement()）。
⚠️ 注意：JSX 不是字符串，也不是 HTML，它是语法糖，需要工具（如 Babel）编译。
3. 搭建开发环境（推荐使用 Vite）
虽然你可以用create-react-app，但我们推荐更快的现代工具：Vite
✅ 步骤一：安装 Node.js（前提）
确保你已安装 Node.js（建议 v16+）。打开终端运行：
node-vnpm-v如果显示版本号，说明已安装。
✅ 步骤二：创建 React 项目（使用 Vite）
在终端中运行以下命令：
npmcreate vite@latest my-react-app ----templatereact解释：
npm create vite@latest：使用最新版 Vite 创建项目my-react-app：你的项目名（可自定义）-- --template react：指定使用 React 模板（注意两个--）
✅ 步骤三：进入项目并安装依赖
cdmy-react-appnpminstall✅ 步骤四：启动开发服务器
npmrun dev你会看到类似输出：
Local: http://localhost:5173/浏览器自动打开，你应该能看到 Vite + React 的欢迎页面 👏
4. 项目结构概览（关键文件）
进入项目目录后，重点关注这些文件：
my-react-app/ ├── src/ │ ├── main.jsx # 入口文件 │ ├── App.jsx # 主组件 │ └── assets/ # 静态资源 ├── index.html # 主 HTML 文件（只有一个 div#root） └── vite.config.js # Vite 配置文件🔍 看一眼src/main.jsx：
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.jsx' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode> )这段代码的意思是：
- 找到 HTML 中 id 为
root的元素 - 把
<App />组件渲染进去
🔍 再看src/App.jsx：
function App() { return ( <div> <h1>Vite + React</h1> </div> ) } export default App这就是一个最简单的 React 函数组件！
✅ 小练习（动手试试）
- 修改
App.jsx中的<h1>文字为：<h1>我的第一个 React 应用！</h1> - 保存文件，观察浏览器是否热重载（自动刷新）
- 在
App.jsx中添加一行：<p>现在时间是：{new Date().toLocaleTimeString()}</p> - 查看页面是否显示当前时间（静态，不会动）
✅ 提示：花括号
{}可以嵌入任意 JavaScript 表达式！
🧠 本章重点总结
| 概念 | 说明 |
|---|---|
| React | 构建 UI 的 JavaScript 库 |
| JSX | 在 JS 中写 HTML-like 语法 |
| Vite | 快速现代化构建工具 |
| 组件 | 一个返回 JSX 的函数 |
| 渲染流程 | index.html→main.jsx→App.jsx→ 浏览器显示 |
✅恭喜你完成第一章！
你现在：
- 知道了 React 是什么
- 搭建了开发环境
- 运行了一个 React 项目
- 修改了组件内容
下一章：组件与 JSX
发布于2026-05-14
著作权归作者所有