I am creating my website using react.js
The website is about reviewing products and shops.
I create a main template under App.js and App.css that contain components like Header and Footer. Those will be in common with all the pages.
Then I want to create 2 sub template: one for products and one for shops (ProductsTemplate and ShopsTemplate).

I just want to know if I am going to the right way following this set up or am I missing something?

And then, in order to create 100k pages for products and 200 pages for shops, is there a smart way to organize all this material?

My goal is to be able to change layout of the website, or add/remove components without have to touch all this pages.

Thanks in advance 🙂

// src/App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/Home';
import ProductsTemplate from './pages/ProductsTemplate/ProductsTemplate';
import './App.css';

function App() {
  return (
    <Router>
      <Header />
      <div className="content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/ProductsTemplate" element={<ProductsTemplate />} />
          <Route path="/ShopsTemplate" element={<ShopsTemplate />} />
          <Route path="/Brand1/Product1.js" element={<Product1Page />} />
        </Routes>
      </div>
      <Footer />
    </Router>
  );
}

export default App;

// src/pages/ProductsTemplate/ProductsTemplate.js

import React from 'react';
import ProductName from '../../components/product/ProductName';
import ProductImage from '../../components/product/ProductImage';
import ProductInfo from '../../components/product/ProductInfo';
import Map from '../../components/product/Map';
import './ProductsTemplate.css'; 

const ProductsTemplate = ({ productDetails }) => {
  return (
      <ProductName name={productDetails.name} />
      <ProductImage className="product-image" src={productDetails.imageSrc} alt={productDetails.name} />
      <ProductInfo className="product-info" brand={productDetails.brand} release_date={productDetails.release_date} />
      <Map shops={productDetails.shops} />
  );
};

export default ProductsTemplate;

// src/pages/Brand1/Product1.js

import React from 'react';
import ProductsTemplate from '../ProductsTemplate/ProductsTemplate';

const Product1 = () => {
  const productDetails = {
    nome: "product 1",
    brand: "brand 1",
    release_date: "2024",
    imageSrc: "/brand1-product1.png",
    shops: [
      { name_shop: "shop1", coordinates: "15.44339433128974, 19.995722438057902" },
      { name_shop: "shop2", coordinates: "15.645372102653155, 19.936772266859245" }
    ]
  };

  return <ProductsTemplate productDetails={productDetails} />;
};

export default Product1Page;

/src
├── App.css
├── App.js
├── App.test.js
├── assets
│   └── images
│       └── brand1-product1.png
├── components
│   ├── Footer.js
│   ├── Header.js
│   └── product
│       ├── ProductImage.js
│       ├── ProductInfo.js
│       ├── Map.js
│       └── ProductName.js
├── index.css
├── index.js
├── pages
│   ├── Home.js
│   └── ProductTemplate
│       ├── ProductTemplate.css
│       └── ProductTemplate.js
│   
├── reportWebVitals.js
└── setupTests.js