从零到一的 React 学习与实践资料索引（从零到一的爱）

从零到一的 React 学习与实践资料索引（从零到一的爱）

React 学习与实践资料索引

Overview: 概览

Principle: 设计理念

Case Study: 案例

Book: 书籍

Course & Conf: 视频教程与会议

Resource: 其他资源集锦

Tutorial: 入门教程

Concept: 概念

Coding: 基础编码

Component: 组件开发

Syntax: 语法

Props

State

Context

DOM

LifeCycle

Style: 样式

CSS-in-JS

Animation

React Router

StyleGuide & Design Pattern: 样式指南与设计模式

Functional React

HOCs: 高阶组件

Code Splitting: 代码分割

Performance: 性能优化

Tool: 工具

Production: 生产环境

Test: 测试

Preact

Reconciliation: 调和

Virtual DOM

Stack Reconciler

Fiber

Pattern Library: 模式库

List

Table

React 学习与实践资料索引 从属于笔者的 Web 开发基础与工程实践 中的 阅读学习资料工具集锦 系列，本文内容是笔者在学习与实践 React 以及准备每周的 前端清单系列 时候阅读的文章或者接触到的工具积累。注意，部分英文文章需要翻墙，请自备梯子。

React 学习与实践资料索引

鉴于 React 技术栈一直也在迅速发展，本文目前以 React v15.5.4 、React Router V4 版本为准，笔者会随时更新本文内容，移除过时的链接并且添加新的链接。另外本文相关的部分友链列举如下：

Web 学习与实践资料索引

JavaScript 学习与实践资料索引

Webpack 学习与实践资料索引

Redux 学习与实践资料索引

MobX 学习与实践资料索引

PWA 学习与实践资料索引

React Native 学习与实践资料索引

如果想及时了解前端技术发展，掌握一手资讯，建议阅读 前端每周清单系列 。

Overview: 概览

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

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

2017-React 常用面试题目与分析

Principle: 设计理念

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.

2017-Things nobody will tell you about React.js

2017-react-aha-moments : One of my main goals whenever I’m teaching or writing technical content is to maximize “aha” moments. An “aha” moment is a moment of sudden insight or clarity; when the subject matter suddenly makes sense. We’ve all experienced them and the best teachers I know are able to understand their audience and adapt the lesson in order to maximize these moments.

Case Study: 案例

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

Book: 书籍

2016-React In-depth: An exploration of UI development【Book】 :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【Book】 : 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【Book】 : A compilation of React Patterns, techniques, tips and tricks.

2017-Learning React, 1st Edition【Book】 : 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【Book】 : 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【Book】 : 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.

Course & Conf: 视频教程与会议

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

Resource: 其他资源集锦

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

React/Redux Links : Curated tutorial and resource links I've collected on React, Redux, ES6, and more

Tutorial: 入门教程

Concept: 概念

Master the JavaScript Interview What is a Pure Function

So-You-Want-To-Be-A-Functional-Programmer

React’s diff algorithm

The Secrets of React’s virtual DOM

Why is React’s concept of virtual DOM said to be moreperformant than dirty model checking?

virtual-dom

Coding: 基础编码

2016-Learning React with Create-React-App【Series】

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.

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-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.

Component: 组件开发

Syntax: 语法

2017-React Lifecycle Methods- how and when to use them : The above is the life of a React component, from birth (pre-mounting) and death (unmounting).

React 组件间通讯

react-aha-moments

React Elements and React Components

React Components, Elements, and Instances

Props

function-as-child-components

React Patterns：Children相关

A deep dive into children in React

Function as Child Components

State

Context

How to safely use React context

React Docs:Context

DOM

Refs and the DOM

LifeCycle

React’s Component Lifecycles

浅析 React 生命周期

Style: 样式

SurviveJS:Styling React

A 5 Minute Intro To Styled Components

CSS-in-JS

2017-CSS in JavaScript: The future of component-based styling

2017-Stop using CSS in JavaScript for web development : This article lists common misconceptions (myths) and the existing CSS solutions to those problems.

Animation

2017-react-move【Project】 : Beautifully and deterministically animate anything in React.

2017-React Animations 101【Series】 : In this post on react animations 101, we will explore a few examples and why CSS transition are a good fit for the navigation bar.

Animations with ReactTransitionGroup

React Official Docs:React动画文档

Animations with ReactTransitionGroup

React源码剖析系列 － 玩转 React Transition

How to build animated microinteractions in React : Every function in JavaScript has a closure. And this is one of the coolest features of the JavaScript language. Because without closures, it would be hard to implement common structures like callbacks or event handlers.

React Router

2017-A Simple React Router v4 Tutorial

2017-Redux and React-Router v4: a Tale of Two Datastores

2017-Build your own React Router v4 : this has helped you create a better mental model of what’s happening in React Router while also helping you to gain an appreciation for React Router’s elegance and “Just Components” API.

2017-Universal JavaScript Apps with React Router 4 : How to use the latest version of React Router both on the server side and the client side

StyleGuide & Design Pattern: 样式指南与设计模式

2016-来自 AlloyTeam 的 React.js 2016最佳实践

2016-React Patterns : Patterns for React Developers

2017-10 React mini-patterns : Over the last few years, I’ve worked on a handful of decent-sized React projects, and many, many pint-sized ones. Throughout this magical journey, a number of patterns have come up that I find myself repeating again and again.

Presentational and Container Components

React Higher Order Components in depth

Understanding Component-Based Architecture

Share Code between React and React Apps using Higher Order Components

Higher Order React Components

Renderless Components or How Logic Doesn't Always Need a UI

Higher-Order Components in React

jsinspect

Our Best Practices for Writing React Components

Functional React

2017-Functional setState is the future of React : Declare state changes separately from the component classes.

non-functional-react-js

HOCs: 高阶组件

2017-Why you should keep your react components pure by using HOCs : In this article I show how decomposing state from the presentational layer can both reduce complexity and promote code re-use with some React examples— a win-win situation helping to tame the challenges of developing SPAs. Although I’m using React, the lessons are universal and can apply to any framework.

redux-without-profanity-components

Functional React Series — Part 1: Get your App outta my Component

Mixins Are Dead. Long Live Composition

react-higher-order-components-in-depth

container-components

Code Splitting: 代码分割

2017-Introducing React Loadable : Component-centric code splitting and loading in React

Performance: 性能优化

React Office Site —— Optimizing Performance : For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.

2017-Keep Your React Redux Healthy, Performance Optimization Story : I am here to be honest about React optimization.

2017-React at Light Speed : Lessons in optimizing performance at Vixlet

2017-45% Faster React Functional Components, Now

2017-Our Best Practices for Writing React Components : When I first started writing React, I remember seeing many different approaches to writing components, varying greatly from tutorial to tutorial. Though the framework has matured considerably since then, there doesn’t seem to yet be a firm ‘right’ way of doing things.

2017-Memoize React components

2017-React at Light Speed

Should I use shouldComponentUpdate?

React移动web极致优化

[ProReact中关于性能的章节]()

component-rendering-performance-in-react

React应用优化：避免不必要的render

React Rally: Animated — React Performance Toolbox

How to Benchmark React Components: The Quick and Dirty Guide

React.js pure render performance anti-pattern

A DEEP DIVE INTO REACT PERF DEBUGGING

React at 60fps

React Performance Optimization

React Performance Optimization : Performance optimization can be a big pain with any language. Especially when you are optimizing your app and you have no idea what to optimize. React has some really nice tools to do this, I will be talking about one specifically that will make your life a lot better.

Tool: 工具

why-did-you-update【Project】 : Puts your console on blast when React is making unnecessary updates.

Production: 生产环境

Test: 测试

2017-Testing React Applications【Series】 ：With React and the ecosystem of testing tools that have emerged around it, it’s finally possible to build robust, scalable tests that provide strong guarantees on code correctness.

Server Side Rendering: 服务端渲染

2017-Introducing Rapscallion【Project】 : a new approach for server-side rendering React applications.

Preact

The Inner Workings Of Virtual DOM

Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Preact

Reconciliation: 调和

Virtual DOM

2017-react diff 原理 ：React diff 作为 Virtual DOM 的加速器，其算法上的改进优化是 React 整个界面渲染的基础，以及性能提高的保障，同时也是 React 源码中最神秘、最不可思议的部分，本文将剖析 React diff 的不可思议之处。

Performance Calendar:React’s diff algorithm

React 源码剖析系列 － 不可思议的 react diff

React 源码剖析系列 － 解密 setState

深入浅出React（四）：虚拟DOM Diff算法解析

ReactJS | Learning Virtual DOM and React Diff Algorithm

Stack Reconciler

Dive into setState() method in React

Dive into React codebase: Handling state changes

2017-react-reconciler-demo【Project】 : A simple implementation of React's stack reconciler. This is much different from the real implementation, but demonstrates the concepts.

ON THE ASYNC NATURE OF SETSTATE IN REACT

Fiber

2017-React Fiber Architecture : A description of React's new core algorithm, React Fiber.

2017-React Fiber 是什么 ：React Fiber 这个大改变 Facebook 已经折腾两年多了，刚刚结束不久的 React Conf 2017 会议上，Facebook 终于确认，React Fiber 会搭上 React 下一个大版本v16的顺风车发布。

2017-React 新引擎 React Fiber 究竟要解决什么问题？ ：Facebook 正在以流行的 JavaScript 框架 React 为基础开发一个全新的架构。这个名为 React Fiber 的全新设计改变了检测变更的方法和时机，借此可改进浏览器端和其他渲染设备的响应速度。 这一 全新架构 最初已于 2016 年 7 月公开发布，其中蕴含着过去多年来 Facebook 不断改进的工作成果。该架构可向后兼容，彻底重写了 React 的协调（Reconciliation）算法。该过程可用于确定出现变更的具体时间，并将变更传递给渲染器。( https://parg.co/btw )

2017-React 新引擎 React Fiber 究竟要解决什么问题？ ：Facebook 正在以流行的 JavaScript 框架 React 为基础开发一个全新的架构。这个名为 React Fiber 的全新设计改变了检测变更的方法和时机，借此可改进浏览器端和其他渲染设备的响应速度。 这一 全新架构 最初已于 2016 年 7 月公开发布，其中蕴含着过去多年来 Facebook 不断改进的工作成果。该架构可向后兼容，彻底重写了 React 的协调（Reconciliation）算法。该过程可用于确定出现变更的具体时间，并将变更传递给渲染器。

2017-React Conf: A Cartoon Intro to Fiber

Pattern Library: 模式库

Material-UI : A Set of React Components that Implement Google's Material Design.

Ant Design : An enterprise-class UI design language and React-based implementation.

List

React Canvas

React JSX: Iterating through a hash and returning JSX elements for each key

Understanding unique keys for array children in React.js

Rendering List of Elements in React With JSX

Table

Table： react-datasheet

来自：https://segmentfault.com/a/1190000009400209

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。