React 初学者进阶指南：从环境搭建到部署上线

概览

环境搭建

核心概念

TodoList 实战

部署上线

---

一、快速搭建 React 开发环境

1. 选型：Vite 或 Create React App

• Vite：轻量、热更新速度快、可定制度高，适合追求更高效率的开发者。
• Create React App (CRA)：社区支持全面，文档丰富，适合初学者上手。

我使用的是Vite

提示

2. Node.js & 包管理器

• 推荐 Node.js 16+ / 18+。
• 包管理器可选 npm / yarn / pnpm，选一个自己熟悉就好。

3. VS Code 常见插件

• ESLint + Prettier：统一代码风格，避免低级错误；
• React/Redux Snippets：快速生成组件模板，节省重复输入；
• GitLens：查看 commit 历史、分支对比等，提升协作效率。

---

二、React 基础：JSX、组件化、单向数据流

1. JSX 与组件

• JSX 让我们在 JavaScript 中使用类似 HTML 的语法，实际是语法糖；
• 函数组件 (Function Component) 更简洁，配合 Hooks 完成状态管理；
• 拆分组件时，遵循单一职责原则，不要让一个组件承担过多逻辑。

2. props 与 state

• props：从父组件传递的只读数据，用于展示或传递回调函数；
• state：组件内部可变数据，通过 useState / useReducer 等 Hooks 管理。

3. 单向数据流

• 父组件掌握数据，子组件通过 props 获取；子组件中触发事件