Lab 17
Lab 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.
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";
Output: