DEV Community: govindbisen

(3)Hook - 1 . useState

govindbisen — Sat, 06 Sep 2025 09:10:14 +0000

What is `useState`?

useState is a React Hook that allows functional components to have state.

const [state, setState] = useState(initialState);

state → current state value
setState → function to update state
initialState → initial value

Example: Simple Counter

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Counter: {count}</h1>
      <button onClick={decrement} style={{ marginRight: '10px' }}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
};

export default Counter;

Explanation

count starts at 0.
Clicking + increases the counter.
Clicking - decreases the counter.
setCount updates state and triggers a re-render.

Tips

Each useState is independent.
Always use the setter function to update state.
Functional updates:

setCount(prevCount => prevCount + 1);

Functional initialization of state:

const [count, setCount] = useState(() => 0);

homework - learn where to use functional initializtion and update.

react setup without vite or create react app,(2)

govindbisen — Tue, 02 Sep 2025 16:36:34 +0000

🚀 Create React App Manually (Without CRA or Vite)

Hey developers 👋,
In this post, I’ll show you how to create a React app manually from scratch without using create-react-app or Vite. This will help you understand the building blocks of React projects — what happens under the hood.

👉 Full code is available on my GitHub: manualreact

1. Create a folder and initialize the project

mkdir manualreact
cd manualreact
npm init -y

The -y flag accepts all defaults, so it quickly generates a package.json.

2. Install React and ReactDOM

npm install react react-dom

react → Core library for writing components, managing state, and using hooks.
react-dom → Used to render React components into the actual DOM (browser).

Example:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

3. But wait… browsers don’t understand JSX directly ⚠️

Up to this point, we have written React code.
But browsers only understand plain JavaScript, HTML, and CSS.
So we need tools that bundle and transpile our code:

🔹 Webpack (Bundler)

Takes all your files (.js, .css, .jpg, etc.)
Combines them into a single optimized bundle (bundle.js)
Browser can then load it efficiently.

🔹 Babel (Transpiler)

Converts modern ES6+ and JSX code into older JavaScript that browsers understand.

Examples:

JSX ➝ React.createElement

// ES6/JSX
const element = <h1>Hello React</h1>;

Babel output:

const element = React.createElement("h1", null, "Hello React");

Arrow function ➝ ES5 function

// ES6
const sum = (a, b) => a + b;

Babel output:

var sum = function(a, b) {
  return a + b;
};

4. File Structure and Configurations

I’ve set up all necessary files (index.html, webpack.config.js, babel.config.js, entry point, etc.) in my repo.
👉 You can check it out here: manualreact on GitHub

✅ Conclusion

By setting up React manually:

You understand how bundlers and transpilers work.
You gain full control over project configuration.
It’s a great way to learn the internals behind create-react-app and Vite.

💡 Pro tip: Once you’re comfortable with this, you can explore advanced Webpack loaders, plugins, and optimizations.

👉 Check the complete project on GitHub, BUT do not download, write the code, install dependencies one by one, make each file one by one.

React application from scratch(1)

govindbisen — Mon, 01 Sep 2025 16:43:13 +0000

Disclaimer : writing this series of article to help someone in need, if you are intermediate to advance,there is no need to read the series, but you can review and send the suggestions, I am doing what i like.

There are multiple ways to create a React application:

Using Create React App – which I would say is outdated
Using Vite(Faster)
Setting it up manually (preferred)

Using Create React App – which I would say is outdated

`# Install globally (optional)
npm install -g create-react-app

Create project

npx create-react-app yourapplicationame

Go inside folder

cd my-app

Run development server

npm start

To build the app

npm run build `

Using Vite(Faster)

`# Create project
npm create vite@latest my-app

Select options

Go inside folder

cd my-app

Install dependencies

npm install

Run dev server

npm run dev`

Some un-common Errors I am facing during work -

govindbisen — Tue, 16 Aug 2022 14:08:00 +0000

Property 'Razorpay' does not exist on type 'Window & typeof globalThis'.

I came across this error and it was not so easy for me to solve this, that's why creating this small article.

I am working in ReactTs
you will probably use
var rzp1 = new Razorpay(options); or
var rzp1 = new window.Razorpay(options);

above your react class or function put

declare global {
  interface Window {
    // ⚠️ notice that "Window" is capitalized here
    Razorpay: any;
  }
}

2 . Getting proxy while console.log(state) in cart Slice (Redux)

solved by

import { current } from '@reduxjs/toolkit';
...
console.log(current(state));

Code reference form input with useReducer

govindbisen — Fri, 22 Apr 2022 10:32:56 +0000

The code runs in App.js

you can write Reducer function elsewhere to shorten you App component.
code will run fine.

I often suffer from lack of written working code for reference, hence I am making it.

we will use useReducer hook from react function component to handle multiple input.

Also find the logic for radio button how you handle initial value for radio button.

import { useReducer } from "react";

export default function App() {
  const formReducer = (state, action) => {
    switch (action.type) {
      case "HandleInputText": {
        return {
          ...state,
          [action.field]: action.payload
        };
      }
      case "ToggleConsent": {
        return {
          ...state,
          hasConsented: !state.hasConsented
        };
      }
      default:
        return state;
    }
  };

  const initialState = {
    username: "",
    email: "",
    password: "",
    hasConsented: false,
    gender: "male"
  };

  const [formState, dispatch] = useReducer(formReducer, initialState);
  console.log(formState);
  // where dispatch is a method to trigger state updates/changes, reducer is a function we define which controls how we change the state, and initial state is an object with initial values defined, like the initialFormState example above.
  const handleChange = (e) => {
    dispatch({
      type: "HandleInputText",
      field: e.target.name,
      payload: e.target.value
    });
  };

  return (
    <div className="App">
      <h1> Reducer with form </h1>
      <label>User Name </label>
      <input
        type="text"
        name="username"
        value={formState.username}
        onChange={(e) => handleChange(e)}
      />{" "}
      <br />
      <label>Email </label>
      <input
        type="text"
        name="email"
        value={formState.email}
        onChange={(e) => handleChange(e)}
      />
      <br />
      <label>Password </label>
      <input
        type="text"
        name="password"
        value={formState.password}
        onChange={(e) => handleChange(e)}
      />
      <br />
      <label>Gender </label>
      <div onChange={(e) => handleChange(e)}>
        <input
          type="radio"
          value="Male"
          name="gender"
          checked={formState.gender === "male"}
        />{" "}
        Male
        <input
          type="radio"
          value="Female"
          name="gender"
          checked={formState.gender === "female"}
        />{" "}
        Female
        <input type="radio" value="Other" name="gender" /> Other
      </div>
      <br />
      <label> i hearby Govind declare this that the code runs in react App </label>
      <input
        type="checkbox"
        checked={formState.hasConsented}
        onChange={() => dispatch({ type: "ToggleConsent" })}
      />
      <button onClick={() => console.log("printing", formState)}>
        print on console
      </button>
    </div>
  );
}

working code here
https://codesandbox.io/s/usereducerwithform-ubrz4m?file=/src/App.js:0-2542

you can see warning also, please help me solve that warning.

code is self explanatory but still if you want to understand you can talk to me, my whatsapp 8823011424
if you want to donate me please do 8823011424@upi no more than 1 rupee.

Regards
Govind

Stand Alone Redux, beginner's code reference to understand the flow...

govindbisen — Thu, 21 Apr 2022 12:02:57 +0000

Redux is a state management library, that keeps the state available application wide.

see the code of Redux without reactjs below

also now CreateStore is deprecated.

Redux Program 1

keywords
reducer ->store -> subscribe -> dispatch -> action

run like a simple javascript file.

npm init
npm i redux
node mycode.js

const redux = require("redux");

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
  if (action.type === "multi5") {
    return {
      counter: state.counter * 5,
    };
  }
};
const store = redux.createStore(counterReducer);

const counterSubscriber = () => {
  console.log(store.getState());
};

store.subscribe(counterSubscriber);

store.dispatch({ type: "increment" });
store.dispatch({ type: "multi5" });
store.dispatch({ type: "decrement" });

redux-toolkit program 2

do
npm init
npm install @reduxjs/toolkit
node redux-toolkit.js

import pkg from "@reduxjs/toolkit";
const { configureStore } = pkg;

const initialState = { value: 0, myName: "Govind" };

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === "counter/increment") {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1,
    };
  }
  // otherwise return the existing state unchanged
  return state;
}

const store = configureStore({ reducer: counterReducer });

console.log(store.getState());

store.dispatch({ type: "counter/increment" });

console.log(store.getState());

//We can call action creators to dispatch the required  action
const increment = () => {
  return {
    type: "counter/increment",
  };
};

store.dispatch(increment());

console.log(store.getState());
// {value: 2}

//Selectors
// Selectors are functions that know how to extract specific pieces of information from a store state value.
const selectCounterValue = (state) => state.value;

const currentValue = selectCounterValue(store.getState());
console.log(currentValue); //2

const selectMyName = (state) => state.myName;
const name = selectMyName(store.getState());
console.log(name);

Storing multiple values in one State

govindbisen — Fri, 25 Mar 2022 13:22:55 +0000

Hi,
This is my Second smallest possible article.
Pardon me for mistakes and improvement is highly welcomed.

We will learn how we can store multiple values in single state using useState hook in functional component.
demo

Step 1: import useState and set initial values

initial values will be an object.

import "./styles.css";
import { useState } from "react";

export default function App() {
  const initialvalues = {
    fname: "",
    lname: ""
  };
  const [data, setData] = useState(initialvalues);

  return (
    <div className="App">

    </div>
  );
}

Step 2: add two input box

values of input box will be data.fname data.lname, we will also assign name and id along with placeholder.

import "./styles.css";
import { useState } from "react";

export default function App() {
  const initialvalues = {
    fname: "",
    lname: ""
  };
  const [data, setData] = useState(initialvalues);

  return (
    <div className="App">

      <input
        placeholder="enter name"
        value={data.fname}
        name="fname"
        id="fname"

      />
      <input
        placeholder="enter surname"
        value={data.lname}
        name="lname"
        id="lname"

      />

    </div>
  );
}

Step 3: adding OnChange event to each input box

each input box will have onChange event, which will target to handleChange arrow function.
const handleChange = (e) => { setData({ ...data, [e.target.name]: e.target.value }); };

As we know data is an object, so we can replace data.fname and data.lname using spread operator and reassigning new values of fname and lname using { ...data, key:"new Value" }

in this way [e.target.name]: e.target.value will make new key value pair that will replace the previous key value pair.

we will also add a button to print the values, we can use this button to submit values to our backend.


import "./styles.css";
import { useState } from "react";

export default function App() {
  const initialvalues = {
    fname: "",
    lname: ""
  };
  const [data, setData] = useState(initialvalues);
  const display = () => console.log(data);

  const handleChange = (e) => {
    setData({ ...data, [e.target.name]: e.target.value });
  };
  return (
    <div className="App">
      <input
        placeholder="enter name"
        value={data.fname}
        name="fname"
        id="fname"
        onChange={handleChange}
      />
      <input
        placeholder="enter surname"
        value={data.lname}
        name="lname"
        id="lname"
        onChange={handleChange}
      />
       <button onClick={display}>click</button>
    </div>
  );
}

Demo->
demo

if you found this helpful, you can donate (8823011424@upi) me 1 rupee. It will encourage me to write more, believe me I want to write more, I am trying to save money for extra monitor as my 14 inch laptop is not good enough.

Thank you!!

Wrapper Component in React

govindbisen — Mon, 17 Jan 2022 11:19:06 +0000

Hi, I would like to introduce wrapper.

What is a wrapper?

Wrapper is a react concept, it is like a fragment <></> that covers any component or jsx as a blanket.

If you will use material ui component or Ant design, most probably you will encounter wrappers.

you can also make your own, let's have a look.

Wrapper.js

import React from "react";

export default function Wrapper(props) {
  return props.children;
}

This simple wrapper component will return everything it covers, it will not add anything on it's your own.

Now when you have build your own, you can use it anywhere in the project.

Home.js

import Wrapper from "../wrapper/Wrapper";
export function Home() {
  let navigate = useNavigate();
  return (

      <Wrapper>
        I am home component...
       <button onClick={() => navigate(`/Login`)}>go to login</button> 
      </Wrapper>

  );
}

This is my first article, As shortest as possible, if I have done any mistake, you are welcome to give me feedback, I will improve.

DEV Community: govindbisen

(3)Hook - 1 . useState

What is useState?

Example: Simple Counter

Explanation

Tips

react setup without vite or create react app,(2)

🚀 Create React App Manually (Without CRA or Vite)

1. Create a folder and initialize the project

2. Install React and ReactDOM

3. But wait… browsers don’t understand JSX directly ⚠️

🔹 Webpack (Bundler)

🔹 Babel (Transpiler)

4. File Structure and Configurations

✅ Conclusion

React application from scratch(1)

Using Create React App – which I would say is outdated

Create project

Go inside folder

Run development server

To build the app

Using Vite(Faster)

Select options

Go inside folder

Install dependencies

Run dev server

Some un-common Errors I am facing during work -

Code reference form input with useReducer

Stand Alone Redux, beginner's code reference to understand the flow...

Redux Program 1

redux-toolkit program 2

Storing multiple values in one State

Step 1: import useState and set initial values

Step 2: add two input box

Step 3: adding OnChange event to each input box

Wrapper Component in React

Hi, I would like to introduce wrapper.

What is a wrapper?

What is `useState`?