Forem: SHaon

Full Backend Project Connect MongoDB Atlas in NodeJS Part - 2

SHaon — Sat, 09 Mar 2024 17:15:44 +0000

If you complete the first part of this blog series then lets get start with mongoDB. read part-1

first of all goto: MONGODB ATLAST login with your email then create a project.
then create a cluster and fill-up the form and save the username and password after saving scroll down and allow the IP Address: 0.0.0.0/0 for testing perpose
then all done save and click on connect button and click on on the VSCODE option and copy the connection string.

after that open VSCODE select .env file and add the following code with your username and password

PORT=8000
MONGO_URI=mongodb+srv://username:password@cluster0.zvswttn.mongodb.net

save the files.

then open the constants.js file and add the following code:

export const DB_NAME = "choose_a_name";

then save all the following files
then open your terminal and install this following NPM packages mongoose express dotenv

copy the following snippets in your terminal and past

npm i mongoose express dotenv

after successfully installed done open db/index.js file and copy the following code:

import {DB_NAME} from "../constants.js";
import mongoose from "mongoose";

const connectDD = async () => {
    try {
        const connectionDB = await mongoose.connect(`${process.env.MONGO_URI}/${DB_NAME}`);
        console.log(`MONGODB Connected: ${connectionDB.connection.host}`);
    } catch (error) {
        console.log(`MONGODB Connection Error: ${error.message}`);
        process.exit(1);
    }
}

export default connectDD;

then save the file and open index.js root file and copy the following code:

import dotenv from "dotenv";
import connectDD from "./db/index.js";

dotenv.config();
connectDD();

then save the files and open your terminal and run

npm run dev

Congratulation your database successfully connected with your server

Full Backend Project Setup And Structure in NodeJS Part - 1

SHaon — Sat, 09 Mar 2024 14:38:11 +0000

First of all setup backend project:

Create a folder and open in any code editor like: VsCode

Open Terminal and run this code:

npm init -y

Lets Setup Project Folder Structure and files

create importants folder like:

.
└── root/
    ├── public/
    │   └── temp
    ├── src/
    │   ├── app.js
    │   ├── index.js
    │   ├── constants.js
    │   ├── controllers/
    │   │   └── index.js
    │   ├── middlewares/
    │   │   └── index.js
    │   ├── routes/
    │   │   └── index.js
    │   ├── utils/
    │   │   └── index.js
    │   ├── db/
    │   │   └── index.js
    │   └── models/
    │       └── index.js
    ├── .env
    ├── .env.sample
    ├── .gitignore
    ├── .prettierrc
    └── .pretterignore

After this you need to install some NPM packages* like
Nodemon and Pretttier

Open your terminal from root directory and run the following code:

npm i -D nodemon prettier

after successfully installed goto package.json file and update it with the following code snippet:

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "nodemon src/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "nodemon": "^3.1.0",
    "prettier": "^3.2.5"
  }
}

then add your gitignore and prettier setup

Read part -2

Understanding JSX in React

SHaon — Sat, 09 Mar 2024 12:24:42 +0000

Introduction to JSX

JavaScript XML (JSX) is a syntax extension primarily used with React to describe and render the user interface. JSX resembles the structure of HTML but is embedded within JavaScript code. It provides a more readable and efficient way to create React elements while blending the power of JavaScript with the familiar syntax of HTML. In this blog post, we will delve into the purpose, usage, key features, benefits, and examples of JSX in React development.

Purpose and Usage of JSX

JSX simplifies the process of writing and organizing React components by allowing developers to write HTML-like code directly within JavaScript. It enhances the readability of code, facilitates the creation of complex UI components, and provides a more declarative way to define interfaces. JSX is transpiled to plain JavaScript which enables the seamless integration of UI components with logic in React applications.

Key Features of JSX

Syntax Extension: JSX extends the syntax of JavaScript to include XML-like elements, making it easier to write and structure UI components.
Declarative: JSX follows a declarative approach, where developers describe the desired UI state, and React handles the rendering based on these descriptions.
Component-based: JSX promotes the creation of reusable and composable components, allowing developers to build complex UIs by nesting components within each other.
Efficient Rendering: JSX leverages the virtual DOM to optimize the rendering process, updating only the components that have changed without re-rendering the entire UI.

Benefits of Using JSX

Improved Readability: JSX enhances code readability by visually representing the structure of UI components, making it easier to understand and maintain.
Code Reusability: JSX facilitates the reuse of components, enabling developers to build modular and scalable applications with minimal redundancy.
Familiar Syntax: By combining JavaScript and HTML syntax, JSX provides a familiar environment for web developers, streamlining the development process.
Performance Optimization: JSX optimizes the rendering performance by efficiently updating the virtual DOM, leading to faster UI updates and improved user experience.

Examples of JSX Syntax and Usage

Let's explore some examples of JSX syntax in React:

Example 1: Basic JSX Element

const element = <h1>Hello, World!</h1>;

In this example, a simple JSX element representing an <h1> heading is defined.

Example 2: JSX Expression

const name = "React";
const introduction = <h1>Welcome to {name}</h1>;

Here, the JSX expression {name} dynamically inserts the value of the name variable into the rendered output.

Example 3: JSX Component

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const App = () => {
  return <Greeting name="User" />;
};

The Greeting component accepts props and renders a personalized greeting message, which is then used within the App component.

Conclusion

JSX plays a pivotal role in React development, offering a seamless way to integrate HTML-like syntax within JavaScript while improving code readability, reusability, and performance. By leveraging the power of JSX, developers can create dynamic and interactive user interfaces in React applications with ease. Embracing JSX unlocks a world of possibilities for building intuitive and efficient web applications.

With a deeper understanding of JSX and its advantages, developers can harness its capabilities to streamline the development process, enhance code maintainability, and deliver exceptional user experiences in React projects.

A Beginner's Guide to ReactJS: Unveiling the Power of Web Development

SHaon — Mon, 04 Mar 2024 18:07:35 +0000

Are you intrigued by the world of web development but find yourself overwhelmed by the plethora of frameworks and libraries out there? Fear not! In this beginner's guide, we'll take you on a journey through ReactJS, a powerful JavaScript library that has revolutionized the way modern web applications are built.

What is ReactJS?

At its core, ReactJS is an open-source JavaScript library developed by Facebook that facilitates the creation of interactive user interfaces. Unlike traditional approaches to web development, React employs a component-based architecture, allowing developers to break down complex UIs into reusable, self-contained building blocks. These components encapsulate both the structure and behavior of a particular piece of the user interface, promoting modularity, maintainability, and scalability in codebases.

Advantages of ReactJS

Virtual DOM: React introduces the concept of a virtual DOM, a lightweight representation of the actual DOM tree. By leveraging this virtual abstraction, React minimizes unnecessary re-renders and efficiently updates only the components that have changed, resulting in improved performance and a smoother user experience.
Declarative Syntax: React embraces a declarative programming paradigm, enabling developers to describe the desired state of the UI without worrying about the underlying implementation details. This declarative approach enhances code readability, simplifies debugging, and fosters productivity.
Component Reusability: React promotes the creation of reusable components, which can be easily composed and nested within one another to build complex user interfaces. This reusability not only accelerates development but also ensures consistency and maintainability across projects.

Workflow of ReactJS

The typical workflow of a ReactJS project involves the following steps:

Setup: Begin by installing Node.js and npm (Node Package Manager) if you haven't already. Then, initialize a new React project using Create React App or any other preferred boilerplate. This sets up the necessary dependencies and project structure.
Component Development: Design and implement individual React components to represent different parts of your application's UI. Each component should encapsulate its own logic and rendering behavior.
State Management: Utilize React's state and props to manage dynamic data and handle user interactions. Stateful components maintain internal state, while props enable data flow between parent and child components.
Styling: Apply CSS styles to your components using inline styles, CSS modules, or external libraries like styled-components. Keep your styles modular and maintainable to facilitate future changes.
Testing: Write unit tests for your components using testing frameworks like Jest and Enzyme. Test-driven development (TDD) can help ensure the reliability and robustness of your codebase.
Deployment: Once your application is ready for production, build optimized production bundles using tools like webpack. Deploy your application to a hosting platform such as Netlify, Vercel, or AWS Amplify to make it accessible to users worldwide.

Scope of ReactJS

The versatility and popularity of ReactJS have led to its widespread adoption across various domains, including:

Single Page Applications (SPAs): React excels at building interactive SPAs with dynamic user interfaces, enabling seamless navigation and content updates without page reloads.
Progressive Web Apps (PWAs): React's performance optimizations and offline capabilities make it an ideal choice for developing PWAs that deliver app-like experiences to users across devices and platforms.
Mobile App Development: With frameworks like React Native, developers can leverage their existing React skills to build cross-platform mobile applications for iOS and Android, saving time and effort.
Enterprise Applications: React's scalability and component-based architecture make it well-suited for developing large-scale enterprise applications with complex data management and business logic.

In conclusion, ReactJS offers a powerful yet intuitive approach to web development, empowering developers to create interactive and engaging user experiences with ease. Whether you're a seasoned developer or a newcomer to the world of programming, ReactJS holds immense potential for shaping the future of web development. So why wait? Dive in and start building your next great project with React today!

A Beginner's Guide to Implementing WebSockets in React

SHaon — Thu, 29 Feb 2024 15:52:46 +0000

Are you ready to take your React applications to the next level of real-time interactivity? Say hello to WebSockets! In this beginner-friendly guide, we'll walk through the process of integrating WebSockets into your React projects. By the end, you'll have a solid understanding of how to establish a WebSocket connection and leverage its power for real-time communication between the client and server.

Understanding WebSockets

Before diving into implementation, let's grasp the concept of WebSockets. Unlike traditional HTTP requests, which follow a request-response model, WebSockets provide a persistent, full-duplex communication channel over a single TCP connection. This means both the client and server can send data to each other at any time, enabling real-time updates without the overhead of HTTP requests.

Setting Up Your React Project

First things first, make sure you have Node.js and npm installed on your machine. If not, head over to nodejs.org and follow the installation instructions.

Now, let's create a new React project using Create React App. Open your terminal and run the following commands:

npx create-react-app websocket-demo cd websocket-demo

Once your project is set up, navigate into the project directory and install a WebSocket library. For this tutorial, we'll use websocket:

npm install websocket

Establishing a WebSocket Connection

Now that our project is ready, let's establish a WebSocket connection. Create a new file named WebSocketComponent.js in the src directory of your project. Here's a basic implementation:

// App.js

import React from 'react';
import WebSocketComponent from './WebSocketComponent';

function App() {
  return (
    <div className="App">
      <WebSocketComponent />
    </div>
  );
}

export default App;

// WebSocketComponent.js

import React, { useEffect, useState } from 'react';

const WebSocketComponent = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    // Establishing a WebSocket connection
    const socket = new WebSocket('ws://localhost:3000');

    // Event listener for connection open
    socket.onopen = () => {
      console.log('WebSocket connection established.');
    };

    // Event listener for incoming messages
    socket.onmessage = (event) => {
      setMessage(event.data);
    };

    // Cleanup function to close the socket on component unmount
    return () => {
      socket.close();
    };
  }, []);

  return (
    <div>
      <h1>WebSocket Demo</h1>
      <p>Received message: {message}</p>
    </div>
  );
};

export default WebSocketComponent;

Interacting with the WebSocket

In the useEffect hook, we create a new WebSocket instance and define event handlers for onopen and onmessage events. When the connection is established, we log a message to the console. When a message is received from the server, we log its content.

This code assumes you have a WebSocket server running on ws://localhost:3000, which sends messages to the client. Replace 'ws://localhost:3000' with your actual WebSocket server URL.

Learn CSS Basics

SHaon — Wed, 05 Oct 2022 16:44:53 +0000

When styling a web page, there are many types of selectors available that allow developers to be as broad or as specific as they need to be when selecting HTML elements to apply CSS rules to.

Here you will learn about some of the common CSS selectors that you will use as a developer.

Element Selectors
The element selector allows developers to select HTML elements based on their element type.

For example, if you use p as the selector, the rule will apply to all p elements on the webpage.

HTML

Once upon a time...

In a hidden land...

CSS

1
p {
2
color: blue;
3
}•
ID Selectors
The ID selector uses the id attribute of an HTML element. Since the id is unique within a webpage, it allows the developer to select a specific element for styling. ID selectors are prefixed with a # character.

HTML

1
•New!
CSS

latest {

2
background-color: purple;
3
}••
Class Selectors
Elements can also be selected based on the class attribute applied to them. The CSS rule has been applied to all elements with the specified class name. The class selector is prefixed with a . character.

In the following example, the CSS rule applies to both elements as they have the navigation CSS class applied to them.

HTML

1
•Go Back
2
•

Go Forward

CSS

1
.navigation {
2
margin: 2px;
3
}••
Element with Class Selector
A more specific method for selecting HTML elements is by first selecting the HTML element, then selecting the CSS class or ID.

The example below selects all p elements that have the CSS class introduction applied to them.

HTML

CSS 1 p.introduction { 2 margin: 2px; 3 }•• Descendant Selectors Descendant selectors are useful if you need to select HTML elements that are contained within another selector. Let's explore an example. You have the following HTML structure and CSS rule. HTML 1

Latest News

Today's Weather

The weather will be sunny

Subscribe for more news

8

9 10

blog h1• {

2
color: blue;
3
}
The CSS rule will select all h1 elements that are contained within the element with the ID blog. The CSS rule will not apply to the h1 element containing the text Archives.

The structure of a descendant selector is a CSS selector, followed by a single space character, followed by another CSS selector.

Multiple descendants can also be selected. For example, to select all h1 elements that are descendants of div elements which are descendants of the blog element, the selector is specified as follows.

CSS

blog div h1• {

2
color: blue;
3
}
Child Selectors
Child selectors are more specific than descendant selectors. They only select elements that are immediate descendants (children) of a selector (the parent).

For example, you have the following HTML structure:

HTML

Latest News

Today's Weather

The weather will be sunny

Subscribe for more news

If you wanted to style the h1 element containing the text Latest News, you can use the following child selector:

CSS

blog > h1• {

2
color: blue;
3
}
This will select the element with the ID blog (the parent), then it will select all h1 elements that are contained directly in that element (the children). The structure of the child selector is a CSS selector followed by the child combinator symbol > followed by another CSS selector.

Note that this will not go beyond a single depth level. Therefore, the CSS rule will not be applied to the h1 element containing the text Today's Weather.

:hover Pseudo-Class
A special keyword called a pseudo-class allows developers to select elements based on their state. Don't worry too much about what that means right now. For now, let's look at how the hover pseudo-class allows you to style an element when the mouse cursor hovers over the element.

The simplest example of this is changing the color of a hyperlink when it is hovered over. To do this, you add the :hover pseudo-class to the end of the selector. The following example will change the color of the hyperlink to orange when it is hovered over.

CSS

1
:hover {
2
color: orange;
3
}
This pseudo-class is very useful for creating visual effects based on user interaction.

Other Selectors
There are many other CSS selectors available to style your webpage.

New Usefull JavaScript Tips For Everyone

SHaon — Tue, 04 Oct 2022 04:52:35 +0000

Old Ways

 const getPrice = (item) => {
  if(item==200){return 200} 
   else if (item==500){return 500}
   else if (item===400) {return 400}
   else {return 100}
}

console.log(getPrice(foodName));

New Ways

const prices = {
 food1 : 100,
 food2 : 200,
 food3 : 400,
 food4 : 500
}

const getPrice = (item) => {
 return prices[item]
}

console.log(getPrice(foodName))

Hope you like my new tricks :D

follow my github account

Simple HTML tags

SHaon — Tue, 27 Sep 2022 06:32:44 +0000

There are many tags available in HTML. Here you will learn about common tags that you'll use as a developer.

Headings
Headings allow you to display titles and subtitles on your webpage.

<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
</body>

Paragraphs
Paragraphs contain text content.

12345

This paragraph contains a lot of lines but they are ignored.

The following displays in the web browser:

Paragraph style displayed in browser
Note that putting content on a new line is ignored by the web browser.

Line Breaks
As you've learned, line breaks in the paragraph tag line are ignored by HTML. Instead, they must be specified using the
tag. The
tag does not need a closing tag.

12345

This paragraph
contains a lot of lines
and they are displayed.

The following displays in the web browser:

Line breaks displayed in browser
Strong
Strong tags can be used to indicate that a range of text has importance.

123

No matter how much the dog barks: don't feed him chocolate.

The following displays in the web browser:

Text with strong tag displayed in browser
Bold
Bold tags can be used to draw the reader's attention to a range of text.

123

The primary colors are red, yellow and blue.

The following displays in the web browser:

Bold text displayed in browser
The following displays in the web browser:

Text with strong tag displayed in browser
Bold tags should be used to draw attention but not to indicate that something is more important. Consider the following example:

1
The three core technologies of the Internet are HTML, CSS and Javascript.
The following displays in the web browser:

Bold text displayed in browser
Emphasis
Emphasis tags can be used to add emphasis to text.

123

Wake up now!

The following displays in the web browser:

Text with emphasis tag displayed in browser
Italics
Italics tags can be used to offset a range of text.

123

The term HTML stands for HyperText Markup Language.

The following displays in the web browser:

Italic text displayed in browser
Emphasis vs. Italics
By default both tags will have the same visual effect in the web browser. The only difference is the meaning.

Emphasis tags stress the text contained in them. Let's explore the following example:

1
I really want ice cream.
The following displays in the web browser:

Text with emphasis tag displayed in browser.
Italics represent off-set text and should be used for technical terms, titles, a thought or a phrase from another language, for example:

1
My favourite book is Dracula.
The following displays in the web browser:

Italic text displayed in browser
Screen readers will not announce any difference if an italics tag is used.

Lists
You can add lists to your web pages. There are two types of lists in HTML.

Lists can be unordered using the

tag, for example:
123456
- Tea
- Sugar
- Milk
This displays in the web browser as:

Bullet style displayed in the browser img10
Lists can also be ordered using the
1. tag.
  12345
  1. Rocky
  2. Rocky II
  3. Rocky III
  This displays as the following in the web browser.
  
  Numbered list style displayed in browser img11
  Div tags
  A
  tag defines a content division in a HTML document. It acts as a generic container and has no effect on the content unless it is styled by CSS.
  The following example shows a
  element that contains a paragraph element:
  123
  
  This is a paragraph inside a div
  
  This displays as the following in the web browser.
  
  Div displayed in browser img12
  It can be nested inside other elements, for example:
  
  12345
```
  <p>This is a paragraph inside a div that’s inside another div</p>
```
  This displays in the web browser as:
  
  Div inside a dive displayed in browser
  As mentioned, the div has no impact on content unless it is styled by CSS. Let’s add a small CSS rule that styles all divs on the page.
  
  Don't worry about the meaning of the CSS just yet, you'll explore CSS further in a later lesson. In summary, you're applying a rule that adds a border and some visual spacing to the element.
  
  1234567891011
  
  div {
  border: 1px solid black;
  padding: 2px;
  }
```
  <p>This is a paragraph inside stylized divs</p>
```
  This displays in the web browser as:
  
  Paragraph in stylized div displayed in browser img13
  Div elements are an important part of building webpages. More advanced usage of div elements will be explored in another course.
  
  Comments
  If you want to leave a comment in the code for other developers, it can be added as:
  
  The comment will not be displayed in the web browser.

Other Internet Protocols

SHaon — Tue, 27 Sep 2022 05:16:38 +0000

Hypertext Transfer Protocols (HTTP) are used on top of Transmission Control Protocol (TCP) to transfer webpages and other content from websites.
This reading explores other protocols commonly used on the Internet.

Dynamic Host Configuration Protocol (DHCP)

You've learned that computers need IP addresses to communicate with each other. When your computer connects to a network, the Dynamic Host Configuration Protocol or DCHP as it is commonly known, is used to assign your computer an IP address.
Your computer communicates over User Datagram Protocol (UDP) using the protocol with a type of server called a DHCP server. The server keeps track of computers on the network and their IP addresses. It will assign your computer an IP address and respond over the protocol to let it know which IP address to use. Once your computer has an IP address, it can communicate with other computers on the network.

Domain Name System Protocol (DNS)

Your computer needs a way to know with which IP address to communicate when you visit a website in your web browser, for example, meta.com. The Domain Name System Protocol, commonly known as DNS, provides this function. Your computer then checks with the DNS server associated with the domain name and then returns the correct IP address.

Internet Message Access Protocol (IMAP)

Do you check your emails on your mobile or tablet device? Or maybe you use an email application on your computer?
Your device needs a way to download emails and manage your mailbox on the server storing your emails. This is the purpose of the Internet Message Access Protocol or IMAP.

Simple Mail Transfer Protocol (SMTP)

Now that your emails are on your device, you need a way to send emails. The Simple Mail Transfer Protocol, or SMTP, is used. It allows email clients to submit emails for sending via an SMTP server. You can also use it to receive emails from an email client, but IMAP is more commonly used.

Post Office Protocol (POP)

The Post Office Protocol (POP) is an older protocol used to download emails to an email client. The main difference in using POP instead of IMAP is that POP will delete the emails on the server once they have been downloaded to your local device. Although it is no longer commonly used in email clients, developers often use it to implement email automation as it is a more straightforward protocol than IMAP.

File Transfer Protocol (FTP)

When running your websites and web applications on the Internet, you'll need a way to transfer the files from your local computer to the server they'll run on. The standard protocol used for this is the File Transfer Protocol or FTP. FTP allows you to list, send, receive and delete files on a server. Your server must run an FTP Server and you will need an FTP Client on your local machine. You'll learn more about these in a later course.

Secure Shell Protocol (SSH)

When you start working with servers, you'll also need a way to log in and interact with the computer remotely. The most common method of doing this is using the Secure Shell Protocol, commonly referred to as SSH. Using an SSH client allows you to connect to an SSH server running on a server to perform commands on the remote computer.
All data sent over SSH is encrypted. This means that third parties cannot understand the data transmitted. Only the sending and receiving computers can understand the data.

SSH File Transfer Protocol (SFTP)

The data is transmitted insecurely when using the File Transfer Protocol. This means that third parties may understand the data that you are sending. This is not right if you transmit company files such as software and databases. To solve this, the SSH File Transfer Protocol, alternatively called the Secure File Transfer Protocol, can be used to transfer files over the SSH protocol. This ensures that the data is transmitted securely. Most FTP clients also support the SFTP protocol.

HTTP examples

SHaon — Tue, 27 Sep 2022 05:08:28 +0000

This reading explores the contents of HTTP requests and responses in more depth.

Request Line
Every HTTP request begins with the request line.

This consists of the HTTP method, the requested resource and the HTTP protocol version.

GET /home.html HTTP/1.1

In this example, GET is the HTTP method, /home.html is the resource requested and HTTP 1.1 is the protocol used.

HTTP Methods
HTTP methods indicate the action that the client wishes to perform on the web server resource.

Common HTTP methods are:

HTTP Method

Description

GET

The client requests a resource on the web server.
POST
The client submits data to a resource on the web server.

PUT

The client replaces a resource on the web server.

DELETE

The client deletes a resource on the web server.

HTTP Request Headers

_After the request line, the HTTP headers are followed by a line break.

There are various possibilities when including an HTTP header in the HTTP request. A header is a case-insensitive name followed by a: and then followed by a value.
_

Common headers are:

Host: example.com User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 Accept: */* Accept-Language: en Content-type: text/json

The Host header specifies the host of the server and indicates where the resource is requested from.
The User-Agent header informs the web server of the application that is making the request. It often includes the operating system (Windows, Mac, Linux), version and application vendor.
The Accept header informs the web server what type of content the client will accept as the response.
The Accept-Language header indicates the language and optionally the locale that the client prefers.
The Content-type header indicates the type of content being transmitted in the request body.

HTTP Responses
When the web server is finished processing the HTTP request, it will send back an HTTP response.

The first line of the response is the status line. This line shows the client if the request was successful or if an error occurred.

HTTP/1.1 200 OK

The line begins with the HTTP protocol version, followed by the status code and a reason phrase. The reason phrase is a textual representation of the status code.

HTTP Status Codes
The first digit of an HTTP status code indicates the category of the response: Information, Successful, Redirection, Client Error or Server Error.

The common status codes you'll encounter for each category are:

1XX Informational

Status Code

Reason Phrase

Description

100

Continue

The server received the request headers and should continue to send the request body.

101

Switching Protocols

The client has requested the server to switch protocols and the server has agreed to do so.

2XX Successful

Status Code

Reason Phrase

Description

200

Standard response returned by the server to indicate it successfully processed the request.

201

Created

The server successfully processed the request and a resource was created.

202

Accepted

The server accepted the request for processing but the processing has not yet been completed.

204

No Content

The server successfully processed the request but is not returning any content.

3XX Redirection

Status Code

Reason Phrase

Description

301

Moved Permanently

This request and all future requests should be sent to the returned location.

302

Found

This request should be sent to the returned location.

4XX Client Error

Status Code

Reason Phrase

Description

400

Bad Request

The server cannot process the request due to a client error, e.g., invalid request or transmitted data is too large.

401

Unauthorized

The client making the request is unauthorized and should authenticate.

403

Forbidden

The request was valid but the server is refusing to process it. This is usually returned due to the client having insufficient permissions for the website, e.g., requesting an administrator action but the user is not an administrator.

404

Not Found

The server did not find the requested resource.

405

Method Not Allowed

The web server does not support the HTTP method used.

5XX Server Error

Status Code

Reason Phrase

Description

500

Internal Server Error

A generic error status code given when an unexpected error or condition occurred while processing the request.

502

Bad Gateway

The web server received an invalid response from the Application Server.

503

Service Unavailable

The web server cannot process the request.

HTTP Response Headers
Following the status line, there are optional HTTP response headers followed by a line break.

Similar to the request headers, there are many possible HTTP headers that can be included in the HTTP response.

Common response headers are:

1234
Date: Fri, 11 Feb 2022 15:00:00 GMT+2
Server: Apache/2.2.14 (Linux)
Content-Length: 84
Content-Type: text/html
The Date header specifies the date and time the HTTP response was generated.

The Server header describes the web server software used to generate the response.

The Content-Length header describes the length of the response.

The Content-Type header describes the media type of the resource returned (e.g. HTML document, image, video).

HTTP Response Body
Following the HTTP response headers is the HTTP response body. This is the main content of the HTTP response.

This can contain images, video, HTML documents and other media types.

Forem: SHaon

Full Backend Project Connect MongoDB Atlas in NodeJS Part - 2

Full Backend Project Setup And Structure in NodeJS Part - 1

Understanding JSX in React

Introduction to JSX

Purpose and Usage of JSX

Key Features of JSX

Benefits of Using JSX

Examples of JSX Syntax and Usage

Example 1: Basic JSX Element

Example 2: JSX Expression

Example 3: JSX Component

Conclusion

A Beginner's Guide to ReactJS: Unveiling the Power of Web Development

What is ReactJS?

Advantages of ReactJS

Workflow of ReactJS

Scope of ReactJS

A Beginner's Guide to Implementing WebSockets in React

Understanding WebSockets

Setting Up Your React Project

Establishing a WebSocket Connection

Interacting with the WebSocket

Learn CSS Basics

latest {

Latest News

Today's Weather

Archives

blog h1• {

blog div h1• {

Latest News

Today's Weather

blog > h1• {

New Usefull JavaScript Tips For Everyone

*Old Ways *

New Ways

Simple HTML tags

There are many tags available in HTML. Here you will learn about common tags that you'll use as a developer.

Other Internet Protocols

Dynamic Host Configuration Protocol (DHCP)

Domain Name System Protocol (DNS)

Internet Message Access Protocol (IMAP)

Simple Mail Transfer Protocol (SMTP)

Post Office Protocol (POP)

File Transfer Protocol (FTP)

Secure Shell Protocol (SSH)

SSH File Transfer Protocol (SFTP)

HTTP examples

Common HTTP methods are:

GET

PUT

DELETE

HTTP Request Headers

Common headers are:

Old Ways