React: Up & Running

Chapter 5. Setting Up for App Development

For any serious development and deployment, outside of prototyping or testing JSX, you need to set up a build process. If you already have an existing process, you only need to add the Babel transformation to it. But let’s assume you don’t have any type of build setup and start fresh.

The goals are to use JSX and any other modern JavaScript without waiting on browsers to implement them. You need to set up a transformation that runs in the background as you’re developing. The transformation process should produce code that is as close to the code your users will run on the live site (meaning no more client-side transforms). The process should also be as unobtrusive as possible so you don’t need to switch between developing and building contexts.

The JavaScript community and ecosystem offers plenty of options when it comes to development and build processes. Let’s keep the build lean and low-level and not use any of the tools, but instead come up with a do-it-yourself approach so you can:

• Understand what’s happening

• Make an informed choice later on when picking your build tools

• Focus on the React side of things and not get distracted too much

A Boilerplate App

Let’s start by setting up a general “template” for a new app. It’s a client-side app, in the single-page application (SPA) style. The app uses JSX as well as many innovations the JavaScript language has to offer: ES5, ES6 (aka ES2015), and future ES7 proposals.

Files and ...