Richten Sie Vorlagen und Subvorlagen auf einer Website react.js ein
Posted: 10 Apr 2025, 11:51
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?
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