DEV Community: Mahmudul Hasan

#JWT #ExpressJS #Mongoose

Mahmudul Hasan — Fri, 24 Dec 2021 16:07:15 +0000

JWT ( JSON Web Token )

JSON Web Token (JWT) is a standard that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. The compact size makes the tokens easy to transfer through an URL, POST parameter, or inside an HTTP header. The information in a JWT is digitally signed using a secret or public/private key pair.
JWTs can be signed using a secret or a public/private key pair.
JWTs are mainly used for authentication. After a user signs in to an application, the application then assigns JWT to that user. Subsequent requests by the user will include the assigned JWT. This token tells the server what routes, services, and resources the user is allowed to access.

Advantages of Node.js authentication with JWT

Node.js authentication with JWT has several advantages over the traditional authentication process, primarily the scalability of stateless applications. And since it’s becoming popular among such heavyweights as Facebook and Google, it’s adoption across the industry likely will continue to grow.

Other advantages include:

Simple verification through a JSON Web Token
You can use an authentication service or outsource it
Provides more trustworthiness than cookies or sessions

The Need for JSON Web Token

There are several reasons why applications use JSON Web Tokens for authentication:

JWT is an excellent choice to be passed in HTML and HTTP environments due to its smaller footprint when compared to other types of tokens.
JSON Web Tokens can be signed using a shared secret and also by using public/private key pairs.
It is easier to work with JWT as JSON parsers are standard in most programming languages.
JWT is also suitable for implementing authorization in large-scale web applications.

ExpressJs

Express is a flexible Node.js web application framework that provides a wide set of features to develop both web and mobile applications.

Express.js makes it much easier and simpler to build a web server with the use of middleware, which can handle requests and responses.

Features of Express.js

The main features of Express.js include:

The capability to design single-page, multi-page, and hybrid web applications.
Options for setting up middleware to respond to HTTP requests.
It defines a routing table that is used to perform different actions based on the HTTP method and URL.
Enables users to dynamically render HTML pages based on passing arguments to templates.

A basic “Hello Express” example in node.js express

open terminal and create folder

mkdir start-express

inside the folder command

npm init -y

npm install express -save

create file index.js and inside code here 
const express = require ("epress");
const app = express( );
const port = process.env.port || 3000;

app.get('/',(req,res)=>{
re.send("Hello Express")
});

app.listen (port,( )=>{
 console.log (“listening to port”,port);
});

The request object represents the HTTP request and contains properties for the request query string, parameters, body, HTTP headers, and so on.
The response object represents the HTTP response that an Express app sends when it receives an HTTP request.

*Process : *

Implementing a callback function with parameters ‘request’ and ‘response’
The application will listen on the defined port, which in this case is “3000,” and variables ‘port’ will contain the address and the port respectively
Lastly, the console.log statement shows the address and port in the command prompt or terminal

Displaying output in browser :

Hello Express

Mongoose

Mongoose is an Object Document Mapper (ODM). This means that Mongoose allows you to define objects with a strongly-typed schema that is mapped to a MongoDB document.

Mongoose provides an incredible amount of functionality around creating and working with schemas. Mongoose currently contains eight SchemaTypes that a property is saved as when it is persisted to MongoDB. They are:

String
Number
Date
Buffer
Boolean
Mixed
ObjectId
Array

Each data type allows you to specify:

a default value.
a custom validation function.
indicate a field is required.
a get function that allows you to manipulate the data before it is returned as an object.
a set function that allows you to manipulate the data before it is saved to the database.
create indexes to allow data to be fetched faster.

Further to these common options, certain data types allow you to further customize how the data is stored and retrieved from the database. For example, a String data type also allows you to specify the following additional options:

convert it to lowercase.
convert it to uppercase.
trim data prior to saving.
a regular expression that can limit data allowed to be saved during the validation process.
an enum that can define a list of strings that are valid.

#JSX #Component lifecycle #Context Api

Mahmudul Hasan — Thu, 23 Dec 2021 17:37:23 +0000

# JSX :

JSX is a JavaScript Extension Syntax used in React to easily write HTML and JavaScript together.

const jsx = <h1>this is jsx </h1>

This is simple JSX code in React. But the browser does not understand this JSX because it's not valid JavaScript code. This is because we're assigning an HTML tag to a variable that is not a string but just HTML code.

So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.
You can set up your own babel configuration using Webpack as I show in this article. Or you can use create-react-app which internally uses Babel for the JSX to JavaScript conversion.

React jsx code like :

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

export default function App( ) {
return <h1>hello world </h1>
}

# Component lifecycle :

In ReactJS, every component creation process involves various lifecycle methods. These lifecycle methods are termed components’ lifecycle. These lifecycle methods are not very complicated and are called at various points during a component's life. The lifecycle of the component is divided into four phases. They are:

Initial Phase
Mounting Phase
Updating Phase
Unmounting Phase

Each phase contains some lifecycle methods that are specific to the particular phase. Let us discuss each of these phases one by one.

1. Initial Phase
It is the birth phase of the lifecycle of a ReactJS component. Here, the component starts its journey on a way to the DOM. In this phase, a component contains the default Props and initial State. These default properties are done in the constructor of a component. The initial phase only occurs once and consists of the following methods.

getDefaultProps()
getInitialState()

2. Mounting Phase
In this phase, the instance of a component is created and inserted into the DOM. It consists of the following methods.

componentWillMount()
componentDidMount()
render()

3. Updating Phase
It is the next phase of the lifecycle of a react component. Here, we get new Props and change State. This phase also allows to handle user interaction and provide communication with the components hierarchy. The main aim of this phase is to ensure that the component is displaying the latest version of itself. Unlike the Birth or Death phase, this phase repeats again and again. This phase consists of the following methods.

componentWillRecieveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()

4. Unmounting Phase
It is the final phase of the React component lifecycle. It is called when a component instance is destroyed and unmounted from the DOM. This phase contains only one method and is given below.

componentWillUnmount()
This method is invoked immediately before a component is destroyed and unmounted permanently. It performs any necessary cleanup-related task such as invalidating timers, event listener, canceling network requests, or cleaning up DOM elements. If a component instance is unmounted, you cannot mount it again.

*# Context Api : *

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

For a more in-depth definition, it provides a way for you to make particular data available to all components throughout the component tree no matter how deeply nested that component may be.

example :

const App = () => {
  return(
    <ParentComponent theme = "light"/>
  );
}

const ParentComponent = (props) => (
  <Child theme = {props.theme} />
)

const Child = (props) => (
  <Grandchild theme = {props.theme} />
)

const Grandchild = (props) => (
  <p>Theme: {props.theme}</p>
)

In the example above, we specified the application theme using a props in the ParentComponent called theme. We had to pass that props to all components down the component tree to get it where it is needed which is the GrandChild component. The ChildComponent had nothing to do with the theme props but was just used as an intermediary.

Now, imagine the GrandChild component was more deeply nested than it was in the top example. We would have to pass the theme props the same way we did here which would be cumbersome. This is the problem that Context solves. With Context, every component in the component tree has access to whatever data we decide to put in our context.

Create with context api :
To create a context, we use React.createContext which creates a context object. You can pass in anything as an argument to React.createContext. In this case, we are going to pass in a string which is the current theme mode. So now our current theme mode is the “light” theme mode.

import React from "react";

const ThemeContext = React.createContext("light");
export default ThemeContext;

To make this context available to all our React components, we have to use a Provider. What is a Provider? According to the React documentation, every context object comes with a Provider React component that allows consuming components to subscribe to context changes. It is the provider that allows the context to be consumed by other components. That said, let us create our provider.

Go to your App.js file. In order to create our provider, we have to import our ThemeContext.

Once the ThemeContext has been imported, we have to enclose the contents of our App component in ThemeContext.Provider tags and give the ThemeContext.Provider component props called values which will contain the data we want to make available to our component tree.

function App() {
  const theme = "light";
  return (
    <ThemeContext.Provider value = {theme}>
      <div>
      </div>
    </ThemeContext.Provider>
  );
}