React 入门指南通过 9 个实验介绍如何用函数式 React 组件构建浏览器界面。你会从 Vite 项目开始，编辑 JSX、组合组件、传递数据、管理本地状态，并添加按钮、动态列表、条件内容和表单等常见交互。
每个实验都提供引导并聚焦一个概念。你将启动开发服务器，在内置浏览器预览中观察变化，通过小型代码修改建立对 React 组件化工作流程的实际理解。
你将学到什么
- 浏览 Vite React 项目、安装依赖并运行开发服务器
- 创建、导出、导入和组合函数式组件
- 使用表达式、属性、自闭合元素和 Fragment 编写 JSX
- 通过 props、解构和默认值将数据从父组件传给子组件
- 使用
useStateHook 管理本地组件状态及更新 - 绑定事件处理函数、查看事件对象并阻止浏览器默认行为
- 通过三元表达式、逻辑运算符、变量和状态进行条件渲染
- 将数组映射为带 key 的元素，并构建受控表单输入和提交处理
本课程适合谁
本课程适合已了解 JavaScript 基础、希望通过引导学习现代函数组件的 React 新手，也适合想先理解 JSX、props、state 和浏览器事件如何协作，再构建大型应用的前端初学者。
前置要求： 建议掌握 JavaScript 基础，包括函数、变量、数组、对象、导入和数组 map。了解 HTML 元素和属性会有所帮助。无需 React 或 Vite 经验。
学习环境： 9 个实验均在 Ubuntu 22.04 React WebIDE 中运行，提供 Node.js、npm、编辑器、终端和 Web 8080 浏览器预览。每个实验使用 Vite React 项目；你会启动开发服务器，并通过热模块替换查看更新。
常见问题
我会构建一个完整的 React 应用吗？
不会。你会完成组件、计数器、条件视图、列表和受控表单等专题示例。课程建立 React 核心机制，但不包含累计式综合应用。
课程使用函数组件还是类组件？
使用函数组件和 useState Hook，不涉及类组件及其生命周期方法。
课程包含路由、API 或高级 Hook 吗？
不包含。React Router、数据获取、useEffect、Context、自定义 Hook、TypeScript、测试、状态管理库和部署均不在本入门课程范围内。
需要在自己的电脑上安装 React 吗？
不需要。每个实验都会在 WebIDE 中准备 Vite React 项目；npm 和开发服务器均在实验环境内使用，无需为练习配置本地 React 环境。
