How to create and use environment variables in React

In this post, we will see how to use environment variables in React.

NOTE: You need to use the create-react-app method to use this method.

Creating environment variables

Create a .env file in the root directory of the project

Keep all the secret keys here in the below format

REACT_APP_API_KEY = 1234

• All the environment variables must start with the prefix REACT_APP_ else react will ignore these variables.

Using the environment variables

Now to use the created variables inside the app, use the below syntax

const { REACT_APP_API_KEY } = process.env

Now you can use the REACT_APP_API_KEY variable instead of the actual value.