Detecting production vs. development React at runtime

This is best done emulating the Node way of doing things with your build tool - webpack, browserify - by exposing process.env.NODE_ENV. Typically, you'll have it set to "production" in prod and "development" (or undefined) in dev.

So your code becomes:

if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
    // dev code
} else {
    // production code
}

For how to set it up, see envify or Passing environment-dependent variables in webpack

I use a helper file (in Typescript):

import process from "process";

const development: boolean = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';

export default function isDev(): boolean
{
    return development;
}

Then elsewhere I use it like this:

import isDev from "./helpers/DevDetect";

if (isDev())
{
    ...
}

I wanted access to this from the index.html and desired a solution which didn't involve ejecting webpack or configuring it with additional modules and I came up with this.

Sources are David's answer above and the create-react-app documentation for using environment variables in the html file

if ( ! '%NODE_ENV%' || '%NODE_ENV%' === 'development') {
  // dev code
} else {
  // production code    
}