In this article, we will learn how to use environment variables in React.
–First of all, we have create react application.
–Then open a root directory and create a .env file inside that directory.
–Open the .env file and set your environment variable.
REACT_APP_PROJECT_NAME=my env file demo
use REACT_APP prefix in all custom variables. without REACT_APP is ignored.
— Now open your file and use environment variables.
First, you need to put process.env before your custom variable.
process.env.REACT_APP_PROJECT_NAME
–And again start your application npm start to see the changes.
–My app.js file
import React from 'react'
export default function App() {
let myData = process.env.REACT_APP_PROJECT_NAME
return (
<>
<h1>{myData}</h1>
</>
)
}
Output:
