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.
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.
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).
2018-Handling Errors in React Components with Error Boundaries: Error Boundaries are React Components and they catch error anywhere in their child component tree.
2018-ReactStateMuseum: A whirlwind tour of React state management systems by example.
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.
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 用法以及一些常见的问题。
2017-Embracing the power of styled-components: What we learned in the first week moving away from CSS Modules.
2017-styled-media-query #Project# : Beautiful media queries better than CSS @media for styled-components with ability to specify custom breakpoints.
2017-Jest Styled Components #Project# : 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-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.
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-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.
Async Routing: react router v4 async routing
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.
2017-Some Thoughts On Forms in React: There are a number of viable approaches to solve aforementioned situations when it comes forms in React land. Without getting too specific, let’s just think about those approaches from a high level perspective.
2018-An imperative guide to forms in React: in this tutorial, I will explain how React deals with forms and events.