Reactプロジェクトで.envを使う

create-react-appで作成したプロジェクトであれば、プロジェクト直下に.envファイルを作成し、prefixにREACT_APP_を付けるだけで.envから変数を読み込むことができます。
参照：Reactにおける環境変数を設定について、ようやく理解したので原因と共にまとめてみる_100DaysOfCodeチャレンジ38日目(Day_38:#100DaysOfCode) - Qiita

この記事は、create-react-appを使わずに作成したReactプロジェクトで.envファイルを使う方法となります。

.envファイルの作成

プロジェクト直下に.envファイルを用意します。

API_KEY=12345678

dotnev-webpackインストール

webpackコンパイル時に.envファイルの内容をインポートしてくれるパッケージdotenv-webpackを使います。
dotenv-webpack - npm

インストール

yarn add dotenv-webpack

webpack.configの設定

const Dotenv = require('dotenv-webpack');

module.exports = {
    ...
    plugins: [
      new Dotenv(),
    ],
    ...
  };

読み込み

process.env.HOGEで読み込めます。

console.log(process.env.API_KEY);

追記：htmlファイルで.envの値を使いたい場合

html-webpack-pluginを使います。

インストール

yarn add html-webpack-plugin

webpack.configの設定

const Dotenv = require('dotenv-webpack');

module.exports = {
    ...
    plugins: [
      new Dotenv(),
      new HtmlWebpackPlugin({
        template: './src/index.html',
      }),
    ],
    ...
  };

読み込み

<%= process.env.HOGE %>で読み込めます。

<script src="http://maps.google.com/maps/api/js?key=<%= process.env.GOOGLE_API_KEY %>&language=ja"></script>