I’m new to using Vito with react, this is my first app doing so.
I think I am doing everything as supposed but when I run it shows a black white page.
This is my main.jsx:
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(
<React.StrictMode>
<ThemeProvider theme={theme}>
<CssBaseline />
<App />
</ThemeProvider>
</React.StrictMode>
);
This is my App.jsx:
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 (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/project/:id" element={<ProjectDetail />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</Router>
);
}
export default App;
vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
})
All the pages are really simple, for example Home.jsx:
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 (
<>
<NavBar />
<Container sx={{ marginTop: 4 }}>
<Grid container spacing={3}>
{projects.map((project) => (
<Grid item xs={12} sm={6} md={4} key={project.id}>
<ProjectTile project={project} />
</Grid>
))}
</Grid>
</Container>
</>
);
}
Index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jaime Ferreira</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
And this is the browser inspect HTML code:
