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

王飞英
2023-12-01
  • 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 版本为准,笔者会随时更新本文内容,移除过时的链接并且添加新的链接。另外本文相关的部分友链列举如下:

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

Overview: 概览

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: 案例

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: 概念

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: 测试

  • 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: 服务端渲染

Preact

Reconciliation: 调和

Virtual DOM

Stack Reconciler

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

Table

 类似资料: