Richten Sie Vorlagen und Subvorlagen auf einer Website react.js ein ⇐ HTML

[Anonymous]

Ich erstelle meine Website mit React.js
Die Website geht darum, Produkte und Geschäfte zu überprüfen. Diese sind mit allen Seiten gemeinsam. Organisieren Sie all dieses Material?

Code: Select all

// 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