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 use a manual build process that runs through Webpack, so it was a two-step process for me:

1. Set the environment variable from package.json using the cross-env package:

   "scripts": { "build-dev": "cross-env NODE_ENV=development webpack --config webpack.config.js", "build-prod": "cross-env NODE_ENV=production webpack --config webpack.config.js" }

2. Change the webpack.config.js file to use the environment variable (which is passed-on to React to determine if we are in development or production mode), and disable minimizing the produced bundle if we are in development mode so we can see the actual names of our components. We need to use webpack's optimization property in our webpack.config.js file for this:

   optimization: { nodeEnv: process.env.NODE_ENV, minimize: process.env.NODE_ENV === 'production' }

webpack v4.41.5, React v16.9.19, cross-env v7.0.0, node v10.16.14