DEV Community: Afikode Olusola Emma

SETTING UP ENVIRONMENT VARIABLES IN REACT-VITE PROJECTS

Afikode Olusola Emma — Tue, 28 Feb 2023 11:29:35 +0000

INTRODUCTION
It is no news that pushing some certain sensitive part of your code to a remote repository is not advisable for security reasons. Exposing things like base url, API keys etc makes your application very vulnerable to attacks. It is therefore imperative that sensitive parts of your codes are saved as environmental variables. This article will take you through keeping some sensitive part of your code when using Vite to set up your reactjs application.

SETTING UP ENV VARIABLES
To start with, there are quite a number of ways to set up react projects. Using Vite is one of the fastest ways of doing this. Vite helps to set up only necessary files, without adding some unnecessary loads on the setup itself. This article does not focus on Vite, rather it focuses on how to set up environment variables when working with a react project set up with Vite.

To set up a react project application with Vite, type in the terminal:

This command will give some subsequent actions (these actions are based on technology preference). It is very easy to follow, and you are not likely to have glitches.

Now, to set up your environment variable, create a file with the name .env (dot env) in your home directory (the same directory with your src folder). In your .env file, create a variable in the like below:

NOTE: Ensure that you start your variable name with VITE_, as only variables with such naming convention will be exposed to the naming convention.

The next process is how to make use of the variables in the respective files or components where they will be needed. To access the URL and KEY named above, type the following the components where you will be needing them:

You then have access to these variables and use them for whatever you intend in the respective components.

Conclusion
Following this pattern ensures that your env variables do not accidentally leak and get into hands that you do not want. I hope this article has been able to help you have a better understanding of setting up environment variables in vite-react applications.

LEARN CONTEXT API BY BUILDING A MINI FINANCIAL APP

Afikode Olusola Emma — Sat, 13 Aug 2022 12:35:00 +0000

There are different ways to manage data in an application. One of the ways data is managed in a ReactJs application is using of concept of prop drilling. Prop drilling requires that data is passed through every parent component down to the child. This method can pose some form of cumbersome nature and may not be completely scalable.

In this article, we will be exploring the concept of Context API that makes it easier to manage application state. First we need to understand what context is, how it can be implemented in a React application and then we will build a prototype banking app for proper understanding. To have a proper understanding of this article, some knowledge of React and JavaScript will be required. Let’s first define Context. You should have some basic knowledge of ReactJs before going through this.

Context

Context makes available a way for data to be passed through the component tree without having to pass props through every level downwards. This means that data is managed in a global way. With Context, data can be set globally; while it is accessible directly by any of the children component without the need to pass it through every parent element. To put it simply, Context helps us to avoid nesting through different components level to access data.
Context has some APIs, namely: React.createContext, Context.Cosumer, Context.Provider etc. In this article, we will concentrate on React.createContext and Context.Provider.

Let’s create our application in the following steps. We will create a react application using create-react-app

We will use material UI component to style the various interfaces.
Our application is to show how state is managed across the deposit, balance and withdrawal screens of our financial application.
After creating the fakebank app with create-react-app, under the src folder we will create a folder called components, where all our folders including the context component will be stored. In the component folder, create a file context.js. The context folder is where the entire application state is being managed.

In the context component, some component will be imported from react; namely useState and useContext

import React from {useState, useContext}

Next we call in the createContext method, which provides a way for data to be passed through the component tree without having to manually pass props on every level.

import React from {useState, useContext}
import React, { useState, useContext } from "react";

const AppContext = React.createContext();

The next thing is to create the component via which the children props will be passed; we will also set the initial states of the balance, withdrawal and deposit screen respectively.

import React, { useState, useContext } from "react";

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
  const initialValues = { balance: 0, deposit: 0, withdrawal: 0 };
  const [inputValue, setInputValue] = useState(initialValues);

  let walletBalance = inputValue.balance;
  let amountDeposit = inputValue.deposit;
  let amountWithdrawn = inputValue.withdrawal;

The function above would return the children props wrapped with the AppContext.Provider. The Provider allows consuming components to subscribe to changes in context. Next, we will export our AppContext and AppProvider components. But first, we will set up a custom hook to make our code cleaner. (NOTE: You may decide not to use a custom hook)

import React, { useState, useContext } from "react";

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
  const initialValues = { balance: 0, deposit: 0, withdrawal: 0 };
  const [inputValue, setInputValue] = useState(initialValues);

  let walletBalance = inputValue.balance;
  let amountDeposit = inputValue.deposit;
  let amountWithdrawn = inputValue.withdrawal;


 return (
    <AppContext.Provider>
      {children}
    </AppContext.Provider>
  );

}

//custom hook

const useGlobalContext = () => {
  return useContext(AppContext);
};

export { useGlobalContext, AppProvider };

We will wrap the App component in the index.js file with the exported AppProvider.

<React.StrictMode>
    <AppProvider>
      <App />
    </AppProvider>
  </React.StrictMode>

Next is to pass the values of the initial state of our application to the AppProvider component.

import React, { useState, useContext } from "react";

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
  const initialValues = { balance: 0, deposit: 0, withdrawal: 0 };
  const [inputValue, setInputValue] = useState(initialValues);

  let walletBalance = inputValue.balance;
  let amountDeposit = inputValue.deposit;
  let amountWithdrawn = inputValue.withdrawal;


 return (
    <AppContext.Provider value={{
        walletBalance,
        amountDeposit,
        amountWithdrawn,
      }}>
      {children}
    </AppContext.Provider>
  );

}

//custom hook

const useGlobalContext = () => {
  return useContext(AppContext);
};

export { useGlobalContext, AppProvider };

Next we need to create the interfaces of the deposit, withdrawal and balance screens. As said earlier, we will be using the material UI framework to build our application interfaces.

import React from "react";
import {
  Box,
  Card,
  CardContent,
  Typography,
  CardActions,
  Button,
  Divider,
} from "@mui/material";


const Deposit = () => {
  return (
    <Box
      sx={{
        marginTop: "10rem",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Card sx={{ minWidth: 700, background: "#A52A2A", color: "white" }}>
        <CardContent>
          <Typography
            sx={{ fontSize: 20, textAlign: "center", fontWeight: "bold" }}
            gutterBottom
          >
            Deposit
          </Typography>
          <Divider color="white" />

          <Box
            sx={{ display: "flex", justifyContent: "space-around", mt: "1rem" }}
          >
            <Typography sx={{ mb: 1.5, color: "white" }} color="text.secondary">
              Balance
            </Typography>
            <Typography sx={{ mb: 1.5, color: "white" }} color="text.secondary">
              $100
            </Typography>
          </Box>

          <Typography sx={{ fontWeight: "bold" }}>Deposit Amount</Typography>
          <form>
            <input
              type="text"
              id="deposit"
              name="deposit"
              value="deposit"
            />
          </form>
        </CardContent>
        <CardActions>
          <Button
            variant="contained"
            sx={{ background: "white", color: "black" }}

          >
            Deposit
          </Button>
        </CardActions>
      </Card>
    </Box>
  );
};

export default Deposit;

The interface above is for the deposit screen; the same process will be repeated for the other screens. The balance above is hardcoded with a sum of $100, this will be dynamically changes later on.

After creating the interfaces, in the context component, we need to create event handlers to handle the changes that handle input forms where the amount deposited and withdrawn will be typed; this will be handled in the context component.

import React, { useState, useContext } from "react";

const AppContext = React.createContext();

const AppProvider = ({ children }) => {
  const initialValues = { balance: 0, deposit: 0, withdrawal: 0 };
  const [inputValue, setInputValue] = useState(initialValues);

  let walletBalance = inputValue.balance;
  let amountDeposit = inputValue.deposit;
  let amountWithdrawn = inputValue.withdrawal;


  //handle input change
  const handleChange = (e) => {
    const { name, value } = e.target;
    setInputValue({ ...inputValue, [name]: value });
  };

  return (
    <AppContext.Provider
      value={{
        walletBalance,
        amountDeposit,
        amountWithdrawn,
        handleChange, 
      }}
    >
      {children}
    </AppContext.Provider>
  );
};

//custom hook

const useGlobalContext = () => {
  return useContext(AppContext);
};

export { useGlobalContext, AppProvider };

The custom hook will be destructured in each of the screens to pass the values in the context component.

const { walletBalance, amountDeposit, handleChange } =
    useGlobalContext();

Below shows the values passed into the deposit component.

In this article, we have examined how the context API hook can be used to maintain state in a react application, the process of putting the app state in a single components therefore making it easy to pass data across different views.

import React from "react";
import {
  Box,
  Card,
  CardContent,
  Typography,
  CardActions,
  Button,
  Divider,
} from "@mui/material";
import { useGlobalContext } from "./context";

const Deposit = () => {
  const { walletBalance, amountDeposit, handleChange } =
    useGlobalContext();
  return (
    <Box
      sx={{
        marginTop: "10rem",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Card sx={{ minWidth: 700, background: "#A52A2A", color: "white" }}>
        <CardContent>
          <Typography
            sx={{ fontSize: 20, textAlign: "center", fontWeight: "bold" }}
            gutterBottom
          >
            Deposit
          </Typography>
          <Divider color="white" />

          <Box
            sx={{ display: "flex", justifyContent: "space-around", mt: "1rem" }}
          >
            <Typography sx={{ mb: 1.5, color: "white" }} color="text.secondary">
              Balance
            </Typography>
            <Typography sx={{ mb: 1.5, color: "white" }} color="text.secondary">
              {walletBalance}
            </Typography>
          </Box>

          <Typography sx={{ fontWeight: "bold" }}>Deposit Amount</Typography>
          <form>
            <input
              type="text"
              id="deposit"
              name="deposit"
              value={amountDeposit}
              onChange={handleChange}
            />
          </form>
        </CardContent>
        <CardActions>
          <Button
            variant="contained"
            sx={{ background: "white", color: "black" }}
          >
            Deposit
          </Button>
        </CardActions>
      </Card>
    </Box>
  );
};

export default Deposit;

This will be replicated on the other two screens, namely: withdrawal and balance.

The next thing is to handle the logic that keeps track of the deposit, amount and balance. Remember every logic is handled in the context component.

 //handle incrementing the deposit made to update balance
  const handleAmount = (e) => {
    e.preventDefault();

    if (regex.test(amountDeposit)) {
      walletBalance += parseInt(amountDeposit);
      inputValue.balance = walletBalance;
      setInputValue({ ...inputValue, walletBalance });
      amountDeposit = "";
      inputValue.deposit = amountDeposit;
      setInputValue({ ...inputValue, amountDeposit });
    } else {
      alert("You have entered an invalid character!!!");
    }
  };

The functions updates the balance once deposit is made.

 //handle withdrawals
  const withdrawalHandler = (e) => {
    e.preventDefault();
    if (regex.test(amountWithdrawn)) {
      walletBalance -= parseInt(amountWithdrawn);
      inputValue.balance = walletBalance;
      setInputValue({ ...inputValue, walletBalance });
      amountWithdrawn = "";
      inputValue.withdrawal = amountWithdrawn;
      setInputValue({ ...inputValue, amountWithdrawn });
    } else {
      alert("You have entered an invalid character!!!");
    }
  };

Pass the handleAmount and withdrawalHandler amount into the provider and get it destructured in their respective components.

<AppContext.Provider
      value={{
        walletBalance,
        amountDeposit,
        amountWithdrawn,
        handleChange,
        handleAmount,
        withdrawalHandler,
      }}
    >
      {children}
    </AppContext.Provider>

The useGlobalContext on the withdrawal and deposit should look like the below:

const { walletBalance, amountDeposit, handleChange, handleAmount } =
    useGlobalContext();

and

const { walletBalance, amountWithdrawn, handleChange, withdrawalHandler } =
    useGlobalContext();

The balance components is thus:

import React from "react";
import {
  Box,
  Card,
  CardContent,
  Typography,
  Divider,
} from "@mui/material";
import { useGlobalContext } from "./context";

const Balance = () => {
  const { walletBalance } = useGlobalContext();
  return (
    <Box
      sx={{
        marginTop: "10rem",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <Card sx={{ minWidth: 700, background: "#A52A2A", color: "white" }}>
        <CardContent>
          <Typography
            sx={{ fontSize: 20, textAlign: "center", fontWeight: "bold" }}
            gutterBottom
          >
            Balance
          </Typography>
          <Divider color="white" />

          <Box
            sx={{ display: "flex", justifyContent: "space-around", mt: "1rem" }}
          >
            <Typography sx={{ mb: 1.5, color: "white" }} color="text.secondary">
              Balance
            </Typography>
            <Typography sx={{ mb: 1.5, color: "white" }} color="text.secondary">
              {walletBalance}
            </Typography>
          </Box>
        </CardContent>
      </Card>
    </Box>
  );
};

export default Balance;

In this article we have been able to learn the React Context API in a very practical manner by building a financial app that helps keeps track record of deposit, amount and withdrawal. You can dig deeper into more detail by reading the official react documentation

Basic understanding of React Hooks (useState and useReducer)

Afikode Olusola Emma — Mon, 10 Jan 2022 17:39:42 +0000

What are React Hooks?
React hooks are the new feature introduced in the React version 16.8. They allow us to have state in functional components, and they ensure that we have access to other features of React without writing classes.
When writing functional components, we do not need to write class before adding state; hooks take good care of this. This guide is going to carefully explain to us some common React Hooks, how and when they are used in applications.
In this article, I will take you through a step by step guide into understanding how the useState and useReducer hooks work, and how to implement them in your various projects. Feel free to peruse every line of this writing.
useState Hook
As mentioned earlier, React has to two types of components, namely: Class and Functional components. Class components are ES6 classes that extend React while functional components are simply JavaScript functions. The useState hook allows us to track state in a function component. It is very important to note that a state refers to data or properties that need to be tracked in an application. The react useState hook enables re-render.
Import useState()
To use any of the hooks, they must first be imported from React, and the useState hook is not an exception to this. Below is a code snippet of how to the import useState hook.

The useState hook, like every other hook, after being imported, is destructured. Below is a code snippet on how useState is used to increase a counter, and the increment is being re-rendered. The code ensures that at each click on the button, the state value is increased by one.

The useState hook above contains both the name of the variable ‘counter’ with the initial value set to zero (0), and also the corresponding function ‘setCounter ’ which helps to change the value of the variable. Depending on the problem you intend solving, the initial value of your variable could be any of the data types, namely: string, Boolean, number, object.
To further expand our understanding of the useState hook, I will give an example on how to set the initial value of the variable to a string, and how to display data to user view. The code snippet below shows this:

The code above sets the initial value of inputValue to a string and with the onChange property of the input, the value typed into the input field is targeted. To display the value to the view, simply place the variable name in curly brackets as seen in the code snippet above.

useReducer Hook
The useReducer hook is an alternative to the useState hook. It lets you separate the state management from the rendering logic of the component. It is very efficient in managing complex and robust state hooks in React applications. The combination of the useReducer and another hook like the useContext (to be explained in my next article) can be a good and efficient tool to management state.
The useReducer hook accepts a reducer function as its first parameter and an initial state as its second. It returns an array that has both the current state and a dispatch function. The dispatch function allows you to pass as a parameter which can be invoked.

Import useReducer
To use the useReducer hooks, it must be invoked from react.

The use reducer works in a similar way with Redux. When invoked, it contains a reducer function and the default state of the application. The reducer is executed by the JavaScript reduce() method. The reducer method accepts two parameters, namely, the current state and the action. Like I said earlier, the state is the data that is being manipulated or changed in the application.
The code snippet below shows the reducer and its respective parameters:

The reducer function accepts an action, this action is executed by the dispatch function. Below is a code snippet of counter app that increases the number of counts each time the button is clicked and it toggled the text at the same time.

From the code above, the initial state is set to zero (0) and the text is shown by setting its value to true. Then a reducer function is created, it accepts the current state of the counter as an argument and an action. The application state get updated by the reducer action type (action.type).

Conclusion
In conclusion, both hooks do the same things, in that they can be used to manage state and re-renders. While useState is a basic hook, useReducer is used for more complex state logic. The useReducer is to be used once the applications gets larger in size, and state transitions are getting complex.
In this article, we went through two react hooks; useState and useReducer. We learned how each one is used and for what reason they will be used. We also saw the advantage of one over the other.
That’s all for now! Feel free to share in the comments section below your thoughts about this article.

Using localStorage to store data in the browser

Afikode Olusola Emma — Fri, 08 Oct 2021 11:35:48 +0000

It is possible to save data handled by web application without building a database. Two of the properties that allows this to happen are the localStorage and sessionStorage. Both of these are Web Storage APIs mechanisms which basically allow data to be stored in key-value pair. So basically, you have something really similar to the JavaScript object. They do not change after page loads or refresh. The focus of this article is on localStorage.

localStorage
Whenever data is saved to the localStorage, it remains intact even after the browser has been closed. This means that data in the localStorage is not affected by the closing and restarting of the browser. To save data in the localStorage, the setItem() method can be used.
Example: localStorage.setItem("name", "value");

If the value passed is an array, you will have to transform it to a string by using the JSON.stringify() method.

Example: localStorage.setItem("name", JSON.stringify(object));
The name and value represents the key and value of the item being stored.

Note: The Web APIs key-value pair objects are always in strings, hence the need for the second example above.
Now to retrieve item stored in the database, the getItem() method comes in handy.
Example: localStorage.getItem("name");
Again, the data retrieved need to be transformed from strings into an object, and we will be using another method called the JSON.parse().
Example: JSON.parse(localStorage.getItem('name'));

To remove item from the localStorage, the removeItem() method is used. It takes the key of the item to be removed as below:
Example: localStorage.removeItem("name");

Lastly, you can clear the storage by using the clear() method on the localStorage object.
Example: localStorage.clear();

Watch out for my next article as I will be writing about sessionStorage() and its respective methods.