How to turn on/off ReactJS 'development mode'?

Question

Started using ReactJS\'s prop validation feature, which as the docs say only works in \'development mode\' for performance reasons.

React seems to be validating the

Answer 1

I posted this elsewhere but, frankly, here would be a better place.

Assuming you install React 15.0.1 with npm, import react from 'react' or react = require('react') will run ./mode_modules/react/lib/React.js which is React's raw source.

The React docs suggest you use ./mode_modules/react/dist/react.js for development and react.min.js for production.

Should you minify /lib/React.js or /dist/react.js for production, React will display a warning message that you've minified non-production code:

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See fb.me/react-minification for more details.

react-dom, redux, react-redux behave similarly. Redux displays a warning message. I believe react-dom does too.

So you are clearly encouraged to use the production version from /dist.

However if you minify the /dist versions, webpack's UglifyJsPlugin will complain.

WARNING in ../~/react/dist/react.js Critical dependencies: 4:478-485 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results. @ ../~/react/dist/react.js 4:478-4851

You cannot avoid this message because UglifyJsPlugin can only exclude webpack chunks, not individual files.

I use the both the development and production /dist versions myself.

• Webpack has less work to do and finishes a bit sooner. (YRMV)
• React docs say /dist/react.min.js is optimised for production. I've read no proof that 'process.env': { NODE_ENV: JSON.stringify(IS_PRODUCTION ? 'production' : 'development') } plus uglify does as good a job as '/dist/react.min.js`. I've read no proof you get the same resulting code.
• I get 1 warning message from uglify rather than 3 from the react/redux ecosystem.

You can have webpack use the /dist versions with:

resolve: {
    alias: {
      'react$': path.join(__dirname, 'node_modules', 'react','dist',
        (IS_PRODUCTION ? 'react.min.js' : 'react.js')),
      'react-dom$': path.join(__dirname, 'node_modules', 'react-dom','dist',
        (IS_PRODUCTION ? 'react-dom.min.js' : 'react-dom.js')),
      'redux$': path.join(__dirname, 'node_modules', 'redux','dist',
        (IS_PRODUCTION ? 'redux.min.js' : 'redux.js')),
      'react-redux$': path.join(__dirname, 'node_modules', 'react-redux','dist',
        (IS_PRODUCTION ? 'react-redux.min.js' : 'react-redux.js'))
    }
  }