Introducing react-pacomo: Automatic namespacing for className

So you’ve got a React application, and you want to style it. But no matter how hard you try, you just can’t get excited about the existing options. Maybe you like how Inline Style eliminates globals, but don’t want to gamble on an untested technology ... more

Why You Shouldn’t Style React Components With JavaScript

So one of the hottest topics in the React world lately is Inline Style , i.e. setting styles with an element’s style property instead of CSS. This new and shiny way of doing things promises to make your life easier . It eliminates the bugs caused by ... more

Join The Dark Side Of The Flux: Responding to Actions with Actors

Have you ever wanted to respond to a change in your Redux store’s state by dispatching another action? Now you know that this is frowned on. You know that if you have enough information to dispatch an action after the reducer does its thing, then it ... more

Can I dispatch multiple actions from Redux action creators?

When using Redux, you may have come across a scenario where you’d like one action creator to dispatch multiple actions. There are a few reasons you’d want to do this, but let’s consider the problem of handling a submit event from a form. In response, ... more

Choosing a JavaScript Build Tool – Babel, Browserify, Webpack, Grunt and Gulp

When starting a new JavaScript project, one of the first things you’ll do is set up a build system. But with so many options, deciding on tools often gets in the way of building the app itself. Imagine if there was a simple rule you could follow to choose ... more

Which Flux Implementation Should I Use With React?

So you’ve sifted through the seemingly infinite sea of JavaScript frameworks, and finally settled on React. But then you realise that React only solves half the problem, and everyone is now using Flux for the other half. But that’s ok — if Flux came ... more

Building a Router with Raw React

Invariably, one of the first things you’ll do when you start a new React project is implement routing. But assuming you’re able to choose which tool to use, you’ll then be stuck with the problem of spending hours and hours figuring out how to use it ... more

React and pushState: You’re doing it wrong

In the world of React.js single-page apps, there are two types of routing: push-state, and hash-based. Each of these have their strengths and weaknesses. Now as you may know, most of the React ecosystem focuses on push-state routing , using the HTML5 ... more

Learn Raw React: Ridiculously Simple Forms

So – you’ve got the hang of React, and you’ve even built a little app. But after making your app look nice , you remember that you also need to make it work . And that’s when you start searching for form libraries. First you look for tools to structure ... more

React.js By Example: Interacting with the DOM

This article is based on the code from part 2 of my Learn Raw React series: Ridiculously Simple Forms . Sometimes, the user’s next action is so obvious that it feels almost rude not to do it for them. The textbook example is when a form has failed validation ... more

Learn Raw React — no JSX, no Flux, no ES6, no Webpack…

Disclaimer: I love JSX, Flux, ES6 and Webpack. I’ll discuss these tools more in another series. So you’ve heard all the fuss about React.js – apparently it is the best thing since XMLHttpRequest . But you’ve spent a couple hours investigating, only to ... more

Structuring React Applications: Higher-Order Components

Do you ever find yourself frustrated with all the boilerplate and repetitive code in React components? Frequent use of patterns make components long-winded, hard to reason about, and difficult to maintain. And with mixins no longer supported in ES6 components, ... more

A system for structuring your React application’s styles

Read the full specification at the GitHub repository. Have you ever experienced the frustration involved in adding styles to your new component, just to find that some other style, somewhere in the same project, is conflicting with yours? Without structure, ... more

The Road To 100 Signups

This year, I had a fuck this moment . I decided that I want to be able to do something interesting with my life. And with the help of 30×500, I actually started working towards it. To me, “doing something interesting with my life” means making things ... more

Building a property passthrough Higher-Order Component for React

Just want the component? Find it at GitHub Possibly the most frequently re-implemented code across any React component is that used to pass properties through to child components. This stems from the fact that you generally need some sort of input to ... more

Unlocking decorators and other ES7 features with Webpack and Babel

While Babel has great ES6 support and a few ES7 goodies, some of the most interesting proposals are still locked behind the “stage 0” wall. This is all well and good if you need to build code which you can guarantee will work without compilation in a ... more