React-Syntax-List
React Syntax List | React 基础语法资料索引
This post aggregates curated popular links for learning React Syntax. 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.
Component | 组件
-
2017-How Pure CSS Images Helped Me Understand React Components: How did I overcome impostor syndrome and finally learn React? There are a few reasons but one of the most significant ones was learning how to make pure CSS images.
-
2017-Convert React.createClass to ES6 Class: As of React 15.5, createClass is deprecated. You’ll get warnings in the console if you’re using it in your code – and, when React 16 comes out, createClass will be removed entirely.
Syntax | 组件语法
LifeCycle
-
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).
Error Boundary
- 2018-Handling Errors in React Components with Error Boundaries: Error Boundaries are React Components and they catch error anywhere in their child component tree.
Component Dataflow | 组件数据流
Props
State
-
2018-ReactStateMuseum: A whirlwind tour of React state management systems by example.
Context
-
React’s ⚛️ new Context API: It’s way more ergonomic, it’s no longer “experimental,” and it’s now a first-class api! OH, AND IT USES A RENDER PROP!
-
2019-How to Use the useContext Hook in React: Let’s explore the React useContext Hook by building a music player! I’ll also show you how a custom React Hook can make the useContext Hook easier to use.
Hooks
-
2019-Deep dive: How do React hooks really work?: In this article, we reintroduce closures by building a tiny clone of React Hooks. This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, we arrive at how Custom Hooks naturally arise.
-
2018- 详细preact hook 源码逐行解析: 本文通过对preact 的hook 源码分析，理解和掌握react/preact 的hook 用法以及一些常见的问题。
Style | 样式处理
CSS
CSS-in-JS
Styled Components
-
2017-Embracing the power of styled-components: What we learned in the first week moving away from CSS Modules.
-
2017-styled-media-query
: Beautiful media queries better than CSS @media for styled-components with ability to specify custom breakpoints. -
2017-Jest Styled Components
: A set of utilities for testing Styled Components with Jest. This package improves the snapshot testing experience and provides a brand new matcher to make expectations on the style rules. -
2017-Quick Tip: How to Style React Components with styled-components
-
2017-Styled-components — Mastering the fundamentals through practice
Animation | 动画
-
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.
-
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-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.
-
2017-Changing Old Habits in React Router 4: At React Conf 2017, Michael Jackson & Ryan Florence talked about React Router in their talk called “Learn Once, Route Anywhere”. They unveiled the new React Router website, and with it, the new focus that React router has taken — declarative components.
-
Demo app showing how to use react-router v4 for server- and client-side rendering
-
Async Routing: react router v4 async routing
React Router Animation | 路由动画
-
2017-A shallow dive into React Router v4 Animated Transitions: It can be a bit confusing getting animated transitions setup with React Router v4. This article won’t cover every scenario, but we’ll go over the basics so that you can add animated transitions to your application.
-
2017-Animated page transitions with React Router 4, ReactTransitionGroup and Animated: In this article I’ll show you how to animate your page transitions using lifecycle methods from ReactTransitionGroup and the Animated library.
Widgets | 控件
Form | 表单
-
2017-Automagically manage React forms state and automatic validation with MobX
-
2018-An imperative guide to forms in React: in this tutorial, I will explain how React deals with forms and events.