Part 1: Working with React Router

1. Install React Router: Run the following command in your terminal to install the react-router-dom
package:

npm install react-router-dom

2. Set Up the Pages: Create three new components for each page: Home.js, About.js, and Contact.js.
Place these files inside a components folder for better organization.

o components/Home.js

import React from 'react';

function Home() {

return <h2>Home Page</h2>;

export default Home;

o components/About.js

import React from 'react';

function About() {

return <h2>About Page</h2>;

export default About;

o components/Contact.js

import React from 'react';

function Contact() {

return <h2>Contact Page</h2>;

export default Contact;

3. Set Up App.js: Now, modify your App.js file to import the Router components, the three pages, and
define the routes.

import React from 'react';

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

import Home from './components/Home';

import About from './components/About';

import Contact from './components/Contact';

function App() {

return (

<BrowserRouter>

<div>

<nav>

<ul>

<li><Link to="/">Home</Link></li>

<li><Link to="/about">About</Link></li>

<li><Link to="/contact">Contact</Link></li>

</ul>

</nav>

<Routes>
 <Route path="/" element={<Home />} />

<Route path="/about" element={<About />} />

<Route path="/contact" element={<Contact />} />

</Routes>

</div>

</BrowserRouter>

);

export default App;

4. Test Your Application:

o Start your React app by running:

npm start

o Open a browser, navigate to http://localhost:3000, and test the navigation by clicking on

"Home," "About," and "Contact" links. Each link should render the corresponding page
component.

Part 2: Creating Forms in React

1. Create a UserForm Component: In your src directory, create a new file called UserForm.js for the
form component.

o src/UserForm.js:

import React, { useState } from 'react';

function UserForm() {

const [formData, setFormData] = useState({

name: '',

email: '',
 phone: '',

gender: '',

city: '',

address: ''

});

const handleChange = (e) => {

const { name, value } = e.target;

setFormData({

...formData,

[name]: value

});

};

const handleSubmit = (e) => {

e.preventDefault();

const { name, email, phone, gender, city, address } = formData;

alert(

`Form Submitted!\n\nName: ${name}\nEmail: ${email}\nPhone: ${phone}\nGender:

${gender}\nCity: ${city}\nAddress: ${address}`

);

};

return (

<div className="container">

<h2>React Form Example</h2>

<form onSubmit={handleSubmit}>

{/* Name */}

<div className="mb-3">
 <label className="form-label">Name</label>

<input

type="text"

className="form-control"

name="name"

value={formData.name}

onChange={handleChange}

required

/>

</div>

{/* Email */}

<div className="mb-3">

<label className="form-label">Email</label>

<input

type="email"

className="form-control"

name="email"

value={formData.email}

onChange={handleChange}

required

/>

</div>

{/* Phone */}

<div className="mb-3">

<label className="form-label">Phone</label>

<input

type="text"
 className="form-control"

name="phone"

value={formData.phone}

onChange={handleChange}

required

/>

</div>

{/* Gender */}

<div className="mb-3">

<label className="form-label">Gender</label>

<div>

<input

type="radio"

name="gender"

value="Male"

checked={formData.gender === 'Male'}

onChange={handleChange}

required

/> Male

<input

type="radio"

name="gender"

value="Female"

checked={formData.gender === 'Female'}

onChange={handleChange}

required

/> Female

</div>
</div>

{/* City */}

<div className="mb-3">

<label className="form-label">City</label>

<select

className="form-select"

name="city"

value={formData.city}

onChange={handleChange}

required

>

<option value="">Select City</option>

<option value="Delhi">Delhi</option>

<option value="Mumbai">Mumbai</option>

<option value="Kolkata">Kolkata</option>

<option value="Bangalore">Bangalore</option>

</select>

</div>

{/* Address */}

<div className="mb-3">

<label className="form-label">Address</label>

<textarea

className="form-control"

name="address"

value={formData.address}

onChange={handleChange}

rows="3"
 required

></textarea>

</div>

{/* Submit Button */}

<button type="submit" className="btn btn-primary">

Submit

</button>

</form>

</div>

);

export default UserForm;

2. Integrate UserForm into App.js: Import and use the UserForm component within App.js to test
it.

import React from 'react';

import UserForm from './UserForm';

function App() {

return (

<div className="App">

<UserForm />

</div>

);

}
export default App;

3. Test the Form: Start the React app and test the form. When you submit the form, it should show
an alert with the entered details.