Awesome React Lists

This file aggregates curated popular links for learning React, Syntax, DevOps, Production Tips, Internals, OpenSource, etc. More reference about ITCS can turn to Awesome Links: Guide to Galaxy, which collects valuable, popular and up-to-date links for CS, including Programming Language, Software Engineering, Server Side Application, Infrastructure, InfoSecurity, Industrial Application, DataScienceAI, Frontend Technology(iOS, Android, RN, Electron), etc.

Source files are hosted in Github, PRs Welcome.

如果想了解更多关于 Redux、MobX 等相关生态系统的资料，同样可以查看 Awesome Lists 中的 Redux Links 与 MobX Links 等内容。

Overview | 概述

Book

• 2016-《React In-depth: An exploration of UI development》📚:Our goal with this GitBook is to document our process, share our research and try to organize our experiences into a single living document. Too be honest, this is a pretty lofty goal. We may not achieve this goal, but hopefully we can get some helpful thoughts down.

• 2016-《SurviveJS - React》📚: This book shows you how to build a little Kanban application using React. During the process you will learn the basics and will be able to take the skills to your own projects.

• 2017-《React Bits》📚: A compilation of React Patterns, techniques, tips and tricks.

• 2017-《Learning React》-1st 📚: If you want to learn how to build efficient user interfaces with React, this is your book. Authors Alex Banks and Eve Porcello show you how to create UIs with this small JavaScript library that can deftly display data changes on large-scale, data-driven websites without page reloads. Along the way, you’ll learn how to work with functional programming and the latest ECMAScript features.

• 2017-《Mastering Full-Stack React Web Development》📚: Learn how to create dynamic full-stack applications with ReactJS and other leading JavaScript tools – smarter web development starts here.

• 2017-《React Design Patterns and Best Practices》📚: Build modular applications that are easy to scale using the most powerful components and design patterns that React can offer you right now About This Book.

• 2017-《React Express #Series#: The all-in-one beginner’s guide to modern React application development!

• 2017-《React and React Native》📚: Use React and React Native to build applications for desktop browsers, mobile browsers, and even as native mobile apps.

• 2018-《React in patterns》📚: A book about common design patterns used while developing with React. It includes techniques for composition, data flow, dependency management and more.

• 2018-《React From Zero》📚: Everything runs in the browser without a manual pre-compilation.

• 2020-《react-book》📚: Free book on React. Beginner to intermediate.

• 2020-《图解 React 源码》📚 : react 源码, 基于react@17.0.2(尽可能跟随 react 版本的升级, 持续更新). 用大量配图的方式, 致力于将 react 原理表述清楚.

Concept | 概念阐述

• 2014-Removing User Interface Complexity,or Why React is Awesome

• 2016-Thinking in React: One of the many great parts of React is how it makes you think about apps as you build them. In this document, we’ll walk you through the thought process of building a searchable product data table using React.

• 2016-React “Aha” Moments: So what I want to do in this post is share my collection of these moments while also adding my thoughts on some of the moments shared in that Reddit thread.

• 2017-Things nobody will tell you about React.js

• 2018-React 是怎样炼成的: 本文主要讲述 React 的诞生过程和优化思路。内容整理自 2014 年的 OSCON - React Architecture by vjeux，虽然从今天(2018)来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥 Facebook 优秀的工程管理文化。

• 2019-展望 React 17，回顾 React 往事: 回到 React 16 的话题。要讨论未来（React 17），必须要了解过去。以 React 16 为分水岭，我们可以分为两方面来看这个问题。一是为什么、 二是怎么办。

Ecosystem | 生态圈

• 2016-A Primer on the React Ecosystem Serials: I thought I’d share what I’ve learned so far through a primer. Over three parts, I’m going to show you how to set up an environment for React app development, create React components and have them respond to data changes, manage app state with Redux.

• 2018-揭秘 React 生态体系: React 可以说是目前为止最热门，生态最完善，应用范围最广的前端框架。React 结合它的整个生态，它可以横跨 web 端，移动端，服务器端，乃至 VR 领域。

Case Study | 案例分析

• 2016-Moving Airbnb Search to React: Using experiments to tackle a large refactor with confidence

• 2018-Migrating Medium to React.js and GraphQL: making the new system incrementally available to users while not hindering development of new features.

Resource | 资源

Blog | 博客

• Overreacted #Blog#: Blog by Dan Abramov.

Course & Conf | 课程与会议

• 2017 React 大会：2017 年 React Conf 于 3 月 13 日、14 日成功举办，会上来自世界各地的开发者就 React Fiber、Flow、Performance、React Native 等多个主题发表了演说与讨论，推荐选择自己喜欢的演讲视频观看。

• 2017-learncodeacademy/react-js-tutorials: Code that goes along with my YouTube React JS Series.

• 2018-React 从入门到精通 🎥: 极客时间：React 从入门到精通。

• 2020-30 Days of React 🎥: 30 Days of React challenge is a step by step guide to learn React in 30 days. This challenge needs an intermediate level of HTML, CSS, and JavaScript knowledge. It is recommended to feel good at JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of Java…

• 2020-Advanced-React 🎥: Starter Files and Solutions for Full Stack Advanced React and GraphQL

• 2021-react-fundamentals : Learn everything you need to be effective with the fundamental building block of React applications. When you’re finished, you’ll be prepared to create React components to build excellent experiences for your app’s users.

• 2023-ultimate-react-course 🎥: Starter files, final projects, and FAQ for my Ultimate React course

Collection | 集合

• Awesome-React 🗃️: A collection of awesome things regarding React ecosystem.

• React/ReduxList 🗃️: Curated tutorial and resource links I’ve collected on React, Redux, ES6, and more

• Using forms in React-Redux: Tips And Tricks 🗃️

Series

• 2017-Under the hood ReactJS #Series#: Entire ReactJS code base explanation by visual block schemes (Stack+Fiber versions)

• Big-React #Series#: 跟着我，从 0 实现 React18。

Tutorial | 教程

• 2016-Learning React with Create-React-App #Series#

• 2016-React Howto: Throughout this document, I’ll assume you’ve built a web page with HTML, CSS and JavaScript.

• 2017-Why React Developers LOVE Node: Some people mistakenly assume that Node is required in order to use React.

• 2017-Simple React Development in 2017: The goal of this guide is to showcase how easy it can be to start modern React development.

• 2017-All the fundamental React.js concepts, jammed into this single Medium article: This article is not going to cover what React is or why you should learn it. Instead, this is a practical introduction to the fundamentals of React.js for those who are already familiar with JavaScript and know the basics of the DOM API.

• 2018-Rock Solid React.js Foundations: A Beginner’s Guide: this post is aimed towards the audience who is looking for a perfect mix of theory and hands-on.

• 2018-A Comprehensive Guide to React.js in 2018: This article was originally published in January of 2015, but was recently updated to React 16.3 and all the goodness it contains.

• 2018-React Developer Roadmap: Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn in order to become a React developer.

Example

• 2017-A React TODOs example, explained

• 2017-Create a realtime football voting app using React, Redux, React-Router-v4 and Firebase: In this series of tutorials, we’ll be creating a football voting app using React, Redux, Redux-Saga, React-Router v4, and Firebase. In this first part, we will setup the project. We’re going to use create-react-app to scaffold the initial project structure, tweak it a bit, and then add the necessary libraries that we’ll be using.

• 2017-How to Build a ToDo App Using React, Redux, and Webpack: In this tutorial I’m going to show you how to create a simple “ToDo” app using React, Redux, a little bit of Node, and Cosmic JS.