Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/knowledgefxg/react-learning

这是一个精心策划的资源列表，旨在帮助你尽快学习React和相关Web技术。
https://github.com/knowledgefxg/react-learning

Last synced: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README 

        
# React学习资源



![Learning React](./Learning%20React.png)



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



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



## 目录



- [React学前知识](#React学前知识)

- [React官方资源](#React官方资源)

- [React入门教程](#React入门教程)

- [视频教程](#视频教程)

- [优质博客](#优质博客)

- [开源电子书](#开源电子书)

- [学习社区](#学习社区)

- [社交账号](#社交账号)

- [React 框架](#React框架)

- [React 开发工具](#React开发工具)

- [React 优质组件](#React优质组件)

- [其他工具/资源](#其他工具资源)



## React学前知识



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



- [三小时前端入门（html+css+js）](https://www.bilibili.com/video/BV1BT4y1W7Aw) 深入浅出，3小时快速掌握前端三件套核心概念。

- [html+css零基础教程](https://www.bilibili.com/video/BV1p84y1P7Z5) 如果想要详细了解前端入门技术，这个课程绝对适合，通俗易懂。

- [JavaScript 6小时初学者速成课程](https://www.youtube.com/watch?v=LEwi44cWBu8) 6小时速通js和核心概念

- [JavaScript全套课程](https://www.youtube.com/watch?v=lfmg-EJ8gm4) 来自200多万订阅的博主js全套课程，适合想更详细去学习js的同学，用来查漏补缺。

- [freeCodeCamp学习社区](https://www.freecodecamp.org/) 备受欢迎的编程学习社区，通过边学边练的交互式课程快速学习HTML，Javascript等多种编程语言

- [Git初学者教程：1小时学会Git](https://www.youtube.com/watch?v=8JJ101D3knE) 拥有YouTube四百多万订阅的博主Mosh带你快速掌握Git

- [GitHub小白指南](https://github.com/CatOneTwo/GitHub-Tutorial) 完全针对小白的教程，适合快速上手

- [游戏化学习Git](https://learngitbranching.js.org/?locale=zh_CN) 通过互动式加可视化来教授Git

- [MDN](https://developer.mozilla.org/zh-CN/) 非常重要的 Web 开发文档平台, 遇到不会的就去查一查。

- [1小时快速入门node.js](https://www.youtube.com/watch?v=TlB_eWDSMt4) 学习react前了解基本的 Node.js 概念足够

- [Node.js零基础视频教程](https://www.bilibili.com/video/BV1gM411W7ex) nodejs新手到高手，如果有颗全栈梦，这个技术讲得很细

- [30分钟掌握Webpack](https://www.bilibili.com/video/BV11g411y7Sd) 快速掌握Webpack

- [AI全栈导师](https://www.studywithgpt.com/zh-cn) 利用AI技术自动生成教学文档，适合基础不扎实去细化学习。



#### ***[50projects50days](https://github.com/bradtraversy/50projects50days) 学完之后你可以这个通过这个仓库来做 50 个迷你小项目来测试磨练下基础前端技能。***



## React官方资源



- [React 官方文档](https://react.dev/) - 官方 React 文档

- [React 官方中文文档](https://zh-hans.react.dev/) - 最新的 React 官方中文文档，2023年重写

- [Create React App 中文文档](https://create-react-app.bootcss.com/) - 创建 React 项目的官方工具



## React入门教程



- [React 菜鸟教程](https://www.runoob.com/react/react-tutorial.html) - 基础语法入门

- [React-Router 中文文档](https://react-router.docschina.org/) - React 路由中文文档

- [React 入门实战教程](https://x.zhixing.co/courses/react-hands-on-tutorial-for-beginners/) - 边学边练

- [React学习指南](https://www.freecodecamp.org/news/how-to-learn-react-step-by-step/) - 如何在3到6个月内掌握React

- [ES6特性](https://www.w3schools.com/js/js_es6.asp) - 查看ES6和其他最新版本特性

- [React 备忘单](https://www.shecodes.io/cheatsheets/react) - 针对初学者的全面 React 备忘单

- [React 模式](https://reactpatterns.cn/) - 18 种短小精悍的 React 模式案例，通俗易懂值得收藏

- [React 学习路径](https://github.com/tuture-dev/react-roadmap) - React 前端工程师实战学习路线



## 视频教程

### 入门视频教程



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

- [React 技术全家桶](https://www.bilibili.com/video/BV1wy4y1D7JT) - B站尚硅谷React教程

- [React 速成课程](https://www.youtube.com/watch?v=LDB4uaJ87e0) - 3小时速通 React 的基础知识

- [React基础到项目实战](https://www.bilibili.com/video/BV1bS4y1b7NV/) - React18的视频教程

- [最新React课程](https://www.youtube.com/watch?v=CgkZ7MvWUAA&t=1256s) - Youtube Bro Code的react课程

- [React 初学者指导](https://www.youtube.com/watch?v=SqcY0GlETPk) 

- [React的全套课程](https://www.youtube.com/watch?v=x4rFhThSX04) - Youtube上的React精品全套课程

- [React JS 初学者完整课程](https://www.youtube.com/watch?v=RVFAyFWO4go) - 包含近 9 小时的 React JS 代码和指导

- [超全的React初学者课程列表](https://www.youtube.com/playlist?list=PLSsAz5wf2lkK_ekd0J__44KG6QoXetZza)

- [使用 Redux Toolkit学习React 18](https://www.youtube.com/watch?v=x4rFhThSX04) - 针对初学者的完整课程中学习如何使用React 18和Redux Toolkit



### 入门实战视频



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

- [全栈应用项目实战](https://www.youtube.com/watch?v=MDZC8VDZnV8) - 学习在23小时内构建 4 个全栈项目

- [构建一个简单的电影应用](https://www.youtube.com/watch?v=G6D9cBaLViA&t=183s) - 使用 React 和 Vite 构建一个简单的电影应用

- [边学边练](https://www.youtube.com/watch?v=iKpkVKubvKk) - 用React部署 3 个现代 Web 应用程序

- [通过一个小项目学习React](https://www.youtube.com/watch?v=Rh3tobg7hEo) - 通过一个项目分解您需要了解的React中的所有最重要的概念。

- [构建一个LMS网站](https://www.youtube.com/watch?v=p2zWawmDkF4) - 了解如何使用 React JS 创建完整的 LMS 网站，以及类似 Udemy 的网站

- [全栈应用项目实战](https://www.youtube.com/watch?v=MDZC8VDZnV8) - 学习在23小时内构建 4 个全栈项目

- [掌握React 18 与TypeScript!](https://www.youtube.com/watch?v=SqcY0GlETPk) - 使用TypeScript学习React 18并构建一个出色的前端应用程序

- [React Native 速成课程](https://www.youtube.com/watch?v=bCpFbERgj7s) - 3小时内构建一个移动应用程序



### 精选Youtube频道



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



- [JavaScript Mastery](https://www.youtube.com/@javascriptmastery) - 专注于提供高质量的JavaScript和前端开发教程，通过实际项目构建来教授现代web开发技术，特别关注React、Next.js等流行框架和全栈应用开发

- [Programming with Mosh](https://www.youtube.com/@programmingwithmosh) - 提供了完整的React入门到精通的课程，涵盖React基础知识、组件、props、状态管理等



### 其他



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



- [一小时彻底搞懂跨域和解决方案](https://www.bilibili.com/video/BV1pT421k7yz) - 我们在前后端交互的时候经常会遇到一个问题：跨域，如果想详细了解并解决这个问题可以看一下这个视频



## 优质博客

- [React 状态管理](https://www.redux.org.cn/) - Redux 中文文档

- [前端精读周刊](https://github.com/ascoders/weekly) - 包含一些React文章

- [React 状态管理](https://www.redux.org.cn/) - 包含大量 React 文章

- [阮一峰的网络日志](https://www.ruanyifeng.com/blog/) - 包含对于前端领域的独特见解

- [Dan Abramov的博客](https://overreacted.io/)

- [Kent C. Dodd的博客](https://kentcdodds.com/)



## 开源电子书

- [React 技术揭秘](https://react.iamkasong.com/) - React 源码解析

- [React 入门指南](https://www.kancloud.cn/kancloud/react-quickstart/44631) - 快速入门React

- [React 入门教程](https://hulufei.gitbooks.io/react-tutorial/content/introduction.html) - 很细的入门教程

- [React Book](https://softchris.github.io/react-book/#/) - 关于 React 的免费书籍。适合初学者到中级水平。

- [React freebook](https://github.com/EOEboh/Free-Software-Books/blob/main/books/dev-books/React/react.md) - github上整理的一些react书籍列表



## 学习社区

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

- [stack overflow](https://stackoverflow.com/questions/tagged/reactjs) 

- [知乎上的React话题](https://www.zhihu.com/topic/20013159/hot)

- [segmentfault React 话题](https://segmentfault.com/t/react) 

- [V2EX的React话题](https://www.v2ex.com/go/react) 

- [DEV社区](https://dev.to/) - 分享各种关于React的学习教程，资源等。

- [Medium](https://medium.com/) - 高质量的英文社区，涵盖关于React的精品文章。

- [Reactiflux](https://www.reactiflux.com/) - 我们是一个由20多万名开发者组成的聊天社区，专注于React。



## 社交账号

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

- [React官方账号](https://x.com/reactjs)

- [React Native官方账号](https://x.com/reactnative)

- [DEV Community官方账号](https://x.com/ThePracticalDev) - 有各种React教程博客

- [freeCodeCamp官方账号](https://x.com/freeCodeCamp) - 不定期分享各种编程教程，知识，包括React

- [React DEV](https://x.com/reactdevz) - 不定期分享分享与React相关的教程、课程、书籍、工作……

- [React Trends](https://x.com/ReactJSTrends) - 不定期发布ReactJs最热门趋势

- [Lee Robinson](https://x.com/leeerob) - 教一些react，next.js的知识

- [@The_React_Dev](https://x.com/The_React_Dev) - 没事发布一些精选React教程帖子

- [@petarivanovv9](https://x.com/petarivanovv9) - 实用的 React、Node 和软件架构技巧 

- [@remix_run](https://x.com/remix_run) - 使用 Remix 和 React Router 构建更好的网站

- [@housecor](https://x.com/housecor) - 每天分享JavaScript和React开发技巧，内容实用

- [kentcdodds](https://x.com/kentcdodds) - Epic React Dev课程创作者，提供全面React教程

- [@ryanflorence](https://x.com/ryanflorence) - Remix联合创始人，讨论React框架和路由相关内容，适合框架学习者

- [@BroCode1508](https://x.com/BroCode1508) - 前端开发人员，精通 React.js、Next.js、Node.js 和 Express.js



## React框架

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

- [next](https://github.com/vercel/next.js) - React 框架

- [remix](https://github.com/remix-run/remix) - 专注于用户界面的全栈 Web 框架

- [gatsby](https://github.com/gatsbyjs/gatsby) - 使用 React 构建现代网站

- [react-admin](https://github.com/marmelab/react-admin) - 用于构建 B2B 应用的前端框架

- [refine](https://github.com/refinedev/refine) - 构建基于 React 的 CRUD 应用，无限制

- [React Native](https://reactnative.dev/) - 用于构建移动应用的框架



## React开发工具

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

- [create-react-app](https://github.com/facebook/create-react-app) - 通过一个命令设置现代 Web 应用

- [vite](https://github.com/vitejs/vite) - 下一代前端工具

- [parcel](https://github.com/parcel-bundler/parcel) - 零配置的 Web 构建工具

- [million](https://github.com/aidenybai/million) - 极快且轻量级的优化编译器

- [reactotron](https://github.com/skellock/reactotron) - 用于检查 React 和 React Native 项目的桌面应用

- [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React 特定的 ESLint 规则

- [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - 通知您关于可避免的重渲染的 React 补丁



## React优质组件

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

- [Awesome React Components](https://github.com/brillout/awesome-react-components)

- [react-select](https://github.com/JedWatson/react-select) - React 的选择组件

- [react-big-calendar](https://github.com/jquense/react-big-calendar) - 日历组件

- [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - 简单可重用的日期选择器组件

- [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton) - 创建自动适应应用的骨架屏

- [react-qrcode](https://github.com/zpao/qrcode.react) - React 二维码组件

- [react-archer](https://github.com/pierpo/react-archer) - 在 React 元素之间绘制箭头

- [react-icons](https://github.com/react-icons/react-icons) - 流行图标包的 SVG React 图标

- [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - 无偏见的可访问树

- [react-insta-stories](https://github.com/mohitk05/react-insta-stories) - Instagram 故事风格的 React 组件

- [swiper](https://github.com/nolimits4web/swiper) - 最现代的移动触摸滑块

- [keen-slider](https://github.com/rcbyr/keen-slider) - 触摸滑块轮播

- [cookie-consent-banner](https://github.com/porscheofficial/cookie-consent-banner) - 轻量灵活的 Cookie 同意横幅

- [heart-switch](https://github.com/anatoliygatt/heart-switch) - 心形切换开关组件

- [kbar](https://github.com/timc1/kbar) - 快速、便携且可扩展的 cmd+k 界面

- [tagify](https://github.com/yairEO/tagify) - 轻量高效的标签输入组件

- [puck](https://github.com/measuredco/puck) - React 的可视化编辑器



## 其他工具资源

- [codesandbox](https://codesandbox.io/) - 在线代码编辑器，让开发者无需本地配置，适合快速开发调试。

- [CodePen](https://codepen.io/) - 一个在线前端开发平台，可在浏览器中创建、编辑和分享前端代码。

- [swr](https://github.com/vercel/swr) - 用于数据请求的 React Hooks 库。该项目是帮助开发者简化数据请求逻辑的 React 库

- [million](https://github.com/aidenybai/million) - 优化 React 性能，让您的 React 速度在几分钟内（而不是几个月）提高 70%。

- [FeHelper](https://github.com/zxlie/FeHelper) - 一个浏览器扩展，格式化和美化JSON数据，使其更易读和分析

- [Babel](https://babeljs.io/) - 一个 JavaScript 编译器，把 “新的 JavaScript 语法” 转换成 “旧的、浏览器能识别的语法”。

  

---

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