In our journey into the Express.js universe today, we are going to unravel requests and responses, which are critical for efficient web apps. Our aim is to make you comfortable with creating routes, handling requests, and sending responses in Express.js.

In Express.js, a client's request is accompanied by a request object (req). The req object holds data such as the URL, HTTP method, headers, and any data sent by the client.

For instance, to extract the URL and the User-Agent header from the request in a GET method, we use req.url and req.headers respectively:

JavaScript
Copy to clipboard
1const express = require('express');
2const app = express();
3
4app.get('/api/endpoint', (req, res) => {
5    console.log(req.url); // prints: '/api/endpoint'
6    console.log(req.headers['user-agent']); // prints: axios/0.19.2
7    // Note: this is just potential User-Agent output, the actual output depends on your request
8    res.send('Hello World!');
9});
10
11app.listen(5000);

This logs the URL of a GET request as well as the request's User-Agent header, and then sends a "Hello World!" response to the client.

Along with req, we also receive a response object, res, which enables us to send responses back to the client. The res object includes methods like res.send(), res.json(), and res.sendFile(), for sending strings, JSON, and files, respectively.

For example, to respond with a JSON message, you would do the following:

JavaScript
Copy to clipboard
1app.get('/api/endpoint', (req, res) => {
2    // Sends a JSON response to the client
3    res.json({message: 'Hello from the API!'}); 
4});

We will explain JSON in more detail later in this lesson.

In Express.js, we define routes to respond to various URLs. These routes specify which HTTP methods they should respond to, such as GET, POST, and DELETE.

For instance, a route responding to a GET request at '/api/about' looks like this:

JavaScript
Copy to clipboard
1app.get('/api/about', (req, res) => {
2    res.send('About page');
3});

This sends 'About page' when a GET request is directed to the '/api/about' endpoint.

JSON is a lightweight data interchange format used for data exchanges between servers and web apps. Express.js allows us to send JSON responses with the res.json() method:

JavaScript
Copy to clipboard
1app.get('/api/items', (req, res) => {
2    res.json({ item1: 'Shirt', item2: 'Pants' });
3});

Using the code above, our Express.js server delivers a JSON response containing the items 'Shirt' and 'Pants'.

We are using a React app for our client-side interactions, which employs axios to make HTTP requests to the Express.js server. If the API response is a raw string, the response.data will store this raw string itself. However, if the Express.js API response is a JSON object, the response.data will be a JSON object. Take a look at the example:

JavaScript
Copy to clipboard
1import React, { useState, useEffect } from 'react';
2import axios from 'axios';
3
4function ItemList() {
5    const [items, setItems] = useState([]);
6
7    useEffect(() => {
8        axios.get('/api/items').then(response => {
9            setItems(response.data); // update state with new items
10        });
11    }, []);
12
13    return (
14        <ul>
15            {items.map((item, index) => 
16                <li key={index}>{item}</li>
17            )}
18        </ul>
19    );
20}
21
22export default ItemList;

This axios call fetches data from an endpoint upon loading and subsequently sets the 'items' state.

We've done a deep dive today, exploring requests and responses in Express.js and learning how to set up routes, handle requests, and send responses. Are you ready for some hands-on practice exercises? Practicing is the most surefire way to reinforce what you've learned. Great job today!