Forem: Himanshu Baghel

Private Route

Himanshu Baghel — Sun, 07 Apr 2024 10:13:52 +0000

How can we protect our routes from unauthorized access? Let's learn about it.

Let's start from scratch.
So first create a react app

npx create-react-app your-project-name

yarn create vite your-project-name

I am using yarn vite here

After running the above yarn command, you need to select two things:

Select framework

Select variant(language)

After that, open VS Code and run following command:

yarn 
yarn add axios

npm install
npm install axios

Then run your app

yarn dev

npm start

Now, let's create the login page and home page.

//Login.jsx
import React, { useState } from "react";
import { Button } from "react-bootstrap";
import "./commonStyle.css";

const Login = () => {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = () => {
    const data = {
      username: userName,
      pass: password,
    };
    const dataString = JSON.stringify(data);
    sessionStorage.setItem("Status", dataString);
  };

  return (
    <div className="Cont">
      <div className="homeCont ">
        <h2>Login</h2>
        <input
          type="text"
          className="inputStyle"
          value={userName}
          onChange={(e) => setUserName(e.target.value)}
          placeholder="Enter your username"
        />
        <input
          type="password"
          className="inputStyle"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Enter your password"
        />
        <Button
          className={password.length < 8 ? "disableBtn" : "btn"}
          onClick={handleLogin}
        >
          Login
        </Button>
      </div>
    </div>
  );
};

export default Login;

Along with create Css file

/* commonStyle.css */
.Cont{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #535C91;
    color: #fff;
}
.homeCont{
    background-color: #070F2B;
    border: 1px solid #1a285b;
    height: 40vh;
    width: 30vw;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
align-items: center;
justify-content: center;
}
.inputStyle{
    width: 80%;
    height: 50px;
    margin: 10px 0;
    background-color: #191859;
    border: 1px solid #3a3960;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    padding: 0 7px;
}
.inputStyle::placeholder{
    color: #a7a7a7;

}

.inputStyle:focus{
    outline: none;
}
.btn{
    background-color: #f61542;
    width: 80%;
    height: 40px;
    margin: 10px 0;
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
}
.btn:hover{
    background-color: #f61542; 
}
.disableBtn{
    background-color: #df4d6a; 
    cursor: default;
}
.disableBtn:hover{
    background-color: #df4d6a; 
}
.bookCont{
    height: auto;
    padding-top: 10px;
}
.bookDtl{
    height: 30px;
    width: 100%;
    border: 1px solid #535C91;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 8px;
    align-items: center;
}

And It's look like this

Now, create the home page that we want to protect so that only authorized users can see it. In my case, users can access the home page only after logging in.

Note: On the Home page, I'm calling an API to add books, but it's up to you what you want to render on this page.

//home.jsx
import React from "react";
import { useEffect, useState } from "react";
import axios from "axios";
import "./commonStyle.css";
const Home = () => {
  const [bookData, setBookData] = useState([]);
  const [bookTitle, setBookTitle] = useState("");
  const [bookAuthor, setBookAuthor] = useState("");
  const [msg, setMsg] = useState("");

  const handleSubmit = async () => {
    const payload = {
      title: bookTitle,
      author: bookAuthor,
    };
    axios
      .post("http://localhost:3001/books", payload)
      .then((res) => {
        setMsg(res.data.message);
        fetchData();
      })
      .catch(() => {
        setMsg("Something went wrong");
      });
  };

  const fetchData = async () => {
    try {
      const response = await axios.get("http://localhost:3001/books");
      setBookData(response.data.data);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  };
  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="Cont">
      <div className="homeCont bookCont">
        <h3>Book Details</h3>
        <input
          className="inputStyle"
          onCopy={(e) => e.preventDefault()}
          onPaste={(e) => e.preventDefault()}
          placeholder="Book Title"
          value={bookTitle}
          onChange={(e) => setBookTitle(e.target.value)}
          autoComplete="off" 
        />
        <input
          className="inputStyle"
          placeholder="Book Author"
          value={bookAuthor}
          autoComplete="off" 
          onCopy={(e) => e.preventDefault()}
          onPaste={(e) => e.preventDefault()}
          onChange={(e) => setBookAuthor(e.target.value)}
        />
        <p>{msg}</p>
        <button className="btn" onClick={handleSubmit}>
          Add Book
        </button>
        {bookData.map((book) => {
          return (
            <div className="bookDtl" key={book.id}>
              <p> {book.id}</p>
              <p>{book.title}</p>
              <p>{book.author}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Home;

Now come our main page App.jsx

//App.jsx

import './App.css'
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import Home from './Screens/Home'
import PrivateRoute from './Screens/PrivateRoute'
import Login from './Screens/Login'


function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Login />} exact />
        <Route element={<PrivateRoute />}>
          <Route path='/home' element={<Home />} />
        </Route>
      </Routes>
    </Router>
  )
}

export default App

Here, I have created a simple route using the react-router-dom library. Additionally, I have defined my private routes inside this setup

  <Route element={<PrivateRoute />}> </Route>

So here, I am protecting only one route, i.e., the home route, but you can protect as many as you want.
After that, create the Private Route page, which we are importing on the App page.

//PrivateRoute.jsx

import React from 'react'
import { Navigate, Outlet } from 'react-router-dom'

const PrivateRoute = ({ children, ...rest }) => {
    const data = sessionStorage.getItem('Status');
    const isLogin = JSON.parse(data);
    return (
        isLogin ?
            <Outlet />
            :
            <Navigate to='/' />
    )

}

export default PrivateRoute

We're using the ...rest parameter in the PrivateRoute component's props. This allows the component to accept any additional props that are not explicitly destructured (children in this case).
The rest props are then passed down to the underlying component using the spread operator (...rest).
This flexibility allows you to configure the route further by passing props such as exact, path, component, render, or any custom props you may need directly to the component within PrivateRoute. e.g.

 <PrivateRoute path="/about" element={<About />} exact />

"Here, I check if the user is logged in, then create an object inside the sessionStorage and check this during private route. If login data is available in sessionStorage, then the user can go to the home page; otherwise, the user can't go to the home page.

An should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

*Thank you ❤️ *

React Router

Himanshu Baghel — Tue, 30 May 2023 12:09:10 +0000

React Router is a popular library used for handling routing in React applications. It provides a way to navigate between different views or pages within a single-page application (SPA) without a full page reload.
In this article, I'll show you how someone can use React router and with example.
First install react router in your project.

npm install react-router-dom

So, after that, create files that you want to navigate.In my case I have 3 files Home, About, and Contact pages.

Here is my file system in VS

Now Here is my files with code.
So my first is header file which always show in top of page

Header.js

import React from "react";
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-evenly",
        backgroundColor: "navy",
        color: "white",
        height: "10vh",
        alignItems: "center",
      }}
    >
      <Link id="link" to="/">
        Home
      </Link>
      <Link id="link" to="/about">
        About
      </Link>
      <Link id="link" to="/contact">
        Contact
      </Link>
    </div>
  );
};

export default Header;

Above code is simple and straight forward except what Link tag and why we import so, I will tell you but first write all the file code then I explain.

Home.js

import React from "react";

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

export default Home;

Contact.js

import React from "react";

const Contact = () => {
  return (
    <div>
      <h1>Contact Page</h1>
    </div>
  );
};

export default Contact;

About.js

import React from "react";

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

export default About;

App.css

#link {
  color: azure;
  text-decoration: none;
  font-size: 1.2rem;
}
h1 {
  font-size: 4rem;
  text-align: center;
}

Now, Write App.js file need some import files

import React from "react";
import "./App.css";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import Header from "./components/Header";

App.js

import React from "react";
import "./App.css";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import Contact from "./components/Contact";
import Header from "./components/Header";

const App = () => {
  return (
    <div>
      <Router>
        <Header />
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/about" element={<About />} />
          <Route exact path="/contact" element={<Contact />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

In the above code, we introduced 4 new things

Route
Routes
Router(BrowserRouter as Router)
Link

Route- The Route components define the paths and the corresponding components to render when those paths are matched. In the syntax we use element for component name but can different in different version of react-router. We use "react-router-dom": "^6.11.2"
syntax-

<Route path='PATH' element={<ComponentName/>} />

exact use for to ensure that a route is only matched if the current location is an exact match to the specified path.

Router(BrowserRouter)- the BrowserRouter component is used to provide routing functionality to your application. The as Router part in the import statement BrowserRouter as Router is an optional alias that allows you to use a shorter name (Router) when referring to the BrowserRouter component within your code.

Routes- The Routes component is used to define the routes and their corresponding components. In some version used instead of .

Link- The Link component in React Router is used to create navigation links within your application. It provides a way to navigate between different routes without triggering a full page reload.

Now, Here is an Output screenshot

Overall, React Router is an essential tool for building dynamic and interactive applications with React, providing seamless navigation and rendering based on URL changes.

Thank you for your time. Feel free to ask any question if you have any doubt, and also you give me suggestion or improve my article.

React Hooks

Himanshu Baghel — Sat, 20 May 2023 14:33:51 +0000

Hooks are react feature that was introduced in React 16.8 and this allows the developers to use state and react other features in functional components. Before the introduction of Hooks these features available only in class components.Hooks provide a way to manage state, handle side effects, and access lifecycle methods in functional components without the need for class components.

Here are some commonly used Hooks

useState - This hook allow you to add state to functional component and make it statefull function. useState return a state variable and a function to update the state variable.

Syntax-

const [stateVariable,functionToUpdateVariable] = useState(initialValue)

const [isOpen,setIsOpen] = useState(false)

Example-

import React, { useState } from 'react';

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};
export default Counter

OUTPUT-

2) useEffect - This hook is used for handling side effects in functional components, such as fetching data, subscribing to events, or manually changing the DOM. It accepts a callback function and runs it after the component has rendered.

Syntax-

useEffect(callback, dependencies)
useEffect(()=>{},[dependencies])

Example-

import "./App.css";
import React, { useEffect, useState } from "react";

const DataFetch = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an API
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        console.log("Data", data);
      });
  }, []);

  return (
    <div>
      <h1>Name: {data[0]?.name}</h1>
      <h1>Name: {data[1]?.name}</h1>
      <h1>Name: {data[2]?.name}</h1>
    </div>
  );
};

export default DataFetch;

OUTPUT-

3) useContext- The useContext hook in React allows you to consume a context within a functional component. It provides a way to access the current value of a context created using the createContext() function.

Syntax-

const value = useContext(Context);

Example-

import React, { useContext } from "react";

// Create a context
const MyContext = React.createContext();

// Create a component that provides the context value
const Parent = () => {
  const contextValue = "Hello, My Name is Himanshu Baghel";

  return (
    <MyContext.Provider value={contextValue}>
      <Child />
    </MyContext.Provider>
  );
};

// Create a component that consumes the context
const Child = () => {
  // Consume the context using useContext
  const contextValue = useContext(MyContext);

  return <p>{contextValue}</p>;
};

// Render the parent component
const App = () => {
  return <Parent />;
};

export default App;

OUTPUT-

Thank You

React Props

Himanshu Baghel — Sun, 05 Feb 2023 10:35:03 +0000

In React, everything treated as component.React Components using 'Props' to communicate each others.And Every parent component can pass information to it's child components using props.Using props you can pass an object, Arrays and functions.
Let's understand by an example.

There are two ways-

Using Props
Destructuring Array
Using bith of them we pass value
Using Props

// App.js (Parent component)
import React from 'react'
import Child from './Child'

const App= () => {

  return(
    <div>
      <h1>Hello Friends, My Name is Himanshu</h1> 

      <Child/>
    </div>
      )
}
export default App

// Child.js (Child Component)
import  React from "react";

const Child= () => {

  return (
    <h1>I live in  'Delhi' </h1>
  )
}
export default Child

Output:-

Here, we have two components one App.js (parent) and Child.js(child) and there is not passes through.Now you can see in child.js we print city name(in my case delhi) but if we want parent component decided city name and parent passes city name to child.js using props. Here how can we do it.

Destructuring Array

Here we don't need use props.cityName etc for everytime to pass information to child components . here we directly passes the value in child components.

In this article I try to explain Props and how to passess information to child.One noted that using these method describe above we only passes info top to down not down to top mean parent passes info not child passes to parent component. how child component passes info to parent component, we will discuss in upcoming article.
Lastly if you like my article you can follow me for more and feel free you can give me any suggestion.
Thank You

What is JSON ?

Himanshu Baghel — Tue, 31 Jan 2023 19:33:20 +0000

The full name of JSON is JavaScript Object Notation.JSON is a lightweight format for storing and transporting data and it is text-based so it can be easily read by human. JSON became a data Exchange standard on web.
JSON data represented in the form of key and value pair and curly braces {} holds data as object.

'{"name":"John", "age":30, "city":Delhi}'

In above code name,age and city are the keys and John,30 and delhi are the values of that keys.

let personName = obj.name;
let personCity = obj.city;

Using above code we can access JSON data.

Datatype of Values-
In JSON, values must be one of the following types:

string
number
object
array
boolean
null

*Note :- JSON Syntax is subset of Javascript.

In the past we use XML for data Exchange but now JSON uses increase tremendously specialy in Javascript.

Another exam of JSON file

{"employees":[
  { "firstName":"John", "lastName":"Doe" },
  { "firstName":"Anna", "lastName":"Smith" },
  { "firstName":"Peter", "lastName":"Jones" }
]}

Above JSON code employees is key and it's value is in the form of array and here are 3 element of array and each element is again an object and hold keys and value.

XML file for same data looks like-

<employees>
  <employee>
    <firstName>John</firstName> <lastName>Doe</lastName>
  </employee>
  <employee>
    <firstName>Anna</firstName> <lastName>Smith</lastName>
  </employee>
  <employee>
    <firstName>Peter</firstName> <lastName>Jones</lastName>
  </employee>
</employees>

We use XML because, XML is much more difficult to parse than JSON and JSON is parsed into a ready-to-use JavaScript object easily.

Thank You...

Variable in ReactJS(all about)

Himanshu Baghel — Sun, 29 Jan 2023 18:30:44 +0000

What is variable ?
Variable is like a container or box which used for store data(info,value etc).

History -
In past before ES-6(ECMA Script 6) there are only one way of definig variable like var x=8.5 but now after ES-6 there are 3 way of defining variable i.e var, let and const.

Explain -

Var

The var statement declares a function-scoped or globally-scoped variable, optionally initializing it to a value.
Default value is undefined.
Var first declare then used otherwise it show undefine error.
If you use var outside of a function, it belongs to the global scope.
If you use var inside of a function, it belongs to that function.
If you use var inside of a block, i.e. a for loop, the variable is still available outside of that block.

function foo() {
  var x = 1;
  function bar() {
    var y = 2;
    console.log(x); // 1 (function `bar` closes over `x`)
    console.log(y); // 2 (`y` is in scope)
  }
  bar();
  console.log(x); // 1 (`x` is in scope)
  console.log(y); // ReferenceError, `y` is scoped to `bar`
}

foo();

let

let Declaration declares a block-scoped local variable, optionally initializing it to a value.
If you use let inside of a block, i.e. a for loop, the variable is only available inside of that loop.

function var() {
  var x = 1;
  {
    var x = 2;  // same variable!
    console.log(x);  // 2
  }
  console.log(x);  // 2
}

function let() {
  let x = 1;
  {
    let x = 2;  // different variable
    console.log(x);  // 2
  }
  console.log(x);  // 1
}

const

const is a variable that once it has been created, its value can never change.
It does not define a constant value. It defines a constant reference to a value.
Because of this you can NOT:
Reassign a constant value
Reassign a constant array
Reassign a constant object

But you CAN:

Change the elements of constant array
Change the properties of constant object

// define MY_FAV as a constant and give it the value 7
const MY_FAV = 7;

// this will throw an error - Uncaught TypeError: Assignment to constant variable.
MY_FAV = 20;

// MY_FAV is 7
console.log("my favorite number is: " + MY_FAV);

// trying to redeclare a constant throws an error
// Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared
const MY_FAV = 20;

// the name MY_FAV is reserved for constant above, so this will fail too
var MY_FAV = 20;

// this throws an error too
let MY_FAV = 20;

Thank You.