Create a production build using React JS

React for production

You probably saw some warnings that say you’re using React in development mode, and want to know how to create a production build using React.

Why you get a warning of being in React development mode

Normally you import React JS in your javascript ECMA 6 code with the following statements in a .js file

When you use your taskrunner, being it Grunt, Webpack or something else, the development code of React JS is included in the build and you get a warning in the browser console.

Development mode does some checks that can be useful during… development, but not in production.

How to turn off development mode and create a production build

If you want to create a production build when using React JS and turn off development mode, one solution is to set the NODE_ENV environment variable to “production“.

GruntThis can be easily done with the taskrunner Grunt.

Grunt, as you may already know, lets you run different tasks to create your production bundle.

In this case,  you have to define a task env and calling it before other tasks, as the code below, GruntFile.js, shows

Remember to load grunt-env plugin with the following code

after having installed it with


The default task is watch, the release task calls env followed by browserify and uglify.

You don’t need to call uglify to create a production build using React, but it can be useful to minimize and obfuscate the code.

The browserify task includes  the presets es2015 react to create ES2015 compliant code and transform React .jsx files into normal javascript.