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