Scribd
Upload
20 views

WC React & Node

Uploaded by

test
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

WC React & Node

Uploaded by

test
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Eventloop:

Synchronous:
Assynchronous:
React

React Components:

Home.js
const Home = () => {
return <h1>This is a Home page</h1>;
};

export default Home;

Blog.js
const Home = () => {
return <h1>This is a Home page</h1>;
};

export default Home;

Contact.js
const Contact = () => {
return <h1>Contact Me @ [email protected]</h1>;
};

export default Contact;

Nopage.js
const NoPage = () => {
return <h1>404</h1>;
};

export default NoPage;

Index.js
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./Layout";
import Home from "./Home";
import Blogs from "./Blogs";
import Contact from "./Contact";
import NoPage from "./NoPage";

export default function App() {


return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</Routes>
</BrowserRouter>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(<App />);

Layout.js:
import { Outlet, Link } from "react-router-dom";

const Layout = () => {


return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};

export default Layout;

You might also like