Приложение Vito React показывает черную страницу при запуске ⇐ Html

[Anonymous]

Я новичок в использовании Vito с React, это мое первое приложение, которое делает это. . < /p>
Это мой main.jsx: < /p>

Код: Выделить всё

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";

// Optional: Create a custom Material-UI theme
const theme = createTheme({
palette: {
primary: {
main: "#1976d2", // Blue color for the app bar
},
background: {
default: "#f5f5f5", // Light gray background
},
},
});

ReactDOM.createRoot(document.getElementById("root")).render(






);
< /code>
Это мое приложение.jsx: < /p>
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home.jsx";
import ProjectDetail from "./pages/ProjectDetail.jsx";
import Contact from "./pages/Contact.jsx";

function App() {
return (







);
}

export default App;
< /code>
vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
})
< /code>
Все страницы действительно просты, например, home.jsx: < /p>
import { Grid, Container } from "@mui/material";
import { useEffect, useState } from "react";
import ProjectTile from "../components/ProjectTile.jsx";
import NavBar from "../components/AppBar.jsx";

export default function Home() {
const [projects, setProjects] = useState([]);

useEffect(() => {
const fetchImages = () => {
// Local image paths (adjust according to your folder structure)
const imagePaths = [
{ id: "project1", title: "Project 1", description: "Project details here", image: "../assets/images/2000.jpg" },
{ id: "project2", title: "Project 2", description: "Project details here", image: "../assets/images/mountains.jpg" },
{ id: "project3", title: "Project 3", description: "Project details here", image: "../assets/images/galp.png" },
{ id: "project3", title: "Project 3", description: "Project details here", image: "../assets/images/fspt.png" },
{ id: "project3", title: "Project 3", description: "Project details here", image: "../assets/images/25_abril.jpg" },

];
setProjects(imagePaths);
};
fetchImages();
}, []);

return (




{projects.map((project) => (



))}



);
}
< /code>
index.html:






Jaime Ferreira

И это браузер.>

Подробнее здесь: https://stackoverflow.com/questions/794 ... en-started