Reading Env files in React

Arnold — Sat, 12 Mar 2022 16:05:45 +0000

React is a very popular framework, which most of us use today. Sometimes we want to use environment variables in our application but we don't know how to go about it.

Environment variables are used to store sensitive information. In our React application we can have environment variables and also when deploying, environment variables can be found on the server.

THIS IS HOW TO USE ENVIRONMENT VARIABLES ON YOUR MACHINE

`.env` SETUP

To define permanent environment variables in our React application, we need to setup our .env file.

create a .env file in the root of your React application
create custom environment variables beginning with REACT_APP_ just like the example below.

NOTE: it must start with REACT_APP_

// ENV FILE
REACT_APP_API_KEY=abcdefgh

With this we are done setting our .env file, now we have to read this REACT_APP_API_KEY in our project.

READING `.env` FILES

In our react app, we have process.env available to us. So to read REACT_APP_API_KEY we do

process.env.REACT_APP_KEY

if we set process.env.REACT_APP_API_KEY to a variable and log it out

const apiKey = process.env.REACT_APP_API_KEY

console.log(apiKey)
//abcdefgh

With this in place, we now know how to read .env files. This won't work immediately if we try it, for it to work we have to do one last thing

RESTART YOUR DEVELOPMENT SERVER

If you miss to restart you dev server, it won't work. Also if you add or change anything in your .env file, for you to use it you have to restart your dev server.
That's it lads, tell me what you think in the comments section.

Rest and Spread operator

Arnold — Wed, 01 Dec 2021 16:12:11 +0000

Hello programmers,

The ES6 Rest and the Spread parameters are still very unclear to some people, and it seems to have so many people confused because they are identical. The Rest and Spread operators are represented with ... .

I still don't have any idea on why the both of them are represented with ... , honestly I feel like they should have come up with something else. So now let's dive in to what they are and what they are used for.

REST OPERATOR

If we have a function and we don't know how many arguments that will be passed in, we use the Rest operator.

In the image above the ... was used to handle what was passed into the function, if more values are passed into the function the Rest operator will take care of them.

SPREAD OPERATOR

The Spread operator can be used in different situations, it can also work with a function. I'll show you the different scenarios were it can be used.

In the picture above the Spread operator was used to expand the array so it could be passed into the function.

In this image, the spread operator was used to neutralize an array so an operation could be carried out on each of the values in the array.

Basically, the Spread operator is used to neutralize an array.

Alright, this is all I have on the Rest and Spread operator. I hope you guys apply it in your new projects.

DEV Community: Arnold