main.jsx
index.html
header.jsx
content.jsx
import { createRoot } from 'react-dom/client';
import { Suspense, lazy } from 'react';
const Header = lazy(() => import('./Header'));
const Content = lazy(() => import('./Content'));
const Sidebar = lazy(() => import('./Sidebar'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<Header />
<div style={{ display: 'flex' }}>
<Sidebar />
<Content />
</div>
</Suspense>
</div>
);
}
createRoot(document.getElementById('root')).render(
<App />
);
<!doctype html>
<html lang="en">
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
function Header() {
return (
<header style={{
background: '#007bff',
color: 'white',
padding: '20px',
textAlign: 'center',
marginBottom: '20px'
}}>
<h1>My Website</h1>
<nav style={{ marginTop: '10px' }}>
<a href="#" style={{ color: 'white', marginRight: '20px' }}>Home</a>
<a href="#" style={{ color: 'white', marginRight: '20px' }}>About</a>
<a href="#" style={{ color: 'white' }}>Contact</a>
</nav>
</header>
);
}
export default Header;
function Content() {
return (
<main style={{
flex: 1,
padding: '20px',
background: 'white',
borderRadius: '8px',
marginLeft: '20px'
}}>
<h2>Welcome to Our Site</h2>
<article style={{ marginBottom: '20px' }}>
<h3>Latest News</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</article>
<article>
<h3>Featured Content</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
</article>
</main>
);
}
export default Content;
localhost:5173