Scribd
Upload
22 views

WC React & Node

Uploaded by

test
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

WC React & Node

Uploaded by

test
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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