Jyothy Charitable Trust ®

JYOTHY INSTITUTE OF TECHNOLOGY

Tataguni, off Kanakapura road, Bengaluru-560082
Approved by The All India Council for Technical Education (AICTE) - New Delhi
Affiliated to Visvesvaraya Technological University(VTU), Belagavi

Department of Computer Science & Engineering

Accredited by National Board of Accreditation (NBA) - New Delhi.

LAB MANUAL

“REACT LABORATORY”
BCSL657B

Semester: 6th CSE Scheme: 2022

Prepared & Compiled By:

Mr. Venkateshwara N
Assistant Professor,
Department of CSE,
JIT – Bangalore

Verified and Approved by

DAEC HoD-CSE
 INSTITUTION VISION & MISSION

VISION

To be an institution of excellence in Engineering education, Innovation and Research and

work towards evolving great leaders for the country’s future and meeting global needs.

MISSION

The Institution aims at providing a vibrant, intellectually and emotionally rich teaching
learning environment with state of art infrastructure and recognizing and nurturing the
potential of each individual to evolve into one’s own self and contribute to the welfare of
all.

DEPARTMENT OF CSE VISION & MISSION

VISION

To be a centre of excellence in Computer Science and Engineering education, focus on

research, innovation and entrepreneurial skill development with professional
competency.

MISSION

M1: To provide state-of-the-art ICT infrastructure and innovative, research

oriented teaching learning environment and motivation for self-learning &
problem-solving abilities by recruiting committed faculty.
M2: To Encourage Industry Institute Interaction & multi-disciplinary approach to
problem-solving and adapt to the ever-changing global IT trends.
M3: To Imbibe awareness on societal responsibility and leadership qualities with
professional competency and ethics.
 PROGRAMME EDUCATIONAL OBJECTIVES (PEOs)

PEO1: Graduates of Computer Science and Engineering will be able to utilize

mathematics, science, engineering fundamentals, theoretical as well as
laboratory based experiences to identify, formulate & solve engineering
problems and succeed in entry-level engineering positions in ITES or in
advanced engineering.
PEO2: Graduates of Computer Science and Engineering will be prepared to
communicate and work effectively on individual & team based engineering
projects while practicing the ethics of their profession consistent with a
sense of social responsibility.
PEO3: Graduates of Computer Science and Engineering will be equipped to
recognize the importance of, and have the skills for, continuous learning to
become experts in their domain and enhance their professional attributes.

PROGRAMME SPECIFIC OUTCOMES (PSOs)

PSO1: Explore emerging technologies in the field of Computer Science and

Engineering using the knowledge and skills gained through science and
engineering courses.
PSO2: Apply techniques in different domains to create innovative products and
services in the database/data analytics, network/web systems, embedded
systems and system software.
PSO3: Work on various platforms as an individual/team member to develop useful
and safe computer based systems for the society and nation.
 OUTCOMES (POs)
PO1: Engineering knowledge: Apply the knowledge of mathematics, science,
engineering fundamentals, and an engineering specialization to the solution of
complex engineering problems.
PO2: Problem analysis: Identify, formulate, review research literature, and analyze
complex engineering problems reaching substantiated conclusions using first
principles of mathematics, natural sciences, and engineering sciences.
PO3: Design/development of solutions: Design solutions for complex engineering
problems and design system components or processes that meet the specified
needs with appropriate consideration for the public health and safety, and the
cultural, societal, and environmental considerations.
PO4: Conduct investigations of complex problems: Use research-based knowledge
and research methods including design of experiments, analysis and interpretation
of data, and synthesis of the information to provide valid conclusions.
PO5: Modern tool usage: Create, select, and apply appropriate techniques, resources,
and modern engineering and IT tools including prediction and modelling to
complex engineering activities with an understanding of the limitations.
PO6: The engineer and society: Apply reasoning informed by the contextual
knowledge to assess societal, health, safety, legal and cultural issues and the
consequent responsibilities relevant to the professional engineering practice.
PO7: Environment and sustainability: Understand the impact of the professional
engineering solutions in societal and environmental contexts, and demonstrate the
knowledge of, and need for sustainable development.
PO8: Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.
PO9: Individual and team work: Function effectively as an individual, and as a
member or leader in diverse teams, and in multidisciplinary settings.
PO10: Communication: Communicate effectively on complex engineering activities
with the engineering community and with society at large, such as, being able to
comprehend and write effective reports and design documentation, make
effective presentations, and give and receive clear instructions.
PO11: Project management and finance: Demonstrate knowledge and understanding
of the engineering and management principles and apply these to one‟s own
work, as a member and leader in a team, to manage projects and in
multidisciplinary environments.
PO12: Life-long learning: Understand the need for and be able to keep learning inde-
pendently throughout life, especially as technology changes
 SYLLABUS

REACT Semester 6
Course Code BCSL657B CIE Marks 50
Teaching Hours/Week (L:T:P: S) 0:0:1:0 SEE Marks 50
Credits 01 Exam Hours 100
Examination type (SEE) Practical
Course objectives:
● Enable students to develop React applications utilizing functional and class-based components, ef-
fectively managing state with hooks and lifecycle methods .
● Introduce, how to pass data dynamically between parent and child components using props, ensuring
modular and reusable component design.
● Create dynamic and responsive applications, integrating forms, validation, task management systems,
and styled components.
● Use React Router for navigation, external API integration for dynamic data handling, and CSS styling tech-
niques
for modern UI/UX design.
Sl.NO Experiments
Use create-react-app to set up a new project. Edit the App.js file to include a stateful
component with useState. Add an input field and a <h1> element that displays text based
1.
on the input. Dynamically update the <h1> content as the user types.

Develop a React application that demonstrates the use of props to pass data from a par-
ent component to child components. The application should include the parent compo-
nent named App that serves as the central container for the application. Create two sep-
arate child components, Header: Displays the application title or heading. Footer: Dis-
2. plays additional information, such as copyright details or a tagline. Pass data (e.g., title,
tagline, or copyright information) from the App component to the Header and Footer
components using props. Ensure that the content displayed in the Header and Footer
components is dynamically updated based on the data received from the parent compo-
nent.
Create a Counter Application using React that demonstrates state management with the
useState hook. Display the current value of the counter prominently on the screen. Add
buttons to increase and decrease the counter value. Ensure the counter updates dynami-
cally when the buttons are clicked. Use the useState hook to manage the counter's state
3.
within the component. Prevent the counter from going below a specified minimum val-
ue (e.g., 0). Add a "Reset" button to set the counter back to its initial value. Include
functionality to specify a custom increment or decrement step value.

Develop a To-Do List Application using React functional components that demon-
strates the use of the useState hook for state management. Create a functional compo-
nent named ToDoFunction to manage and display the to- do list. Maintain a list of tasks
4. using state. Provide an input field for users to add new tasks. Dynamically render the
list of tasks below the input field. Ensure each task is displayed in a user-friendly man-
ner. Allow users to delete tasks from the list. Mark tasks as completed or pending, and
visually differentiate them.
 Develop a React application that demonstrates component composition and the use of
props to pass data. Create two components: FigureList: A parent component responsible
for rendering multiple child components. BasicFigure: A child component designed to
display an image and its associated caption. Use the FigureList component to dynami-
cally render multiple BasicFigure components. Pass image URLs and captions as props
5.
from the FigureList component to each BasicFigure component. Style the BasicFigure
components to display the image and caption in an aesthetically pleasing manner. Ar-
range the BasicFigure components within the FigureList in a grid or list format. Allow
users to add or remove images dynamically. Add hover effects or animations to the im-
ages for an interactive experience.
Design and implement a React Form that collects user input for name, email, and pass-
word. Form Fields are Name, Email, Password. Ensure all fields are filled before allow-
ing form submission.Validate the email field to ensure it follows the correct email for-
mat (e.g., [email protected]). Optionally enforce a minimum password length or
6. complexity. Display error messages for invalid or missing inputs. Provide visual cues
(e.g., red borders) to highlight invalid fields. Prevent form submission until all fields
pass validation. Log or display the entered data upon successful submission (optional).
Add a "Show Password" toggle for the password field. Implement client- side sanitiza-
tion to ensure clean input.
Develop a React Application featuring a ProfileCard component to display a user's pro-
file information, including their name, profile picture, and bio. The component should
demonstrate flexibility by utilizing both external CSS and inline styling for its design.
Display the following information: Profile picture, User's name, A short bio or descrip-
tion Use an external CSS file for overall structure and primary styles, such as layout,
7.
colors, and typography. Apply inline styles for dynamic or specific styling elements,
such as background colors or alignment. Design the ProfileCard to be visually appeal-
ing and responsive. Ensure the profile picture is displayed as a circle, and the name and
bio are appropriately styled. Add hover effects or animations to enhance interactivity.
Allow the background color of the card to change dynamically based on a prop or state.
Develop a Reminder Application that allows users to efficiently manage their tasks. The
application should include the following functionalities: Provide a form where users can
add tasks along with due dates. The form includes task name,Due date,An optional de-
8. scription. Display a list of tasks dynamically as they are added. Show relevant details
like task name, due date, and completion status. Include a filter option to allow users to
view all Tasks and Display all tasks regardless of status. Show only tasks marked as
completed. Show only tasks that are not yet completed.
Design a React application that demonstrates the implementation of routing using the
react-router-dom library. The application should include the Navigation Menu: Create a
navigation bar with links to three distinct pages, Home, About, Contact. Develop sepa-
9. rate components for each page (Home, About, and Contact) with appropriate content to
differentiate them. Configure routes using react-router-dom to render the corresponding
page component based on the selected link. Use BrowserRouter and Route components
for routing. Highlight the active link in the navigation menu to indicate the current page.
 Design a React application featuring a class-based component that demonstrates the use
of lifecycle methods to interact with an external API. The component should fetch and
update data dynamically based on user interactions or state changes. Use the compo-
nentDidMount lifecycle method to fetch data from an API when the component is initial-
ly rendered. Display the fetched data in a structured format, such as a table or list. Use
the componentDidUpdate lifecycle method to detect changes in the component's state or
10
props. Trigger additional API calls to update the displayed data based on user input or
actions (e.g., filtering, searching, or pagination). Implement error handling to manage
issues such as failed API requests or empty data responses. Display appropriate error
messages to the user when necessary. Allow users to perform actions like filtering,
searching, or refreshing the data. Reflect changes in the displayed data based on these
interactions.
Course outcomes (Course Skill Set):

At the end of the course the student will be able to:

CO1: To develop React applications utilizing functional and class-based

components, effectively managing state with hooks and lifecycle methods
CO2: Analyze and develop, how to pass data dynamically between parent and
child components using props, ensuring modular and reusable component design
CO3:Create dynamic and responsive applications, integrating forms, validation, task
management systems, and styled components
CO4:Make Use of React Router for navigation, external API integration for
dynamic data handling, and CSS styling techniques for modern UI/UX design
PROGRAM-01:

Use create-react-app to set up a new project. Edit the App.js file to include a stateful compo-
nent with useState. Add an input field and a element that displays text based on the input. Dy-
namically update the content as the user types.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp1

Step 2: Change to the project directory :

cd exp1

Step 3: Start the development server by running:

npm start

Step 4: Open src/App.js and change the code.

src/App.js:

import React, { useState } from 'react';

import './App.css';

function App() {
const [text, setText] = useState('');

const handleChange = (event) => {

setText(event.target.value);
};

return (
<div className="App">
<h1>Dynamic Text Display</h1>
<input
type="text"
value={text}
onChange={handleChange}
placeholder="Type something..."
/>
<p>You typed: {text}</p>
 </div>
);
}

export default App;

OUTPUT
PROGRAM-02:

Develop a React application that demonstrates the use of props to pass data from a parent
component to child components. The application should include the parent component named
App that serves as the central container for the application. Create two separate child compo-
nents, Header: Displays the application title or heading. Footer: Displays additional infor-
mation, such as copyright details or a tagline. Pass data (e.g., title, tagline, or copyright infor-
mation) from the App component to the Header and Footer components using props. Ensure
that the content displayed in the Header and Footer components is dynamically updated
based on the data received from the parent component.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp2

Step 2: Change to the project directory :

cd exp2

Step 3: Start the development server by running:

npm start

Step 4: Open src/App.js and change the code.

4.1 App Component (Parent Component)

src/App.js:

import React from 'react';

import Header from './Header';
import Footer from './Footer';
import './App.css';

function App() {
const title = "Welcome to My React App";
const tagline = "Building great apps with React";
const copyright = "© 2025 MyApp, All Rights Reserved";

return (
<div className="App">
<Header title={title} />
 <Footer tagline={tagline} copyright={copyright} />
</div>
);
}

export default App;

4.2 Create a new file named Header.js inside the src folder. This file will have a Header component that
gets the title from props.

Header Component (Child Component)

src/ Header.js:

import React from 'react';

function Header(props) {
return (
<header>
<h1>{props.title}</h1>
</header>
);
}

export default Header;

4.3 Footer Component (Child Component)

Create a new file src/Footer.js for the Footer component, which will receive the tagline and copyright as
props

src/Footer.js:

import React from 'react';

function Footer(props) {
return (
<footer>
<p>{props.tagline}</p>
<p>{props.copyright}</p>
</footer>
);
}

export default Footer;

4.4 Open src/App.css (or create a new file) and add the following styles:

src/App.css:

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

header {
background-color: #282c34;
padding: 20px;
color: white;
}

footer {
background-color: #282c34;
padding: 10px;
color: white;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
OUTPUT
PROGRAM-03:

Create a Counter Application using React that demonstrates state management with the us-
eState hook. Display the current value of the counter prominently on the screen. Add buttons
to increase and decrease the counter value. Ensure the counter updates dynamically when the
buttons are clicked. Use the useState hook to manage the counter’s state within the compo-
nent. Prevent the counter from going below a specified minimum value (e.g., 0). Add a “Re-
set” button to set the counter back to its initial value. Include functionality to specify a custom
increment or decrement step value.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp3

Step 2: Change to the project directory :

cd exp3

Step 3: Start the development server by running:

npm start

Step 4: Open the src folder and edit the App.js file.

src/ App.js:

import React, { useState } from 'react';

import './App.css';

function App() {
const [counter, setCounter] = useState(0);
const [step, setStep] = useState(1);
const minValue = 0;

const handleIncrement = () => {

setCounter(prevCounter => prevCounter + step);
};

const handleDecrement = () => {

if (counter - step >= minValue) {
setCounter(prevCounter => prevCounter - step);
}
 };

const handleReset = () => {

setCounter(0);
};

const handleStepChange = (event) => {

setStep(Number(event.target.value));
};

return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Counter Application</h1>
<div style={{ fontSize: '48px', margin: '20px' }}>
<span>{counter}</span>
</div>

<div>
<button onClick={handleIncrement}>Increase by {step}</button>
<button onClick={handleDecrement}>Decrease by {step}</button>
<button onClick={handleReset}>Reset</button>
</div>

<div style={{ marginTop: '20px' }}>

<label>
Set Increment/Decrement Step:
<input
type="number"
value={step}
onChange={handleStepChange}
min="1"
style={{ marginLeft: '10px' }}
/>
</label>
</div>
</div>
);
}

export default App;

Step 5: Modify the App.css

src/App.css:

.App {
text-align: center;
}

button {
margin: 10px;
padding: 10px;
font-size: 16px;
cursor: pointer;
}

input {
padding: 5px;
font-size: 16px;
}

OUTPUT
PROGRAM-04:

Develop a To-Do List Application using React functional components that demonstrates the use
of the useState hook for state management. Create a functional component named ToDoFunc-
tion to manage and display the to-do list. Maintain a list of tasks using state. Provide an input
field for users to add new tasks. Dynamically render the list of tasks below the input field. En-
sure each task is displayed in a user-friendly manner. Allow users to delete tasks from the list.
Mark tasks as completed or pending, and visually differentiate them.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp4

Step 2: Change to the project directory :

cd exp4

Step 3: Start the development server by running:

npm start

Step 4: Modify the src/App.js File

src/App.js:

import React, { useState } from 'react';

import './App.css';

const ToDoFunction = () => {

const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');

const addTask = () => {

if (newTask.trim()) {
setTasks([
...tasks,
{ id: Date.now(), text: newTask, completed: false },
]);
setNewTask('');
}
};
const deleteTask = (taskId) => {
setTasks(tasks.filter(task => task.id !== taskId));
};

const toggleTaskCompletion = (taskId) => {

setTasks(tasks.map(task =>
task.id === taskId
? { ...task, completed: !task.completed }
: task
));
};

return (
<div className="todo-container">
<h2 className="todo-header">To-Do List</h2>

<div className="todo-input-wrapper">
<input
type="text"
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Add a new task..."
className="todo-input"
/>
<button className="add-task-button" onClick={addTask}>Add Task</button>
</div>

<ul className="todo-list">
{tasks.map((task) => (
<li
key={task.id}
className={`todo-item ${task.completed ? 'completed' : ''}`}
>
<span
className="task-text"
onClick={() => toggleTaskCompletion(task.id)}
>
{task.text}
</span>
<button
className="delete-button"
onClick={() => deleteTask(task.id)}
>
❌
</button>
</li>
))}
 </ul>
</div>
);
};

export default ToDoFunction;

Step 3: Modify the App.css

src/App.css:

.todo-container {
font-family: 'Arial', sans-serif;
max-width: 500px;
margin: 50px auto;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}

.todo-header {
color: #4A90E2;
font-size: 2rem;
margin-bottom: 20px;
}

.todo-input-wrapper {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.todo-input {
width: 70%;
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 1rem;
outline: none;
}
.add-task-button {
padding: 10px 15px;
margin-left: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}

.add-task-button:hover {
background-color: #45a049;
}

.todo-list {
list-style-type: none;
padding-left: 0;
margin: 0;
}

.todo-item {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 12px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease-in-out;
}

.todo-item:hover {
transform: scale(1.03);
}

.todo-item.completed {
background-color: #f1f1f1;
text-decoration: line-through;
color: #aaa;
}

.task-text {
 cursor: pointer;
font-size: 1.1rem;
color: #333;
transition: color 0.3s;
}

.task-text:hover {
color: #4CAF50;
}

.delete-button {
background: none;
border: none;
font-size: 1.1rem;
color: #ff6347;
cursor: pointer;
transition: color 0.3s;
}

.delete-button:hover {
color: #ff4500;
}

OUTPUT
PROGRAM-05:

Develop a React application that demonstrates component composition and the use of props to
pass data. Create two components: FigureList: A parent component responsible for rendering
multiple child components. BasicFigure: A child component designed to display an image and
its associated caption. Use the FigureList component to dynamically render multiple
BasicFigure components. Pass image URLs and captions as props from the FigureList com-
ponent to each BasicFigure component. Style the BasicFigure components to display the im-
age and caption in an aesthetically pleasing manner. Arrange the BasicFigure components
within the FigureList in a grid or list format. Allow users to add or remove images dynamical-
ly. Add hover effects or animations to the images for an interactive experience.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp5

Step 2: Change to the project directory :

cd exp5

Step 3: Start the development server by running:

npm start

Step 4: Inside the src folder:

 Create a components folder.

 Inside components, create BasicFigure.js and FigureList.js.

BasicFigure.js:

// BasicFigure.js
import React from 'react';

const BasicFigure = ({ imageUrl, caption }) => {

return (
<div className="figure">
<img src={imageUrl} alt={caption} className="figure-image" />
<p className="figure-caption">{caption}</p>
</div>
 );
};

export default BasicFigure;

FigureList.js:

// FigureList.js
import React, { useState } from 'react';
import BasicFigure from './BasicFigure';

const FigureList = () => {

const [figures, setFigures] = useState([
{ imageUrl: 'https://picsum.photos/400', caption: 'Random Image 1' },
{ imageUrl: 'https://picsum.photos/400', caption: 'Random Image 2' },
{ imageUrl: 'https://picsum.photos/400', caption: 'Random Image 3' },
{ imageUrl: 'https://picsum.photos/400', caption: 'Random Image 4' },

]);

const addFigure = () => {

const newFigure = {
imageUrl: `https://picsum.photos/400?random=${figures.length + 1}`,
caption: `Random Image ${figures.length + 1}`,
};
setFigures([...figures, newFigure]);
};

const removeFigure = () => {

const updatedFigures = figures.slice(0, -1);
setFigures(updatedFigures);
};

return (
<div className="figure-list-container">
<div className='button-box'>
<button onClick={addFigure} className="action-button">Add Im-
age</button>
<button onClick={removeFigure} className="action-button">Remove Im-
age</button>
</div>
<div className="figure-list">
{figures.map((figure, index) => (
<BasicFigure key={index} imageUrl={figure.imageUrl} cap-
tion={figure.caption} />
))}
 </div>
</div>
);
};

export default FigureList;

Step 5. App Component(src/App.js):

src/App.js:

// App.js
import React from 'react';
import FigureList from './components/FigureList';
import './App.css';

const App = () => {

return (
<div className="app">
<h1>Dynamic Image Gallery</h1>
<FigureList />
</div>
);
};

export default App;

Step 4: Add Some Basic Styles(src/App.css)

src/App.css:

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

h1 {
background: #000;
color: #fff;
padding: 10px;
text-align: center;
}

.figure-list-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
.button-box {
display: block;
text-align: center;
padding: 10px;
margin-bottom: 20px;
}

.action-button {
padding: 10px 20px;
margin: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s ease;
}

.action-button:hover {
background-color: #45a049;
}

.figure-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

.figure-list img {
max-width: 200px;
max-height: 200px;
border: 2px solid #ccc;
border-radius: 8px;
}

figure {
 display: flex;
flex-direction: column;
align-items: center;
}

figcaption {
margin-top: 8px;
font-size: 14px;
color: #555;
}

.figure {
display: flex;
flex-direction: column;
align-items: center;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.figure:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.figure-image {
max-width: 200px;
max-height: 200px;
border-radius: 8px;
object-fit: cover;
}

.figure-caption {
margin-top: 10px;
font-size: 14px;
color: #555;
text-align: center;
}
OUTPUT
PROGRAM-06:

Design and implement a React Form that collects user input for name, email, and password.
Form Fields are Name, Email, Password. Ensure all fields are filled before allowing form
submission. Validate the email field to ensure it follows the correct email format (e.g., exam-
[email protected]). Optionally enforce a minimum password length or complexity. Display er-
ror messages for invalid or missing inputs. Provide visual cues (e.g., red borders) to highlight
invalid fields. Prevent form submission until all fields pass validation. Log or display the en-
tered data upon successful submission (optional). Add a “Show Password” toggle for the
password field. Implement client-side sanitization to ensure clean input.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp6

Step 2: Change to the project directory :

cd exp6

Step 3: Start the development server by running:

npm start

Step 4: Inside the src folder:

 Create a components folder.

 Inside components, create Form.js file

Form.js:

import React, { useState, useEffect, useCallback } from 'react';

const Form = () => {

const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
});

const [errors, setErrors] = useState({

name: '',
email: '',
password: '',
});

const [showPassword, setShowPassword] = useState(false);

const [isFormValid, setIsFormValid] = useState(false);

const handleChange = (e) => {

const { name, value } = e.target;
setFormData((prevState) => ({
...prevState,
[name]: value.trim(),
}));
};

const validateForm = useCallback(() => {

let isValid = true;
const newErrors = { name: '', email: '', password: '' };

if (!formData.name) {
newErrors.name = 'Name is required.';
isValid = false;
}

const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

if (!formData.email || !emailPattern.test(formData.email)) {
newErrors.email = 'Please enter a valid email address.';
isValid = false;
}

if (!formData.password) {
newErrors.password = 'Password is required.';
isValid = false;
} else if (formData.password.length < 6) {
newErrors.password = 'Password must be at least 6 characters long.';
isValid = false;
}

setErrors(newErrors);
setIsFormValid(isValid);
}, [formData]);

useEffect(() => {
validateForm();
}, [formData, validateForm]);

const handleSubmit = (e) => {

e.preventDefault();
 if (isFormValid) {
console.log('Form Data:', formData);
setFormData({
name: '',
email: '',
password: '',
});
}
};

return (
<div className="form-container">
<h2 className="form-title">Registration Form</h2>
<form onSubmit={handleSubmit} className="form">
<div className="form-group">
<label htmlFor="name" className="form-label">Name</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
className={`form-input ${errors.name ? 'error' : ''}`}
placeholder="Enter your name"
/>
{errors.name && <div className="error-message">{errors.name}</div>}
</div>

<div className="form-group">
<label htmlFor="email" className="form-label">Email</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
className={`form-input ${errors.email ? 'error' : ''}`}
placeholder="Enter your email"
/>
{errors.email && <div className="error-message">{errors.email}</div>}
</div>

<div className="form-group">
<label htmlFor="password" className="form-label">Password</label>
<input
type={showPassword ? 'text' : 'password'}
id="password"
 name="password"
value={formData.password}
onChange={handleChange}
className={`form-input ${errors.password ? 'error' : ''}`}
placeholder="Enter your password"
/>
{errors.password && <div className="error-
message">{errors.password}</div>}
</div>

<div className="form-group password-toggle">

<label>
<input
type="checkbox"
checked={showPassword}
onChange={() => setShowPassword(!showPassword)}
/>
Show Password
</label>
</div>

<div className="form-group">
<button type="submit" className="form-submit" disabled={!isFormValid}>
Submit
</button>
</div>
</form>
</div>
);
};

export default Form;

Step 3. App Component(src/App.js):

src/App.js:

import React from 'react';

import './App.css';
import Form from './components/Form';

function App() {
return (
 <div className="App">
<Form />
</div>
);
}

export default App;

Step 4: Add Some Basic Styles(src/App.css)

src/App.css:

.form-container {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #f7f7f7;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-title {
text-align: center;
font-size: 24px;
margin-bottom: 20px;
color: #333;
}

.form {
display: flex;
flex-direction: column;
}

.form-group {
margin-bottom: 15px;
}

.form-label {
font-size: 14px;
font-weight: 600;
color: #555;
}
.form-input {
width: 100%;
padding: 12px;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
box-sizing: border-box;
}

.form-input.error {
border-color: red;
}

.error-message {
color: red;
font-size: 12px;
margin-top: 5px;
}

.password-toggle {
margin-bottom: 20px;
}

.form-submit {
padding: 12px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.form-submit:disabled {
background-color: #ccc;
cursor: not-allowed;
}

.form-submit:hover:not(:disabled) {
background-color: #45a049;
}
OUTPUT
PROGRAM-07:
Develop a React Application featuring a ProfileCard component to display a user’s profile
information, including their name, profile picture, and bio. The component should demon-
strate flexibility by utilizing both external CSS and inline styling for its design. Display the
following information: Profile picture, User’s name, A short bio or description Use an exter-
nal CSS file for overall structure and primary styles, such as layout, colors, and typography.
Apply inline styles for dynamic or specific styling elements, such as background colors or
alignment. Design the ProfileCard to be visually appealing and responsive. Ensure the profile
picture is displayed as a circle, and the name and bio are appropriately styled. Add hover ef-
fects or animations to enhance interactivity. Allow the background color of the card to change
dynamically based on a prop or state.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp7

Step 2: Change to the project directory :

cd exp7

Step 3: Start the development server by running:

npm start

Step 3: Inside the src folder, create a new file ProfileCard.js file

ProfileCard.js

import React, { useState } from 'react';

const ProfileCard = ({ name, bio, profilePicture }) => {

const [bgColor, setBgColor] = useState('#f0f0f0');

const handleMouseEnter = () => {

setBgColor('#d1c4e9');
};

const handleMouseLeave = () => {

setBgColor('#f0f0f0');
 };

return (
<div
className="profile-card"
style={{ backgroundColor: bgColor }}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<img
src={profilePicture}
alt={`${name}'s profile`}
className="profile-picture"
/>
<div className="profile-info">
<h2 className="profile-name">{name}</h2>
<p className="profile-bio">{bio}</p>
</div>
</div>
);
};

export default ProfileCard;

Step 3: Modify the App.js File

 Inside the src folder modify the src/App.js file.

 Now, use the ProfileCard component in App.js and pass sample data to display a user’s pro-
file.

import React from 'react';

import ProfileCard from './ProfileCard';
import './App.css'

const App = () => {

return (
<div className="App">
<ProfileCard
name="JYOTHY"
bio="Jyothy Institute of Technology is an engineering college located in Ben-
galuru,Karnataka."

// Place the college logo inside the public/images folder.

profilePicture='./Images/jyothy.jpg'

/>
</div>
);
};

export default App;

Step 3: Modify the src/App.css

src/App.css:

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7fa;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.profile-card {
width: 320px;
padding: 30px;
border-radius: 15px;
text-align: center;
background-color: #ffffff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
cursor: pointer;
overflow: hidden;
margin: 20px;
}

.profile-card-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
}

.profile-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
background-color: #f3f4f6;
}

.profile-picture {
width: 130px;
height: 130px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.profile-card:hover .profile-picture {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-info {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.profile-name {
font-size: 1.8rem;
font-weight: 600;
color: #333;
margin-bottom: 15px;
transition: color 0.3s ease;
}

.profile-card:hover .profile-name {
color: #5e35b1;
}

.profile-bio {
font-size: 1.1rem;
color: #555;
line-height: 1.5;
margin-bottom: 0;
transition: color 0.3s ease;
}

.profile-card:hover .profile-bio {
 color: #444;
}

.profile-card-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #f4f7fa;
}

OUTPUT
PROGRAM-08:

Develop a Reminder Application that allows users to efficiently manage their tasks. The appli-
cation should include the following functionalities: Provide a form where users can add tasks
along with due dates. The form includes task name, Due date, An optional description. Display
a list of tasks dynamically as they are added. Show relevant details like task name, due date,
and completion status. Include a filter option to allow users to view all Tasks and Display all
tasks regardless of status. Show only tasks marked as completed. Show only tasks that are not
yet completed.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp8

Step 2: Change to the project directory :

cd exp8

Step 3: Start the development server by running:

npm start

Step 4: Inside the src folder:

 Create a components folder.

 Inside components, create Filter.js , TaskForm.js and TaskList.js files.
Copy below code and paste it into the different files.

TaskForm.js:

import React, { useState } from 'react';

function TaskForm({ addTask }) {

const [taskName, setTaskName] = useState('');
const [dueDate, setDueDate] = useState('');
const [description, setDescription] = useState('');

const handleSubmit = (e) => {

e.preventDefault();

if (taskName && dueDate) {

const newTask = {
 id: Date.now(),
name: taskName,
dueDate: dueDate,
description,
completed: false,
};
addTask(newTask);

setTaskName('');
setDueDate('');
setDescription('');
}
};

return (
<form onSubmit={handleSubmit}>
<div>
<input
type="text"
placeholder="Task Name"
value={taskName}
onChange={(e) => setTaskName(e.target.value)}
/>
</div>
<div>
<input
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
/>
</div>
<div>
<textarea
placeholder="Description (optional)"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</div>
<button type="submit">Add Task</button>
</form>
);
}

export default TaskForm;

Filter.js:

import React from 'react';

function Filter({ setFilter }) {

return (
<div>
<button onClick={() => setFilter('all')}>All Tasks</button>
<button onClick={() => setFilter('completed')}>Completed Tasks</button>
<button onClick={() => setFilter('not-completed')}>Pending Tasks</button>
</div>
);
}

export default Filter;

TaskList.js:

import React from 'react';

function TaskList({ tasks, setTasks }) {

const toggleTaskCompletion = (taskId) => {
setTasks(
tasks.map((task) =>
task.id === taskId ? { ...task, completed: !task.completed } : task
)
);
};

const deleteTask = (taskId) => {

setTasks(tasks.filter((task) => task.id !== taskId));
};

return (
<div>
{tasks.length > 0 ? (
<ul>
{tasks.map((task) => (
<li key={task.id}>
<h3>{task.name}</h3>
<p>Due Date: {task.dueDate}</p>
{task.description && <p>Description: {task.description}</p>}
<p>Status: {task.completed ? 'Completed' : 'Not Completed'}</p>
<button onClick={() => toggleTaskCompletion(task.id)}>
 {task.completed ? 'Mark as Not Completed' : 'Mark as Completed'}
</button>
<button onClick={() => deleteTask(task.id)}>Delete</button>
</li>
))}
</ul>
) : (
<p>No tasks available!</p>
)}
</div>
);
}

export default TaskList;

Step 5. App Component(src/App.js):

src/App.js:

import React, { useState } from 'react';

import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import Filter from './components/Filter';
import './App.css';

function App() {
const [tasks, setTasks] = useState([]);
const [filter, setFilter] = useState('all');

const addTask = (task) => {

setTasks([...tasks, task]);
};

const handleFilterChange = (status) => {

setFilter(status);
};

const filteredTasks = tasks.filter((task) => {

if (filter === 'completed') return task.completed;
if (filter === 'not-completed') return !task.completed;
return true;
});

return (
<div className="App">
 <h1>Task Reminder</h1>
<TaskForm addTask={addTask} />
<Filter setFilter={handleFilterChange} />
<TaskList tasks={filteredTasks} setTasks={setTasks} />
</div>
);
}

export default App;

Step 6: Add Styles(src/App.css)

src/App.css:

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f4f8;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.App {
width: 550px;
padding: 30px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.App:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

h1 {
font-size: 2.2rem;
color: #333;
text-align: center;
margin-bottom: 10px;
margin-top: 0;
}
form {
display: flex;
flex-direction: column;
gap: 20px;
}

input,
textarea {
padding: 12px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
transition: border-color 0.3s ease;
}

input:focus,
textarea:focus {
border-color: #4CAF50;
outline: none;
}

button {
background-color: #4CAF50;
color: white;
border: none;
padding: 12px;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
background-color: #45a049;
}

button:active {
transform: scale(0.98);
}

textarea {
resize: vertical;
min-height: 120px;
}

input[type="date"] {
 padding: 12px;
}

div {
display: flex;
flex-direction: column;
gap: 10px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
background-color: #fafafa;
margin: 15px 0;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

li:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

h3 {
margin: 0;
font-size: 1.5rem;
color: #333;
font-weight: 600;
}

p {
margin: 5px 0;
color: #666;
}

button {
background-color: #007BFF;
color: white;
border: none;
padding: 8px 15px;
font-size: 1rem;
border-radius: 8px;
 cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
margin-right: 10px;
}

button:hover {
background-color: #0056b3;
}

button:active {
background-color: #003f8d;
}

button:last-child {
background-color: #e74c3c;
}

button:last-child:hover {
background-color: #c0392b;
}

button:last-child:active {
background-color: #7f1c1c;
}

.completed {
text-decoration: line-through;
color: #bbb;
}

div {
display: flex;
gap: 20px;
justify-content: center;
}

button {
background-color: #f1f1f1;
color: #333;
padding: 12px 18px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
 button:hover {
background-color: #ddd;
}

button:active {
transform: scale(0.98);
}

button:focus {
outline: none;
border-color: #007BFF;
}

OUTPUT
ROGRAM-09:

Design a React application that demonstrates the implementation of routing using the react-
router-dom library. The application should include the Navigation Menu: Create a navigation
bar with links to three distinct pages, Home, About, Contact. Develop separate components
for each page (Home, About, and Contact) with appropriate content to differentiate them.
Configure routes using react-router-dom to render the corresponding page component based
on the selected link. Use BrowserRouter and Route components for routing. Highlight the ac-
tive link in the navigation menu to indicate the current page.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp9

Step 2: Change to the project directory :

cd exp9

Step 3: Open your command prompt, install react-router-dom:

npm install react-router-dom

Step 3: Start the development server by running:

npm start

Step 3: Inside the src folder:

 Create a components folder.

 Inside components, create Home.js , About.js, Contact.js and Navbar.js files.

Home.js:

import React from 'react';

const Home = () => {

return (
 <div>
<h2>Home Page</h2>
<p>Welcome to the Home Page!</p>
</div>
);
};

export default Home;

About.js:

import React from 'react';

const About = () => {

return (
<div>
<h2>About Page</h2>
<p>Learn more about us on the About Page!</p>
</div>
);
};

export default About;

Contact.js:

import React from 'react';

const Contact = () => {

return (
<div>
<h2>Contact Page</h2>
<p>Get in touch with us through the Contact Page!</p>
</div>
);
};

export default Contact;

Navbar.js:

import React from 'react';

 import { NavLink } from 'react-router-dom';

const Navbar = () => {

return (
<nav>
<ul>
<li>
<NavLink
to="/"
className={({ isActive }) => (isActive ? 'active' : '')}
>
Home
</NavLink>
</li>
<li>
<NavLink
to="/about"
className={({ isActive }) => (isActive ? 'active' : '')}
>
About
</NavLink>
</li>
<li>
<NavLink
to="/contact"
className={({ isActive }) => (isActive ? 'active' : '')}
>
Contact
</NavLink>
</li>
</ul>
</nav>
);
};

export default Navbar;

src/App.js:

import React from 'react';

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

const App = () => {

return (
<Router>
<div>
<Navbar />
<div style={{ padding: '20px' }}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</div>
</Router>
);
};

export default App;

src/App.css:

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

div {
margin: 0 auto;
max-width: 960px;
padding: 20px;
}

h2 {
color: #333;
padding-bottom: 20px;
}

nav {
background-color: #333;
padding: 10px;
 border-radius: 5px;
margin-bottom: 20px;
}

ul {
list-style: none;
display: flex;
gap: 15px;
justify-content: center;
margin: 0;
padding: 0;
}

li {
display: inline;
}

a {
text-decoration: none;
color: white;
padding: 8px 16px;
border-radius: 4px;
}

a:hover {
background-color: #444;
}

a.active {
background-color: #1e90ff;
color: white;
font-weight: bold;
}

p {
color: #555;
font-size: 1.1rem;
line-height: 1.6;
}

src/index.js:

import React from 'react';

import ReactDOM from 'react-dom/client';
 import App from './App';

const rootElement = document.getElementById('root');

const root = ReactDOM.createRoot(rootElement);

root.render(<App />);

OUTPUT
PROGRAM-10:
Design a React application featuring a class-based component that demonstrates the use of
lifecycle methods to interact with an external API. The component should fetch and update
data dynamically based on user interactions or state changes. Use the componentDidMount
lifecycle method to fetch data from an API when the component is initially rendered. Dis-
play the fetched data in a structured format, such as a table or list. Use the compo-
nentDidUpdate lifecycle method to detect changes in the component’s state or props. Trig-
ger additional API calls to update the displayed data based on user input or actions (e.g.,
filtering, searching, or pagination). Implement error handling to manage issues such as
failed API requests or empty data responses. Display appropriate error messages to the user
when necessary. Allow users to perform actions like filtering, searching, or refreshing the
data. Reflect changes in the displayed data based on these interactions.

Step 1: Create a new React app:

Open your terminal and run:

npx create-react-app exp10

Step 2: Change to the project directory :

cd exp10

Step 3: Start the development server by running:

npm start

src/App.js:

import React, { Component } from 'react';

const API_URL = 'https://jsonplaceholder.typicode.com/users';

class DataFetcher extends Component {

constructor(props) {
super(props);
this.state = {
data: [],
filteredData: [],
searchQuery: '',
error: null,
loading: false,
};
}
componentDidMount() {
this.fetchData();
}

fetchData = async () => {

this.setState({ loading: true, error: null });
try {
const response = await fetch(API_URL);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const data = await response.json();
this.setState({ data, filteredData: data, loading: false });
} catch (error) {
this.setState({ error: error.message, loading: false });
}
};

componentDidUpdate(prevProps, prevState) {
if (prevState.searchQuery !== this.state.searchQuery) {
this.filterData();
}
}

handleSearchChange = (event) => {

this.setState({ searchQuery: event.target.value });
};

filterData = () => {
const { data, searchQuery } = this.state;
if (searchQuery.trim() === '') {
this.setState({ filteredData: data });
} else {
const filteredData = data.filter((item) =>
item.name.toLowerCase().includes(searchQuery.toLowerCase())
);
this.setState({ filteredData });
}
};

renderError = () => {
const { error } = this.state;
return error ? <div className="error">{`Error: ${error}`}</div> : null;
};

render() {
const { filteredData, searchQuery, loading } = this.state;

return (
 <div className="data-fetcher">
<h1>User Data</h1>

{this.renderError()}

<div className="search-bar">
<input
type="text"
value={searchQuery}
onChange={this.handleSearchChange}
placeholder="Search by name"
/>
</div>

{loading ? (
<div>Loading...</div>
) : (
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>City</th>
</tr>
</thead>
<tbody>
{filteredData.length > 0 ? (
filteredData.map((item) => (
<tr key={item.id}>
<td>{item.name}</td>
<td>{item.email}</td>
<td>{item.address.city}</td>
</tr>
))
) : (
<tr>
<td colSpan="3">No results found.</td>
</tr>
)}
</tbody>
</table>
)}

<button onClick={this.fetchData}>Refresh Data</button>

</div>
);
}
}

export default DataFetcher;

src/index.js:

import React from 'react';

import ReactDOM from 'react-dom/client';
import './App.css';
import DataFetcher from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
<React.StrictMode>
<DataFetcher />
</React.StrictMode>
);

src/App.css:

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

button {
border-radius: 5px;
border: none;
cursor: pointer;
color: #fff;
font-weight: bold;
background: red;
margin-top: 20px;
padding: 10px;
}

.data-fetcher {
width: 80%;
margin: 0 auto;
padding: 20px;
 background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
}

.search-bar {
margin: 20px 0;
text-align: center;
}

.search-bar input {
padding: 8px;
width: 60%;
font-size: 16px;
border: 1px solid #000;
border-radius: 4px;
}

table {
width: 100%;
margin-top: 20px;
border-collapse: collapse;
}

table th,
table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}

.error {
color: red;
text-align: center;
}
Output