随笔分类 - React
摘要：create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Babel Version 7, which enables the Short Syntax of R
阅读全文
摘要：create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr webpack loader to wrap SVGs in React components as
阅读全文
摘要：In this lesson, you will learn how to use PureComponent in React to reduce the number of times your component re-renders. This works because PureCompo
阅读全文
摘要：Sometimes you have common use cases that require common props to be applied to certain elements. You can collect these props into an object for users
阅读全文
摘要：Due to the way that React Context Providers work, our current implementation re-renders all our compound component consumers with every render of the
阅读全文
摘要：If someone uses one of our compound components outside the React.createContext <ToggleContext.Provider />, they will experience a confusing error. We
阅读全文
摘要：Our current compound component implementation is great, but it's limited in that users cannot render the structure they need. Let's allow the user to
阅读全文
摘要：In this lesson we'll use React Live to preview and edit a component directly in the browser. React Live is a great tool for rendering interactive docu
阅读全文
摘要：In this lesson we'll use mdx-deck to create a slide deck using Markdown and React. We'll look at adding multiple slides, code snippets, and importing
阅读全文
摘要：You often find duplication between the name of a prop and a variable you will assign to the prop. JSX allows you to spread an object containing your n
阅读全文
摘要：Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app. He
阅读全文
摘要：We want to make sure that when we ship new code, our users can use the application. The best way we've found to do that is to write automated tests th
阅读全文
摘要：In this lesson, I refactor a simple Counter component connected to Redux to use Unstated instead. I explain some of the cognitive overhead of working
阅读全文
摘要：In this lesson I refactor some code that utilizes the Mutation component to update client-side cache to use the new ApolloConsumer component baked int
阅读全文
摘要：getSnapshotBeforeUpdate is a lifecycle hook that was introduced with React 16.3. It is invoked right before the most recently rendered output is commi
阅读全文
摘要：getDerivedStateFromProps is lifecycle hook introduced with React 16.3 and intended as a replacement for componentWillReceiveProps. It is invoked after
阅读全文
摘要：The function forwardRef allows us to extract a ref and pass it to its descendants. This is a powerful tool, but should be used with caution to avoid u
阅读全文
摘要：The componentWillReceiveProps() method is being deprecated in future version of React (17). Many of us use this method day-to-day to check for incomin
阅读全文
摘要：In this lesson I refactor a React component that utilizes a higher-order component for mutations to the new Mutation render prop component baked into
阅读全文
[React Router] Create a ProtectedRoute Component in React Router (setState callback to force update)
摘要：In this lesson we'll create a protected route just for logged in users. We'll combine a Route with a render prop and use a loggedIn prop to determine
阅读全文
浙公网安备 33010602011771号