Andrew H Farmer

Tips, tricks, and tutorials for React developers.

6 no-Flux strategies for React component communication

Sending data between React components can seem like a pain at first. Here are some simple strategies.

In React, one of the first big issues that comes up is figuring out how components should communicate with each other.

What's the best way to tell Component1 that Component2 was clicked?

If you start to dig a little, you'll get a ton of answers. Sooner or later Flux will be mentioned, which will only raise new questions.

How to validate nested proptypes with React

Want to validate the inner properties of an object passed as a prop? I'll tell you how. (hint, DON'T use PropTypes.any or PropTypes.object)

So you're writing a React component. You know how to pass props to your component, and you know how to reference the props in the component with this.props.propname.

But there's something in the middle that's a little tricker: propTypes.

In this article I'll answer questions that fit this formula:

Webpack HMR Tutorial

The Webpack docs leave something to be desired when it comes to using Hot Module Replacement.

Struggling to set up HMR with Webpack?

Are you finding the Webpack documentation to be lacking - particularly in the HMR section? Does it seem like they've left out some important parts?

If so, read on! We'll fill in the gaps together.

Guide to JavaScript frontend package managers

Picking a JavaScript package manager can seem daunting at first - here are all the options and my recommendation.

When I started my last frontend JavaScript project I wasn't super familiar with all the package managers, what they do, and what they're for, so I quickly became very confused.

I was recently reminded of that time when I saw this question:

Are there good reasons for NOT linting your code?

Ever since I found code linting it has been one of the first things I set up on new projects. So I began to wonder - why would anyone NOT use code linting?

Code linters are 'metaprograms'. They are programs that take your code as input, and as output give you notes on how to improve it.

I have found linters to be invaluable so I always use one when I code. Lately I've been thinking...

3 Ways to Set Up Webpack with HMR

If you want to use Webpack's awesome hot module replacement (HMR) feature, there are exactly 3 ways to do it. I'll help you decide which approach makes sense for you.

It's not clear in the Webpack documentation, but there are exactly 3 ways that you can set up Webpack's hot module replacement (HMR) feature.

If you aren't sure what HMR is or why you should be using it, jump over to my why use HMR post. It could become one of those tools that saves you so much time, you wish you knew about it months ago.

Let's jump right into the 3 ways. These are ordered from the simplest setup to the most complex, but none of them are that complicated. The hardest part is picking which approach is right for you.

Understanding Webpack HMR

When using HMR without understanding the basics, it can be difficult to figure out what's wrong when it doesn't work.

Hot Module Replacement, or HMR, is essential for the fast and efficient client-side Javascript developer. I know this, and yet recently found myself not using it in my recent projects. Why?

I didn't understand how HMR works. Sometimes my projects didn't exactly match the provided examples or starter projects - and then I became lost.

If you've never heard of hot module replacement before, start by reading about why you should use it.

Do more in less time with Webpack HMR

Hot Module Replacement, or HMR, is an indispensable tool for increasing development efficiency.

Hot Module Replacement is a Webpack feature that updates your Javascript without a browser reload. It can even maintain your application state across code updates. It's primarily used for development.

This article is about why you should be using it - so if you've never heard of HMR, or if you don't use it for all your projects, read on.

Browserify also supports hot module replacement via a plugin but my articles assume you are using Webpack.

Simple image gallery react component

Building an image gallery in react is really easy - build one in 70 lines, with a spinner that hides when the images have loaded.

It turns out it's really easy to build an image gallery with a loading indicator (spinner) in React. This one is a single component with only 70 lines including spacing and comments.

I'll walk you through creating the gallery component piece by piece. Here's what you'll get when you're done:

Detect when images have finished loading with React

componentDidMount() tells you when your component is finished rendering - NOT when your images have finished loading. Learn the difference to update state when images load.

I was asked this question recently:

"Is there a way to detect when the children of a component have rendered completely?"

And the answer is, of course, componentDidMount(). componentDidMount() is called when your React component is rendered.

Discord: Hide the Clunky Sidebar

Discord has a great desktop app... but isn't that sidebar big and clunky? Here's how to hide it.

Discord is a great voice/text app for gamers. I'm not much of a gamer, but since Discord began hosting the Reactiflux chat room, I have become a frequent user and a big fan.

Discord still has some quirks though. One is that the sidebar is huge and there's no way to hide it.

Luckily, Discord is a web app, and they've exposed the Toggle Developer Tools feature. So we can hack it like a web page!

Why you need to use refs instead of IDs

Newcomers to React might not find refs to be intuitive, but they are important. Here's why you should never use an ID when you can use a ref.

Let's start by assuming that you went ahead and used an ID to access one of your elements in a React component. What could happen? Maybe your code looks like this:

class IdComponent extends React.Component {
  onFocus() {
    document.getElementById('myInput').setAttribute('class', 'highlight');
  onBlur() {
    document.getElementById('myInput').setAttribute('class', '');
  render() {
    return (
        <input id="myInput" onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)}/>

This would actually work. At first. Here's a demo. Tap the input field to see the highlight:

Use aws-sdk with Webpack

Including the aws-sdk NPM module in your Webpack project can cause errors. Here's the fix.

If you are using webpack and you thought you could just import AWS from 'aws-sdk' or require('aws-sdk')... you are out of luck. You'll see one of these errors:

Module not found: Error: Cannot resolve module 'fs' in ...

the request of a dependency is an expression

How Whitespace Works in JSX

Seeing less whitespace in your React component than you would expect? JSX removes some whitespace before outputting HTML.

Familiar with how whitespace works in HTML, but not getting the results you would expect in your React component? Read on.

The easiest way to learn is probably by example, so here we go, example city!

In these examples, HTML and JSX agree on whitespace. Not super interesting - so just scan it and let's move on. For clarity, denotes a single space.

How To Pass Events Between Components

Wondering how to set up your components to pass events between them? Wonder no more.

Imagine you have a component with a render() method like this:

render() {
  return (

If <A/> has an <input> inside of it, and you want to capture any changes to that input, how would you do it? Turns out it's really easy. The render() method that does it looks like this:

Event Bubbling

Knowing how event bubbling works in React can help you keep a clean separation between components.

Have you ever been unsure of where to put your onChange or other event handler in React? Does it go in the parent, or the child? Can you put a handler in both places? Should you pass event handlers with props?

If you've ever asked yourself any of those questions, this article is for you.

Let's start by talking about how event bubbling works without React, in the regular DOM.

Webpack Watch in Vagrant/Docker

Wondering why 'webpack --watch' doesn't work inside your virtual machine? There's a simple solution.

So you just got Webpack all set up, and you're using Vagrant or Docker. Then you run webpack --watch. But when you make changes in your favorite text editor, Webpack doesn't even notice! It does nothing! Why?

First let's discuss how this normally works on Linux:

  • You run webpack --watch, which subscribes to file changes using inotify.
  • You make changes in your text editor.
  • inotify picks up the changes and reports them to Webpack.
  • Webpack does a rebuild, yay!

Meta Post

Blog created with gulp, bootstrap, and metalsmith.

I just launched a new blog. And this is it. You're reading it right now.

This new blog is built on gulp, bootstrap, and metalsmith. :)