Scribd
Upload
12 views4 pages

Lab 17

This document outlines the creation of a basic React application for an online store that includes registration, login, and product information pages, utilizing React Router for navigation. The app features a home page, registration page, login page, and products page, with a navigation bar linking these components. The routing allows for seamless navigation without full page reloads, and future enhancements can include form submissions and API calls for product data.

Uploaded by

227r1a7349
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
12 views4 pages

Lab 17

This document outlines the creation of a basic React application for an online store that includes registration, login, and product information pages, utilizing React Router for navigation. The app features a home page, registration page, login page, and products page, with a navigation bar linking these components. The routing allows for seamless navigation without full page reloads, and future enhancements can include form submissions and API calls for product data.

Uploaded by

227r1a7349
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

17.

Create a react application for an online store which consist of registration, login,
product information pages and implement routing to navigate through these pages .

A basic React application for an online store with registration, login, and product information pages,
including routing for navigation.

This React app includes:


 A home page.
 A registration page.
 A login page.
 A product information page.
 Navigation using React Router.

1. Application Start-up
 The app starts executing from index.js (or main.jsx in some setups).
 React renders the App component inside the root DOM element (<div
id="root"></div> in index.html).
2. Rendering the App Component
 The App component is the main component of the application.
 It sets up React Router inside a <Router> component.
 The Navbar component is rendered at the top, providing navigation links.
3. Navigation Bar (Navbar Component)
 The Navbar provides links to different pages: Home, Register, Login, Products.
4. Routing (Navigating Between Pages)
When the user clicks on a link:
 React Router updates the URL (e.g., /register).
 The Routes component checks which Route matches the URL.
 It renders the corresponding component (Register, Login, Products, or Home).
5. Pages Execution
Each route renders its respective component:
 Home Page (/): Displays a welcome message.
 Register Page (/register): Provides a button for user signup.
 Login Page (/login): Displays a login button.
 Products Page (/products): Shows product-related information.
 Clicking a link updates the URL without a full page reload (thanks to React Router).
6. User Interaction
 When users click the Register or Login buttons, you can add form submissions in
future enhancements.
 The application can be expanded with API calls to fetch real products.
port { Button } from "@/components/ui/button";

const Home = () => (


<div className="p-4">
<h1 className="text-xl font-bold">Welcome to Our Store</h1>
<p>Explore our products and enjoy shopping!</p>
</div>
);

const Register = () => (


<div className="p-4">
<h1 className="text-xl font-bold">Register</h1>
<p>Create an account to start shopping.</p>
<Button className="mt-2">Sign Up</Button>
</div>
);

const Login = () => (


<div className="p-4">
<h1 className="text-xl font-bold">Login</h1>
<p>Access your account and continue shopping.</p>
<Button className="mt-2">Login</Button>
</div>
);

const Products = () => (


<div className="p-4">
<h1 className="text-xl font-bold">Products</h1>
<p>Browse our collection of amazing products.</p>
</div>
);

const Navbar = () => (


<nav className="p-4 bg-gray-200 flex space-x-4">
<Link to="/" className="text-blue-500">Home</Link>
<Link to="/register" className="text-blue-500">Register</Link>
<Link to="/login" className="text-blue-500">Login</Link>
<Link to="/products" className="text-blue-500">Products</Link>
</nav>
);

const App = () => (


<Router>
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
<Route path="/products" element={<Products />} />
</Routes>
</Router>
);

export default App;

Output:

You might also like