Omgevingsvariabelen in ReactJS zijn handig om verschillende configuraties te hebben voor verschillende omgevingen. U kunt bijvoorbeeld API-URL’s of andere publieke kenmerken definiëren die verschillend zijn in uw ontwikkeling, productie en testomgevingen.
Volg deze stappen om omgevingsvariabelen in te stellen in een React-app gemaakt met Create React App:
1. Maak een bestand aan met de naam .env in de root van uw project.
1. Voeg uw omgevingsvariabelen toe in dit bestand in de volgende indeling:
```
REACT_APP_MY_VARIABLE=My value
```
Opmerking: U begint elke omgevingsvariabele met het prefix `REACT_APP_`. Alleen omgevingsvariabelen die beginnen met `REACT_APP_` kunnen worden gelezen in uw applicatie.
3. U kunt nu toegang krijgen tot deze variabele in uw React-app met `process.env`:
```
console.log(process.env.REACT_APP_MY\_VARIABLE); // Outputs: ‘My value‘
\`\`\`
1. Vergeet niet om uw .env-bestand toe te voegen aan uw .gitignore-bestand om het lekken van gevoelige informatie zoals API-sleutels in uw repository te voorkomen.
1. Voor verschillende omgevingen kunt u verschillende bestanden aanmaken zoals `.env.development`, `.env.test`, `.env.production` en definiëren verschillende variabelen waarden in deze.
Denk eraan dat u uw React-app moet stoppen en opnieuw moet starten als u nieuwe omgevingsvariabelen aan uw `.env`-bestand toevoegt. De reden hiervoor is dat Create React App uw omgevingsvariabelen inlaadt bij het starten en niet meer opnieuw inlaadt zolang het draait.
Kortom, het is een zeer goede manier om omgevingsspecifieke informatie te verbergen en het maakt je code ook meer onderhoudbaar.
