CRUD Operations with React and Node

md-hasan-ali — Thu, 30 Dec 2021 02:06:27 +0000

In this article, I will show you how to do a mern stack crud operation

First of all, we will look at how to install a React front-end project.

CRUD Operation:

   Step:1

Let’s start building the Front-end part with React. To create a new React App, enter the following code into the terminal and hit enter.
Command: npx create-react-app my-app

Step:2

Then go inside that folder and start the project and install the necessary packages And create as many components as needed.

   Step: 3

Then you have to create a project for the backend. There are some steps to be taken. First, you have to accept all the required packages with npm-init then you have to install node MongoDB express cors these important packages.

  Step:4

Then we can see that many APIs of crud operations have been created through the image above.

JWT Token

The common use case of the JWT token is that it is used for authorization. But the main purpose of the jwt token was to allow one of the two-part browsers and the server-side to work in a standard way.

Simple React Concept

md-hasan-ali — Wed, 29 Dec 2021 05:31:43 +0000

Simple React Blogs

Props in React: The data from a component goes down in a unidirectional way. Props one-way data binding. So React's performance is much better.

State in React: The state in the react is variable, but it cannot be changed directly, it has to be changed from one of the functions.

JSX in React: jsx is an extension of javascript it looks like HTML but not actually HTML, HTML code can be written through jsx in react but convert inside plan javascript with react.createlement inside.

How to React works: When the React application works, React automatically creates a DOM in it, and if anything changes, it creates another virtual DOM and compares it with the previous DOM, and just updates the place where it was changed.

Context API: The React Context API is as effective as a global variable for a React APP, just as declaring a global variable can be called from anywhere, so the Context API can be used anywhere from fathers to children, grandchildren without prop drilling.

How To Use Context API:

Import React , { createContext } from “react”;
Const useContext = createContext();

Const userProvider = ({ children }) => {
Const [name, setName ] useState(“Jhon Doe”);
Const [age, setAge] = useState(1);
Return (
{ children }

)
}

Hooks: React hooks are simple JavaScript functions and we can use these functions at different times to work with the data we need.

Simple Example:

Const [data , setaData ] = useState([]);
useEffect(()=> {
fetchData()
.then(res=>res.json())
.then(data=>setData(data);
})
console.log(data);

Custom Hooks: Custom reacts hooks are nothing more than a simple javascript function if you want to use the same data over and over again by creating hooks and calling it over and over again from different places.

DEV Community: md-hasan-ali

CRUD Operations with React and Node

Simple React Concept