[Solved]-How to show build datetime on my react web app using create-react-app?-Reactjs

Set a process environment using webpack. You can save the value to a local json file and read from it with an increment during the compilation.

    function getClientEnvironment(publicUrl) {
      const raw = Object.keys(process.env)
        .filter(key => REACT_APP.test(key))
        .reduce(
          (env, key) => {
            env[key] = process.env[key];
            return env;
          },
          {
            // Useful for determining whether we’re running in production mode.
            // Most importantly, it switches React into the correct mode.
            NODE_ENV: process.env.NODE_ENV || 'development',
            REACT_APP_DATE_TIME: new Date().toDateString(),
            // Useful for resolving the correct path to static assets in `public`.
            // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
            // This should only be used as an escape hatch. Normally you would put
            // images into the `src` and `import` them in code to get their paths.
            PUBLIC_URL: publicUrl,
          }
        );
      // Stringify all values so we can feed into Webpack DefinePlugin
      const stringified = {
        'process.env': Object.keys(raw).reduce((env, key) => {
          env[key] = JSON.stringify(raw[key]);
          return env;
        }, {}),
      };

      return { raw, stringified };
    }

module.exports = getClientEnvironment;

The old solution will also work. Please check the code again. As i can see the proper value in my app.

A contribution to Joe Haddat's answer; if you want to illustrate the build date by using preval.macro in the viewer timezone instead of the environment timezone which builds the app, here is how to do it;

render() {
  const buildDate = preval`module.exports = new Date();`
  return (
     <div>Build Date: {new Date(buildDate).toLocaleString()}</div>
  )
}

This will save the build date, but turning it into a locale string will still happen on runtime, on the browser where the viewer timezone is used.

The solution from joe-haddad is working well. Here is a drop-in component you can use like <VersionNumber />. This will display something like:

import React       from 'react';
import moment      from 'moment';
import packageJson from '../../../package.json';
import preval      from 'preval.macro';

const buildTimestamp = preval`module.exports = new Date().getTime();`;

class Component extends React.Component {
    getDateString = () => {
        const lastUpdateMoment = moment.unix(buildTimestamp / 1000);
        const formattedDate    = lastUpdateMoment.format('DD.MM.YYYY HH:mm:ss');

        return formattedDate;
    };

    render () {
        return (
            <div>
                {packageJson.version}
                {'.'}
                {buildTimestamp}
                {' '}
                {'('}
                {this.getDateString()}
                {')'}
            </div>
        );
    }
}

Component.propTypes = {};

Component.defaultProps = {};

export default Component;