Hello, future full-stack developer! Let's learn server-side programming. Today, we're going to focus on routes and middlewares in Express.js. Our goal is to help you design efficient servers that can process complex web requests. We'll apply the lessons we learned to a full-stack application using React for our client. Let's get started!

Think of routes in Express.js as routes on a map, each of which directs an HTTP request. They're defined by a URL pattern and an HTTP method (GET, POST). Express.js uses these routes to process client requests.

Path parameters are variables in the routes, while query parameters add extra data to the URL. Let's look at how to log information about stars.

For example, endpoint /api/star/:id has a path parameter of id, we can query this endpoint with an URL like /api/star/123. In contrast, query parameters are added after the URL path by adding a question mark (?) and then adding the query parameters. For example: /api/stars?type=sun has a query parameter of type with the value sun.

// Defining some star data for each star
const starData = {
    123: { type: 'sun', name: 'Sun' },
    124: { type: 'planet', name: 'Earth' },
    125: { type: 'satellite', name: 'Moon' },
};

// Below endpoint can be accessed via `/api/star/<starId>`, e.g., `/api/star/123`
app.get('/api/star/:id', (req, res) => {
  const starId = req.params.id;  // retrieving a path parameter
  const data = starData[starId] || {}; 
  res.json(data); // respond with the information of the star with the specified ID
});

// Below endpoint can be accessed via `/api/star?type=<starType>`, e.g., `/api/star?type=sun`
app.get('/api/stars', function (req, res) {
  const starType = req.query.type || ''; // retrieving a query parameter
  const data = Object.values(starData).filter(star => star.type === starType)[0] || {}; // finding the star by its type
  res.json(data); // respond with the information of the stars with a particular type
});

Let’s fetch data for our React client using Axios. We'll retrieve a star's data.

axios.get(`/api/star/123`).then(response => {
  const starData = response.data; // retrieve the star data from the response
  /* Display starData on the page */
});

In this snippet, Axios sends a GET request to fetch data about a star with a specified ID from our server, then logs the response data.

axios.get(`/api/stars`, {
  params: {
    type: 'sun'
  }
}).then(response => {
  const starData = response.data; // retrieve the star data from the response
  /* Display starData on the page */
});

In this piece of code, we request and log details about Sun stars from our server.