DEV Community: Khayrul

Next JS - 2022

Khayrul — Fri, 25 Feb 2022 11:22:00 +0000

Text JS
Next JS is a React JS framework for production. Simply, Next is a package that uses React JS for building the user interface. It has a lot of features that enable developers to build fledged production-ready applications. It has so many features like routing, styling authentication, bundle optimization, SEO, etc. There’s no need to install additional packages, everything it provides us automatically.
Why Learn Next JS?
There are so many reasons to use Next JS instead of React JS. Next JS simplifies the process of building a React application for production. Some major benefits of Next JS are,

File-based routing
Pre-rendering
API routes
Support of CSS modules
Authentication
Development and production build system

File-based Routing: In Next JS no need to configure any url for routing. All files in pages folder automatically works as route.
Pre-rendering: Next JS allows to set pre-rendering method for each page where most of pages follow static generation and other pages will use server side rendering.
API routes: This week we have worked on four major features in our website. API routes provide a solution to build your API with Next. js. Any file inside the folder pages will be treated as an API endpoint instead of a page.

JWT Token

Khayrul — Thu, 23 Dec 2021 15:55:43 +0000

What is JWT token?
JWT stands for JSON web Token. It makes a secure way to identify a signed user and serve information to the user. It shares information between two parts. They are server-side and client-side. JWT token saves the information by a special token.
Why use JWT token?
JWT is a standard way to make a security system more strong. Now almost every modern app or web authority uses JWT tokens to give security to their users. JWT is a secure way to authenticate a user and share information. JWT saves user information with a secret token. The spatial token carries the information into it.
How JWT works?
JWT commonly contains some claims. These claims determine that who uses the token, how long it is valid and what permissions the client will get. The JWT token is made up of three parts and these are separated by dot(.). Once a client will get authenticated a unique token will generate for him. And this unique token saves some information about the authenticated user. When the token will be decoded it gives a JSON string. In this JSON string, we will get three things

Header
Payload
Signature

The header contains the type of token

The payload contains all claims. This is a JSON object. The information verifies the user and performs the action that the user requests.

The signature makes sure that the token has not changed

React context API

Khayrul — Wed, 22 Dec 2021 09:50:14 +0000

Context API is a new addition of React JS. It's an awesome feature is react. Context API makes the state management system becomes more manageable. Before coming context API, we passed state from one component to another component using props and the way was harder because, in a large application, it will be uncontrollable. Here context API helps us a lot and It is the best way to ignore props drilling. In the context API part, we will learn different purposes of context API and how to create a context, and how to use it.

Uses of context API and a simple example:
We can create a context API in four steps,

First, we have to create a context using createContext method
Then we have to wrap all necessary components using Context.Provider where we want to pass the context value.
Then pass the value using value props inside Context.Provider.
Then we can read or use the provided value using Context.Consumer or using useConetxt hook. Example:

import React, { createContext, useContext } from 'react';
export const MyContext = createContext();
function App() {
  const name = "Khayrul"
  return (
    <MyContext.Provider value={name}>
      <Author />
    </MyContext.Provider>
  )
}
const Author = () => {
  const value = useContext(MyContext);
  return <h1>{value}</h1>;
}
export default App;

React Context API vs Redux:
Many people think that, is context PAI replace Redux. The answer is No. Because some of the case context API is helpful and some of the case Redux is not ignorable.

Redux is a complete state management library. Redux is an efficient way to manage the state and in some cases, it is mandatory to use. In a large application, we may have so many states, and managing those states using context API or props drilling is very difficult. Here we should use Redux.
On the other hand, in a small application, using redux is not preferable, and it's one kind of harmful. Because for a simple action we have to write code in three or more files. Here we use context API or props drilling system.