How to start a project with React and Babel in 2 minutes

So, React has Getting Started Guide which tells you on how to use React with Babel and Browserify. It’s simple, and works great. But it’s not the ideal setup if you’re working on an app. Why? You might ask. Well, Every time you change a file, you’ve to run the build manually, then refresh the browser to see your changes. As if that was not enough, you lose all the app state when you refresh. A pretty bad experience I think.

Fortunately, there are things like Webpack, and Hot Module Replacement, which take care of these problems. Webpack can watch and build your files on change, and you get Hot Module Replacement by configuring react-transform-hmr plugin for Babel. But, with all these exciting stuff, comes a lot of tooling. You’ve to spend an entire day to configure your project with all the tooling so that you can enjoy the exciting stuff. Maybe you can get away with using boilerplate projects from GitHub to kickstart your project.

Even then the problem doesn’t go away. Say you want to quickly try something. Well, you can’t. You have to first setup everything. Even if you use a boilerplate, you still have to do the setup. Clone the Git repo, run `npm install`, `bower install` and such stuff. It’s painful to do this every time. Eric Clemmons’s blog post about this describes it perfectly.

Recently Vjeux made a challenge in his blog post to come up with the best JavaScript setup for quick prototyping. The conditions are,

• No setup
• One file
• Shareable
• Keeps working
• Not generic
• Not prod-ready

This inspired me to work on a small server which can transpile ES201x files on the fly, without any setup. The only setup required is to install the server once. Then you can get started with just a simple HTML and JavaScript file, like the good old days.

Introducing Quik

Quik, a misspelling of ‘Quick’, is a simple npm module to enable quick prototyping. If you have Node 5.0, just install it and run the command in any directory.

What it does behind the scenes is, it runs a simple Koa server, and for every request that comes, it generates a webpack configuration for the file on the fly, and responds with the transpiled bundle instead of the original file. You can also import React, Redux, Radium etc. without any `npm install`.

It takes the index.js file as the entry point if present. You can also specify the entry files with the `— watch` option. This will also enable incremental bundling, making it faster to generate the bundles. You don’t need to create a index.html file. Quik automatically generates it for you. You can still use one if you want.

Hot Reloading is enabled by default. So you can see changes instantly without refreshing the browser. One thing to note is that hot reload can make your CPU temperature very high, so use it with caution.

Just kidding. Hot-reloading is the coolest thing since sliced bread, and it is super convenient both when prototyping or serious work.

The usage for Quik is simple, just open the Terminal in a directory where you have your JavaScript (and HTML)files, and run the following,

quik

Yes. That’s it. No additional setup, no worries about dependencies. After all, that’s what it’s supposed to be.

Quik also allows you to generate a production ready JavaScript bundle, as well as a single sharable HTML file with the JavaScript inlined, making it easier to share and deploy the application.

Head over to the Github repo to install it, or hack on it. Bug reports and pull requests are much welcome. We don’t have any tests yet either. So pull requests containing tests are much appreciated.

Speaking about Vjeux’s challenge, it now addresses all the points. Let’s see again,

• No setup — Yes
• One file — Yes
• Shareable — Yes
• Keeps working — Yes
• Not generic — Yes
• Not prod-ready — Yes

Pretty cool, Huh?

To publish an app built by Quik, use can use any static website hosts such as Github Pages or Surge. Maybe we can also make an Atom plugin for this, so nobody needs to interact with the CLI. There are so many possibilities.

We’re all facing the problems with tooling. And it’s costing us much more time that it should. Beginners easily get scared looking at all these work they have to do to even get started. Let’s join forces and try to solve this problem.