Post Category → ES6

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 the benefit of the doubt. But this? Didn’t we escape PHP years ago? And what ever happened to separation of concerns?!

But I’m here to reassure you that not everything is as it seems. The above code is not JavaScript-in-HTML. If anything it actually promotes separation of concerns, especially compared to “competitor framework A”. And its best feature?

Continue reading →

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 that it?”.

And as it happens, one of the most frequent requests I get is for an updated version of my React cheatsheet, showing the newer React component syntax using ES6 classes and React.Component.

So what I’m trying to say is I’ve finally gotten my act together and made your React/ES6 cheatsheet. And I’ve based it on Steven Luscher’s post. I’ve even made it free; as in speech, and as in beer:

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

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 →

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 which build tools to use – wouldn’t it be great being able to just get stuck into writing your app? Actually, after spending five years writing apps with automatic build systems, I’ve come upon just such a guide. I know what to use and where to use it — and after reading this article, you will too!

Continue reading →

A Quick Tour Of ES6 (Or, The Bits You’ll Actually Use)

Just want examples of ES6 in use? I’ve put four ES6 projects on Github.

ES6 has been getting a lot of press lately. And with all of the benefits that the new syntax and built-ins bring, it damn well should. But given the breadth of the changes, how is a forward-thinking developer to know where to start? What is worth practicing now, and what is best left for a rainy day?

Well, after spending the last few weeks writing maxim and memamug with ES6, and translating numbat-ui from coffeescript, there are a few parts which have stood out to me.

Continue reading →