How to fix 'process' is not defined (React+Vite)

Navindu Abhishek — Sun, 19 May 2024 06:27:53 +0000

Most of the time when we use "create react app" this error not came. but when we working with react+vite its kind of different. So Here's a step-by-step guide to setting up environment variables in a Vite project.

I think you already created a .env file root in your project. if not create .env file in root in your project and ensure all variables should be prefixed with VITE_.

Example:
VITE_EXAMPLE_API_KEY=your api key

So we can use import.meta.env object to access these environment variables.

Example:

export const exerciseOptions ={ method: 'GET', headers: { 'X-API-Key': import.meta.env.VITE_EXAMPLE_API_KEY, 'X-API-Host': 'www.example.com' } };

After changing environment variables you have to restart the development server to make this work.

By following these steps you can fix this issue.

What is State in React?

Navindu Abhishek — Mon, 08 Apr 2024 14:53:46 +0000

React state is like some kind of storage. It can save values that belong to the component. Like form data or some kind of data like that change-over button click or any user interaction. When the state changes, the component re-renders itself. It automatically updates the changes in content and shows them to the user. This concept is more efficient because React only updates part of the component, not the entire DOM.

In the past, state could only be used in class components, but with React Hooks introduced in React 16.8, you can now use state in functional components too! This makes your code cleaner and easier to understand. One of the hooks provided by React for managing state in functional components is useState().

Lets discuss using two simple examples

Counter App

import React, { useState } from 'react';

function Counter() {
  // Initializing state
  const [count, setCount] = useState(0);

  // Function to increment count
  const incrementCount = () => {
    setCount(count + 1);
  };

  // Function to decrement count
  const decrementCount = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>The count is: {count}</p>
      <button onClick={incrementCount}>Click me to increase count</button>
      <button onClick={decrementCount}>Click me to decrease count</button>
    </div>
  );
}

export default Counter;

This block of code defines a functional component named Counter. It's a simple component that shows a count on the screen and provides buttons to either increment or decrement that count.

const [count, setCount] = useState(0) initializes the component's state. useState(0) means that count starts with a value of 0.

count is the current state value, and setCount is a function that updates this value. This is what "state" in React refers to: data that can change over time.

function increases and decreases the count by 1 whenever it's called. React automatically re-renders the component with the updated state, showing the new count on the screen.

Toggle Message

import React, { useState } from 'react';

function ToggleMessage() {
  // Initialize state with the initial message
  const [message, setMessage] = useState("Hello, World!");

  // Function to toggle the message
  const toggleMessage = () => {
    setMessage(prevMessage => prevMessage === "Hello, World!" ? "Goodbye, World!" : "Hello, World!");
  };

  return (
    <div>
      <p>{message}</p>
      <button onClick={toggleMessage}>Toggle Message</button>
    </div>
  );
}

export default ToggleMessage;

The toggleMessage function changes the state based on its current value. If the message is "Hello, World!", it switches to "Goodbye, World!" and vice versa. It uses setMessage to update the state, and employs a callback function (prevMessage => …) to access the current state value and decide the new state based on it.

After Clicking the button invokes toggleMessage, toggling the state between "Hello, World!" and "Goodbye, World!", which in turn updates the displayed message.

I hope this explanation helps clarify the concept of state in React. I encourage you to follow best practices in React development and continue exploring its powerful features!

Forem: Navindu Abhishek

How to fix 'process' is not defined (React+Vite)

What is State in React?