James K Nelson

Learn how to selectively pass props through to a child component, using JavaScript's new object destructuring and spread syntax.

Generators seem like a perfect fit for stateful, asynchronous code – so why are React components built as plain functions?

No more subscription fees. No more locked content. Everything on Frontend Armory is now free!

JavaScript's this keyword is confusing at the best of times. But what if I told you that 99% of the time, five simple rules are all you need to use this like a pro?

Pseudo-selectors like :hover can make a huge impact on user experience, but they haven't composed well with React – until now!

Redux stores and RxJS Observables both have a subscribe method with a similar signature – but are they really the same thing?

It's been a big year for Frontend Armory – with new lessons, code, videos, a new mission and a new price.

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.

TODO

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 try and catch work, but what about finally? Does it run after rethrown exceptions or return statements?

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 key props.

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.

Quickly create Javascript and Markdown demos that import any package on npm. No more messing with package.json and node_modules!

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?

The 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.

You already know how to implement conditionally rendering with React: just use JavaScript! This gives you a huge amount of power... to shoot yourself in the foot.

In JavaScript, things can be "truthy", they can be coerced to 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.

Use <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.

Why is it that HTML attributes have different names when they're used within JavaScript?

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?

I've already got an application. I don't want to rebuild it from scratch. How can I integrate React into what I've already got?