Scribd
Upload
7 views3 pages

Lab 10

The document discusses building a quiz application using React Router. It describes creating routes for home, news, about, contact and quiz pages. It provides details on displaying content on each page like a slide on home, news list on news, questions on quiz. It also includes sample data for news and questions.

Uploaded by

pt0832a
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 views3 pages

Lab 10

The document discusses building a quiz application using React Router. It describes creating routes for home, news, about, contact and quiz pages. It provides details on displaying content on each page like a slide on home, news list on news, questions on quiz. It also includes sample data for news and questions.

Uploaded by

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

Lab 5: About React Router

Build an online quiz application:

 Use React Router to create routes for the home page, news page, about page, contact page and
quiz page.

 Display slide on the home page.

 Display the list of news on the News page.

Page 1
Note: Use an array to store information about News

const newLists = [
{ id: 1, title: 'Woman bakes expletive-laden pies to ‘get a rise’ out of her
grandmother in annual tradition', description: '“What started as a means to get a
rise out of my Grammy has snowballed into a weird family tradition,” wrote Jess
Lydon.', images: 'images/event-1.jpg' },
{ id: 2, title: 'Martha Stewart shows off her 30 pies after canceled
Thanksgiving dinner plans', description: 'Queen of Thanksgiving Martha Stewart may
not be hosting a turkey dinner this year but fret not, she will still be celebrating
with literally 30 pies.', images: 'images/event-2.jpg' },
{ id: 3, title: 'Burger King is testing a new breakfast sandwich',
description: 'This is a win for the flatbread fans.', images: 'images/event-3.jpg' },
{ id: 4, title: 'Popeyes permanently adds chicken wings to its menu',
description: 'And you can get ’em in five different flavors.', images: 'images/event-
4.jpg' },
{ id: 5, title: 'Top salmon with a sizzling mix of aromatics and spices',
description: 'Tadka is a ubiquitous South Asian technique that adds a dramatic last-
minute coat of flavor.', images: 'images/event-5.jpg' },
{ id: 6, title: '80 Christmas dinner ideas for the ultimate holiday feast',
description: 'Build the perfect Christmas menu with these delicious recipes.',
images: 'images/event-6.jpg' },
{ id: 7, title: 'How to make the easiest prime rib roast for the holidays',
description: 'Use these tips and tricks to make a juicy and amazingly delicious prime
rib roast.', images: 'images/event-7.jpg' },
{ id: 8, title: 'Turn leftover turkey into a flavorful Waldorf salad',
description: 'This light, bright turkey salad is the best post-Thanksgiving lunch.',
images: 'images/event-8.jpg' },
];
 Quiz page: Display the questions and options for the user to answer. You can use an array to
store information about the questions and options, and use a separate component to display
each question(as Lab 4).
 Contact page: Display the contact Form with react-bootstrap component

Page 2
 Define routes: In the root component (App), define the routes using BrowserRouter and Link
from React Router.
 In the Home and QuizList components, use Link from React Router to create links to the
respective pages.

More Reference: https://react-bootstrap.netlify.app/docs/getting-started/introduction

Images Resource: images.zip

Page 3

You might also like