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.
