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. Instead of giving up control to fast-moving libraries written by big names, you want to understand what is going on under the hood. And instead of sifting through documentation on twenty different tools before getting started, you want to get stuck into it right now.

And you’re not alone! In fact, most of my work has involved small projects which don’t make use of many of the features provided by popular routing libraries. So instead, I’ve rolled my own routing using Redux and React. And it is so simple that everything you need to know fits into this short guide.

Continue reading

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 <div /> }" | babel
SyntaxError: unknown: Unexpected token (1:37)
> 1 | export function component() { return <div /> }
    |                                      ^

So what happened? Well, in the brave new world of Babel 6, you need to choose which transforms to run. This promotes separation of concerns, a decidedly good thing. It also tends to promote a “shit shit” moment when suddenly nothing works.

But luckily, this doesn’t mean that you’ll now need to comb through the bug trackers and documentation for seemingly every part of your build system. Instead, just follow these five guides to get your app, libraries, tasks and tests modernised in no time!

Continue reading

Teaching Gulp ES6, with Babel 6

This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading 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 that it feels unnatural even trying to write ES5. And this makes it all the more jarring when you add a Gulp file with an import statement, and suddenly this happens:

/unicorn-standard-boilerplate/gulpfile.js:1
(function (exports, require, module, __filename, __dirname) { import del from
                                                              ^^^^^^
SyntaxError: Unexpected reserved word

Oops, gulpfile.js only supports ES5. But lucky for you, teaching it ES6 is almost as simple as renaming a file. Almost…

Continue reading

Testing in ES6 with Mocha and Babel 6

This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading 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 test it. You’ve got some experience testing with Mocha, so you write a few tests and run them. And bam, nothing works. Why? Because by default, Mocha only knows ES5. But luckily, teaching Mocha ES6 only takes about a minute and 30 seconds!

Continue reading

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

This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading 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 import statement, it outputs a require call – which won’t get you very far in the browser.

To make our Babel output browser friendly, we’ll need to bundle it. My favourite tool for this is Webpack, and as it happens, Webpack has great Babel support through babel-loader

Continue reading

Writing NPM packages with ES6 using the Babel 6 CLI

This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading 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 everyone else’s JavaScript environments. That means compiling your code to ES5 before publishing it. And of course, the best way to do so is with the Babel CLI.

Continue reading

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 ES5, and the old docs have basically disappeared.

But Don’t Panic! To get you up to speed, I’ve put together a brief list of the six most important changes. And if you need a little more help, my Complete Guide to ES6 with Babel 6 will walk you through the practical details; including the CLI, Webpack, Mocha and Gulp.

Continue reading

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 still a monolithic mess of globals.

But with the advent of Webpack, it is time for stylesheets to shine again. In fact, many of the lessons which JavaScript has learned can now be applied to SCSS and LESS too — leaving your stylesheets clean, independent, and most importantly, happy.

Continue reading

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 which doesn’t play well with others. Or maybe you like the concept behind CSS Modules, but feel they are too heavyweight for your own application.

Wouldn’t it be great if you could have the ease-of-use of Inline Style with the compatibility of CSS Modules? Say, something which automatically prefixes className props with a unique namespace? Actually, react-pacomo does exactly that. Build-process free. Without any modifications to your existing components. Almost like magic.

See react-pacomo in action in the Unicorn Standard Starter Kit.

Continue reading

Why You Shouldn’t Style React Components With JavaScript

Update: I’ve announced react-pacomo, a solution for some of the problems with CSS outlined here, without the downsides of Inline Style.

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 global styles, it allows you to package styles with your components, and it unifies the entire development process under the single language of JavaScript, fuck yeah. And now that all the cool kids are using it, it’s time to jump on the bandwagon too!

But don’t just take my word for it! See for yourself with this handy dandy list of all the problems which you could have fixed with plain old CSS if you hadn’t of drunk the cool-aid, and the new problems you’ll now have to deal with too.

Continue reading