React: Up & Running

Chapter 7. Lint, Flow, Test, Repeat

Chapter 8 introduces Flux, which is an alternative to managing the communication between the components (it takes the place of things such as onDataChange). So there will be a bit of refactoring. Wouldn’t it be nice to have fewer errors while refactoring? Let’s consider a few tools that help you maintain sanity as your app inevitably grows and evolves. The tools are ESLint, Flow, and Jest.

But first, the common prerequisite called package.json.

package.json

You already know how to use npm (Node Package Manager) to install third-party libraries and tools. Additionally, npm also lets you package and share your project on http://npmjs.com and have other people install it. However, you don’t have to put up your code on npmjs.com in order to take advantage of what npm can offer you.

Packaging revolves around the use of a package.json file you can put in the root of your app to configure dependencies and other additional tools. There’s tons of setup you can do in it (see https://docs.npmjs.com/files/package.json for the full story), but let’s see how to use it, while keeping its usage minimal.

Create a new file in your app’s directory called package.json:

$ cd ~/reactbook/whinepad2
$ touch package.json

And add to it:

{
  "name": "whinepad",
  "version": "2.0.0",
}

And that’s all you need. Next, you’ll just keep adding more configuration to this file.

Configure Babel

The build.sh script you saw in Chapter 5 runs Babel like:

$ babel --presets react,es2015 ...