Scribd
Upload
7 views7 pages

16th Program

The document outlines the steps to create a music store application using React components with routing. It includes the creation of components for Home, Products, About, and Contact pages, as well as the main App component that manages routing. Additionally, it provides styling guidelines for the application using CSS.

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
7 views7 pages

16th Program

The document outlines the steps to create a music store application using React components with routing. It includes the creation of components for Home, Products, About, and Contact pages, as well as the main App component that manages routing. Additionally, it provides styling guidelines for the application using CSS.

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/ 7

Build a music store application using react components and provide routing among the web

pages.

1 Create React App


Step 2: Project Structure

Step 3: Create Component for Home.js

import React from 'react';

function Home() {
return (
<div>
<h2>Welcome to Melody Music Store 🎶</h2>
<p>
At Melody Music Store, we believe music is for everyone! Explore a wide range of
musical instruments,
accessories, and sound gear — all in one place.
</p>
<p>
Whether you're a beginner or a pro, we have something for you. Check out our
products or get in touch
to learn more!
</p>
</div>
);
}

export default Home;


Step4 :Create Component for Products.js
import React from 'react';

function Products() {
return (
<div>
<h2>Products</h2>
<ul>
<li>🎸 Guitar</li>
<li>🥁 Drums</li>
<li>🎹 Piano</li>
<li>🎤 Microphone</li>
</ul>
</div>
);
}

export default Products;

Step5:Create component for About.js

import React from 'react';

function About() {

return (

<div>

<h2>About Melody Music Store 🎼</h2>

<p>

Melody Music Store was founded in 2010 with a passion to spread the joy of music.
From guitars and pianos

to microphones and drum kits, we supply top-quality instruments for all ages and
skill levels.

</p>

<p>
Our mission is to make music more accessible and enjoyable. With expert staff and
a love for melodies,

we’re here to support every musical journey.

</p>

</div>

);

export default About;

Create Component for Contact.js

import React from 'react';

function Contact() {
return (
<div>
<h2>Contact Us</h2>
<p>Email: support@music_store.com</p>
<p>Phone: +91-9701-679-629</p>
</div>
);
}

export default Contact;

For Routing create or update App.js

import React from 'react';


import { Link, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import './App.css';
import About from './components/About';
import Contact from './components/Contact';
import Home from './components/Home';
import Products from './components/Products';

function App() {
return (
<Router>
<div className="App">
<h1>🎵 Music Store App</h1>
<nav>
<Link to="/">Home</Link>
<Link to="/products">Products</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>
</nav>

<hr />

<Routes>
<Route path="/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
}

export default App;

For style purpose create or update App.css

.App {
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}

nav {
margin-bottom: 20px;
}

nav a {
margin: 0 15px;
text-decoration: none;
color: navy;
font-weight: bold;
}

nav a:hover {
text-decoration: underline;
}

Will see the following output

You might also like