ReactJS中，我们经常需要使用环境变量来配置应用程序。这些环境变量可以是API密钥、数据库连接字符串、开发和生产环境的不同设置等。在ReactJS中，我们可以使用 .env文件来设置这些环境变量。
首先，你需要在项目的根目录下创建一个 .env文件。然后，在该文件中添加你的环境变量：
REACT_APP_API_KEY=your_api_key
REACT_APP_DB_CONNECTION_STRING=your_connection_string
注意，在创建React应用程序时使用Create React App工具时，必须以 REACTAPP开头才能读取到这些自定义的环境变量。
然后，在你的代码中就可以通过 process.env.REACT_APP_API_KEY 和 process.env.REACT_APP_DB_CONNECTION_STRING 来访问到这两个值了：
const apiKey = process.env.REACT_APP_API_KEY;
const dbConnectionString = process.env.REACT_APP_DB_CONNECTION_STRING;
如果有不同的开发和生产配置，则可能需要为每个配置创建一个单独的 .env.development, .env.production, .env.test, 等等 文件，并根据当前运行模式加载相应文件。
例如, 如果运行 npm start, 定义在 .env.development.local(如果存在), 或者是 .env.development(如果存在), 或者是 .dotenv.local(如果存在) 的值将会被加载. 如果运行 npm run build, 则会加载定义于 .dotenv.production.local(或者其它两个) 的值.
这样，你就可以根据不同的环境来配置你的应用程序了。
另外，如果你需要在运行时动态地设置环境变量，那么可以使用Webpack的DefinePlugin插件。这个插件允许在编译时创建全局常量，这些常量可以配置到Webpack配置文件中：
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
'REACT_APP_API_KEY': JSON.stringify(process.env.REACT_APP_API_KEY),
'REACT_APP_DB_CONNECTION_STRING': JSON.stringify(process.env.REACT_APP_DB_CONNECTION_STRING),
},
}),
],
};
然后，在代码中就可以像之前一样使用 process.env.REACT_APP_API_KEY 和 process.env.REACT_APP_DB_CONNECTION_STRING 来访问到这两个值了。
总结一下，在ReactJS中使用文件方式来设置和获取环境变量是非常方便和实用的。只需要创建一个 .env文件，并在其中添加相应的键值对即可。然后，在代码中通过 process.env.YOUR_VARIABLE_NAME 来获取相应值即可。如果有不同开发和生产环境，则可能需要为每个环境创建一个单独 .env.environment_name 文件，并根据当前运行模式加载相应文件。
