Layout and Routing Setup

Welcome to your first lesson in building a modern React frontend! In this course, you will learn how to create a user-friendly web application that connects to a NestJS API. Before you can build advanced features, it is important to set up a strong foundation. Two key parts of this foundation are the application layout and client-side routing.

A shared layout gives your app a consistent look and feel. It usually includes a header, navigation bar, main content area, and footer. Client-side routing lets users move between different pages of your app without reloading the whole page. This makes your app feel fast and smooth, just like the best modern websites.

In this unit, we transform a barebones React app into a multi-page experience with a persistent layout and client-side routing. The shared layout keeps the header, navigation, main content area, and footer consistent on every page. React Router lets us switch between views instantly without full page reloads, which makes the app feel fast and cohesive. We will wire the router at the entry point, define nested routes, implement a reusable layout with NavLink-based navigation, and stub pages for Home, Catalog, My Shelf, and a UI Demo page.

Since this is the first lesson of the course, you are starting with a basic React app. The app is already set up with the necessary folders and files. You do not need to worry about installing libraries in the CodeSignal environment, but it is good to know that we are using React Router for navigation.

Here is a quick look at how the app is started in src/index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { router } from './routes/router';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
if (!container) throw new Error('Root container missing');
const root = ReactDOM.createRoot(container);
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

reportWebVitals();

This code sets up the React app and tells it to use the router we will define. The RouterProvider component from react-router-dom enables routing throughout the app.

• We import RouterProvider and pass the router object so all navigation is handled on the client with the History API (no full reloads).
• The non-null assertion document.getElementById('root')! tells TypeScript that the container exists; if it doesn’t, the app throws early rather than failing silently.
• React.StrictMode runs additional development checks (like highlighting potential side effects) without affecting production behavior.
• ./index.css contains global styles (e.g., Tailwind base/utilities) applied across all pages.

Why this matters: Mounting the router at the entry point ensures routing context is available everywhere below it. Once this is in place, any components rendered by routes can use Router features (like NavLink, useNavigate, or loaders in later units). Strict mode helps catch lifecycle and effect pitfalls early, which is especially helpful when you later introduce data fetching and more complex effects.