Skip to content

knowledgefxg/react-learning

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
website
website
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
LICENSE
LICENSE
 
 
Learning React.png
Learning React.png
 
 
README.md
README.md
 
 

Repository files navigation

React学习资源

Learning React

🌐 在线导航网站 | 📖 文本版资源列表

关于本仓库

本仓库包含两部分内容：

  1. 可视化导航网站 - 提供友好的浏览界面，支持搜索和分类导航 (查看代码)
  2. 文本版资源列表 - Markdown 格式的资源列表

本地运行导航网站

# 进入网站目录
cd website

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 访问 http://localhost:5173

网站功能特性

  • 📱 响应式设计 - 完美适配移动端、平板和桌面端
  • 🔍 实时搜索 - 支持按标题和描述快速搜索资源
  • 🎨 现代化 UI - 暗色主题 + 流畅动画效果
  • 🚀 极速加载 - 基于 Vite 构建，启动和热更新超快
  • 📑 13个分类 - 涵盖 React 学习全流程
  • ⌨️ 键盘友好 - 支持 Cmd+K 快捷搜索

技术栈

  • 前端: React 19 + TypeScript
  • 构建: Vite
  • 样式: Tailwind CSS
  • 图标: Lucide React
  • 部署: Vercel

💡 详细文档请查看 website/README.md

如何使用本仓库

📖 对于学习者

  1. 浏览在线网站 - 访问 react.knowledgefxg.com 获得最佳浏览体验
  2. 使用搜索功能 - 按 Cmd+K（Mac）或 Ctrl+K（Windows）快速搜索资源
  3. 按需学习 - 根据自己的水平选择对应分类的资源
  4. 收藏书签 - 将有用的资源添加到浏览器书签

💻 对于开发者

  1. Fork 仓库 - 克隆到自己的 GitHub
  2. 本地运行 - 按上方说明启动开发服务器
  3. 添加资源 - 编辑 website/src/data/resources.ts
  4. 提交 PR - 分享你的改进

🎯 学习路径建议

如果你是 React 新手，建议按以下顺序学习：

第一阶段：打基础 (1-2周)

  • 学习 HTML/CSS 基础
  • 掌握 JavaScript ES6+ 语法
  • 了解 Git 基本操作

第二阶段：入门 React (2-3周)

  1. 阅读 React 官方中文文档
  2. 跟随 React 菜鸟教程
  3. 观看 React 技术全家桶

第三阶段：深入学习 (3-4周)

  • 学习 React Hooks 深入使用
  • 掌握状态管理（Redux/Zustand）
  • 了解 React Router 路由管理
  • 阅读 React 模式

第四阶段：实战项目 (4-6周)

  • 跟随教程完成 2-3 个完整项目
  • 独立完成一个个人项目
  • 学习最佳实践和代码规范

第五阶段：进阶全栈 (持续学习)

  • 学习 Next.js 全栈框架
  • 掌握后端 API 集成
  • 了解部署和运维知识

贡献指南

我们欢迎任何形式的贡献！🎉

如何贡献资源

  1. 确保资源质量

    • ✅ 内容优质，适合 React 学习者
    • ✅ 链接有效，可正常访问
    • ✅ 中文资源优先，英文资源次之
    • ✅ 免费资源优先

  2. 添加资源步骤

    # 1. Fork 并克隆仓库
git clone https://github.com/your-username/react-learning.git

# 2. 创建新分支
git checkout -b add-new-resource

# 3. 编辑资源文件
# 编辑 website/src/data/resources.ts
# 同时更新主 README.md（如果需要）

# 4. 提交更改
git add .
git commit -m "feat: 添加新资源 - 资源名称"

# 5. 推送并创建 PR
git push origin add-new-resource

  3. 资源格式

    {
  title: "资源名称",
  url: "https://example.com",
  description: "简短描述（建议50字以内）"
}

报告问题

发现了问题？请：

  1. 检查 Issues 是否已存在
  2. 如果没有，创建新 Issue
  3. 清晰描述问题和重现步骤

提交规范

使用语义化提交信息：

  • feat: 新增功能或资源
  • fix: 修复问题
  • docs: 文档更新
  • style: 代码格式调整
  • refactor: 代码重构
  • perf: 性能优化

示例：

feat: 添加 React 19 新特性教程
fix: 修复移动端显示问题
docs: 完善安装说明

常见问题

Q: 资源太多，不知道从哪里开始？

A: 建议先阅读 React 官方中文文档，然后根据上方的"学习路径建议"逐步学习。

Q: 视频教程看不懂怎么办？

A: 可以先从中文视频开始，如 B 站的尚硅谷教程。同时结合文档和博客文章学习效果更好。

Q: 如何判断自己的学习进度？

A: 尝试独立完成一个小项目，比如 Todo List、天气应用等。能够独立完成就说明基础扎实了。

Q: 需要掌握所有资源吗？

A: 不需要。选择适合自己的资源即可。重要的是动手实践，而不是囤积资源。

Q: 学完 React 后该学什么？

A: 建议学习：

  • Next.js（全栈框架）
  • TypeScript（类型系统）
  • 状态管理库（Redux/Zustand）
  • 测试（Jest/React Testing Library）

项目统计

  • 📚 资源总数：200+
  • 🏷️ 分类数量：13个
  • 🌐 在线访问：react.knowledgefxg.com
  • ⭐ GitHub Stars：欢迎 Star 支持
  • 👥 贡献者：期待你的加入

技术支持

致谢

感谢所有资源的创作者和贡献者，是你们让 React 学习变得更简单！

特别感谢：

  • React 官方团队
  • 各位教程作者
  • 开源社区贡献者
  • 所有 Star 和 Fork 的朋友们

更新日志

2026-01-24

  • ✨ 优化了网站 UI 设计
  • 📝 完善了项目文档
  • 🚀 配置了 SSH 部署

更早版本

  • 初始化项目
  • 添加基础资源
  • 上线导航网站

嘿，欢迎来到React学习资源库！这里整理了一些React全栈开发的学习资料，从零基础到实战项目都有覆盖。不管你是刚入门的新手，还是想提升技术的开发者，都能在这里找到适合自己的内容。仓库的目标很简单：希望每个人都能快速上手React开发，并且能够构建出可用于生产环境的应用。别担心经验不足，每个高手都是从新手开始的。带着热情和坚持，相信你也可以做到！这个资源库会持续更新，如果你也有好的学习资源，欢迎分享出来，让我们一起打造更好的学习社区。毕竟，学习的路上有伴才更有趣，不是吗？

如果你感兴趣，这是我推荐的React学习资源：

目录

React学前知识

学习React肯定要有一些基础知识的，这里准备几个资源让你快速掌握前置知识, 如果你已经掌握了某些主题，可以随时跳过。

50projects50days 学完之后你可以这个通过这个仓库来做 50 个迷你小项目来测试磨练下基础前端技能。

React官方资源

React入门教程

视频教程

入门视频教程

一定要边学边写，避免一遍过就结束了。

入门实战视频

要深入了解React开发流程，不仅要掌握技术细节，还要理解作者的编码思路和写作规范。

精选Youtube频道

收集适合学习React和相关技术的优质频道

  • JavaScript Mastery - 专注于提供高质量的JavaScript和前端开发教程，通过实际项目构建来教授现代web开发技术，特别关注React、Next.js等流行框架和全栈应用开发
  • Programming with Mosh - 提供了完整的React入门到精通的课程，涵盖React基础知识、组件、props、状态管理等
  • Codevolution - 每周更新最新的Web技术课程，涵盖大量React， js，next.js相关课程
  • Code Bootcamp - 用可视化图解的方式深入浅出地讲解React核心概念的油管频道
  • freeCodeCamp - 提供大量免费的编程教程，包括React、JavaScript等前端技术的完整课程
  • Traversy Media - 涵盖各种Web开发技术的实用教程，包括React及其生态系统
  • Web Dev Simplified - 用简单易懂的方式讲解React和其他Web开发技术
  • The Net Ninja - 提供系统化的React教程系列，从基础到高级特性

其他

学习React当中遇到的其他方面知识汇总

优质博客

开源电子书

学习社区

在学习中我们会遇到 一些问题，可以去社区或一些网站寻找答案，下面推荐一些好的React社区网站。

社交账号

这里收集一些各个平台的社交账号，关注这些账号可以获得关于React的最新信息等

React框架

这些是一些常用的 React 框架，它们可以帮助你快速开发不同类型的 React 应用。每个框架都有不同的特点和用途，适合不同的项目需求。

  • next - React 框架
  • remix - 专注于用户界面的全栈 Web 框架
  • gatsby - 使用 React 构建现代网站
  • react-admin - 用于构建 B2B 应用的前端框架
  • refine - 构建基于 React 的 CRUD 应用，无限制
  • React Native - 用于构建移动应用的框架

React开发工具

这些工具和库都是用来优化和增强 React 开发体验的。

React优质组件

这些是常用的 React 组件库，可以帮助你快速构建各种功能的组件。

其他工具资源

  • codesandbox - 在线代码编辑器，让开发者无需本地配置，适合快速开发调试。
  • CodePen - 一个在线前端开发平台，可在浏览器中创建、编辑和分享前端代码。
  • swr - 用于数据请求的 React Hooks 库。该项目是帮助开发者简化数据请求逻辑的 React 库
  • million - 优化 React 性能，让您的 React 速度在几分钟内（而不是几个月）提高 70%。
  • FeHelper - 一个浏览器扩展，格式化和美化JSON数据，使其更易读和分析
  • Babel - 一个 JavaScript 编译器，把 “新的 JavaScript 语法” 转换成 “旧的、浏览器能识别的语法”。

如果这个项目对你有帮助，请不要忘记给它一个star ⭐

About

这是一个精心策划的资源列表，旨在帮助你尽快学习React和相关Web技术。

react.knowledgefxg.com/

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

322 stars

Watchers

2 watching

Forks

28 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages