2.file and folder structure and Routing

 Here is the project structure:

Now in app.js file:do:

import React from "react";

import { Routes, Route } from "react-router-dom";

import { Box } from "@mui/material";

import Navbar from "./components/Navbar/Navbar";

import Footer from "./components/Footer/Footer";

import Home from "./pages/Home/Home";

import ExerciseDetail from "./pages/ExerciseDetail/ExerciseDetail";

import "./App.css";

const App = () => {

  return (

    <Box width='400px' sx={{ width: { xl: "1448px" } }} m="auto">

      <Navbar />

      <Routes>

        <Route path="/" element={<Home />} />

        <Route path="/exercise/:id" element={<ExerciseDetail />} />

      </Routes>

      <Footer />

    </Box>

  );

};

export default App;

<Box> component is just like a div in material ui with some color and shading.

sx={{ width: { xl: "1448px" } }}

this sx prop is used to give inline/custom styles to mui component.We use it as an object and values are given in string.

We used nested object here in sx : which says its width should be 1448px for xl devices.

m="auto">

This is margin:auto.

for routing we use Routes and Route in app.js and BrowserRouter wraps whole App component in index.js  file.

index.js file:

import React from "react";

import ReactDOM from "react-dom/client";

import App from "./App";

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(

  <React.StrictMode>

    <BrowserRouter>

      <App />

    </BrowserRouter>

  </React.StrictMode>

);

.