Make a page using ExpressJS framework

Hello viewers, whats up!! Here i am back again with the new series of  Nodejs. Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It is built on the V8 JavaScript runtime engine, which is the same engine that powers the Google Chrome browser. 

Node.js is commonly used for building APIs (Application Programming Interfaces). You can create RESTful APIs or GraphQL APIs using Node.js to handle HTTP requests and serve data to client applications.

Key features of Node.js include:

# Asynchronous - Node.js is designed to be asynchronous, meaning it can handle a large number of concurrent connections without the need for multithreading.

# Single-threaded, Non-blocking I/O - Node.js uses a single-threaded event loop to manage asynchronous operations.

# npm (Node Package Manager): npm is the default package manager for Node.js, allowing developers to easily manage and install libraries and dependencies for their projects.

# Server-Side Development: Node.js is commonly used for server-side development, where it excels at handling real-time, data-intensive applications, such as chat applications, online gaming, and streaming services.

 

But Why we are using Expressjs Here, just because of incase if you want to make API using nodejs directly then its a very complex method to create API and integrate directly thats why we are using Expressjs framework and in this framework with the help, you can create RESTful API easily.

NOTE - After this blog we will create RESTFUL API using ExpressJS.

Install ExpressJS

npm i or npm install express - with this help you can install ExpressJS framework.

Make Page using ExpressJS

const express = require('express')

This line imports the Express framework into your script. express is a web application framework for Node.js that simplifies
the process of creating web servers and handling HTTP requests and responses.



const app = express()


This line creates an instance of the Express application. This app object is the core of your web server and is used to define routes,
middleware, and other settings.


app.get('', (req, resp) => {
    resp.send("Welcome This is our Home Page")
})


app.get('/about',  (req, resp) => {
    resp.send("Welcome This is our About Page")
})

app.get('/contact', (req, resp) => {
    resp.send("Welcome This is our contact page")
})

This code defines a route for handling HTTP GET requests to the path /about. When a request is made to this endpoint, the server responds with a JSON object containing a message - Welcome This is our About Page or Home page or contact page.


app.listen(5000)

The app.listen() method starts the server and makes it listen for incoming requests on the specified port (3000 in this case).

Whole Code

const express = require('express')
const app = express()


app.get('', (req, resp) => {
    resp.send("Welcome This is our Home Page")
})

app.get('/about',  (req, resp) => {
    resp.send("Welcome This is our About Page")
})

app.get('/contact', (req, resp) => {
    resp.send("Welcome This is our contact page")
})


app.listen(5000)

 Save as index.js or whatever you want called as then run in terminal node index.js with the port number 5000.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Make a RESTFul API in nodejs using ExpressJS

Hello viewers, whats up!! Here i am back again with the new series of  Nodejs. Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It is built on the V8 JavaScript runtime engine, which is the same engine that powers the Google Chrome browser. 

Node.js is commonly used for building APIs (Application Programming Interfaces). You can create RESTful APIs or GraphQL APIs using Node.js to handle HTTP requests and serve data to client applications.

Key features of Node.js include:

# Asynchronous - Node.js is designed to be asynchronous, meaning it can handle a large number of concurrent connections without the need for multithreading.

# Single-threaded, Non-blocking I/O - Node.js uses a single-threaded event loop to manage asynchronous operations.

# npm (Node Package Manager): npm is the default package manager for Node.js, allowing developers to easily manage and install libraries and dependencies for their projects.

# Server-Side Development: Node.js is commonly used for server-side development, where it excels at handling real-time, data-intensive applications, such as chat applications, online gaming, and streaming services.

 

But Why we are using Expressjs Here, just because of incase if you want to make API using nodejs directly then its a very complex method to create API and integrate directly thats why we are using Expressjs framework and in this framework with the help, you can create RESTful API easily.

Install ExpressJS

npm i or npm install express - with this help you can install ExpressJS framework.

RESTFUL API

Importing the express module:

const express = require('express');

This line imports the Express framework into your script. express is a web application framework for Node.js that simplifies the process of creating web servers and handling HTTP requests and responses.

Creating an Express application instance:



const app = express();

This line creates an instance of the Express application. This app object is the core of your web server and is used to define routes, middleware, and other settings.


Setting the port number:

const port = 5000;

Here, the variable port is set to 3000. This is the port on which your server will listen for incoming requests. You can change this port number to any other valid port number.

Defining a simple route:


app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello, API!' });
});

This code defines a route for handling HTTP GET requests to the path /api/hello. When a request is made to this endpoint, the server responds with a JSON object containing a message property: {"message": "Hello, API!"}. The res.json() method sends a JSON response to the client.

Starting the server:


app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});


The app.listen() method starts the server and makes it listen for incoming requests on the specified port (3000 in this case).
The callback function is executed once the server has started, and it logs a message to the console indicating that the server is running.

To run this code, you would save it in a file (e.g., index.js or restful-api.js ) and execute it using the node command in the terminal:

After running the script, you can open a web browser or use a tool like Postman to make a GET request to http://localhost:5000/api/hello and see the JSON response.

Whole Code

const express = require('express')
const app = express();
const port = 5000;

app.get('/api/hello', (req, res) => {
  res.json({ message: 'Hello, API!, I am atul from kumaratuljaiswal.in' });
});



app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Asynchronous in Javascript

Hello viewers, whats up!! Here i am back again with the new post of asynchronous in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Asynchronous 

In JavaScript, asynchronous programming is a way to handle operations that might take some time to complete, such as reading from a file, making a network request, or waiting for a user input. Asynchronous programming helps prevent blocking the execution of code, allowing other tasks to continue while the asynchronous operation is being performed.

Note - Asynchronous in Javascript = CLICK HERE

How is it works?

The asynchronous working process in JavaScript involves handling tasks that might take some time to complete without blocking the execution of the entire program. This is crucial for web development, where operations like fetching data from an API, reading files, or responding to user input may introduce delays.

Let's code

let a = 20;
let b = 0;

let waitingData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(30)
    }, 2000)
})

waitingData.then((data) => {
    b=data;
    console.log(a+b)
})

Explaination

1) Variable Declaration

let a = 20;
let b = 0;


Two variables, a and b, are declared and initialized with values 20 and 0, respectively.



2) Promise Creation:



let waitingData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(30)
    }, 2000)
})


A new Promise named waitingData is created.

The promise executor function is provided, which has two parameters: resolve and reject.

Inside the executor function, a setTimeout is used to simulate an asynchronous operation. After 2000 milliseconds (2 seconds), the promise is resolved with the value 30.



3) Promise Handling:

waitingData.then((data) => {
    b = data;
    console.log(a + b);
})


The then method is called on the waitingData promise, which registers a callback function to be executed when the promise is resolved.

The callback function takes a parameter data, which is the resolved value of the promise (in this case, 30).

Inside the callback, the variable b is assigned the value of data (which is 30).

The sum of a and b (20 + 30) is then logged to the console, resulting in the output 50.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Asynchronous in Javascript

Hello viewers, whats up!! Here i am back again with the new post of asynchronous in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Here we have a problem about Asynchronous execution in javascript. Question is  suppose that we have 3 execution in one program

#    first one takes 2 seconds
#    second one takes 5 seconds and
#    third one takes 1 seconds
    
 

but execution is coded in line by line first, second, third. So, in case of Asynchronous and yeah javascript is an Asynchronous language but which one is printed first. First we need to understand what is Asynchronous and how is it works?
    
    

Asynchronous 

In JavaScript, asynchronous programming is a way to handle operations that might take some time to complete, such as reading from a file, making a network request, or waiting for a user input. Asynchronous programming helps prevent blocking the execution of code, allowing other tasks to continue while the asynchronous operation is being performed.

How is it works?

The asynchronous working process in JavaScript involves handling tasks that might take some time to complete without blocking the execution of the entire program. This is crucial for web development, where operations like fetching data from an API, reading files, or responding to user input may introduce delays.

Let's code

setTimeout(() => {
    console.log("technically, I am the first person")
    }, 2000);   // 2 seconds


setTimeout(() => {
console.log("technically, I am the second person") 
}, 5000);    // 5 seconds


setTimeout(() => {
    console.log("technically, I am the third person") 
    }, 1000);   // 1 second 

    

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

let vs var using setTimeout in javascript

Hello viewers, whats up!! Here i am back again with the new post of let vs var using setTimeout in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Here we have a problem about setTimeout in javascript. Question is that there are two types of using var and let in setTimeout,  So, in javascript might be same but little bit difference because of if we use var with setTimeout and forloop then same number print many times (We will give you as many numbers as you want in the loop).

 when we use let in setTimeout and forloop then output is simple looping number printed.

Let's Code

for (var i=0; i<3; i++)
{
    setTimeout(() => {
        console.log("When we use of var with setTimeout", i);  
    })
}

//www.kumaratuljaiswal.in

for (let i=0; i<3; i++)
{
    setTimeout(() => {
        console.log("when we use of let with setTimeout", i);
    })
}

Question from setTimeout in Javscript - CLICK HERE

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

Hello viewers, whats up!! Here i am back again with the new post of question about setTimeout in javascript. Javascript is a high level programming language used for known as web development. With this you can create dynamic and interactive content on websites.

Syntax is similar to that of other programming languages like java and C. It is client side scripting language and when we talk about its Data types , it is support various data types, including numbers, strings booleans objects, arrays and functions.

Here we have a problem about setTimeout in javascript. Question is that there so 6 line of code in javascript. So simply use arrow function and for output we use console.log and after that we have to used setTimeout function and tell that what is the output and which output print first. Look like this -

Code 

(function() {
      console.log("a");
      setTimeout(() => console.log("b"), 1000);
      console.log("c");
      setTimeout(() => console.log("d"), 500);
})();

1) console.log("a"); - Outputs "a" to the console.


2) setTimeout(() => console.log("b"), 1000); - Schedules the execution of the function () => console.log("b") after a delay of 1000 milliseconds (1 second).
   
 
3) console.log("c"); - Outputs "c" to the console.
    

4) setTimeout(() => console.log("d"), 500); - Schedules the execution of the function () => console.log("d") after a delay of 500 milliseconds (0.5 seconds).


Now, let's consider the timing:


#:/    "a" is logged immediately.
#:/    "b" is scheduled to be logged after 1 second.
#:/    "c" is logged immediately.
#:/    "d" is scheduled to be logged after 0.5 seconds.


However, JavaScript is single-threaded, and the event loop is used to manage the execution of asynchronous code. The scheduled functions (like "b" and "d") are placed in the event queue and executed when the call stack is empty.



So, the output order will be:

    "a"
    "c"
    "d"
    "b"

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer

React Share  Social Media Button in Reactjs

Hello viewers, i am back again for you and now we will start from reactjs. So, we are ready for implemenation of react-share-social-media-button in reactjs and set result. Actually we are making some project like E-commerce where we can implement react social media icon as a shareable.

React

Topic we will cover -

# Install npm install react-rating-star-with-type

# Implementation of rating start

# Output

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-from-cart-in-react-redux.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/configure-saga-middleware-in-react.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/remove-to-cart-with-id-react-redux-saga.html

Don't Forget to Check - https://www.kumaratuljaiswal.in/2023/11/add-routing-and-make-cart-page.html

Install Social Media button React

Here, we will install library of reactjs (npm install react-share) in cmd prompt, terminal whatever.

Now, we are ready to code of react social media shareable button using with this library. After installation of  react-share-social-media-button. We are building an E-Commerce website using Redux.

First we import this library.

import { FacebookIcon, FacebookShareButton, TwitterIcon, TwitterShareButton, WhatsappIcon, WhatsappShareButton } from 'react-share'

Now we are using social media name button JSX tag.

 <FacebookShareButton
            url={'https://facebook.com/share.php?u=http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <FacebookIcon size={32} round />
            </FacebookShareButton>
             
            <WhatsappShareButton
            url={'http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <WhatsappIcon size={32} round />
            </WhatsappShareButton>
             
              
            <TwitterShareButton
            url={'http://localhost:5173/exclusivecollection'}
            quote={'Printed Shirt'}
            hashtag="#mfo">
              <TwitterIcon size={32} round />
            </TwitterShareButton>

# The FacebookShareButton component is used for the Facebook share button.
 
# It takes props like url, quote, and hashtag, specifying the URL, quote, and hashtag to be shared on Facebook.
 
# The FacebookIcon component is nested inside, indicating the appearance of the button.

# As a localhost it is our localhost url but you can set domain name and your url where site is located.

# Install redux and saga packages - CLICK HERE

# Make reducer wrapper - CLICK HERE

# Action in reducer - CLICK HERE

# Reducer in redux - CLICK HERE

# Switch Stmt in redux - CLICK HERE

# Get data in component from redux - CLICK HERE 

# Remove from cart - CLICK HERE 

# Add Redux Toolkit in react redux saga - CLICK HERE  

# Configure MiddleWare saga - CLICK HERE   

# Call API with Saga and Set Result in react redux saga - CLICK HERE    

# Product list ui with API data in react redux saga - CLICK HERE    

# Remove to Cart with ID react redux saga - CLICK HERE     

# Add Routing and Make Cart Page - CLICK HERE   

# Show Added To Cart Product with Price Calculation  - CLICK HERE  

Disclaimer