Ex.

No : 13 React Roll:no210701127

AIM :

Program to develop an attractive web pages using React Js.

PROCEDURE:
1. Define a simple controller: In React, there are no controllers. Instead, you create components
to manage the UI and its behavior.
2. After creating modules and controllers, use them in your HTML: In React, you'll import and
use components in your JavaScript files, not in the HTML directly.
3. Include React script and the JavaScript file where you build your React app.
4. Specify the root element in your HTML where the React app will be mounted using the
ReactDOM.render() method.
5. Start working on adding single page application support: React naturally supports single-page
applications (SPAs) as it updates the DOM efficiently without full page reloads.
6. Create a single-page application by developing various components that represent different
pages within your app.
7. Implement client-side routing using a routing library like React Router.
8. Include React Router in your project by installing the react-router-dom package.
9. Define your layout components, such as a header and footer, that will be common to every
page.
10. Create a placeholder in your layout components where the content of each page will be
rendered.
11. Configure your routes using React Router's Route components to specify which component
should be rendered for each URL.
12. Define your routes using Route components and specify the path and the associated
component for each route.
13. Build components for each route that correspond to the pages you want to display.
14. Implement a 404 Not Found page by adding a Route with a wildcard path (*) to catch
undefined routes and redirect to your desired error page.
Build the necessary components for each route, ensuring they have the required functionality and
UI.

PROGRAM:
// App.jsx import React from "react";

import HomePage from "./pages/home/HomePage"; import Account

from "./pages/account/Account"; import { Routes, Route } from
"react-router-dom"; import GeneralInfo from
"./pages/account/GeneralInfo"; import Orders from
"./pages/account/Orders";

const App = () => {

return (
 <div className="bg-#FoEBE4">

<Routes>

<Route path="/" element={<HomePage />} />

<Route path="/account" element={<Account />} />

<Route path="/account/" element={<GeneralInfo />} />

<Route path="/account/orders" element={<Orders />} />

<Route path="/account/bookings" element={<Orders />} />

</Routes>

</div>

);

};

export default App;

//Account.jsx

import React from 'react'

import { Container, Card, Col, Row, Button } from "react-bootstrap"; import Header
from '../home/Header'; import Footer from '../home/Footer'; import General from
'./GeneralInfo'; import Content from './Content'; const Account = () => {

return (

<div>

<Header />

<Content />

<Footer />

</div>

export default Account

//Booking.jsx

import React from 'react' import Header from

'../home/Header' import Footer from '../home/Footer'
import { Container } from 'react-bootstrap' import
Content from './Content' const Bookings = () => {

return (

<>

<Header />

<Content />

<Container className='mt-5'>

</Container>

<Footer />

</>

)}

export default Bookings

//Content.jsx

import React from 'react' import GeneralInfo from

'./GeneralInfo' import Nav from 'react-bootstrap/Nav';
import { Container } from 'react-bootstrap';

const Content = () => {

return (

<Container className='mt-5'>

<Nav variant="underline" defaultActiveKey="/home">

<Nav.Item>

<Nav.Link href="/account/">General Info</Nav.Link>

</Nav.Item>

<Nav.Item>

<Nav.Link eventKey="link-2" href='/account/bookings'>Bookings</Nav.Link> </Nav.Item>

</Nav>

</Container>

) } export default Content

//Header.js import React from "react";

import { Container, Row, Col, Form, Button } from "react-bootstrap"; import logo
from "./logo.png"; import { AiOutlineUser } from "react-icons/ai"; import { BsSearch
} from "react-icons/bs";

const Header = () => {

return (

<Container className="mt-5">

<Row>

<Col>

<a href="/"><img src={logo} alt="" srcset="" /></a>

</Col>

<Col sm={1}><a href="/">Home</a></Col>

<Col sm={1}>Flights</Col>

<Col sm={1}>

<a href="/account">

<AiOutlineUser />

</a>

</Col>

</Row>

</Container>

);

};

export default Header;

//Search flight.jsx import React, { useState } from "react"; import

Card from "react-bootstrap/Card"; import Container from "react-
bootstrap/Container"; import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col"; import DatePicker from
"react-datepicker"; import "react-datepicker/dist/react-
datepicker.css"; import globe from "./globe.png"; import Image
from "react-bootstrap/Image"; import { Button, Form } from "react-
bootstrap"; import { AiOutlineArrowRight } from "react-icons/ai";

const SearchFlights = () => {

const [startDate, setStartDate] = useState(); const options =

[
"DEL: Indira Gandhi International Airport, New Delhi",

"BOM: Chhatrapati Shivaji International Airport, Mumbai",

"MAA: Chennai International Airport, Chennai",

"BLR: Kempegowda International Airport, Bangalore",

"COK: Cochin International Airport, Kochi",

"HYD: Rajiv Gandhi International Airport, Hyderabad",

];

return (

<Container>

<Card className="mt-3 custom-bg "> <Card.Body>

<Card.Text>

<Container>

<Row>

<Col>

<p>

<h3>TRAVEL WITH US</h3>

<h3>

<strong>DISCOVER</strong> THE WORLD

</h3>

</p>

</Col>

<Col>

<Image src={globe} roundedCircle="xxl" />

</Col>

</Row>

</Container>

</Card.Text>

<Card.Text>

<Form>

<Container>
<Row>

<Col>

<Form.Label>From</Form.Label>

<Form.Select>

<option disabled="true" selected="true">Select Location</option>

{options.map((option, index) => (

<option key={index} value={option}>

{option}

</option>

))}

</Form.Select>

</Col>

<Col>

<Form.Label>To</Form.Label>

<Form.Select>

<option disabled="true" selected="true">Select Location</option>

{options.map((option, index) => (

<option key={index} value={option}>

{option}

</option>

))}

</Form.Select>

</Col>

<Col>

<Form.Label>Tickets</Form.Label>

<Form.Select>

<option disabled="true">number of tickets</option>

<option value="1">1</option>

<option value="2">2</option> </Form.Select>

</Col>
 <Col>

<Form.Label>Departure</Form.Label>

<DatePicker className="mt-1"
selected={startDate}
onChange={(date) => setStartDate(date)}
/>

</Col>

<Col>

<Button variant="light" size="lg" type="submit"> Discover

<AiOutlineArrowRight />

</Button>

</Col>

</Row>

</Container>

</Form>

</Card.Text>

</Card.Body>

</Card>

</Container>

);

};

export default SearchFlights;

//TopFlight.jsx

import React, { useState } from "react";

import { Container, Card, Col, Row, Button } from "react-bootstrap"; import

Accordion from "react-bootstrap/Accordion"; import TopFlightsCard from
"./TopFlightsCard"; const TopFlights = () => { const[showCard,setCard]=useState(0)

return (

<Container className="mt-5">

<Row>

<Col>
 <h6>Top Flights</h6>

</Col>

<Col>

<a href="#">Browse all flights</a>

</Col>

</Row>

<Row>

<Col md={4}>

<TopFlightsCard id={showCard}/>

</Col>

<Col>

<Accordion defaultActiveKey="0" className="rounded custom-bg-y1" >

<Accordion.Item eventKey="0" className="custom-bg" >

<Accordion.Header onClick={() => setCard(0)}>

<Container>

<Row>

<Col>New Delhi -Mumbai</Col>

<Col>Starting from 4,851 INR</Col>

<Col>

<Button variant="dark">Book</Button>

</Col>

</Row>

</Container>

</Accordion.Header>

<Accordion.Body>

<Row>

<Col>New Delhi</Col>

<Col>Departure</Col>

<Col>02h 15m</Col>

<Col>Arrival</Col>
 <Col>Mumbai</Col>

</Row>

<Row>

<hr />

</Row>

<Row>

<Col>Sun,Nov 12 6:10 PM </Col>

<Col>DEL </Col>

<Col>

IndiGo flight <br /> 6E 271{" "}

</Col>

<Col>BOM </Col>

<Col>Sun,Nov 12 8:35 PM</Col>

</Row>

</Accordion.Body>

</Accordion.Item>

<Accordion.Item eventKey="1" className="custom-bg">

<Accordion.Header onClick={() => setCard(1)}>

<Container>

<Row>

<Col>Mumbai -Chennai</Col>

<Col>Starting from 3,500 INR</Col>

<Col>

<Button variant="dark">Book</Button>

</Col>

</Row>

</Container>

</Accordion.Header>

<Accordion.Body>

<Row>
 <Col>Mumbai</Col>

<Col>Departure</Col>

<Col>02h 15m</Col>

<Col>Arrival</Col>

<Col>Chennai</Col>

</Row>

<Row>

<hr />

</Row>

<Row>

<Col>Sun,Nov 12 6:10 PM </Col>

<Col>BOM </Col>

<Col>

IndiGo flight <br /> 6E 5048{" "}

</Col>

<Col>MAA </Col>

<Col>Sun,Nov 12 8:35 PM</Col>

</Row>

</Accordion.Body>

</Accordion.Item>

<Accordion.Item eventKey="2" className="custom-bg">

<Accordion.Header onClick={() => setCard(2)}>

<Container>

<Row>

<Col>Chennai -Bengaluru</Col>

<Col>Starting from 3,095 INR </Col>

<Col>

<Button variant="dark">Book</Button>

</Col>

</Row>

</Container>
 </Accordion.Header>

<Accordion.Body>

<Row>

<Col>Chennai</Col>

<Col>Departure</Col>

<Col>02h 15m</Col>

<Col>Arrival</Col>

<Col>Bengaluru</Col>

</Row>

<Row>

<hr />

</Row>

<Row>

<Col>Sun,Nov 12 6:10 PM </Col>

<Col>MAA </Col>

<Col>

IndiGo flight <br /> 6E 365{" "}

</Col>

<Col>BLR </Col>

<Col>Sun,Nov 12 8:35 PM</Col>

</Row>{" "}

</Accordion.Body>

</Accordion.Item>

</Accordion>

</Col>

</Row>

</Container>

);

};
export default TopFlights;

//Why us card.jsx import React from "react";

import { Container, Card, Col, Row, Button } from "react-bootstrap";

import WhyUsCard from "./WhyUsCard"; import

tripPlanning from "./tripplanning.png" import
honestPrice from "./honestprice.png" import support
from "./support.png"

const WhyUs = () => {

return (

<Container className="mt-5 rounded ">

<Row><h6>Why Us</h6></Row>

<Row>

<Col>

<WhyUsCard title={"Trip planning"} src={tripPlanning}/>

</Col>

<Col>

<WhyUsCard title={"Honest prices"} src={honestPrice}/>

</Col>

<Col>

<WhyUsCard title={"Support 24/7"} src={support}/>

</Col>

</Row>

</Container>

);

};

export default WhyUs;

OUTPUT:

RESULT:
Thus the given design was successfully developed and output was verified.