React.js 初学者学习计划及作业

| 主题 | 学习内容与方式 | 练习作业 | |------|----------------|----------| | 1. React 基础概念 | 了解 React 是什么（用于构建用户界面的 JavaScript 库），理解组件化思想、虚拟 DOM 和单向数据流。学习 JSX 语法（在 JavaScript 中写 HTML 标签），以及如何创建第一个 React 应用（使用 `create-react-app` 或 Vite）。 | 创建一个简单的 React 应用，显示“Hello, World!”，并尝试在 JSX 中嵌入变量和表达式（如 `{2+3}`）。 | | 2. 组件与 Props | 学习函数组件和类组件的区别（推荐先学函数组件）。理解 Props（属性）如何从父组件向子组件传递数据，以及如何设置默认值和类型检查（使用 `prop-types`）。 | 创建一个父组件，向两个子组件传递不同的 Props（如姓名和年龄），子组件渲染这些数据。 | | 3. State 与事件处理 | 学习 `useState` Hook 管理组件内部状态，理解状态更新如何触发重新渲染。掌握事件处理（如 `onClick`、`onChange`），以及如何通过事件更新状态。 | 制作一个计数器（点击按钮增加/减少数字），并添加一个输入框，实时显示输入的文本。 | | 4. 条件渲染与列表渲染 | 学习使用 `if`、三元运算符和 `&&` 进行条件渲染。掌握使用 `map()` 渲染列表，并理解 `key` 属性的重要性（用于优化渲染性能）。 | 创建一个待办事项列表，能添加和删除项目，并根据完成状态显示不同样式（如划线）。 | | 5. 表单处理 | 学习受控组件（表单值由 React 状态控制）和非受控组件（使用 `ref`）。掌握处理多种输入类型（文本、复选框、下拉框），以及表单提交逻辑。 | 创建一个注册表单（姓名、邮箱、密码），提交时在控制台输出数据，并验证必填字段。 | | 6. 生命周期与副作用（useEffect） | 学习 `useEffect` Hook 处理副作用（如数据获取、订阅、定时器）。理解依赖数组的作用（何时重新执行），以及清理函数（避免内存泄漏）。 | 创建一个组件，使用 `useEffect` 从公开 API（如 JSONPlaceholder）获取数据并显示，添加加载状态。 | | 7. 组件通信 | 学习父子组件通信（通过 Props 传递函数），兄弟组件通信（通过提升状态到共同父组件），以及 Context API 用于跨层级传递数据。 | 创建一个简单的购物车，商品列表和购物车图标共享状态，点击“加入购物车”更新数量。 | | 8. Hooks 深入 | 学习自定义 Hooks（提取复用逻辑），以及 `useMemo`、`useCallback` 优化性能，`useRef` 访问 DOM 或存储可变值。 | 编写一个自定义 Hook（如 `useLocalStorage`），用于在刷新后保留数据，并在组件中使用。 | | 9. 路由（React Router） | 学习安装和配置 `react-router-dom`，理解 `BrowserRouter`、`Routes`、`Route`、`Link` 和 `NavLink`。掌握动态路由参数（如 `/user/:id`）和嵌套路由。 | 创建一个多页面应用（首页、关于、用户详情），通过导航栏切换页面，并传递 URL 参数。 | | 10. 状态管理（Redux 或 Context） | 学习 Redux 核心概念（Store、Action、Reducer、Dispatch），或使用 Context + `useReducer` 进行轻量级状态管理。理解何时需要全局状态。 | 将购物车应用升级为使用 Redux 或 Context 管理全局状态，实现添加、删除、清空功能。 | | 11. 样式处理 | 学习 CSS Modules、styled-components 或 Tailwind CSS 在 React 中的使用。理解动态样式（基于 Props 或 State 改变样式）。 | 为之前的待办事项应用添加样式，使用 CSS Modules 或 styled-components，实现悬停效果和响应式布局。 | | 12. 性能优化 | 学习 React.memo 防止不必要的重新渲染，`useMemo` 缓存计算结果，`useCallback` 缓存函数引用。了解代码分割（`React.lazy` 和 `Suspense`）。 | 优化一个列表组件，使用 `React.memo` 和 `useCallback`，并通过 React DevTools 检查渲染次数。 | | 13. 测试 | 学习使用 Jest 和 React Testing Library 编写单元测试和组件测试。掌握测试渲染、交互和异步逻辑。 | 为计数器组件和表单组件编写测试，覆盖初始状态、点击事件和输入变化。 | | 14. 项目实战 | 综合运用所学知识，构建一个完整项目。学习项目结构规划、组件拆分、API 集成、错误处理和部署（如 Vercel 或 Netlify）。 | 构建一个博客应用（文章列表、详情、评论功能），使用路由、状态管理、样式和测试，最后部署上线。 |

React.js 初学者学习计划及作业

提示词内容收藏

登录以查看完整提示词

用法

参考资料

讨论