随笔分类 - React
摘要:Error Boundaries are the way you handle errors with React, and Suspense embraces this completely. Let's take a look at how to handle asynchronous erro
阅读全文
摘要:React is really good at creating and updating DOM elements, but sometimes you need to work with them yourself. A common use case for this is when you’
阅读全文
摘要:Something that’s important to recognize is that every time you call the state updater function (like the setName function in our component), that will
阅读全文
摘要:Sometimes you have some boilerplate for components that would be nice to abstract away slightly with a simple helper function. In this lesson we'll le
阅读全文
摘要:Returning null will not update state and trigger a component re-render Example: updateMocktail = mocktail => { const newMocktail = mocktail; this.setS
阅读全文
摘要:You can have a Box element, which just used for create other element or layout: // example Box.js import styled from 'styled-components' import { spac
阅读全文
摘要:In this lesson we’ll improve a generic button primitive component by refactoring it with Styled System to simplify the implementation. The naïve style
阅读全文
摘要:Similar to Storybook, react-styleguidist is used to show the custom UI elements. It is easy to setup and use, it uses markdown file as example page: i
阅读全文
摘要:In this lesson, we're going to show how RecoilJS selectors are used to display computed data in React. While atoms are the go-to state objects in Reco
阅读全文
摘要:We have a message app: function App() { const messageDisplayRef = React.useRef() .... const scrollToTop = () => messageDisplayRef.current.scrollToTop(
阅读全文
摘要:Instead of just returning a value from a recoil selector, you can return any promise, which means that you can do asynchronous functions in recoil sel
阅读全文
摘要:Environment variables are a standard way to configure variables in your app based on the current environment (development, test, production). This les
阅读全文
摘要:const useResetScore = () => { const [score, setScore] = useRecoilState(gameScore) return () => { setScore(0) } } ... const resetScore = useResetScore(
阅读全文
摘要:Recoil allows us to use atoms in order to store pieces of state. More often than not in our apps we need to use data that derives from our application
阅读全文
摘要:Recoil is a brand new state management library for React developed by Facebook. In this quick lesson we're going to learn how to add it to a React app
阅读全文
摘要:Folder structure: | __mocks__ | api | pet.js | src | api | pet.js __mocks__/api/pet.js // __mocks__/api/pet.js import { readFileSync } from 'fs' impor
阅读全文
摘要:As a beginner of React, might have the confuses with 'useMemo' and 'React.memo': 'useMemo': When using functional components in React we may run into
阅读全文
摘要:For development, we'll be using a separate server address to reach our REST endpoints. In a production build, this will likely be a different address,
阅读全文
摘要:It's always important to test your code, especially if you're open-sourcing it for others to use. In this video, we'll learn how to use react-hooks-te
阅读全文
摘要:When you use a React Portal, much of your component can be rendered outside the main DOM tree. Let’s see how we can use utilities provided by React Te
阅读全文