Learn about effects – a declarative approach to interacting with the world outside your app. With live demos, interactive exercises, and fractals.
Get the source for a live server-rendered app, using React, Firebase, Styled Components and Stripe.
Custom hooks are like mixins: they're a great way to share stateful and side-effectful functionality between components.
Even old-school class components allow you to compose component state. Hooks just make your life far, far simpler.
Navi is a new kind of router for React. It lets you declaratively map URLs to content, even when that content is asynchronous.
Hooks are a brand new API with a lot of hype. But don't let that fool you –
useContext() is incredibly useful.
You know how
catch work, but what about
finally? Does it run after rethrown exceptions or
CSS-in-JS can be a huge win for maintainability. But for large statically rendered websites, plain CSS still has its place.
Sure, you already know that you can pass children to React elements by nesting JSX tags. But what about the other 3 ways?
Learn how to use React Fragments let to group React elements, without requiring unnecessary markup or confusing
Learn how to get the succinct syntax of Markdown, the power of JSX, and all with the simplicity of create-react-app 2.
Static rendering and server rendering both involve rendering HTML for each of your app's pages – but there's one major difference between them...
Build big, fast, CDN-delivered websites with great SEO & SMO, and all with vanilla create-react-app.
Headless components are a great new way to separate presentation and control logic. But what if you don't want to pick and place all the render function's props manually?
defaultProps object on React components doesn't have access to
this.props. So how can I make default props depend on other props?
A handy cheatsheet to help make sense of promises and async/await.
React makes it easy to pass children to reusable components. But what if those children need to receive data from the component that renders them?
Before you replace Redux's
<Provider> component with React's new context API, there's a thing or two that you should know about performance.
Since Redux was created in 2015, its
<Provider> component has always used React's Context API. So how can Context replace Redux?
Dive deep into React's four approaches to conditional rendering, then test your knowledge by building a multi-step regisration wizard.
true, or they can actually be
true. But how do these differ?
Does React deserve its reputation for stability? Let's find out by exploring how nine classic React articles hold up to the latest version of React.
Controller components are a render-prop based pattern that can help you decouple state from presentation, and that facilitates reuse of business logic.
Explore the 6 rules of JSX with live examples that update as you type.
<script> tags and React's
createElement() function to build an app in a single file.
With no Redux, no Webpack, and no NPM!
Learn about CRUV, a project structure that builds on create-react-app with 4 standard directories and 3 files. Focus on making your app amazing - not on where things go.
Import the wrong
<Tooltip> component and your users' passwords will grow legs. Follow this guide to stay safe.
React has two different ways of declaring components: functions and classes. Functions are quicker to create, but provide less features. So how can you decide which to use?
React components have a habit of growing over time. But is this actually a problem? After all, it seems a little odd to create many small components that are used only once...
A collection of printable PDF cheatsheets to help you find the right tool at the right time.
Live examples of common React events, including usage of common properties on their event objects.
When used incorrectly, arrow functions cause performance issues. But they also make writing code so much easier. So how can I use them without making my components crawl?