Here you can read about the tools we prefer.
Use Flow to perform type-checking on your code when possible.
Flow is so much more than simple type definitions for your classes, functions and variables. The real value is the fact that it can spot hard-to-miss errors in your code while you are writing it. In fact, if your have type definitions for all of your project, it will most likely work as intended. It will also make your code easier to read, because you do not need to perform null checks all around.
For building React application we prefer Flow over Typescript, because it has better type definitions for React.
Use ESLint to enforce a code style. The code style should be consistent across each project. Our default style includes rules that will help you to produce code that is easy to read, write and review. You do not have to use the default style, feel free to customize the style to meet needs of your project.
Protip: Use the --fix flag to update code to match your code style. However, note that all problems are not fixable by using this option.
Use Babel to transform your code from modern JavaScript to traditional JavaScript that will run in any browser.
Babel does not do anything out of the box, you need to add some plugins for it to do anything. You are usually best off with the official presets. We recommend that you use the Stage 2 preset (also known as Draft: initial spec), because it includes pretty much everything worth including. We prefer this particular preset because it allows to write code that is easier to both read and write.
Use Webpack to package your application for the browser. Webpack has four core concepts: entry, output, loaders and plugins.
Webpack create bundle for your application based on a dependency graph. The root of this graph is know as an entry point. Webpack starts from the entry point and follows the dependency graph to know what to include in the the bundle. Entry is defined using the entry property in the configuration.
You can tell Webpack what do with your application bundle by configuring its output. Output is defined using the output property in the configuration.
Loaders in Webpack transform files into modules as they are added to the dependency graph. Loaders can be used to include any type of files in your bundle, because they transform those files into JavaScript. Loaders are defined using the module.rules property in the configuration.
Plugins are most commonly used for manipulating your application bundle. Plugins are defined using the plugins array in the configuration and most plugins are customizable via its own options. Since plugins can be used multiple times in the same configuration, you need to create an instance of it by calling it with new.
Use Yarn to manage the dependencies in your project instead of NPM. Yarn allow you to get consistent installs across all systems thanks to its lock-file. Yarn's lock-file is superior to NPM's npm-shrinkwrap.json because it actually locks the dependencies, while shrinkwrap does not.
There are three different type of dependencies: dependencies, devDependencies and peerDependencies. Of these three you mainly use the first two. The libraries that are required to build your application for production use should be added under dependencies and the libraries that are only required during development goes under devDependencies. The third type, peerDependencies are reserved for libraries that may be required, but are not automatically installed. An example of this would be that react has react-dom as its peer dependency.
Note: When you are using Webpack this can get really confusing because you need a lot of libraries to build your application for production, which means that you need to add those to your dependencies.
Use npm scripts instead of task runners like Grunt and Gulp to define scripts in your package.json file.
You should define at least the following scripts:
startruns the application in development modetestruns the test suitebuildcompiles the application for production
Note: Remember to test your production build every now and then to make sure that it works.