开始 React 吧！30 天学会 React

想学习 React，却不知从何入手？别再寻找其他资源了。快来学习 React！

React 是一个用户界面库。它做不了太多事情，它只负责渲染元素。仅此而已。React 并不是一个功能齐全、像瑞士军刀一样的框架。

根据2020 年 StackOverflow 开发者调查，React 是第二受欢迎的 Web 框架。

“React 是一个用于构建用户界面的 JavaScript 库” reactjs.org

我从《超级学习》这本书中学到的一点是，你应该在新技能的实际应用场景中学习它。所以，最好是边做边学，而不是从头到尾读一本书或被动地看视频。不要复制粘贴！

这些是学习 React、其先决条件和相关主题的一些资源。

先决条件

CSS

• CSS 布局教程
• 建立专业网站

JavaScript

• 重新介绍 JavaScript或一小时学会 JavaScript
• ES6 教程或Coursera ES6 基础知识
• 关注一些 Vanilla 项目：
  • 音乐盒
  • 待办事项应用程序
  • 俄罗斯方块游戏
  • Twitter 克隆
  • 产品目录
  • 电子商务网站
  • YouTube API 代理服务器

其中一些项目包含使用 Node.js 的后端。您可以在15 个原生项目创意和20+ 个使用原生 JavaScript 的 Web 项目中找到更多无需任何后端代码的原生项目。

不要让不同版本的 Node 弄乱你的环境。请遵循“在阅读本文之前请勿安装 Node”，Docker Compose 会改善你的开发工作流程。

React 和其他东西

其他学习计划

• 4周计划：治愈JavaScript疲劳的学习计划
• 如何学习 React — 从初学者到高级的路线图
• React 学习资源
• 2020 年如何学习 React.js
• 从零开始学习 React 的简单指南

React：第一步

• React 能做什么（以及不能做什么）
• React 教程：概述和演练
• React：入门 - 2020 年完整教程
• 来自 React 官方文档：
  • 教程：React 简介
  • 如果你更喜欢先学习概念，Hello World
  • React 中的思考
  • 组合与继承

React Hooks

• React Hooks 简介
• 如何使用 React Hooks 获取数据？
• 修复每次渲染时 useEffect 重新运行的问题
• useEffect 完整指南
• useReducer Hook 的示例以及如何在 React 中使用 useReducer
• React Context以及如何在 React 中使用 Context？
• React 状态钩子：useReducer、useState、useContext
• 2020 年编写 React 组件（带 Hooks）的五个常见错误

演练

基础 & 中级

• 直播游戏
• Markdown 预览
• 食谱应用程序
• 书签应用程序
• 测验应用程序
• 计算器
• 建立网站
• 天气应用
• 电影列表应用
• 使用 React 和 Material UI 的多步骤表单
• YouTube 克隆

先进的

• 费用追踪器及其后端
• 使用 Chatkit或Socket.io聊天
• React 中 Firebase 身份验证初学者教程
• Yelp 克隆。在 React 中开始使用 TDD，在 React 中开始使用 TDD
• 旅行日志
• Todoist 克隆
• 构建新闻阅读器
• 电子商务网站
• 预订应用程序
• Netflix 克隆版

React 和 Redux

Redux 可能是最具挑战性的课题。store 、actions、reducers、thunks、sagas、dispatching 等等。先从学习如何使用useStatehook、then useReducer、thenuseContext和 last Redux 开始。这样感觉更自然。

确保了解哪些内容应该放入 Redux Store，以及应该在哪里调用 API。请注意，你可能不需要 Redux

教程

• 使用 Redux 之前需要在 React 中学习的 8 件事
• Redux 的作用是什么？、面向初学者的完整 React Redux 教程以及React 和 Redux 中的不变性：完整指南
• Redux 与 React Context API
• React Redux 初学者教程这是一个完整的 Redux 教程。它几乎涵盖了你需要知道的所有内容，从创建 store 到测试 reducer。
• 使用 React 升级：Redux
• Redux 教程 - 从头学习 Redux

演练

• 简单笔记应用
• 购物车结账总结面试流程练习。尝试自己添加 Redux
• 带有 Redux 的电影应用程序再次尝试自行添加 Redux。
• 使用 React、Redux 和 SVG 开发游戏

课程

有薪酬的

• Pluralsight React.js 入门
• Coursera 全栈 React
• Udemy Instagram 克隆

自由的

• React 初学者指南
• 免费 React 训练营
• 免费学习 React
• React 30 天
• 学习使用 React 和 Redux 构建应用程序

实践与项目构想

• 作弊致胜：通过 Copywork 学习 React。两个可以复制的项目：React Snake、GitHub 问题查看器
• 通过实践项目学习 React 的基础知识
• 6 个有趣的 React 项目创意
• 你的投资组合中需要的 5 个 React 项目
• 10 个 React Starter 项目创意助你快速上手编程

杂项

• 如何构建你的 React 项目或React 目录结构
• 如何使用 React + Parcel 构建 Chrome 扩展程序
• React 内部
• 构建自己的 Redux
• 前端框架对决

您可以按照LetsReact中这篇文章的资源找到我自己的 30 天旅程。

你可以在“Let's React. 第 18 天（共 30 天）”和“Let's React. 第 27 天（共 30 天）”上阅读我的进度和收获。

快乐的 React/Redux 时光！