React 入门教程

这是一个完整的 React 入门教程项目，旨在通过理论结合实践的方式帮助初学者掌握 React 基础知识。

🎯 教程特色

• 渐进式学习：从基础概念到实践项目，循序渐进
• 可视化交互：每个概念都配有可操作的实际演示
• 即时反馈：实时查看代码修改效果
• 实践导向：通过构建实际项目来学习

📚 教程目录

01 - React 基础概念 ✅

• React 是什么
• 核心特性：声明式、组件化、Virtual DOM
• 组件、Props、State 基础概念
• 交互式演示

02 - JSX 语法介绍 ✅

• JSX 基本语法
• 表达式嵌入
• 条件渲染
• 列表渲染
• 事件处理
• 动态样式

03 - 组件与 Props 🚧

• 函数组件 vs 类组件
• Props 传递和使用
• 组件组合
• TypeScript 类型定义

04 - State 与事件处理 🚧

• useState Hook
• 事件处理函数
• 表单输入处理
• 状态更新最佳实践

05 - 条件渲染 🚧

• if 语句
• 三元运算符
• 逻辑 && 运算符
• 条件渲染最佳实践

06 - 列表与 Keys 🚧

• 渲染列表
• key 的重要性
• 动态列表操作
• 列表性能优化

07 - 表单与输入 🚧

• 受控组件
• 非受控组件
• 表单验证
• 表单提交处理

08 - 生命周期与副作用 🚧

• useEffect Hook
• 组件生命周期
• 数据获取
• 清理副作用

09 - 路由导航 🚧

• React Router
• 路由配置
• 导航组件
• 路由参数

10 - 项目实践 🚧

• Todo List 应用
• 天气查询应用
• 简单电商界面
• 项目最佳实践

🚀 快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

🛠 技术栈

• React 18 - 最新版本的 React
• TypeScript - 类型安全的 JavaScript
• Vite - 快速的构建工具
• 函数式组件 - 使用 React Hooks

📖 学习方法

1. 阅读理论：每个模块都有详细的概念解释
2. 观察演示：查看交互式演示了解概念的实际应用
3. 动手实践：修改演示代码，观察变化
4. 完成练习：尝试独立实现类似功能

🎨 项目结构

src/
├── 01-basic-concepts/       # 基础概念
│   ├── README.md           # 理论文档
│   └── BasicConcepts.tsx   # 交互演示
├── 02-jsx-introduction/    # JSX 语法
│   ├── README.md
│   └── JSXIntroduction.tsx
├── 03-components-props/     # 组件与 Props
├── 04-state-events/        # State 与事件
├── 05-conditional-rendering/ # 条件渲染
├── 06-lists-keys/          # 列表与 Keys
├── 07-forms-input/         # 表单与输入
├── 08-lifecycle-effects/   # 生命周期与副作用
├── 09-routing/             # 路由导航
├── 10-project-practice/    # 项目实践
├── App.tsx                 # 主应用组件
├── App.css                 # 样式文件
├── main.tsx               # 入口文件
└── index.css              # 全局样式

💡 学习建议

1. 按顺序学习：建议按照编号顺序学习各个模块
2. 动手实践：不要只看不做，多动手修改代码
3. 理解原理：不仅要知道怎么做，还要理解为什么这么做
4. 多做练习：完成每个模块后尝试独立实现类似功能

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个教程！

📄 许可证

MIT License

---

愉快学习 React！🎉