Forem: "Rocky" Hiroki Ueno

Managing Global and Persistent State with Context API in React

"Rocky" Hiroki Ueno — Sun, 01 Dec 2024 05:03:06 +0000

Managing global state is an essential feature in many applications. It is commonly used for tasks like handling user login data or controlling the app’s theme.
Additionally, persisting state across page refreshes is crucial to ensure a consistent user experience.
In this article, I’ll demonstrate a simple approach to achieving global and persistent state management using the Context API, with a practical example of theme control.

Roadmap

Step 1: Create ThemeContext.tsx

In this file, we create the ThemeContext to manage theme-related state globally. We also define a custom hook, useThemeContext, to simplify access to the context in components.

import { createContext, useContext } from "react";

// Define context type
interface ThemeContextType {
  isDarkMode: boolean;
  toggleTheme: () => void;
}

// Create context
export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// Create custom hook to access
export const useThemeContext = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

Step 2: Create ThemeProvider.tsx

The ThemeProvider component provides the ThemeContext to its children and handles theme state changes.

import React, { useState } from "react";
import { ThemeContext } from "./ThemeContext";

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const toggleTheme = () => {
    const newTheme = !isDarkMode ? "dark" : "light";
    // Change state value
    setIsDarkMode(!isDarkMode);
    // Save value to local storage
    // Toggle "dark" class in html element
    localStorage.setItem("theme", newTheme);
    document.documentElement.classList.toggle("dark", !isDarkMode);
  };

  return (
    <ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

Step 3: Wrap App in the ThemeProvider

Finally, wrap the App component with the ThemeProvider in main.tsx to enable context usage throughout the application.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import { ThemeProvider } from './context/ThemeProvider.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </StrictMode>,
)

Step 4: Access Context Values in Components

With the context set up, you can now access the theme values and toggle function in your components.

import { useThemeContext } from '@/context/ThemeContext';

function App() {
  const { isDarkMode, toggleTheme } = useThemeContext();

  return (
    <div>
      <p>isdarkMode: {isDarkMode}</p>
      <button onclick={toggleTheme}>Toggle Theme</button>
    </div>
  )
}

export default App

Conclusion

This approach demonstrates how to manage global and persistent state using the Context API. You can now adapt this method for other use cases like user authentication or language settings.

Create React project with Vite and set up Tailwind, shadcn/ui

"Rocky" Hiroki Ueno — Thu, 28 Nov 2024 02:41:48 +0000

Using Tailwind and shadcn/ui is common in React.
This is how to start a new React project with Tailwind and shadcn/ui.

Create a new project with Vite

Run this command to create a project

npm create vite@latest

Follow the instructions on console and set up your project such as your project name, framework (React), Javascript or Typescript (Typescript for now)

Install Tailwind

Add Tailwind and its configuration files to your project

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Delete all existing codes and add bottom codes in src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Edit content as below in tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
  /** ... **/
}

Configure paths

Edit tsconfig.json and tsconfig.app.json files to resolve paths
tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.app.json

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Now we also need to update vite.config.ts and install a package before the file

npm i -D @types/node

Then update vite.config.ts

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Set up shadcn/ui

Run this command to set up

npx shadcn@latest init

Follow the instructions on console and configure your project
My usual configuration is as below:

Style > Default
Base color > Neutral
CSS variables > No

Now set up is done and you can add components
To start, run the command to add button

npx shadcn@latest add button

Then you can use Tailwind and add button component to your project like below

import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div className="bg-red-400">
      <Button>Click me</Button>
    </div>
  )
}

JavaScript Types of Functions

"Rocky" Hiroki Ueno — Fri, 28 Jun 2024 23:02:25 +0000

Named function (Function declaration)

function helloWorld() {
   console.log('Hello World');
}

helloWorld();

Named functions are used when the codes need to be executed several times.

Anonymous function

let helloWorld = function () {
   console.log('Hello World');
}

console.log(helloWorld);

Anonymous functions are used the codes needs to be executed only once or twice and also used in event handler as below:

.onclick = function() {
   console.log('Hello World')
}

Arrow function

const helloWorld = () => 'Hello World';

console.log(helloWorld);

Arrow functions are shorter ways of function expressions from ES6 and useful to write functions in short ways.

React Rooting (react-router-dom)

"Rocky" Hiroki Ueno — Fri, 10 May 2024 02:33:50 +0000

Here is how to set rooting in React app using react-router-dom.
I will set rooting in App.js.

Install react-router-dom

npm install react-router-dom

Make pages App.js will call

src/Pages/Home.js

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  )
}
export default Home;

src/Pages/About.js

import React from "react";

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  )
}
export default About;

Set rooting in App.js

src/App.js

import './App.css';
import Home from "./Pages/Home";
import About from './Pages/About';
import Header from './Components/Header';
import { BrowserRouter, Route, Routes, Link } from "react-router-dom";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}
export default App;

Finally, I can call Home.js and About.js from App.js.
*Header needs to be assigned in BrowserRouter to insert Link into Header.

Tips

import { BrowserRouter, Route, Routes, Link } from "react-router-dom";

Here App.js import react-router-dom and can use it.

<BrowserRouter>
   <Link to="/">Home</Link> | <Link to="/about">About</Link>
   <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
   </Routes>
</BrowserRouter>

Here set the rooting.
"path" is URL, "element" is a page to call with the URL.

"React " Starting a new project

"Rocky" Hiroki Ueno — Sat, 04 May 2024 23:22:37 +0000

I started to learn React and made a test project.
Here is a memo of how to start a React new project.

*OS: MacOS, Editor: VSCode
*Node.js, npm have been installed.

Create empty folder in Finder.
Open VSCode and Open the folder.
Change directory and open the folder in terminal.
Create a new project.

create-react-app test

"test" would be an app name.

After finishing creating app, change directory and start an app as is an instruction in terminal.

cd appName
npm start

It'd be a success if the start page shows up.

Self Introduction

"Rocky" Hiroki Ueno — Fri, 03 May 2024 00:32:33 +0000

About me

I'm Rocky from Japan. I majored in International politics and relationship in university. While I was in my university, I went to Melbourne, Australia to study English and lived there for 6 months. After graduation, I worked for a software company in Japan as back-end engineer. I used html/css, javascript, Vue.js in front-end, and Java, C#, php in back-end. Now I'm in a college with the course of web development in Vancouver.

I like traveling and I've been to 16 countries such as Korea, Thailand, Turkey, the US, etc. I haven't been to Latin countries and now I really want to visit there.
Also, I like to play games. I like to play Nintendo Switch and play Pokemon, Mario Bros, Splatoon and so on.

The reason why I came to Vancouver is because I'd like to get a job and live here in Canada. Living in other country is my dream from my childhood and I was fascinated by Canada because of its "Mixed culture." I'd like to improve myself to be an engineer.

First week of my course has finished. Here is the review.

My expectation for this course

I'd like to get skills for front-end engineers. I worked as a back-end engineer in Japan and have some knowledge. Therefore, I'd like to brush up my skills and learn languages, frameworks and any others skills which are widely used in Canada.

How was my experience with this course

I think this environment is what I want. My teacher and classmates are nice guys. And I can learn engineering in English. I hope I have a good time with this course.

What I want to achieve after this course

My goal is working as a front-end engineer in a company in Canada. I'd like to learn a lot from this course and become an engineer who can make money for companies.