React: it’s technically backwards compatible!

Use only as directed. One of the big issues I ran into while building Frontend Armory was that right after launching the site, after spending months developing the original course, the React team released a completely new API which was largely incompatible ... more

Farewell Twitter, at least for now.

According to Twitter’s data on me, I signed up sometime in 2010. And for the first 4 or 5 years, I barely posted at all. I never really understood Twitter. What interest could people find in 140 characters anyway? When I started this blog though, I wanted ... more

Learn React’s fundamentals without the buzzwords

Companies everywhere are moving to React, and for good reason. It makes building real-world apps a breeze! But React comes with a boatload of buzzwords. Redux and GraphQL and Webpack and JSX and how am I supposed to get anything done when keeping up ... more

Smash out React code with skills you learned years ago

The React ecosystem can feel a little overwhelming at times. The countless libraries to keep track of. The ever expanding toolchain. Even the language itself is changing! And the worst thing? The moment that you think you’ve got a grasp on it all, it ... more

CRUV: Structure React apps in 4 directories and 3 files

So you’re starting a React project. You know what you want to build, and quickly spin up a project with create-react-app. And then you’re confronted with the problem of where . Where do your components go? Where should you put business logic? Where do ... more

Sensible React Forms, with Govern

Creating forms with React can be a little tricky. Perhaps you decide to use Raw React, and end up repeating the same handler code each time you need a new field. Or maybe you force the non-global form state into a global Redux store. Either way, things ... more

Component-based state management for React

When I ask people what their favorite part of React is, one of the most frequent answers is “Components”. And I agree. React’s component system is magnificent. It lets you split your code into small, single-purpose parts. It lets you work on one part ... more

CSS-in-JS, HTML-in-JS, and other mistakes

Lately, I’ve been hearing a lot of people talk about JSX as if it is HTML-in-JS. So let me clear something up: JSX is not HTML-in-JS. The thing about JSX is that it is just a special syntax for writing plain-old JavaScript. Each JSX element compiles ... more

Introducing MDXC: A new way to write Markdown for React

Read the README and browse the source on GitHub, or mess around with the live demo. Markdown is a fantastic tool. It makes writing simple . Markdown documents are plain text, so you don’t need to worry about tags and HTML and all that. You just write. ... more

The Haiku Of React Routing Principles

This is the third article in a series on junctions.js. You can read this without reading the others first. But for your convenience, here is part one and part two. Junctions.js is a router that is based on principles . These principles ensure that Junctions ... more

Why I created junctions.js

TL;DR? Junctions is a new, composable alternative to react-router. Get it at the junctions.js website! It was pretty normal day in Tokyo when I received a request from a client. “I’d like this application screen to be a React Component. And I want it ... more

Do I Even Need A Routing Library?

So you’ve decided to build a React app. It has a few screens, so you need a router. And react-router seems pretty popular, so you npm install it and put together a quick demo. Everything seems fine and dandy! Or it did, until you googled for some docs ... more

The 5 Types Of React Application State

I don’t know about you, but when I started writing React apps, I struggled to decide where my state should go. No matter how I re-arranged setState calls, things never felt quite right. And maybe that is why I got so excited when I found Redux. Redux ... more

Why use parenthesis on JavaScript return statements?

A while back, I received a great question from a reader: Just a note in your Learn React By Itself tutorial. In the “Components” section, where you say: return ( React.createElement('li', {className: 'Contact'}, React.createElement('h2', {className: ... more

State of React #2 – From Inception to Redux

Welcome back to the second instalment of State of React! In case you missed it, the first instalment demonstrated a small app without component state. And it received a bunch of interesting responses, like this one from @metapgmr: using props as state ... more

Announcing ReactJS Tokyo

Have you ever wondered how other people write React apps? There are often multiple ways to solve the same problem, but finding the best way doesn’t have to mean implementing each of them yourself! So what I’m trying to say is that if you don’t like learning ... more

Should I use shouldComponentUpdate?

So you heard React was fast , and decided to give it a go. You grabbed a boilerplate, started working through it, and noticed shouldComponentUpdate and PureRenderMixin . Some googling reveals these are the things you use to make React fast. But wasn’t ... more

How I learned to stop worrying and love the JSX

So you’ve heard the commotion about React, and thought you’d take a look. And you’ve liked what you’ve seen! Or you did, until you saw this: <div onClick={this.handleClick}>JSX butters my toast</div> OK. You’re happy to give a new technology ... more

Universal React: You’re doing it wrong

So you’ve got the React basics down, and you’ve decided to put together an app. Given that React runs on both the server side and the client side, it seems that making a Universal (or Isomorphic) app is a no-brainer. Or it did until you’d spend hours ... more

React with Babel Cheatsheet

One of my favourite blog posts on the internet is Steven Luscher‘s guest post on the Babel blog, React on ES6+. It manages to be both incredibly helpful and easy to understand, while being short enough that when you hit the end you’re like “wait, is ... more

Should I use React.createClass, ES6 Classes or stateless functional components?

So you’ve decided to build a React component. You know what it will do, what it’s called, and where it’ll go. But when you open your editor and go to write the first line, you’re confronted with the decision between three different ways to declare it? ... more

Simple Routing with Redux and React

TL;DR? Clone the Starter Kit instead. Have you ever wished that libraries for React apps could be simpler ? Sure, you know that there are cases when all the bells and whistles are an advantage — but for you, features aren’t as important as clarity . ... more

The Complete Guide to ES6 with Babel 6

Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. Which makes it kinda hilarious that by default, Babel 6 no longer transforms either: james$ echo "export function component() { return ... more

Teaching Gulp ES6, with Babel 6

This guide is the fourth in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. So you’ve written your app, your tests and your libraries in ES6. You’ve gotten so used to the new syntax ... more

Testing in ES6 with Mocha and Babel 6

This guide is the third in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. So you’ve written a useful little app with ES6, and being the excellent developer that you are, you want to ... more

Using ES6 and ES7 in the Browser, with Babel 6 and Webpack

This guide is the second in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. The Babel CLI is great for compiling ES6 to ES5 on a file-by-file basis. However, when Babel encounters an ... more

Six Recipes for Babel 6

Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. Which makes it kinda hilarious that by default, Babel 6 no longer transforms either: james$ echo "export function component() { return ... more

Writing NPM packages with ES6 using the Babel 6 CLI

This guide is the first in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. Even if you write your NPM package with ES2015, it is important that the code you publish is compatible with ... more

The Six Things You Need To Know About Babel 6

Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. But seemingly overnight, Babel 6 changed everything . The babel package was deprecated, running babel doesn’t actually transform ES2015 to ... more

Writing Happy Stylesheets with Webpack

While the last few years have seen JavaScript turn from a tangle of jQuery into an orderly affair, CSS has been the subject of neglect. While JavaScript has learned new tricks like modularity, components and dependency bundling, most stylesheets are ... more