Tech Seeker

In this article, we will implement a ReactJs(v18) CRUD example by creating state management using the Zustand library. Zustand: The Zustand is a small, fast, and scalable state management library. It is straightforward to use and integrate. Some of its features are: It contains hooks API, so it is very easy to consume in react applications. Support for Async methods. Easily integrate additional middleware like 'immer', 'devtools', etc State can be accessed outside of the react components Easily integrate along with other state management libraries like 'Redux' & 'React Context API'. Create ReactJS Application: Let's create a ReactJS Application to accomplish the demo. npx create-react-app name-of-your-app Configure React Bootstrap Library: Let's install the React Bootstrap library. npm install react-bootstrap bootstrap Now add the bootstrap CSS file reference on 'index.js'. import 'bootstrap/dist/css/bootstrap.min.css';

In this article, we will understand the Apollo GraphQL library to consume the GraphQL Endpoint in the ReactJS application with a sample CRUD example. GraphQL API: GraphQL API mostly has a single endpoint. So data fetching or updating will be carried out by that single endpoint. For posting data or querying data, we have to follow its own syntax. GraphQL carries two essential operations: Query(Fetches Data) Mutation(Saves or Updates Data) Create ReactJS(v18) Application: Let's create a ReactJS application to accomplish our demo. npx create-react-app name-of-your-app Configure React Bootstrap Library: Let's install the React Bootstrap library npm install react-bootstrap bootstrap Now add the bootstrap reference to the 'index.js' src/index.js: import 'bootstrap/dist/css/bootstrap.min.css' Create A React Component 'Layout': Let's create a react component like 'Layout' in the 'components/shared' folder(new folder). src/components/sh

In this article, we are going to do ReactJS(v18) application authentication using the JWT Access Token and Refresh Token. JSON Web Token(JWT): JSON Web Token is a digitally signed and secured token for user validation. The JWT is constructed with 3 important parts: Header Payload Signature Create ReactJS Application: Let's create a ReactJS application to accomplish our demo. npx create-react-app name-of-your-app Configure React Bootstrap Library: Let's install the React Bootstrap library npm install react-bootstrap bootstrap Now add the bootstrap CSS reference in 'index.js'. src/index.js: import 'bootstrap/dist/css/bootstrap.min.css' Create A React Component 'Layout': Let's add a React component like 'Layout' in 'components/shared' folders(new folders). src/components/shared/Layout.js: import Navbar from "react-bootstrap/Navbar"; import { Container } from "react-bootstrap"; import Nav from "react-boot