DEV Community: frank edekobi

Upgrade Your React App with Vite: Faster Builds, Real-Time ESLint Feedback, and Cleaner Files

frank edekobi — Mon, 10 Feb 2025 14:36:58 +0000

What is this tutorial about?

This guide will walk you through setting up Vite for a faster and simpler development experience. We'll also configure ESLint to help catch issues as you code. Finally, we'll clean up unnecessary files from your project and organize the structure.

Why go through all this work?

Switching to Vite speeds up and simplifies development. It updates changes instantly and keeps everything lightweight, with less setup and fewer headaches. Vite is perfect for projects with TypeScript, React, or Vue.

Who is this tutorial for?

This guide is for developers who are used to Create React App or Webpack and want to try out a faster, simpler build tool without changing much code.

Introduction
Vite helps make your project run faster and easier to manage. Here are the key reasons:

Fast Reloads: Vite instantly updates your project as you code.
Less Setup: Vite has a simpler configuration, so there are fewer files to manage.
Better Performance: Vite is optimized for speed, both in development and when building for production.

Let's begin

Step 1: Moving to Vite

Install Vite: Open your terminal, go to your project folder, and run:

npm install vite @vitejs/plugin-react --save-dev

yarn add -D vite @vitejs/plugin-react

Move index.html: In a Vite project, index.html should be in the root of the project (not in the public folder). Move it by:
Cutting index.html from the public folder.
Pasting it directly into your main project folder.

Edit index.html: In the moved index.html file, add the script tag with this:

<script type="module" src="/src/index.tsx"></script>

This tells Vite to load your app's code from src/index.tsx, so it knows where to start.

Also, replace %PUBLIC_URL% with / in the index.html file, as Vite doesn't use this syntax. Here's how:

Open index.html: Go through the index.html file and look for any occurrences of %PUBLIC_URL%.

Replace %PUBLIC_URL% with /: For example, if you see something like this:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

Change it to:

<link rel="icon" href="/favicon.ico" />

Update Package Scripts: Open package.json and replace your old start, build, and test scripts with Vite's commands:

"scripts": {   
   "dev": "vite",   
   "build": "vite build",   
   "serve": "vite preview" 
}

Create a Basic Vite Configuration File: In the root of your project, create a vite.config.js file and add the following:

import { defineConfig } from 'vite'; 
import react from '@vitejs/plugin-react';  

export default defineConfig({   
  plugins: [react()] 
})

This file sets up Vite to work with React.

Step 2: Setting Up ESLint for Real-Time Code Feedback

To check your code for mistakes as you work, follow these steps to set up ESLint:

Install ESLint and Plugins: Run the following in your terminal:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint --save-dev

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin vite-plugin-eslint

Add ESLint Configuration: Create an .eslintrc.js file in your root folder and add this configuration:

module.exports = {   
   parser: '@typescript-eslint/parser',   
   plugins: ['@typescript-eslint'],   
   extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react/recommended'  ],   
   rules: {     // Add any additional ESLint rules here   } 
}

Link ESLint with Vite: Open your vite.config.js file again and add the ESLint plugin:

import { defineConfig } from 'vite'; 
import react from '@vitejs/plugin-react';
import eslint from 'vite-plugin-eslint';  

export default defineConfig({   
  plugins: [react(), eslint()], 
})

Run Your Dev Server with ESLint: Now, start your development server:
ESLint should show any issues in the terminal or your code editor.

Step 3: Cleaning Up Unnecessary Files

After switching to Vite, you can remove the following files:
Webpack Config Files: webpack.config.js or similar files related to Webpack setup.

Babel Configuration Files: If you're not using Babel, you can delete .babelrc or babel.config.js.
Unused public Folder Content: Since index.html is now in the root, you can delete it from the public folder. If you have other files in public you don't need anymore, clean them out.

Step 4: Test Your Vite Setup

To check everything is working:
Start Development Server:

npm run dev

yarn dev

This will open the app, and you'll see updates instantly when you make changes.

Wrapping Up

You're now ready to use Vite for faster development! With ESLint, you can catch issues as you code, and the cleanup removes unnecessary files. Enjoy your improved development setup!

How to display IP camera feed from an RTSP url onto react app page with node js

frank edekobi — Mon, 16 Sep 2024 17:53:28 +0000

Refactor it however you please, but this should give you the essential building blocks to successfully render the rtsp stream in a react js app from a node js app.
Also make sure the rtsp feed is valid, you can test it using vlc media app.
and make sure you have ffmpeg installed on your computer

On the server

const express = require("express")
const Stream = require("node-rtsp-stream")
const cors = require("cors")

const app = express()
const port = 3002
let stream = null

app.use(
  cors({
    origin: "http://localhost:3000",
    credentials: true,
  })
)

app.get("/stream", (req, res) => {
  const newRtspStreamUrl = req.query.rtsp
  let currentRtspStreamUrl = ""

  // Create the WebSocket stream only if it doesn't exist or the RTSP URL has changed
  if (!stream || currentRtspStreamUrl !== newRtspStreamUrl) {
    if (stream || newRtspStreamUrl === "stop") {
      stream.stop()
    }
    stream = new Stream({
      name: "Camera Stream",
      streamUrl: newRtspStreamUrl,
      wsPort: 9999,
    })
    currentRtspStreamUrl = newRtspStreamUrl
  }

  res.send(200).json({ url: `ws://127.0.0.1:9999` })
})

app.listen(port, () => {
  console.log(`Server running on port ${port}`)
})

On the client

import React from "react"
import JSMpeg from "@cycjimmy/jsmpeg-player"
import axios from "axios"

const StreamPlayer = () => {

useEffect(()=>{
    const url = 'ws://127.0.0.1:9999'
    let canvas = document.getElementById("video-canvas")
    new JSMpeg.Player(url, { canvas: canvas })
},[])

const rtspurl = ""//enter the rtsp url here

const httpRequest = (url) => {
   axios.get(`http://127.0.0.1:3002/stream?rtsp=${url}`)
}

const startRTSPFeed = () => {
   httpRequest(rtspurl)
}

const stopRTSPFeed = () => {
   httpRequest("stop")
}

return(
   <div>
      <div>
        <canvas id="video-canvas"></canvas>
      </div>
      <div>
        <button onClick={startRTSPFeed}>Start RTSP Feed</button>
        <button onClick={stopRTSPFeed}> Stop RTSP Feed</button>
      </div>
   </div>
)}

Do have a lovely day!!

How to Set Up User Cookies and Connect Google Analytics in Your React App

frank edekobi — Mon, 16 Sep 2024 05:47:18 +0000

Question: What is this tutorial about?

This tutorial is about setting up user cookies in your web application and connecting it to the Google Analytics platform.

Why go through all this stress?
Because this setup allows you to track how users navigate your application for free.

Who is this tutorial for?
Anyone with a basic knowledge of React and Typescript

So if you think it's worth the stress, LET'S GET STARTED!!!

Introduction

For those unaware, Google Analytics is a powerful tool that offers a wide range of features for collecting and analyzing data from your web platform. However, the abundance of options can be overwhelming, especially when you first encounter the dashboard and its numerous use cases. One of my favorite applications of Google Analytics is setting up user cookies on my web application and connecting them to the Google Analytics platform. This capability allows you to track how users navigate your application for free. With a little patience and a step-by-step approach, you can easily set this up and gain valuable insights into user behavior.

In this tutorial, we'll walk you through setting up user cookies in your React app and connecting them to Google Analytics. We'll cover how to request user consent for different types of cookies and send this data to Google Analytics using the Global Site Tag (gtag.js).

Prerequisites

Basic knowledge of React.
A Google Analytics account. If you don't have one, follow this guide on setting up a Google Analytics account for User consent.

Google tag

Add the Google Tag (gtag.js) to Your HTML First, add the Google Tag (gtag.js) to your public/index.html file:

<!-- Google tag (gtag.js) -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=YOURGOOGLETAG"
></script>
<script>
  window.dataLayer = window.dataLayer || []
  function gtag() {
    dataLayer.push(arguments)
  }
  gtag('js', new Date())

  gtag('config', 'YOURGOOGLETAG')
</script>

Extend Global Types with global.d.ts Create or update the global.d.ts file to extend the global window object, allowing TypeScript to recognize the gtag function:

declare global {
  interface Window {
    gtag: (
      command: string,
      action: string,
      params?: { [key: string]: any }
    ) => void
  }
}

export {} // Ensures the file is treated as a module

Set Up Your tsconfig.json Ensure your tsconfig.json includes the correct configuration to support the necessary TypeScript features:

include the global.d.ts

{
  "compilerOptions": {
    ...
  },
  "include": ["src/**/*", ".d.ts", "global.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

Create the Consent Banner Component The ConsentBanner component handles user consent for various types of cookies and communicates this information to Google Analytics: Use or restyle however you wish

import { useEffect, useState, FC } from 'react'
import { getUserCookies, setUserCookies } from '../../../constants/global'

const ConsentBanner: FC = () => {
  const [isVisible, setIsVisible] = useState<boolean>(false)
  const [showPreferences, setShowPreferences] = useState<boolean>(false)
  const [preferences, setPreferences] = useState<{
    essential: boolean
    analytics: boolean
    userdata: boolean
    personalization: boolean
    marketing: boolean
  }>({
    essential: true,
    analytics: false,
    marketing: false,
    personalization: false,
    userdata: false
  })

  useEffect(() => {
    const consent = getUserCookies()
    if (!consent) {
      setIsVisible(true)
    }
  }, [])

  const handleAcceptAll = (): void => {
    setPreferences({
      essential: true,
      analytics: true,
      marketing: true,
      personalization: true,
      userdata: true
    })
    setUserCookies(preferences)
    window.gtag('consent', 'update', {
      ad_storage: 'granted',
      analytics_storage: 'granted',
      ad_user_data: 'granted',
      ad_personalization: 'granted',
      wait_for_update: 500
    })
    setIsVisible(false)
  }

  const handleShowPreferences = (): void => {
    setShowPreferences(true)
  }

  const handleAcceptPreferences = (): void => {
    setUserCookies(preferences)
    window.gtag('consent', 'update', {
      ad_storage: preferences.marketing ? 'granted' : 'denied',
      analytics_storage: preferences.analytics ? 'granted' : 'denied',
      ad_user_data: preferences.userdata ? 'granted' : 'denied',
      ad_personalization: preferences.personalization ? 'granted' : 'denied',
      wait_for_update: 500
    })
    setIsVisible(false)
  }

  const handleCheckboxChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ): void => {
    const { name, checked } = event.target
    setPreferences((prev) => ({ ...prev, [name]: checked }))
  }

  if (!isVisible) return null

  return (
    <div style={styles.banner} className="f-column-10 py-4">
      <p style={styles.text}>
        We use cookies to enhance your experience. Please choose your preferences:
      </p>
      {showPreferences ? (
        <div
          style={styles.checkboxContainer}
          className="grid-wrapper-45 gap-33 aic py-4"
        >
          <label className="f-row-7">
            <input
              type="checkbox"
              name="essential"
              checked={preferences.essential}
              readOnly
            />
            Essential Cookies (required)
          </label>
          <label className="f-row-7">
            <input
              type="checkbox"
              name="analytics"
              checked={preferences.analytics}
              onChange={handleCheckboxChange}
            />
            Analytics Cookies
          </label>
          <label className="f-row-7">
            <input
              type="checkbox"
              name="marketing"
              checked={preferences.marketing}
              onChange={handleCheckboxChange}
            />
            Marketing Cookies
          </label>
          <label className="f-row-7">
            <input
              type="checkbox"
              name="personalization"
              checked={preferences.personalization}
              onChange={handleCheckboxChange}
            />
            Tailored Content Cookies
          </label>
          <label className="f-row-7">
            <input
              type="checkbox"
              name="userdata"
              checked={preferences.userdata}
              onChange={handleCheckboxChange}
            />
            User Data Cookies
          </label>
        </div>
      ) : null}
      <div style={styles.buttonContainer}>
        <button
          style={styles.button}
          onClick={handleAcceptAll}
          aria-label="accept all cookies"
        >
          Accept All
        </button>
        <button
          style={styles.button}
          onClick={handleShowPreferences}
          aria-label="customize cookie preferences"
        >
          Customize Preferences
        </button>
        {showPreferences && (
          <button
            style={styles.button}
            onClick={handleAcceptPreferences}
            aria-label="save cookies"
          >
            Save Preferences
          </button>
        )}
      </div>
    </div>
  )
}

const styles = {
  banner: {
    position: 'fixed' as 'fixed',
    bottom: '0',
    left: '0',
    right: '0',
    backgroundColor: '#141414',
    color: '#fff',
    padding: '10px',
    textAlign: 'center' as 'center',
    zIndex: 1000
  },
  text: {
    margin: '0 0 10px'
  },
  checkboxContainer: {
    textAlign: 'left' as 'left',
    margin: '10px auto',
    maxWidth: '500px'
  },
  buttonContainer: {
    display: 'flex' as 'flex',
    justifyContent: 'center' as 'center',
    gap: '10px'
  },
  button: {
    backgroundColor: '#007BFF',
    color: '#fff',
    border: 'none',
    padding: '10px 20px',
    cursor: 'pointer',
    borderRadius: '5px'
  }
}

export default ConsentBanner

Conclusion

This tutorial covered setting up user cookies in your React application and connecting them to Google Analytics. Remember, getting consent from users is crucial for compliance with privacy regulations.

How to Connect a Domain to Cloudflare and a Modern Deployment Platform

frank edekobi — Mon, 16 Sep 2024 05:23:32 +0000

Question: What is this tutorial about?

To learn how to connect a domain name to Cloudflare and then set it up with a web hosting service or deployment platform like Netlify or Vercel.

Why go through all this stress?

Because it improves your website's security, speed, and ease of management.

Faster Load Times
Better Security
Almost always available 99.99% (never a downtime)

Who is this tutorial for?

Anyone with a technical background who has purchased a domain name and is familiar with creating online accounts. If you're new to these processes, don't worry - we'll provide short descriptions and external tutorial links (here and there) to help improve your knowledge of the subject and also guide you through any unfamiliar steps.

So if you think it's worth the stress, LET'S GET STARTED!!!

Prerequisites

You should have already completed some basic steps or have the following ready:

Domain from Namecheap: You should have already purchased a domain name from a domain registrar like Namecheap. (We'll be making use of Namecheap for this tutorial)
Cloudflare Account: You need to have a Cloudflare account setup.
Hosting Service Account: You should have an account with a web hosting service or deployment platform, such as Netlify or Vercel. (We'll be making use of Netlify for this tutorial)
Basic Understanding of DNS Records: A general idea of what DNS records are and how they function.
Access to Your Domain's DNS Settings: You should have access to the DNS settings in both Namecheap and Cloudflare.
Web Project Ready for Deployment: A website or web project you want to deploy.

First, Go to your Cloudflare Account

Add a New Site: Click the "Add a Site" or "Add a domain" button on your Cloudflare dashboard.
Enter Your Domain: Input your Namecheap domain and click "Add Site."
Select a Plan: Choose a plan that fits your needs (the free plan is usually sufficient).
Update DNS Records: Cloudflare will scan and automatically add DNS records for your domain. Delete all the DNS records created automatically. We add ours.

Next, Update Domain Nameservers in Namecheap

Return to your Namecheap account. Go to the "Domain List" section and select the domain you want to update.
Click on "Manage" next to the domain.
Under the "Nameservers" section, select "Custom DNS."
Enter Cloudflare Nameservers: Copy the nameservers provided by Cloudflare and paste them into the fields in Namecheap.
To find the nameservers in Cloudflare, go to DNS section > Record.
Scroll down to the section titled "Cloudflare Nameservers", you'll find the name servers.
Save Changes: Click "Save" to apply the changes. It might take some time for DNS propagation.

Next, Deploy Your Web Project on Netlify

Follow this instruction to easily deploy your project to Netlify
Next, Add Your Domain to Netlify

In your Netlify dashboard, go to the site you want to connect to your domain.
Under Site Settings, click on Domain Management.
Click on Add Custom Domain and enter your domain name (e.g., yourdomain.com).
The domain name should be the same one you connected to Cloudflare. Click Verify.

Next, Configure DNS in Cloudflare

Go to your Cloudflare account.
Select the domain you want to connect to Netlify from the Cloudflare dashboard.
Go to the DNS section in Cloudflare and add the following DNS Records.

You'll need to add two main records:

CNAME Record for the www Subdomain

Click on Add Record.
Choose CNAME as the type.
Set Name to www.
Set Target to your Netlify subdomain (e.g., yoursite.netlify.app).
Go to your Netlify account > Doman management > You'll find the Netlify subdomain under the Product Domains section (first row)
Click Save.

A Record for the Root Domain (yourdomain.com)

Click on Add Record.
Choose A as the type.
Set Name to @ or leave it blank (depending on Cloudflare's interface).
Set IPv4 address to 75.2.60.5 and Click Save.

Next, Verify the Setup

Wait for DNS propagation (which can take up to 48 hours, but usually quicker).
Visit your domain (yourdomain.com or www.yourdomain.com) and ensure it points to your Netlify site.
Check that SSL is working correctly by ensuring the site loads securely (https://).

Once you've done with the setup and everything is working fine, here's what you need to do next:

Follow this tutorial to set SSL for your custom domain:
How to enable SSL in Netlify with a custom domain

Check SSL/TLS Settings: Since Netlify handles SSL (security certificates) for your site, make sure Cloudflare's SSL/TLS settings are set to "Full" or "Full (Strict)" to avoid conflicts. This ensures that the connection between Cloudflare and Netlify is secure.

Follow this tutorial:
Steps to Set Up Cloudflare CDN and Optimize Your Website

By following these steps, you'll ensure that Cloudflare works smoothly with Netlify and keeps your site secure and fast.

Conclusion

Once everything is set up, your Cloudflare-managed domain should point to your Netlify site, with SSL provided either by Cloudflare or Netlify, depending on your configuration.

I hope you found it useful and please ask questions if you need more clarity.

How to set up and manage a professional email for free

frank edekobi — Mon, 16 Sep 2024 05:07:53 +0000

Question: What is this tutorial about?
This tutorial introduces a practical approach to setting up a custom email address for your online business website for free.

Why go through this stress?
If you're a small business owner, freelancer, or solopreneur, you know how important it is to maintain a professional image, which includes having a custom email address for your business.
However, you might not have the budget for a dedicated email hosting service.

Who is this tutorial for?
This tutorial is for small business owners, freelancers, and solopreneurs who want to set up a professional email address without spending money on dedicated email hosting services.

So if you think it's worth the stress, LET’S DIVE IN!!!

Introduction

Setting up and managing a professional email for your business for free means getting an email address that looks like yourname@yourbusiness.com without paying for email hosting services. It helps your business look professional and trustworthy without extra costs.
I'm going to show you how to get it done, but before we proceed you need to understand the pros and cons of the setup.

What Are the Pros and Cons?

Pros:

Using a custom email address associated with your domain enhances your professional image.
Using Gmail to manage your custom domain email is cheaper than paying for a dedicated email hosting service.
You only have to check one email account, and you can manage multiple addresses in a single inbox.
Many people are already familiar with Gmail, so there's no learning curve.

Cons:

Relying on Gmail for business communications can be risky if not properly secured (e.g., two-factor authentication).
Using Gmail means you're subject to Google's terms of service and potential changes in their policies.
Gmail offers less flexibility in terms of advanced email management and custom features compared to dedicated email hosting solutions.

Now that we understand the risks and the rewards, LETS DIVE IN!!!

Prerequisites

Here are the prerequisites for setting up a free professional email for your business:

A Domain Name: You need to own a domain name (like yourbusiness.com). You can buy one from domain registrars like Namecheap, GoDaddy, or Google Domains.
Gmail Account: A free Gmail account is required to set up your custom email address to receive and send emails through Gmail.
Domain Access: You need access to your domain's DNS settings (usually through your domain registrar) to configure email forwarding or connect to Gmail.
Basic Understanding of DNS Settings: A general knowledge of how to add or modify DNS records (like MX, TXT, and CNAME records) to ensure your domain is set up correctly for email.
Cloudflare (Optional but Recommended): If you're using Cloudflare for your domain management, you'll need an account and access to your domain there. (for this tutorial we'll be making use of cloudflare)

These are the basic things you need to set up and manage a professional email for free!

First, get your Domain Name

A domain name (like yourbusiness.com). If you don't have one yet, you'll need to buy it from a domain registrar like Namecheap, GoDaddy, or Google Domains.

Next, sign up for Cloudflare

If you don't have one, go to Cloudflare's website and sign up for a free account.

Steps:

Go to Cloudflare's website and create an account.
Add your domain name to Cloudflare.
Cloudflare will automatically provide you with new nameservers. You'll need to update these nameservers with your domain registrar.

Next, update your Domain's Nameservers

Log in to your domain registrar's website.
Find the DNS or Nameserver settings for your domain.
Replace the existing nameservers with the ones provided by Cloudflare.
Save the changes. It may take a few hours for the changes to take effect.

Next, set up Email Forwarding with Cloudflare

Go to your Cloudflare account.
Select your domain from the dashboard.
Click on the "Email" tab in the Cloudflare dashboard. If you don't see this tab, ensure your domain is fully set up.
Click "Email Routing" to start configuring email routing.

Next, create Email Routes

Click "Create a Route".
Enter the email address you want to route in the "Source Email" field (e.g., info@yourbusiness.com).
Enter the destination email address where you want the emails to be forwarded (e.g., your Gmail address).
Click "Save".

With this setup, any emails sent to your custom email address will land directly in your Gmail inbox.
But we're not done yet….
We still need to set up Gmail to send emails using your custom email address.

Next, set up Gmail (2-factor auth)

Go to your Gmail account.
Click your profile picture (top-right) > Select Manage your Google account.
In the navigation panel, select Security.
Under the "How you sign in to Google" section, select 2-Step Verification > Get started.
Follow the onscreen steps and setup the 2-step verification

Or follow the tutorial here to set it up
https://support.google.com/accounts/answer/185839?hl=en&co=GENIE.Platform%3DDesktop

Next, generate the Gmail App Password

Go to your Gmail account.
Click your profile picture (top-right) > Select Manage your Google account.
In the navigation panel, select Security.
Under Signing in to Google, select 2-Step Verification.
At the bottom of the page, select App Passwords. You can also access App Passwords directly by clicking this link: https://myaccount.google.com/apppasswords
Enter the app name, and click the create button. A new password would be generated, copy the password, and save it in a place where you can easily copy it.

Lastly, set up your custom email address in Gmail so you can send emails from it.

Go to your Gmail account
Click the Settings Icon > See all settings
Click the Accounts and Imports tab
Look for the section "Send mail as:" and Click Add another email address. A pop-up window titled "Add another email address that you own" will appear.
Enter the custom email address you set up for email routing in Cloudflare.
Click the "Next Step" button.
For the SMTP Server, enter "smtp.gmail.com".
Set the Username field to your Gmail address.
Paste the password generated from the Google app password section.
Click the "Add Account" button, and your custom email will be successfully added to your Gmail account.

Test

Open your Gmail account.
Click the "Compose" button.
Click the "From" field, and a drop-down menu will appear showing your custom and original email addresses.
Select your custom email address, compose your message, and send.

Congratulations! You can now send and receive emails using your custom email address through Gmail.

Master React Global State with a Custom Hook: Simplify Your App’s State Management

frank edekobi — Sun, 15 Sep 2024 08:46:05 +0000

Question: What is this tutorial about?

This tutorial introduces a practical, custom approach that makes it easier to organize and manage state for small to large or complex React applications using useReducer + React Context.

Why go through all this stress?

This approach helps you manage shared state more easily in larger React apps plus:

No Need for Conditional Chaining (?.)
Cleaner Code
Centralized State Management
Easier to Reset or Update State
Scalable and Flexible
Consistency Across the App

Who is this tutorial for?

This tutorial is aimed at developers with an intermediate skill level in React and Typescript, who are familiar with basic state management and hooks but want to deepen their knowledge by learning how to implement a custom global state solution using hooks like useReducer and React Context.

So if you think it's worth the stress, LET’S DIVE IN!!!

React Context + useReducer hook

Let's start with the useReducer

Imagine you have a bunch of data (a “state”) that changes as the user interacts with your app (like filling out a form or choosing different options). You want an organized way to update this data, clear it out, or reset everything back to its starting point.

Let’s break it down

useReducer: is like a traffic control system for your state. It decides how the state should change based on certain actions you send it (like "Update this part" or "Clear everything").
State: The “state” is a collection of values that describe the current situation in your app (like a user’s inputs or choices).
Action: An “action” is a signal you send to tell the reducer what to do with the state. For example, “Update the user’s name” or “Clear all data.”

Now you’ve gotten the idea, let’s get into the tutorial proper

Tutorial

First, Create a state-hook.tsx file.

export const reducer = <T extends { [key: string]: any }>(
  initState: T, // The initial state when you start the app
  state: T,     // The current state, as it changes over time
  action: { type: keyof T | 'CLEAR_ALL'; payload?: any } // What should change
) => {
  switch (action.type) {
    case 'CLEAR_ALL':
      return { ...initState } // Reset everything to the original state

    default:
      if (action.type in state) {
        // Only update if the new value is different
        if (state[action.type] === action.payload) return state 
        return { ...state, [action.type]: action.payload } // Update part of the state
      }
      return state // Return the same state if nothing changes
  }
}

export interface IUSH<T> {
  state: T
  updateState: <A extends keyof T>(type: A, payload: T[A]) => void // Ensure payload matches the type of the state property
  clearState: <A extends keyof T>(type: A) => void
  clearAll: () => void
}

export const useStateHook = <T extends { [key: string]: any }>(
  initState: T // Starting values for the state
): IUSH<T> => {
  const [state, dispatch] = useReducer(reducer, initState) // This sets up the state system

  // Function to update part of the state
  const updateState = useCallback(
    <A extends keyof T>(type: A, payload: T[A]) => {
      dispatch({ type, payload }) // Send an action to the reducer to update state
    },
    []
  )

  // Function to reset a specific part of the state
  const clearState = useCallback(<A extends keyof T>(type: A) => {
    dispatch({ type, payload: initState[type] }) // Reset to the initial value for that part
  }, [])

  // Function to clear everything (reset all state)
  const clearAll = useCallback(() => {
    dispatch({ type: 'CLEAR_ALL' }) // Clear the entire state
  }, [])

  return { state, updateState, clearState, clearAll } // Return the state and the functions
}

The reducer function is the brain behind the state updates. It checks what action has been sent and changes the state accordingly.

The useStateHook function is a custom hook you would use in your app. It helps you manage the state with three main functions: updateState, clearState, clearAll

Next, create a component-state.ts file

Define the interface IComponentState and the object initComponentState

export interface IComponentState {
// define your state here
}

export const initComponentState: IComponentState = {}

Next, add the useStateHook to your Layout file

If you do not have a layout file add it to the file that defines the general structure of your web application.

Example of a layout file structure

import React from 'react';
import { Outlet, Link } from 'react-router-dom'; // Used with react-router for navigation

const Layout = ({ children }) => {
  return (
    <div>
      {/* Header */}
      <header>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
      </header>

      {/* Main content (this changes based on the page) */}
      <main>
        {children} {/* This renders the nested content */}
        or 
        <Outlet /> {/* This renders the specific page/component content */}
      </main>

      {/* Footer */}
      <footer>
        <p>&copy; 2024 My Website</p>
      </footer>
    </div>
  );
}

export default Layout;

Add the useStateHook before the return statement

// Assuming the IComponentState and initComponentState are defined
const global = useStateHook<IComponentState>(initComponentState);

Next, create a context.ts file

import React, { createContext, useContext } from 'react';

// Define the type for your context
interface IGlobalContext {
  global: IUSH<IComponentState>
}

// Create the context with an initial value
export const GlobalContext = createContext<IGlobalContext>({
  global: {
    state: initComponentState,
    updateState: () => {},
    clearState: () => {},
    clearAll: () => {}
  }
});

// Custom hook to use the GlobalContext
export const useGlobalContext = () => {
  const context = useContext(GlobalContext);
  if (!context) {
    throw new Error('useGlobalContext must be used within a GlobalProvider');
  }
  return context;
};

Next, Modify the layout file

Now, in the layout file, you can wrap the children with the GlobalContext.Provider so that the state is available throughout the app:

import React from 'react';
import { useStateHook } from './useStateHook'; // Assuming this is your custom hook
import { GlobalContext } from './GlobalContext'; // Context created earlier

const initComponentState = {
  // define the initial state here
};

const Layout: React.FC = ({ children }) => {
  const global = useStateHook<IComponentState>(initComponentState); // Initialize global state

  return (
    <GlobalContext.Provider value={{global}}>
      <div>
        {/* Header */}
        <header>
          <nav>
            <ul>
              <li><a href="/">Home</a></li>
              <li><a href="/about">About</a></li>
            </ul>
          </nav>
        </header>

        {/* Main content */}
        <main>{children}</main>

        {/* Footer */}
        <footer>
          <p>&copy; 2024 My Website</p>
        </footer>
      </div>
    </GlobalContext.Provider>
  );
};

export default Layout;

Congratulations!!!, we’re done with the setup.

Now let’s test it to see if it works as advertised

First, modify the component-state.ts file

We’ll add some states:

export interface IComponentState {
// define your state here
    name: string
    occupation: string
}

export const initComponentState: IComponentState = {
   name: "",
   occupation: ""
}

Next, Create a Child Component.tsx and Access the Global State in it

Now, any child component wrapped inside the Layout can use the useGlobalContext hook to access and manipulate the global state.

Here’s how a child component can use the global state:

import React from 'react';
import { useGlobalContext } from './GlobalContext';

const ChildComponent: React.FC = () => {
  const { global } = useGlobalContext();
  const { state, updateState, clearState, clearAll } = global;

  return (
    <div>
      <h1>Global State Example</h1>
      <pre>{JSON.stringify(state)}</pre>

      {/* Example: Update a part of the global state */}
      <button
        onClick={() => updateState('name', 'Franklyn Edekobi')}
      >
        Update Name
      </button>

      <button
        onClick={() => updateState('occupation', 'Software Engineer')}
      >
        Update Occupation
      </button>

      {/* Example: Clear a part of the global state */}
      <button onClick={() => clearState('name')}>Clear State</button>

      {/* Example: Clear all global state */}
      <button onClick={clearAll}>Clear All</button>
    </div>
  );
};

export default ChildComponent;

Summary of Steps:

useStateHook: This manages the global state.
Context (GlobalContext): Created to provide the global state to all components.
Layout: Wraps children with GlobalContext.Provider to make the state accessible globally.
Child components: Use useGlobalContext to access and update the global state.

By structuring it this way, you have a clean and scalable way to manage global state in your React app!

Benefits

This setup with initComponentState and React Context has several benefits, especially when managing global state across an app. I'll break it down step by step, explaining it in a way that's easy to understand.

What is initComponentState?
initComponentState is the initial state of your global state. It’s like having a starting point or default values for everything your app needs. By having these defaults, you don’t need to worry about checking if something is undefined before using it, which can save you from errors.

Example of the Problem It Solves
Let’s say your app has a part of the global state user that stores the user’s name. Without the initial state, the global state might look like this when no one is logged in:

{
  "user": undefined
}

This means you’d have to write code that checks if user exists before you can use it, like this:

console.log(user?.name); // If 'user' is undefined, this won't crash

But with initComponentState, you make sure that user always exists, even if it's empty. So your initial state might look like this:

{
  "user": {
    "name": ""
  }
}

Now, you can confidently access user.name without worrying about checking if user exists first.

Benefits of This Setup

No Need for Conditional Chaining (?.)

Because initComponentState ensures that every part of your global state has an initial value, you don't have to use tricky checks like user?.name to avoid errors. The initial state gives you confidence that user (or any other part of the state) will always be defined, so you can access it directly without worrying about things breaking.

Cleaner Code

By using this setup, you write cleaner and more readable code. You don’t need to sprinkle your code with checks to see if things are undefined or null. This makes your code easier to maintain and understand.

Instead of writing this:

if (user?.name) {
  console.log(user.name);
}

You can just do this:

console.log(user.name);

It’s simpler and more straightforward!

Centralized State Management

This setup makes managing the state across your app easy and centralized. Since the state is shared through the React Context (using the GlobalContext), you don’t need to pass down the state manually through every component. Instead, any component wrapped in the Layout can access the global state using a simple hook (useGlobalContext).

For example, without global state, you’d have to pass data from parent to child components like this:

<ParentComponent>
  <ChildComponent user={user} />
</ParentComponent>

With this setup, you don’t need to pass user as a prop anymore. The child can just use the global state:

const { state } = useGlobalContext();
console.log(state.user.name);

This reduces the complexity and effort of passing state manually.

Easier to Reset or Update State:

With the useStateHook setup, you can easily reset the state or update specific parts without affecting other parts. For example:

You can clear a specific part of the state (like resetting user).
You can clear the entire state back to its initial values (using clearAll).
This kind of control makes it easy to handle scenarios like logging out a user (clearing user data) or resetting the entire form without losing other data.

Scalable and Flexible

This setup is scalable, meaning it can grow with your app. Whether your app is small or large, this method can handle more complex state structures as your app evolves. You don’t need to rewrite everything when your state becomes bigger or more complicated.

For example, if you add more features (like managing settings or preferences), you can easily expand the global state without much hassle. The flexibility of this approach means you can keep adding to the state without breaking existing functionality.

Consistency Across the App

By having a well-defined initComponentState, you maintain consistent state structure across your app. Every component that uses the global state will have access to the same structure, which reduces bugs and makes debugging easier.

For example, every component knows exactly what the state looks like, so there’s no confusion about what data is available or what format it’s in.

In Summary

No Conditional Chaining:
You avoid ?. checks because every part of the state has a default value.

Cleaner Code:
Your code becomes simpler and easier to read.

Centralized State:
All components have easy access to global state without needing to pass it manually.

Flexible and Scalable:
The setup can grow with your app as it becomes more complex.

Consistency:
Ensures that your state is predictable and easy to manage across the whole app.

This setup simplifies how you manage state in React, making your app more reliable and easier to work on.

I hope you find this useful. Do have a wonderful day