Modern JS with React

by Andrew H Farmer


Keep up with modern JavaScript: React, Webpack, and Babel.

Anatomy of a Static Site

November 17, 2016

Static sites are a simpler kind of web site because they don’t have a traditional server. The only server that is involved is a static asset server which you don’t have to monitor or maintain.

But these so-called static sites actually tend to have a lot of dynamic functionality implemented in JavaScript on the client.

That functionality is usually created with complex tools like Webpack, Babel, and npm. Using these tools effectively is far from simple.

Webpack Loader Variations

September 19, 2016

There are multiple ways to specify Webpack loaders. If you haven't seen them all, Webpack configs may be confusing.

Webpack 2 won't help the situation - it adds still one more way to specify loaders.

To explain these different approaches, I'll show you 7 ways to write the same exact loader configuration.

create-react-app vs other starter projects

September 04, 2016

I've written a lot about React starter projects. I've catalogued over 100 starter projects, written about when not to use them, and even built a tool to help you write your own.

Now that Facebook has come out with their own starter called create-react-app, you might be wondering if this is the one, true starter project.

Does Facebook's starter project make all the others obsolete?

How to start a React project from scratch

June 26, 2016

Many beginners don't start their projects from scratch: they use a starter project.

The idea of a starter project is so tantalizing...

Really? All that annoying setup done for me? I can just jump right into coding?

Should I use React Server-Side Rendering?

June 18, 2016

There is a lot of information on the web about how to use server-side rendering, or SSR, with React. But the question you'll want to answer first is: should I use it?

Server-side rendering is very cool, and a must-have in certain situations, but it comes with drawbacks.

Before you jump into server-side rendering, consider carefully:

Learn the JavaScript ecosystem one package at a time

May 30, 2016

Modern JavaScript is a land of many moving pieces. When you look at it from a high level: it looks like chaos. A single project might incorporate all of these packages:

es6 webpack autoprefixer axios babel-cli babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react bluebird body-parser classnames connect-pg-simple cross-env css-loader deep-equal es6-promise express express-flash express-session extract-text-webpack-plugin file-loader helmet immutable inline-environment-variables-webpack-plugin invariant isomorphic-fetch json-loader kerberos lodash method-override node-libs-browser passport passport-google-oauth passport-local pg pg-hstore postcss-import postcss-loader postcss-mixins postcss-nested postcss-reporter postcss-simple-vars react react-dom react-redux react-router react-router-redux react-transform-hmr redux redux-logger redux-thunk rimraf sequelize sequelize-cli spark-md5 style-loader url-loader warning webpack-dev-middleware webpack-hot-middleware eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react expect karma karma-jsdom-launcher karma-mocha karma-mocha-reporter karma-sinon karma-sourcemap-loader karma-webpack mocha nock nodemon null-loader react-addons-test-utils react-stateless-wrapper react-transform-catch-errors redux-mock-store sinon

If you start learning with a starter project, you will just be thrown into the chaos. It can be sooo overwhelming.

Instant Component Creation in Atom

May 13, 2016

Does your app have a ton of components? Are you tired of writing out class X extends React.Component... over and over again?

If you're using the Atom text editor, I've got a solution for you: snippets.

Check out this React component snippet in action. All I did is type 'comp', press return, and voila!

CSS Modules by Example

April 27, 2016

CSS Modules are an up-and-coming library for locally scoped CSS class names.

For a simple one-page app they may not be necessary. But if you're working on a large 20+ component app, this tool could really help you clean up your CSS.

Of course, adopting a new tool can be a bit nervewracking. You might be wondering:

What to use for React styling?

April 14, 2016

If you use React, then at some point you've thought about how to style your components.

You were probably optimistic about finding the perfect approach... and then became dismayed when you slammed your face into this wall of style tools:

What are CSS Modules? A visual introduction.

April 01, 2016

Have you ever been styling a component, only to realize that unwanted CSS rules are being applied?

Maybe you then go refactor another section of the CSS so the rules don't apply, or maybe you throw up your hands and add some !important rules just to get it working?

This is the problem that CSS Modules solve. Let's look at the official definition of a CSS Module:

Will Google find your React content?

March 20, 2016

SEO is important for almost any site, and React sites are no exception.

The problem with a React site is that the content is often generated on the client. This means that search engines may not index your content, which means users won't find your pages.

Server-side rendering is one solution, but it doesn't work for everybody (for instance if your backend is already built and it's not running node).

React AJAX Best Practices

February 05, 2016

When you start asking about AJAX and React, the first thing the experts will tell you is that React is a view library and React has no networking/AJAX features.

It's good to know, but not very helpful when you just want to get data from the server into your React components.

The truth is, there are a ton of ways to do it. You probably have thought of a couple ways yourself, but if you choose the wrong way, your code could get messy.

AJAX/HTTP Library Comparison

February 04, 2016

Networking in JavaScript falls into 2 categories: AJAX (browser) and HTTP clients (server).

Sometimes you'll only need one of these, sometimes you'll want both (in an isomorphic/universal app for instance).

Either way, you'll probably want a nice concise syntax. Most developers find the XMLHttpRequest API a little too verbose for their taste.

How AJAX works in React

February 03, 2016

React can be used with static data - but this gets boring preeeettty quickly. You might be left wondering:

How do I populate my React components with data from a server-side API?

The truth is, React is a view library and doesn't provide any networking capabilities. If this is news to you, go read about what react actually is, then head back here.

Top 5 Tutorials for Getting Started with React

January 15, 2016

Recently I found a developer asking this question about React:

"What tutorial would you recommend to get started? I'm looking for something super simple."

What is React?

January 02, 2016

It's the 🎊 new year 🎉 and it's a great time to learn some new skills! React is surging in popularity and for good reason: it is extremely useful.

But when developers consider learning React, they often come up against a problem: they aren't sure what it is.

You've probably read multiple 'what is react' descriptions at this point, but you might have found them a bit lacking. Here are some that I found:

Find your perfect React starter project

December 06, 2015

Looking for a React starter project? If you are, you probably had no problem finding one. In fact, you probably found TONS of them.

The boilerplate projects that pop out first have lots of github stars - AND lots of packages/dependencies. That can be overwhelming.

Here's what I hear from developers:

8 no-Flux strategies for React component communication

November 21, 2015

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

November 20, 2015

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

November 19, 2015

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

November 14, 2015

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:

3 Ways to Set Up Webpack with HMR

November 06, 2015

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.

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.

Run the webpack-dev-server on the command-line. With this approach you often don't need to change your webpack.config.js file, so it's the simplest. WDS CLI Docs.

Understanding Webpack HMR

November 05, 2015

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.

Read on to get a deep understanding of what HMR is and how it works so you can use it in all your projects.

Do more in less time with Webpack HMR

November 04, 2015

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.

Let's take a step back and talk about your development cycle. I'm not talking about project management or agile. Think smaller. I'm talking about this cycle: type code -> reload your app -> type more code -> ....

Simple image gallery react component

November 03, 2015

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:

The refresh button is not really part of the component - I added that so you can see the spinner in action.

Detect when images have finished loading with React

November 02, 2015

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.

Why you need to use refs instead of IDs

October 21, 2015

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 (
      <div>
        <input id="myInput" onFocus={this.onFocus.bind(this)} onBlur={this.onBlur.bind(this)}/>
      </div>
    );
  }
}

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

Use aws-sdk with Webpack

October 19, 2015

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

October 03, 2015

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

October 02, 2015

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

render() {
  return (
    <div>
      <A/>
      <B/>
    </div>
  );
}

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

September 20, 2015

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

August 27, 2015

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!