DEV Community: Shoieb Alam

Beginner's Guide to Node.js with Express

Shoieb Alam — Thu, 23 Dec 2021 09:48:43 +0000

We'll look at the Express framework in this discussion. This framework is designed to operate as a basic and versatile Node.js web application framework, with a powerful set of capabilities for creating single and multipage web applications, as well as hybrid web applications.

Here you'll find out:

What is Express.js and how does it work?
Express installation and use
Introduction of routes?
Express.js Web server example

What is Express.js and how does it work?
Express.js is a Node.js web application server framework for constructing single-page, multi-page, and hybrid web applications.

For node.js, it has become the standard server framework. The MERN stack is made up of several components, one of which is Express.

The MERN is a free and open-source JavaScript software stack that includes the following components for creating dynamic web pages and online applications.

The Express.js framework makes it simple to create an application that can handle a variety of requests, including GET, PUT, POST, and DELETE.

Express installation and use
The Node Package Manager is used to install Express. This may be done by running the command line with the following line.

npm install express

The command above instructs the Node package management to fetch and install the appropriate express modules.

Let's make a simple "Hello World" application with our newly installed Express framework.

Our application will develop a simple server module that will listen on port 3000. Whenever a browser query is performed on this port number, the server application will respond with a 'Hello' World' message to the client.

Let understand the above code:
The need function is being used to include the "express module" in our first line of code.
We must first create an object of the express module before utilizing it.

We're going to make a callback function in this example. When someone visits http://localhost:3000, our web application's root, this method will be called. The string 'Hello World' will be sent to the web page via the callback method.

We send the string "Hello World" back to the client in the callback function. To transmit content back to the web page, use the 'res' argument. The 'request' module provides the 'res' argument, which allows you to transmit material back to the web page.

The listen to function is then used to make our server program listen for client requests on port 3000. You can use this field to specify any available port.

When you run your code in the browser, the following Output will appear if the command was successfully executed.

Output:

Based on the results,

If you go to the URL of localhost on port 3000, you'll notice that the string 'Hello World' is shown on the website.

Because we specified in our code that the server should listen on port 3000, we are able to see the output when visiting this URL.

Introduction of routes?
The manner an application replies to a client request to a certain endpoint is determined by routing.

For example, for various URLs, a client can make a GET, POST, PUT, or DELETE http request.

http://localhost:3000/products http://localhost:3000/users

In the preceding example,

If you make a GET request for the first URL, you should get a list of books as a response.
If the second URL is requested using GET, the result should ideally be a list of Students.
So, depending on the URL that is accessed, the webserver will run a different function, and the response will be provided to the client appropriately. The concept of routing is as follows.

Express.js Web server example
We know that how routing can help us determine which outputs to show. The majority of current online apps employ this type of routing. The other aspect of a web server is the use of Node js templates.

For setting up the server navigate to the root directory from the terminal and run the following command:

$npm init -y

The package.json file will be generated automatically by the program. Then, to install Express, use the command below, which will save it as a dependency inside the package.json.

$npm install express --save

Let understand the above code:

Lines 1 and 2 are required for us to use Express inside our server.js file.

Line 3 – This instructs the Express server to run on a specific port.

Line 6 – displays a message on the console stating that the server is operating normally.

Lines 9 to 11 – This will create a GET route that will be retrieved later from our client-side React App.

Conclusion:

The express framework is the most widely used framework for Node.js application development. The express framework is a server-side framework built on top of the node.js framework that aids in the rapid building of server-side applications.

Routes are used to direct users to different portions of the web application depending on their request. Depending on what has to be shown to the user, the response for each route can be different

The Express backend can do a lot of things, like make database requests, but in this post, we'll focus on how to quickly connect to the backend Express server from a client-side React App.

Lifecycle Story of React Components

Shoieb Alam — Wed, 22 Dec 2021 10:01:24 +0000

Components are used in React applications to break and isolate distinct aspects of the online user experience into separate pieces. These components work independently and return React elements in JSX using a render method. These elements specify how the user should be presented with that part.

Some of the earlier lifecycle methods have been judged to be inappropriate to use in recent React versions and will be deprecated in React 17. We shall not learn about the soon-to-be deprecated unsafe lifecycle methods here.

The React component lifetime is made up of these three milestones. Mounting, updating, and unmounting are the three steps that each component goes through. You can think of it as our natural life cycle, in which we are born, grow, and eventually die. React components are generated by mounting them on the DOM, then changing or growing them through updates, and lastly removing or unmounting them from the DOM.

The whole modern lifespan of React components is shown here, along with the necessary lifecycle functions. Specific lifecycle methods are provided by React and can be used to conduct specific tasks in different phases. React component lifecycle methods are what they're named.

Phase 1: Mounting

The creation of the component is the subject of this phase. The component is added to the DOM at this point.
For this phase, the following lifecycle techniques are available:

*constructor(): *
We may need to use a constructor() method to initialize our component before we begin the mounting step. When we need to initialize state and bind methods to our component, we use this. This is the only location where this.state is assigned explicitly.

static getDerivedStateFromProps()
This is one of the more recent lifecycle methods to be introduced by the React team.
This will be a safer replacement to the previous componentWillReceiveProps() lifecycle function.
It is invoked right before the render() method is called.

This is a static function that does not have access to the "this" variable. getDerivedStateFromProps() generates a state-updating object in response to prop changes. It may return null if there is no change in status.

This approach is likewise only available in rare circumstances where the state of a component is affected by changes in its props.

render():
The render() method seems to be the most commonly used method in the lifecycle. It can be found in all React classes. This is due to the fact that with React, the only needed function within a class component is render().

It manages the rendering of your component to the user interface, as the name implies. It happens while you're installing and upgrading your component.

An example of a simple render() in React is shown below.

The render() function, as you can see in the sample above, returns JSX that is shown in the UI. If there is nothing to render for that component, render() might also return null.

componentDidMount():
componentDidMount() is the last function in this phase. After the render function has completed, this method will be called immediately. This is where we interface directly with the browser if we need to. We can perform an API request and use the answer to update the state of the components. We can populate the content with information obtained from another endpoint. SetState() should be used in this case since it will re-call the render method and manage asynchronous activities like fetch requests.

Phase 2: Updating

This second phase illustrates when a component's props or state change and it has to update. These modifications can be made within the component or via the backend. The render function will be triggered again as a result of these modifications.

The first method called in this phase is getDeprivedStateFromProps(). This is the same procedure that was employed during the mounting process.

shouldComponentUpdate():
When you don't want React to render your state or prop updates, this lifecycle might be useful.

By default, the component re-renders whenever setState() is used. The shouldComponentUpdate() function informs React whether or not a component is impacted by state and prop changes.

Keep in mind that this lifecycle function should only be utilized when specific speed enhancements are required. In the shouldComponentUpdate() lifecycle, you can't change the state of a component.

getSnapshotBeforeUpdate()
Another interesting lifecycle function released in React lately is getSnapshotBeforeUpdate().

It's called just when the DOM is about to be changed. componentDidUpdate() receives the value returned from getSnapshotBeforeUpdate().

componentDidUpdate():
This is the last method called in this phase. It accepts the same props and state variables as the previous method, but it also accepts the return value getSnapshotBeforeUpdate() as a third argument (if present).

It's usually utilized to perform extra fetch queries if the current and previous props and state values are compared. As a result, setState may be used within a conditional expression.

Phase 3: Unmounting

The component is finally unmounted from the DOM in the unmounting process. The lifespan of a component comes to an end at this point. We only have one lifecycle method accessible to us at this time.

componentWillUnmount():
This lifecycle method is invoked shortly before the component is unmounted and deleted, as the name implies. If you need to undertake any cleanup work, this is the place to do it.

We can't execute setState() during this lifecycle function since this component will never be re-rendered.