Установите шаблоны и суб -шаблоны на веб -сайте React.js ⇐ Html

[Anonymous]

Я создаю свой веб -сайт, используя React.js
Веб -сайт о просмотре продуктов и магазинов.
Я создаю основной шаблон в App.js и app.css, которые содержат такие компоненты, как заголовок и нижний колонтитул. Это будет общее со всеми страницами.
Тогда я хочу создать 2 субмаплантата: один для продуктов и один для магазинов (ProductStemplate и Shopstemplate). < /P>
Я просто хочу знать, пойду ли я правильно, следуя этой настройке, или я не буду что -то что -то? Организовать весь этот материал?// 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 (












);
}

export default App;
< /code>
// 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 (




);
};

export default ProductsTemplate;
< /code>
// 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 ;
};

export default Product1Page;
< /code>
/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


Подробнее здесь: https://stackoverflow.com/questions/786 ... js-website