English | 简体中文
- 📚 系统化学习路径 - 从 React 基础到高级模式，循序渐进
- 💻 交互式示例 - 每个概念都配有可交互的代码示例
- 📱 响应式设计 - 完美支持桌面和移动设备
- 🌓 深色模式 - 内置明暗主题切换
- 🌍 国际化支持 - 完整的中英文切换功能
- ⚡ 性能优化 - 基于 Next.js 15 的最佳实践
- JSX 语法与表达式
- 组件的创建与使用
- Props 属性传递
- useState Hook
- useReducer Hook
- 状态提升
- 父传子 (Props)
- 子传父 (回调函数)
- 兄弟组件通信
- 跨层级通信 (Context)
- useEffect 基础
- 依赖数组
- 清理副作用
- useMemo
- useCallback
- useRef
- 自定义 Hooks
- 高阶组件 (HOC)
- Render Props
- 组合组件
- Context + useReducer
- React.memo
- 列表优化
- 懒加载
- 待办事项应用
- 数据获取与展示
- 表单处理
- 笔记应用
- Next.js 15.2.4 - React 全栈框架
- React 19 - UI 库
- TypeScript 5 - 类型安全
- Tailwind CSS - 原子化 CSS 框架
- Radix UI - 无样式组件库
- Lucide React - 图标库
- next-intl - 国际化解决方案
- next-themes - 主题切换
- react-syntax-highlighter - 代码高亮
- pnpm - 包管理器
- ESLint - 代码检查
- Prettier - 代码格式化
- Node.js 18.x 或更高版本
- pnpm 8.x 或更高版本（推荐）
# 克隆仓库
git clone https://github.com/yourusername/react-learning.git
# 进入项目目录
cd react-learning
# 安装依赖
pnpm install# 启动开发服务器
pnpm dev
# 在浏览器中打开
# http://localhost:3000# 生产环境构建
pnpm build
# 启动生产服务器
pnpm start# 代码检查
pnpm lint
# 类型检查
pnpm type-checkreact-learning/
├── app/ # Next.js App Router
│ ├── [locale]/ # 国际化路由
│ │ ├── layout.tsx # 语言布局
│ │ ├── page.tsx # 首页
│ │ ├── basics/ # 基础知识
│ │ ├── state/ # 状态管理
│ │ ├── communication/ # 组件通信
│ │ ├── effects/ # 副作用
│ │ ├── hooks/ # Hooks 进阶
│ │ ├── advanced/ # 高级模式
│ │ ├── performance/ # 性能优化
│ │ └── examples/ # 实战案例
│ ├── api/ # API 路由
│ ├── layout.tsx # 根布局
│ └── globals.css # 全局样式
├── components/ # React 组件
│ ├── ui/ # UI 组件库
│ ├── interactive-examples/ # 交互式示例
│ ├── code-block.tsx # 代码块组件
│ ├── sidebar.tsx # 侧边栏
│ ├── locale-switcher.tsx # 语言切换器
│ └── theme-toggle.tsx # 主题切换器
├── hooks/ # 自定义 Hooks
├── i18n/ # 国际化配置
│ ├── config.ts # 语言配置
│ └── request.ts # 请求配置
├── lib/ # 工具库
├── messages/ # 翻译文件
│ ├── zh.json # 中文翻译
│ └── en.json # 英文翻译
├── public/ # 静态资源
├── scripts/ # 脚本工具
├── middleware.ts # Next.js 中间件
├── next.config.mjs # Next.js 配置
├── tailwind.config.ts # Tailwind 配置
├── tsconfig.json # TypeScript 配置
└── package.json # 项目配置
-
React 基础（1-2 周）
- JSX 语法
- 组件基础
- Props 属性
-
状态管理（1 周）
- useState Hook
- 状态提升
-
副作用（1 周）
- useEffect 基础
- 依赖数组
-
组件通信（1-2 周）
- 父子组件通信
- Context API
-
Hooks 进阶（1-2 周）
- useMemo
- useCallback
- useRef
- 自定义 Hooks
-
性能优化（1 周）
- React.memo
- 列表优化
- 懒加载
-
高级模式（2-3 周）
- 高阶组件
- Render Props
- 组合组件
- useReducer
-
实战项目（2-4 周）
- 待办事项应用
- 数据获取
- 表单处理
- 完整应用
本项目完整支持中英文切换。
点击页面右上角的地球图标 🌐，选择你喜欢的语言：
- 🇨🇳 中文
- 🇬🇧 English
- 中文（默认）:
https://example.com/basics/jsx - 英文:
https://example.com/en/basics/jsx
基于 next-intl 实现：
- 服务端和客户端完整支持
- 自动路由处理
- 类型安全的翻译
- SEO 友好
详细文档：
- 在
app/[locale]/下创建新路由 - 在
messages/zh.json和messages/en.json添加翻译 - 在组件中使用
useTranslations
示例：
// app/[locale]/new-page/page.tsx
"use client";
import { useTranslations } from "next-intl";
export default function NewPage() {
const t = useTranslations("pages.newPage");
return (
<div>
<h1>{t("title")}</h1>
<p>{t("description")}</p>
</div>
);
}// messages/zh.json
{
"pages": {
"newPage": {
"title": "新页面",
"description": "这是新页面的描述"
}
}
}- 在
components/interactive-examples/创建组件 - 实现交互逻辑
- 在对应的学习页面中引入
- 使用 TypeScript
- 遵循 ESLint 规则
- 使用 Prettier 格式化
- 代码注释使用英文
# 功能
git commit -m "feat: add new feature"
# 修复
git commit -m "fix: fix bug"
# 文档
git commit -m "docs: update documentation"
# 样式
git commit -m "style: format code"
# 重构
git commit -m "refactor: refactor code"
# 测试
git commit -m "test: add tests"
# 构建
git commit -m "build: update dependencies"欢迎贡献！请查看 贡献指南。
- Fork 本仓库
- 创建你的特性分支 (
git checkout -b feature/AmazingFeature) - 提交你的修改 (
git commit -m 'feat: add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启一个 Pull Request
感谢所有贡献者！
本项目采用 MIT 许可证 - 详见 LICENSE 文件。
- 问题反馈: GitHub Issues
- 功能建议: GitHub Discussions
- 邮箱: your.email@example.com
- React - 感谢 React 团队
- Next.js - 感谢 Vercel 团队
- Radix UI - 优秀的组件库
- Tailwind CSS - 强大的 CSS 框架