DEV Community: Md. Raihan Hossain Jibon

How express.js works

Md. Raihan Hossain Jibon — Sun, 26 Dec 2021 17:41:36 +0000

In this post, we will go through the source code of express, and try to understand how it works under the hood. Studying how a popular open source library works, will help us make better applications using it, and reduces some of the “magic” involved

when using it.

The “Hello World” example
Let’s use the “Hello world” example given in the official website to form a starting point for digging into the source code:

const express = require("express")
const app = express()

app.get("/", (req, res) => res.send("Hello World!"))

app.listen(3000, () => console.log("Example app listening on port 3000!"))

Creating a new express application

The var app = express() statement creates a new express application for you. The createApplication function from the lib/express.js file is the default export, which we see as the express() function call.

Some of the important bits are:

const mixin = require("merge-descriptors")
const proto = require("./application")

function createApplication() {
    const app = function(req, res, next) {
        app.handle(req, res, next)
    }
    mixin(app, proto, false)
    return app
}

Starting the HTTP server

After setting up the routes, the server has to be started. In our example, we call the app.listen method, with the port number, and callback function as the arguments. To understand this method, we can see lib/application.js. The gist of it is:

app.listen = function listen() {
    var server = http.createServer(this)
    return server.listen.apply(server, arguments)
}

Hopefully, this post helped you in understanding the important aspects of the source code, which you can use to understand the rest of it.

If there are any libraries or frameworks whose internal workings you feel deserve an explanation, let me know in the comments.

React Concept

Md. Raihan Hossain Jibon — Wed, 22 Dec 2021 17:53:14 +0000

Today we are going to talk about some interesting react concepts that will help you to understand react more efficiently. Concepts that we are going to cover in this blog: JSX and the hooks component.

JSX

JSX stands for JavaScript XML⇒( Extensible Markup Language ). It is a syntax extension of javascript that helps us to write HTML codes within JavaScript. There are many good sides of jsx some of these are jsx lets us write any javascript expression within { curly braces }. It is a lot easy to implement better than the other stuff. And one more thing is that jsx is used in camel-cased characters.
An example of jsx: const jsx =

this is a paragraph tag in jsx

Hooks

React hooks are newly introduced in react version 16.8.0. It is an additional feature of react.js. Hooks are used in functional components and let you have state and other react features in the functional components. By using hooks in the functional components we can have an organized codebase and performance webpage. There are many hooks in react they are useState, useEffect, useContext, useRef, useReducer, and so on. Now the useState hook lets you have states in a functional component which we didn’t have in an older version of react. The useEffect hook lets you have any kind of side effect in your component such as HTTP requests and so on. The useContext hook is used to get any kind of data from anywhere on the react website.
Now there are some rules about react hooks:
Hooks can only be used in react functional components.
They only can be called at the top level of components.
And they can’t be conditional like any other component or element in react functional component.

API and CRUD system

Md. Raihan Hossain Jibon — Tue, 21 Dec 2021 15:44:51 +0000

API stands for application programming interface, which is a set of definitions and protocols for building and integrating application software.

REST API stands for Representational State Transfer and is an architectural pattern for creating web services. It was developed by Roy Fielding in 2000 and has led to a growing collection of RESTful web services that follow the REST principles.

Rest API Data sharing clients and servers. Its easy design style is used creating HTTP or other. REST applications use methods GET, POST, DELETE and PUT.

GET Methods

Stored data call from the server to client-side using GET method. The GET method works as a data read system.

POST Method

POST Method used to create new data to save server.

DELETE Method

Delete method used for data delete to server.

PUT Method

This method is used when any data information changes or updates then used put method.

Functions

Md. Raihan Hossain Jibon — Tue, 21 Dec 2021 12:56:28 +0000

A Function is a way yo bundle code so that it can be reused. Functions allow us to run the same piece of code from multiple places in a program without having to copy paste the code repeatedly.

The Basic Anatomy of a function

The code between the curly brackets is called the function body.

Creating A Simple Function

Lets create a simple function. Enter the following code in the browser console.

Hello World!

const firstFunction = function () {
console.log("Hello World!);
}

Passing Arguments into Function

firstFunction just prints the same line of text every time you call it, but you will probably want your function to be more flexible than that. Function argument allow us to pass value and change to function behavior.
Lets create function with argument

const secoundFunction = function (name) {
console.log("Hello" + name "!");
}

We can send multiple argument also .

const secoundFunction = function (firstName, LastName) {
console.log("Hello" + firstName + LastName"!");
}

More Information Updating Soon.

Set flex direction

Md. Raihan Hossain Jibon — Tue, 21 Dec 2021 09:51:19 +0000

Hello Everyone Today we will learn how to work flex direction.

Here's the starter code for the example we'll be using in the following chapters.

HTML

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

CSS

* {
    font-family: Helvetica;
    font-size: 1.4em;
    color: white;
    text-align: center;
}

.container {
    border: 2px solid black;
}

.item {
    width: 100px;
    height: 70px;
}

.container div:nth-child(1), div:nth-child(6) {
    background-color: #00BFB8;
}

.container div:nth-child(2), div:nth-child(7) {
    background-color: #8E007E;
}

.container div:nth-child(3), div:nth-child(8) {
    background-color: #23D0EA;
}

.container div:nth-child(4) {
    background-color: #EF8956;
}

.container div:nth-child(5) {
    background-color: #060A3D;
}

There is a container div that contains 6 items. To be as clear as possible, each item has a class of item. Each is also 100px wide and 70px tall with a different background color.

There is also a black border around the containing div. This will help you visualize the relationship between the flex items and the flex container.