In React, the process.env object is not directly accessible by default as it is in Node.js or in the browser’s JavaScript environment. Instead, React provides a way to access environment variables through the use of the Webpack configuration.
In your React project, you can define environment variables in a variety of ways such as creating a .env file at the root directory or using the .env.development, .env.production, etc. files based on different environments. These files should be kept separate from your source code repository.
To access environment variables in React, you need to prefix them with REACT_APP_. This is a convention used by Create React App and most other React starter kits.
Here’s an example:
// .env.development
REACT_APP_API_KEY=your_development_api_key
// .env.production
REACT_APP_API_KEY=your_production_api_key
After defining the environment variables, they can be accessed in your code as:
const apiKey = process.env.REACT_APP_API_KEY;
Note that you don’t need to explicitly require or import the process.env object as it is automatically made available by Create React App.
By following this convention, you can securely access sensitive information like API keys, database URLs, etc., which can vary between different environments, without hardcoding them in your codebase.