Forem: Krushna Chandra Dash

Run React App Localhost in Https in 2 steps

Krushna Chandra Dash — Fri, 13 Oct 2023 08:57:35 +0000

Question->
How do I use the React development server to serve requests from https while working on localhost?

Advantages of using Httpsin localhost



1. Access to 3rd party API's without CORS error.
2. Working with cookies made easy.
3. Accessing Google and Facebook API's without deploying the 
    application.

For React App Created with Vite

Step-1

1.Install vite-plugin-mkcert package.

Step-2

Change in vite.config.js



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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(),mkcert()],
  server:{
    port:3000,
    https: true
  }

})

and then start your application with npm run dev

For React App Created with create-react-app

Step-1

1.Install cross-env package.

Step-2

Modify start script in package.json and it should look like this



    "start": "cross-env HTTPS=true react-scripts start",

and Done .. Now Run your app using npm start.

if you get any package issue plese install all the package again using npm install or yarn install

If facing any issue in browser like this

then click on advancebutton and click on continue to site.

.. Happy coding..

if this article helps please don't forget to Share with other..

Learn git revert Step by Step (to revert commit in GitHub)

Krushna Chandra Dash — Fri, 15 Sep 2023 07:32:08 +0000

Let say, you have Committed some change and pushed the changes to your git repo.
But now you want to revert/remove the changes from your git repo as well as from your local machine, then git revert can help you.

Note-> This command won't remove the commit from commit history, it only revert the change from files.

As per Google
The git revert command is a forward-moving undo operation that offers a safe method of undoing changes. Instead of deleting or orphaning commits in the commit history, a revert will create a new commit that inverses the changes specified

to read from git documentation https://git-scm.com/docs/git-revert.

Step-1

We need commit id to revert the specific commit. So to get commit id enter below command in your code editor terminal or command prompt.

git log

this will show list of commit with commit id, author, Date and commit Name

IMAGE 1->

so the top one will show the latest commit. so copy the id from the log and close the process by pressing semicolon + q button.

Step-2

Now lets use git revert command.

git revert <commit-id>

IMAGE 2 ->

and press Enter.
after enter we will see screen like this :

IMAGE 3 ->

you can see your commit name and commit id with files that have changes.

Step-3

So now we have to exit vim and commit the changes.
To do that press.

Ctrl+C

after pressing Ctrl+C it will ask to Type: qa and press enter.

IMAGE 4 ->

2.Then type qa and press Enter.

And you will exit of vim ui. and screen will look like this.
And you will see that you have created one commit and that is the reverted commit.

IMAGE 5 ->

Step-4

Now we have to push the reverted commit by using git push.

git push

and Done.

if you see the commit list you will see you have added one new commit starting with Revert key.

IMAGE 6 ->

That's all guys.. And All the best.

Advance Add Tags input with REACT JS

Krushna Chandra Dash — Sun, 13 Aug 2023 17:25:08 +0000

Hi guys. In this article we will create a advance multiple tags input using React.JS and a bit of CSS.

Where user can

Add tag by entering comma(,) .
Add tag by pressing "Enter" key.
Edit last tag by entering "Back Space".
On Blur add input text to Tag list.

No time to ready then here is the `CodeSandbox` link.

CodeSandbox DEMO
CodeSandbox Code Example

Step-1

Create A react js project.

npx create-react-app my_app

Step-2

Then lets create a component name of AdavnceTagsInput.js.
and the code with logic whick will look like below

import React, { useState, useRef } from "react";
import "./AdavnceTagsInput.css";

export const AdavnceTagsInput = () => {
  // to store input field data
  const [tagText, setTagText] = useState("");

  // to store tags data in array form
  const [tags, setTags] = useState([]);

  // to handle focus or blur state of input field
  const [isKeyReleased, setIsKeyReleased] = React.useState(false);
  const inputRef = useRef(null);

  const onChange = (e) => {
    const { value } = e.target;
    setTagText(value);
  };

  return (
    <div className="CustomTagComp" >
      <div className="selected_tag">
        {tags.map((tag, index) => (
          <div key={index} style={{ display: "flex" }}>
            <span className="selected_tag_text">{tag}</span>
            <button  className="selected_tag_button" >
              &#10005;
            </button>
          </div>
        ))}
        <input
          value={tagText}
          placeholder="Enter Tag"
          className="tags_input"
        />
      </div>
    </div>
  );
};

Step-3

Then lets add onKeyDown function, where we will check whether input field value is there . And on Enter or using comma(,) we will add value to tag list

// handle key down
    const onKeyDown = (e) => {
    const { key } = e;
    const trimmedInput = tagText.trim(); // remove extra space from both side

    // on entering "," add text to tag list
    if (key === "," && trimmedInput.length && !tags.includes(trimmedInput)) {
      e.preventDefault();
      setTags(
        (prevState) =>
          !prevState.includes(trimmedInput) && [...prevState, trimmedInput]
      );
      setTagText("");
    }

    // on press enter add text to tag list
    if (
      key === "Enter" &&
      trimmedInput.length &&
      !tags.includes(trimmedInput)
    ) {
      e.preventDefault();
      setTags(
        (prevState) =>
          !prevState.includes(trimmedInput) && [...prevState, trimmedInput]
      );
      setTagText("");
    }

    // on press back space user can exit last tag list
    if (
      key === "Backspace" &&
      !tagText.length &&
      tags.length &&
      isKeyReleased
    ) {
      const tagsCopy = [...tags];
      const poppedTag = tagsCopy.pop();
      e.preventDefault();
      setTags(tagsCopy);
      setTagText(poppedTag);
    }

    setIsKeyReleased(false);
  };

Step-4

Then lets add onKeyUp function, where we will make our isKeyReleased false ,means we move out of input field

const onKeyUp = () => {
    setIsKeyReleased(true);
  };

Step-5

Then lets add removeTag function, when user click on remove button in tag, we will remove tag from tag list .

const removeTag = (index) => {
    setTags((prevState) => prevState.filter((tag, i) => i !== index));
  };

Step-6

Then lets add handleFocus function, So when user click on anywhere of input tag box, we will make input field focus .

  const handleFocus = (e) => {
    let input = inputRef.current;
    e.stopPropagation();
    if (tags && tags.length > 0) {
      input.classList.remove("d-none");
    }
    input.focus();
  };

Step-7

Then lets add handleBlur function, When user enter some text and move out of input field without adding value to tag list, then we will add the value to tag list automatically.

   const handleBlur = () => {
    setIsKeyReleased(false);
    if (tagText) {
      let trimmedInput = tagText.replace(/,/g, "");
      if (trimmedInput.length && !tags.includes(trimmedInput)) {
        setTags(
          (prevState) =>
            !prevState.includes(trimmedInput) && [...prevState, trimmedInput]
        );
      }
      setTagText("");
    }
  };

Finally

So finally our AdavnceTagsInput.js will look like this.

import React, { useState, useRef } from "react";
import "./AdavnceTagsInput.css";

export const AdavnceTagsInput = () => {
  // to store input field data
  const [tagText, setTagText] = useState("");
  // to store tags data in array form
  const [tags, setTags] = useState([]);
  // to handle focus or blur state of input field
  const [isKeyReleased, setIsKeyReleased] = React.useState(false);
  const inputRef = useRef(null);

  const onChange = (e) => {
    const { value } = e.target;
    setTagText(value);
  };

  // handle key down
  const onKeyDown = (e) => {
    const { key } = e;
    const trimmedInput = tagText.trim(); // remove extra space from both side

    // on entering "," add text to tag list
    if (key === "," && trimmedInput.length && !tags.includes(trimmedInput)) {
      e.preventDefault();
      setTags(
        (prevState) =>
          !prevState.includes(trimmedInput) && [...prevState, trimmedInput]
      );
      setTagText("");
    }

    // on press enter add text to tag list
    if (
      key === "Enter" &&
      trimmedInput.length &&
      !tags.includes(trimmedInput)
    ) {
      e.preventDefault();
      setTags(
        (prevState) =>
          !prevState.includes(trimmedInput) && [...prevState, trimmedInput]
      );
      setTagText("");
    }

    // on press back space user can exit last tag list
    if (
      key === "Backspace" &&
      !tagText.length &&
      tags.length &&
      isKeyReleased
    ) {
      const tagsCopy = [...tags];
      const poppedTag = tagsCopy.pop();
      e.preventDefault();
      setTags(tagsCopy);
      setTagText(poppedTag);
    }

    setIsKeyReleased(false);
  };

  // handle key up
  const onKeyUp = () => {
    setIsKeyReleased(true);
  };

  // handle remove tag from tag list
  const removeTag = (index) => {
    setTags((prevState) => prevState.filter((tag, i) => i !== index));
  };

  // handle focus
  const handleFocus = (e) => {
    let input = inputRef.current;
    e.stopPropagation();
    if (tags && tags.length > 0) {
      input.classList.remove("d-none");
    }
    input.focus();
  };

  // handle blur
  const handleBlur = () => {
    setIsKeyReleased(false);
    if (tagText) {
      let trimmedInput = tagText.replace(/,/g, "");
      if (trimmedInput.length && !tags.includes(trimmedInput)) {
        setTags(
          (prevState) =>
            !prevState.includes(trimmedInput) && [...prevState, trimmedInput]
        );
      }
      setTagText("");
    }
  };

  return (
    <div className="CustomTagComp" onClick={handleFocus}>
      <div className="selected_tag">
        {tags.map((tag, index) => (
          <div key={index} style={{ display: "flex" }}>
            <span className="selected_tag_text">{tag}</span>
            <button
              onClick={() => removeTag(index)}
              className="selected_tag_button"
            >
              &#10005;
            </button>
          </div>
        ))}
        <input
          ref={inputRef}
          value={tagText}
          placeholder="Enter Tag"
          onKeyDown={onKeyDown}
          onBlur={handleBlur}
          onKeyUp={onKeyUp}
          onChange={onChange}
          className="tags_input"
        />
      </div>
    </div>
  );
};

And at end Add CSS

So finally our AdavnceTagsInput.css will look like this.

.selected_tag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: text;
  border: 2px solid;
  padding: 4px;
  border-radius: 4px;
  gap: 4px;
}
.selected_tag_text {
  /* font-size: 11px; */
  color: rgb(0, 0, 0);
  padding: 4px;
  background-color: rgb(218, 216, 216);
  border-radius: 4px 0px 0px 4px;
  border: none;
  word-break: break-all;
  cursor: text;
}
.selected_tag_button {
  /* font-size: 9px; */
  border: none;
  background-color: rgb(218, 216, 216);
  padding: 4px;
  border-left: 1px solid #ffffff;
  border-radius: 0px 4px 4px 0px;
  color: rgb(0, 0, 0);
  margin-right: 5px;
  font-weight: bold;
  cursor: pointer;
}
.tags_input {
  box-sizing: border-box;
  width: 0;
  min-width: 30px;
  flex-grow: 1;
  border: 0;
  margin: 0;
  outline: 0;
}
.tag_input:focus-visible {
  outline: none;
}

And that's all we have successfully create a tags input using React and Bit of JavaScript.

Found it helpful? Hit like and share with other

Make sure you checkout my other articles

Build a Memory Game using React.Js and JavaScript

Krushna Chandra Dash — Sat, 22 Apr 2023 09:25:14 +0000

What is Memory Card Game

Memory Game, also known as the Concentration card game or Matching Game, is a simple card game where you need to match pairs by turning over 2 cards at a time.

In this Article we are going to create a game of grid size 3 x 4 .
CodeSandbox DEMO
CodeSandbox Code Example

Step-1

Create A react js project.

npx create-next-app

Step-2

We need some data and image to show in the game.

create a **app.mock.js** file and store the above data.

const MOCK = [
  {
    id: 1,
    name: "Ace",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/01_of_spades_A.svg/800px-01_of_spades_A.svg.png',
    isOpen: false
  },
  {
    id: 2,
    name: "Two",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/02_of_spades.svg/800px-02_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 3,
    name: "Three",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/03_of_spades.svg/800px-03_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 4,
    name: "Four",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/7/7a/04_of_spades.svg',
    isOpen: false
  },
  {
    id: 5,
    name: "Five",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/05_of_spades.svg/800px-05_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 6,
    name: "Six",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/06_of_spades.svg/800px-06_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 7,
    name: "Ace",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/01_of_spades_A.svg/800px-01_of_spades_A.svg.png',
    isOpen: false
  },
  {
    id: 8,
    name: "Two",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/02_of_spades.svg/800px-02_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 9,
    name: "Three",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/03_of_spades.svg/800px-03_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 10,
    name: "Four",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/04_of_spades.svg/800px-04_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 11,
    name: "Five",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/05_of_spades.svg/800px-05_of_spades.svg.png',
    isOpen: false
  },
  {
    id: 12,
    name: "Six",
    pic: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/06_of_spades.svg/800px-06_of_spades.svg.png',
    isOpen: false
  }
];
export default MOCK;

Step-3

Then lets create a component name of Board.js.
and the code with logic whick will look like below

import React, { useEffect, useState } from "react";
import Data from "../app.mock";

const Board = () => {
  const [cards, setCards] = useState(Data || []);
  const [firstCard, setFirstCard] = useState();
  const [secondCard, setSecondCard] = useState();

  const setCard = (card) => {
    setCards(
      cards.map((data) =>
        data.id === card.id ? { ...data, isOpen: !card.isOpen } : data
      )
    );
  };

  const handleClick = (card) => {
    if (card.isOpen) {
      return;
    }
    if (!firstCard) {
      setFirstCard(card);
      setCard(card);
    } else if (!secondCard) {
      setSecondCard(card);
      setCard(card);
    }
  };
  useEffect(() => {
    let timeOut;
    if (firstCard?.name !== secondCard?.name) {
      timeOut = setTimeout(() => {
        setCards(
          cards.map((data) =>
            firstCard?.id === data.id || secondCard?.id === data.id
              ? { ...data, isOpen: !data.isOpen }
              : data
          )
        );
        setFirstCard();
        setSecondCard();
      }, 1000);
    } else {
      setFirstCard();
      setSecondCard();
    }
    return () => {
      clearTimeout(timeOut);
    };
  }, [secondCard]);

  return (
    <div className="board ">
      {cards &&
        Array.isArray(cards) &&
        cards.length > 0 &&
        cards.map((card, index) => {
          return (
            <div
              className={`singleCard ${card.isOpen ? "fliped" : "show"}`}
              key={index}
              onClick={() => handleClick(card)}
            >
              {card.isOpen ? (
                <img src={card.pic} className="font_face" alt="img" />
              ) : (
                <img
                  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/The_Jolly_Nero.jpg/800px-The_Jolly_Nero.jpg"
                  className="back_face"
                  alt="img"
                />
              )}
            </div>
          );
        })}
    </div>
  );
};
export default Board;

Step-4

Import Board component to App.js file

import Board from "./components/Board";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Board />
    </div>
  );
}

Step-5

Add css for look and fill in style.css

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
.App {
  font-family: sans-serif;
  display: flex;
  align-self: center;
  text-align: center;
  justify-content: center;
  height: 100vh;
  background-color: azure;
}
.board {
  display: flex;
  align-self: center;
  justify-content: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 -10px;
  max-width: 500px;
  perspective: 1000px;
}
.singleCard {
  width: 100px;
  height: 120px;
  display: flex;
  margin: 10px;
  /* border: 1px solid gray; */
  border-radius: 5px;
  overflow: hidden;
  justify-content: center;
  cursor: pointer;
  /* padding: 4px; */
  /* background-color: #ffff; */
  transition: all 0.5s;
  transform-style: preserve-3d;
  transform: scale(1);
}
.fliped {
  transform: rotateY(180deg);
}
.font_face {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.back_face {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 1px solid black;
}

Folder Structure

Finally our folder structure will look like this

The End

That's all we are ready to play the game..

Using Axios In React JS....

Krushna Chandra Dash — Wed, 19 Apr 2023 05:19:19 +0000

Hi Friends.. Let me help you to understand and use axios in react js application. So I am writing this post by considering that you guys know about react js(If don't please gather some knowledge regarding react js.

What Is Axios?

Axios is a popular JavaScript library used for making HTTP request from a web browser or Node.Js.

Whether you're building a web app or a server-side application, Axios makes is easy to work with APIs and other HTTP services.
In this post, We will show you how to get get started with Axios, from installing to making basic GET and POST requests and also how to handle error by using async/await syntax.

Setting Up Axios

To start using Axios you'll need to install it in your project. You can do this using NPM or YARN.

For NPM User->

npm i axios

For YARN User->

yarn add axios

After Installing axios you need to use/ Import it your project.

import axios from 'axios';

Basic GET Request

To make a simple GET request to fetch data

// using promise

axios.get('URL')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// using async and await

async function getUser() {
  try {
    const response = await axios.get('URL');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Basic POST Request

When we need to send some data to server we use POST request.
To make a simple POST request to fetch data
In post request usually user send data to server and we call it as request body and server gives response.

// using promise

const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
axios.post(MY_URL,JSON.stringify(data ))
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// using async and await
const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
async function getUser() {
 try {
  const response = await axios.post(MY_URL,JSON.stringify(data ));
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Basic PUT Request

The PUT method is most often used to update an existing resource. If you want to update a specific resource (which comes with a specific URI), you can call the PUT method to that resource URI with the request body containing the complete new version of the resource you are trying to update.

// using promise

const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
axios.put(MY_URL,JSON.stringify(data ))
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// using async and await
const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
const data = {
 userId: 1,
 id: 5,
 title: “hello task”,
 completed: false
};
async function editUser() {
  try {
   const response = await axios.put(MY_URL,JSON.stringify(data ));
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Basic Delete Request

The DELETE method is used to delete a resource specified by its URI.

// using promise

const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
axios.delete(MY_URL)
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

// using async and await
const MY_URL="https://jsonplaceholder.typicode.com/todos/5"
async function deleteUser() {
  try {
    const response = await axios.put(MY_URL);
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

This document only cover basic use case.. As Axios is a very powerful tool that we can use it in advance case also..

Forem: Krushna Chandra Dash

Run React App Localhost in Https in 2 steps

For React App Created with Vite

Step-1

Step-2

For React App Created with create-react-app

Step-1

Step-2

Learn git revert Step by Step (to revert commit in GitHub)

Step-1

Step-2

Step-3

Step-4

Advance Add Tags input with REACT JS

No time to ready then here is the CodeSandbox link.

Step-1

Step-2

Step-3

Step-4

Step-5

Step-6

Step-7

Finally

And at end Add CSS

Build a Memory Game using React.Js and JavaScript

What is Memory Card Game

Step-1

Step-2

Step-3

Step-4

Step-5

Folder Structure

The End

Using Axios In React JS....

What Is Axios?

Setting Up Axios

Basic GET Request

Basic POST Request

Basic PUT Request

Basic Delete Request

No time to ready then here is the `CodeSandbox` link.