• React 學(xué)習(xí)與實(shí)踐資料索引

• Overview: 概覽

  • Principle: 設(shè)計(jì)理念

  • Case Study: 案例

  • Book: 書籍

  • Course & Conf: 視頻教程與會(huì)議

  • Resource: 其他資源集錦

• Tutorial: 入門教程

  • Concept: 概念

  • Coding: 基礎(chǔ)編碼

• Component: 組件開發(fā)

  • Syntax: 語法

    • Props

    • State

    • Context

    • DOM

  • LifeCycle

  • Style: 樣式

    • CSS-in-JS

  • Animation

  • React Router

• StyleGuide & Design Pattern: 樣式指南與設(shè)計(jì)模式

  • Functional React

  • HOCs: 高階組件

  • Code Splitting: 代碼分割

• Performance: 性能優(yōu)化

  • Tool: 工具

• Production: 生產(chǎn)環(huán)境

  • Test: 測(cè)試

  • Preact

• Reconciliation: 調(diào)和

  • Virtual DOM

  • Stack Reconciler

  • Fiber

• Pattern Library: 模式庫(kù)

  • List

  • Table

React 學(xué)習(xí)與實(shí)踐資料索引 從屬于筆者的 Web 開發(fā)基礎(chǔ)與工程實(shí)踐 中的 閱讀學(xué)習(xí)資料工具集錦 系列，本文內(nèi)容是筆者在學(xué)習(xí)與實(shí)踐 React 以及準(zhǔn)備每周的 前端清單系列 時(shí)候閱讀的文章或者接觸到的工具積累。注意，部分英文文章需要翻墻，請(qǐng)自備梯子。

React 學(xué)習(xí)與實(shí)踐資料索引

鑒于 React 技術(shù)棧一直也在迅速發(fā)展，本文目前以 React v15.5.4 、React Router V4 版本為準(zhǔn)，筆者會(huì)隨時(shí)更新本文內(nèi)容，移除過時(shí)的鏈接并且添加新的鏈接。另外本文相關(guān)的部分友鏈列舉如下：

• Web 學(xué)習(xí)與實(shí)踐資料索引

• JavaScript 學(xué)習(xí)與實(shí)踐資料索引

• Webpack 學(xué)習(xí)與實(shí)踐資料索引

• Redux 學(xué)習(xí)與實(shí)踐資料索引

• MobX 學(xué)習(xí)與實(shí)踐資料索引

• PWA 學(xué)習(xí)與實(shí)踐資料索引

• React Native 學(xué)習(xí)與實(shí)踐資料索引

如果想及時(shí)了解前端技術(shù)發(fā)展，掌握一手資訊，建議閱讀 前端每周清單系列 。

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: 設(shè)計(jì)理念

• 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: 視頻教程與會(huì)議

• 2017 React 大會(huì) ：2017 年 React Conf 于 3 月 13 日、14 日成功舉辦，會(huì)上來自世界各地的開發(fā)者就 React Fiber、Flow、Performance、React Native 等多個(gè)主題發(fā)表了演說與討論，推薦選擇自己喜歡的演講視頻觀看。

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: 基礎(chǔ)編碼

• 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: 組件開發(fā)

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相關(guān)

• 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動(dòng)畫文檔

• Animations with ReactTransitionGroup

• React源碼剖析系列 － 玩轉(zhuǎn) 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: 樣式指南與設(shè)計(jì)模式

• 2016-來自 AlloyTeam 的 React.js 2016最佳實(shí)踐

• 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: 性能優(yōu)化

• 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移動(dòng)web極致優(yōu)化

• [ProReact中關(guān)于性能的章節(jié)]()

• component-rendering-performance-in-react

• React應(yīng)用優(yōu)化：避免不必要的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: 生產(chǎn)環(huán)境

Test: 測(cè)試

• 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: 服務(wù)端渲染

• 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: 調(diào)和

Virtual DOM

• 2017-react diff 原理 ：React diff 作為 Virtual DOM 的加速器，其算法上的改進(jìn)優(yōu)化是 React 整個(gè)界面渲染的基礎(chǔ)，以及性能提高的保障，同時(shí)也是 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 這個(gè)大改變 Facebook 已經(jīng)折騰兩年多了，剛剛結(jié)束不久的 React Conf 2017 會(huì)議上，F(xiàn)acebook 終于確認(rèn)，React Fiber 會(huì)搭上 React 下一個(gè)大版本v16的順風(fēng)車發(fā)布。

• 2017-React 新引擎 React Fiber 究竟要解決什么問題？ ：Facebook 正在以流行的 JavaScript 框架 React 為基礎(chǔ)開發(fā)一個(gè)全新的架構(gòu)。這個(gè)名為 React Fiber 的全新設(shè)計(jì)改變了檢測(cè)變更的方法和時(shí)機(jī)，借此可改進(jìn)瀏覽器端和其他渲染設(shè)備的響應(yīng)速度。 這一 全新架構(gòu) 最初已于 2016 年 7 月公開發(fā)布，其中蘊(yùn)含著過去多年來 Facebook 不斷改進(jìn)的工作成果。該架構(gòu)可向后兼容，徹底重寫了 React 的協(xié)調(diào)（Reconciliation）算法。該過程可用于確定出現(xiàn)變更的具體時(shí)間，并將變更傳遞給渲染器。( https://parg.co/btw )

• 2017-React 新引擎 React Fiber 究竟要解決什么問題？ ：Facebook 正在以流行的 JavaScript 框架 React 為基礎(chǔ)開發(fā)一個(gè)全新的架構(gòu)。這個(gè)名為 React Fiber 的全新設(shè)計(jì)改變了檢測(cè)變更的方法和時(shí)機(jī)，借此可改進(jìn)瀏覽器端和其他渲染設(shè)備的響應(yīng)速度。 這一 全新架構(gòu) 最初已于 2016 年 7 月公開發(fā)布，其中蘊(yùn)含著過去多年來 Facebook 不斷改進(jìn)的工作成果。該架構(gòu)可向后兼容，徹底重寫了 React 的協(xié)調(diào)（Reconciliation）算法。該過程可用于確定出現(xiàn)變更的具體時(shí)間，并將變更傳遞給渲染器。

• 2017-React Conf: A Cartoon Intro to Fiber

Pattern Library: 模式庫(kù)

• 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

 

標(biāo)簽： Google isp 代碼 開發(fā)者

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。