├── LICENSE ├── Learning React.png └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 knowledgefxg 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Learning React.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/knowledgefxg/react-learning/ba0878d017ed436722c400463b530e3cbb0aa317/Learning React.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React学习资源 2 | 3 | ![Learning React](./Learning%20React.png) 4 | 5 | 嘿，欢迎来到React学习资源库！这里整理了一些React全栈开发的学习资料，从零基础到实战项目都有覆盖。不管你是刚入门的新手，还是想提升技术的开发者，都能在这里找到适合自己的内容。仓库的目标很简单：希望每个人都能快速上手React开发，并且能够构建出可用于生产环境的应用。别担心经验不足，每个高手都是从新手开始的。带着热情和坚持，相信你也可以做到！这个资源库会持续更新，如果你也有好的学习资源，欢迎分享出来，让我们一起打造更好的学习社区。毕竟，学习的路上有伴才更有趣，不是吗？ :smile: 6 | 7 | 如果你感兴趣，这是我推荐的React学习资源： 8 | 9 | 10 | ## 目录 11 | 12 | - [React学前知识](#React学前知识) 13 | - [React官方资源](#React官方资源) 14 | - [React入门教程](#React入门教程) 15 | - [视频教程](#视频教程) 16 | - [优质博客](#优质博客) 17 | - [开源电子书](#开源电子书) 18 | - [学习社区](#学习社区) 19 | - [社交账号](#社交账号) 20 | - [React 框架](#React框架) 21 | - [React 开发工具](#React开发工具) 22 | - [React 优质组件](#React优质组件) 23 | - [其他工具/资源](#其他工具资源) 24 | 25 | 26 | ## React学前知识 27 | 28 | 学习React肯定要有一些基础知识的，这里准备几个资源让你快速掌握前置知识, 如果你已经掌握了某些主题，可以随时跳过。 29 | 30 | - [三小时前端入门（html+css+js）](https://www.bilibili.com/video/BV1BT4y1W7Aw) 深入浅出，3小时快速掌握前端三件套核心概念。 31 | - [html+css零基础教程](https://www.bilibili.com/video/BV1p84y1P7Z5) 如果想要详细了解前端入门技术，这个课程绝对适合，通俗易懂。 32 | - [JavaScript 6小时初学者速成课程](https://www.youtube.com/watch?v=LEwi44cWBu8) 6小时速通js和核心概念 33 | - [JavaScript全套课程](https://www.youtube.com/watch?v=lfmg-EJ8gm4) 来自200多万订阅的博主js全套课程，适合想更详细去学习js的同学，用来查漏补缺。 34 | - [freeCodeCamp学习社区](https://www.freecodecamp.org/) 备受欢迎的编程学习社区，通过边学边练的交互式课程快速学习HTML，Javascript等多种编程语言 35 | - [Git初学者教程：1小时学会Git](https://www.youtube.com/watch?v=8JJ101D3knE) 拥有YouTube四百多万订阅的博主Mosh带你快速掌握Git 36 | - [GitHub小白指南](https://github.com/CatOneTwo/GitHub-Tutorial) 完全针对小白的教程，适合快速上手 37 | - [游戏化学习Git](https://learngitbranching.js.org/?locale=zh_CN) 通过互动式加可视化来教授Git 38 | - [MDN](https://developer.mozilla.org/zh-CN/) 非常重要的 Web 开发文档平台, 遇到不会的就去查一查。 39 | - [1小时快速入门node.js](https://www.youtube.com/watch?v=TlB_eWDSMt4) 学习react前了解基本的 Node.js 概念足够 40 | - [Node.js零基础视频教程](https://www.bilibili.com/video/BV1gM411W7ex) nodejs新手到高手，如果有颗全栈梦，这个技术讲得很细 41 | - [30分钟掌握Webpack](https://www.bilibili.com/video/BV11g411y7Sd) 快速掌握Webpack 42 | - [AI全栈导师](https://www.studywithgpt.com/zh-cn) 利用AI技术自动生成教学文档，适合基础不扎实去细化学习。 43 | 44 | #### ***[50projects50days](https://github.com/bradtraversy/50projects50days) 学完之后你可以这个通过这个仓库来做 50 个迷你小项目来测试磨练下基础前端技能。*** 45 | 46 | 47 | ## React官方资源 48 | 49 | - [React 官方文档](https://react.dev/) - 官方 React 文档 50 | - [React 官方中文文档](https://zh-hans.react.dev/) - 最新的 React 官方中文文档，2023年重写 51 | - [Create React App 中文文档](https://create-react-app.bootcss.com/) - 创建 React 项目的官方工具 52 | 53 | ## React入门教程 54 | 55 | - [React 菜鸟教程](https://www.runoob.com/react/react-tutorial.html) - 基础语法入门 56 | - [针对新手的React学习手册](https://www.freecodecamp.org/news/react-for-beginners-handbook/) - 涵盖最基本的react核心概念，方便随时查阅学习，非常适合小白。 57 | - [React-Router 中文文档](https://react-router.docschina.org/) - React 路由中文文档 58 | - [React 入门实战教程](https://x.zhixing.co/courses/react-hands-on-tutorial-for-beginners/) - 边学边练 59 | - [React学习指南](https://www.freecodecamp.org/news/how-to-learn-react-step-by-step/) - 如何在3到6个月内掌握React 60 | - [ES6特性](https://www.w3schools.com/js/js_es6.asp) - 查看ES6和其他最新版本特性 61 | - [React 备忘单](https://www.shecodes.io/cheatsheets/react) - 针对初学者的全面 React 备忘单 62 | - [React 模式](https://reactpatterns.cn/) - 18 种短小精悍的 React 模式案例，通俗易懂值得收藏 63 | - [React 学习路径](https://github.com/tuture-dev/react-roadmap) - React 前端工程师实战学习路线 64 | - [React visualized](https://react.gg/visualized) - 一个专门用于可视化解释 React 框架概念的教育网站 65 | 66 | 67 | ## 视频教程 68 | ### 入门视频教程 69 | 70 | 一定要边学边写，避免一遍过就结束了。 71 | - [React 技术全家桶](https://www.bilibili.com/video/BV1wy4y1D7JT) - B站尚硅谷React教程 72 | - [React 速成课程](https://www.youtube.com/watch?v=LDB4uaJ87e0) - 3小时速通 React 的基础知识 73 | - [React基础到项目实战](https://www.bilibili.com/video/BV1bS4y1b7NV/) - React18的视频教程 74 | - [最新React课程](https://www.youtube.com/watch?v=CgkZ7MvWUAA&t=1256s) - Youtube Bro Code的react课程 75 | - [React 初学者指导](https://www.youtube.com/watch?v=SqcY0GlETPk) 76 | - [React的全套课程](https://www.youtube.com/watch?v=x4rFhThSX04) - Youtube上的React精品全套课程 77 | - [React JS 初学者完整课程](https://www.youtube.com/watch?v=RVFAyFWO4go) - 包含近 9 小时的 React JS 代码和指导 78 | - [超全的React初学者课程列表](https://www.youtube.com/playlist?list=PLSsAz5wf2lkK_ekd0J__44KG6QoXetZza) 79 | - [使用 Redux Toolkit学习React 18](https://www.youtube.com/watch?v=x4rFhThSX04) - 针对初学者的完整课程中学习如何使用React 18和Redux Toolkit 80 | 81 | ### 入门实战视频 82 | 83 | 要深入了解React开发流程，不仅要掌握技术细节，还要理解作者的编码思路和写作规范。 84 | - [全栈应用项目实战](https://www.youtube.com/watch?v=MDZC8VDZnV8) - 学习在23小时内构建 4 个全栈项目 85 | - [构建一个简单的电影应用](https://www.youtube.com/watch?v=G6D9cBaLViA&t=183s) - 使用 React 和 Vite 构建一个简单的电影应用 86 | - [边学边练](https://www.youtube.com/watch?v=iKpkVKubvKk) - 用React部署 3 个现代 Web 应用程序 87 | - [通过一个小项目学习React](https://www.youtube.com/watch?v=Rh3tobg7hEo) - 通过一个项目分解您需要了解的React中的所有最重要的概念。 88 | - [构建一个LMS网站](https://www.youtube.com/watch?v=p2zWawmDkF4) - 了解如何使用 React JS 创建完整的 LMS 网站，以及类似 Udemy 的网站 89 | - [全栈应用项目实战](https://www.youtube.com/watch?v=MDZC8VDZnV8) - 学习在23小时内构建 4 个全栈项目 90 | - [掌握React 18 与TypeScript!](https://www.youtube.com/watch?v=SqcY0GlETPk) - 使用TypeScript学习React 18并构建一个出色的前端应用程序 91 | - [React Native 速成课程](https://www.youtube.com/watch?v=bCpFbERgj7s) - 3小时内构建一个移动应用程序 92 | 93 | ### 精选Youtube频道 94 | 95 | 收集适合学习React和相关技术的优质频道 96 | 97 | - [JavaScript Mastery](https://www.youtube.com/@javascriptmastery) - 专注于提供高质量的JavaScript和前端开发教程，通过实际项目构建来教授现代web开发技术，特别关注React、Next.js等流行框架和全栈应用开发 98 | - [Programming with Mosh](https://www.youtube.com/@programmingwithmosh) - 提供了完整的React入门到精通的课程，涵盖React基础知识、组件、props、状态管理等 99 | - [Codevolution](https://www.youtube.com/@Codevolution) - 每周更新最新的Web技术课程，涵盖大量React， js，next.js相关课程 100 | 101 | ### 其他 102 | 103 | 学习React当中遇到的其他方面知识汇总 104 | 105 | - [一小时彻底搞懂跨域和解决方案](https://www.bilibili.com/video/BV1pT421k7yz) - 我们在前后端交互的时候经常会遇到一个问题：跨域，如果想详细了解并解决这个问题可以看一下这个视频 106 | 107 | ## 优质博客 108 | - [React 状态管理](https://www.redux.org.cn/) - Redux 中文文档 109 | - [前端精读周刊](https://github.com/ascoders/weekly) - 包含一些React文章 110 | - [React 状态管理](https://www.redux.org.cn/) - 包含大量 React 文章 111 | - [阮一峰的网络日志](https://www.ruanyifeng.com/blog/) - 包含对于前端领域的独特见解 112 | - [Dan Abramov的博客](https://overreacted.io/) 113 | - [Kent C. Dodd的博客](https://kentcdodds.com/) 114 | 115 | ## 开源电子书 116 | - [React 技术揭秘](https://react.iamkasong.com/) - React 源码解析 117 | - [React 入门指南](https://www.kancloud.cn/kancloud/react-quickstart/44631) - 快速入门React 118 | - [React 入门教程](https://hulufei.gitbooks.io/react-tutorial/content/introduction.html) - 很细的入门教程 119 | - [React Book](https://softchris.github.io/react-book/#/) - 关于 React 的免费书籍。适合初学者到中级水平。 120 | - [React freebook](https://github.com/EOEboh/Free-Software-Books/blob/main/books/dev-books/React/react.md) - github上整理的一些react书籍列表 121 | 122 | ## 学习社区 123 | 在学习中我们会遇到 一些问题，可以去社区或一些网站寻找答案，下面推荐一些好的React社区网站。 124 | - [stack overflow](https://stackoverflow.com/questions/tagged/reactjs) 125 | - [知乎上的React话题](https://www.zhihu.com/topic/20013159/hot) 126 | - [segmentfault React 话题](https://segmentfault.com/t/react) 127 | - [V2EX的React话题](https://www.v2ex.com/go/react) 128 | - [DEV社区](https://dev.to/) - 分享各种关于React的学习教程，资源等。 129 | - [Medium](https://medium.com/) - 高质量的英文社区，涵盖关于React的精品文章。 130 | - [Reactiflux](https://www.reactiflux.com/) - 我们是一个由20多万名开发者组成的聊天社区，专注于React。 131 | 132 | ## 社交账号 133 | 这里收集一些各个平台的社交账号，关注这些账号可以获得关于React的最新信息等 134 | - [React官方账号](https://x.com/reactjs) 135 | - [React Native官方账号](https://x.com/reactnative) 136 | - [DEV Community官方账号](https://x.com/ThePracticalDev) - 有各种React教程博客 137 | - [freeCodeCamp官方账号](https://x.com/freeCodeCamp) - 不定期分享各种编程教程，知识，包括React 138 | - [React DEV](https://x.com/reactdevz) - 不定期分享分享与React相关的教程、课程、书籍、工作…… 139 | - [React Trends](https://x.com/ReactJSTrends) - 不定期发布ReactJs最热门趋势 140 | - [Lee Robinson](https://x.com/leeerob) - 教一些react，next.js的知识 141 | - [@The_React_Dev](https://x.com/The_React_Dev) - 没事发布一些精选React教程帖子 142 | - [@petarivanovv9](https://x.com/petarivanovv9) - 实用的 React、Node 和软件架构技巧 143 | - [@remix_run](https://x.com/remix_run) - 使用 Remix 和 React Router 构建更好的网站 144 | - [@housecor](https://x.com/housecor) - 每天分享JavaScript和React开发技巧，内容实用 145 | - [kentcdodds](https://x.com/kentcdodds) - Epic React Dev课程创作者，提供全面React教程 146 | - [@ryanflorence](https://x.com/ryanflorence) - Remix联合创始人，讨论React框架和路由相关内容，适合框架学习者 147 | - [@BroCode1508](https://x.com/BroCode1508) - 前端开发人员，精通 React.js、Next.js、Node.js 和 Express.js 148 | 149 | ## React框架 150 | 这些是一些常用的 React 框架，它们可以帮助你快速开发不同类型的 React 应用。每个框架都有不同的特点和用途，适合不同的项目需求。 151 | - [next](https://github.com/vercel/next.js) - React 框架 152 | - [remix](https://github.com/remix-run/remix) - 专注于用户界面的全栈 Web 框架 153 | - [gatsby](https://github.com/gatsbyjs/gatsby) - 使用 React 构建现代网站 154 | - [react-admin](https://github.com/marmelab/react-admin) - 用于构建 B2B 应用的前端框架 155 | - [refine](https://github.com/refinedev/refine) - 构建基于 React 的 CRUD 应用，无限制 156 | - [React Native](https://reactnative.dev/) - 用于构建移动应用的框架 157 | 158 | ## React开发工具 159 | 这些工具和库都是用来优化和增强 React 开发体验的。 160 | - [create-react-app](https://github.com/facebook/create-react-app) - 通过一个命令设置现代 Web 应用 161 | - [vite](https://github.com/vitejs/vite) - 下一代前端工具 162 | - [parcel](https://github.com/parcel-bundler/parcel) - 零配置的 Web 构建工具 163 | - [million](https://github.com/aidenybai/million) - 极快且轻量级的优化编译器 164 | - [reactotron](https://github.com/skellock/reactotron) - 用于检查 React 和 React Native 项目的桌面应用 165 | - [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) - React 特定的 ESLint 规则 166 | - [why-did-you-render](https://github.com/welldone-software/why-did-you-render) - 通知您关于可避免的重渲染的 React 补丁 167 | 168 | ## React优质组件 169 | 这些是常用的 React 组件库，可以帮助你快速构建各种功能的组件。 170 | - [Awesome React Components](https://github.com/brillout/awesome-react-components) 171 | - [react-select](https://github.com/JedWatson/react-select) - React 的选择组件 172 | - [react-big-calendar](https://github.com/jquense/react-big-calendar) - 日历组件 173 | - [react-datepicker](https://github.com/Hacker0x01/react-datepicker/) - 简单可重用的日期选择器组件 174 | - [react-loading-skeleton](https://github.com/dvtng/react-loading-skeleton) - 创建自动适应应用的骨架屏 175 | - [react-qrcode](https://github.com/zpao/qrcode.react) - React 二维码组件 176 | - [react-archer](https://github.com/pierpo/react-archer) - 在 React 元素之间绘制箭头 177 | - [react-icons](https://github.com/react-icons/react-icons) - 流行图标包的 SVG React 图标 178 | - [react-complex-tree](https://github.com/lukasbach/react-complex-tree) - 无偏见的可访问树 179 | - [react-insta-stories](https://github.com/mohitk05/react-insta-stories) - Instagram 故事风格的 React 组件 180 | - [swiper](https://github.com/nolimits4web/swiper) - 最现代的移动触摸滑块 181 | - [keen-slider](https://github.com/rcbyr/keen-slider) - 触摸滑块轮播 182 | - [cookie-consent-banner](https://github.com/porscheofficial/cookie-consent-banner) - 轻量灵活的 Cookie 同意横幅 183 | - [heart-switch](https://github.com/anatoliygatt/heart-switch) - 心形切换开关组件 184 | - [kbar](https://github.com/timc1/kbar) - 快速、便携且可扩展的 cmd+k 界面 185 | - [tagify](https://github.com/yairEO/tagify) - 轻量高效的标签输入组件 186 | - [puck](https://github.com/measuredco/puck) - React 的可视化编辑器 187 | 188 | ## 其他工具资源 189 | - [codesandbox](https://codesandbox.io/) - 在线代码编辑器，让开发者无需本地配置，适合快速开发调试。 190 | - [CodePen](https://codepen.io/) - 一个在线前端开发平台，可在浏览器中创建、编辑和分享前端代码。 191 | - [swr](https://github.com/vercel/swr) - 用于数据请求的 React Hooks 库。该项目是帮助开发者简化数据请求逻辑的 React 库 192 | - [million](https://github.com/aidenybai/million) - 优化 React 性能，让您的 React 速度在几分钟内（而不是几个月）提高 70%。 193 | - [FeHelper](https://github.com/zxlie/FeHelper) - 一个浏览器扩展，格式化和美化JSON数据，使其更易读和分析 194 | - [Babel](https://babeljs.io/) - 一个 JavaScript 编译器，把 “新的 JavaScript 语法” 转换成 “旧的、浏览器能识别的语法”。 195 | 196 | --- 197 | 如果这个项目对你有帮助，请不要忘记给它一个star ⭐ 198 | --------------------------------------------------------------------------------