EN NO.
: 202303103510263
Practical -1
AIM : (a) Create a “Hello World” program using ES6 arrow function
in react.
Code :
import React from 'react'
export const Hello = () => {
return (
<div>Hello World!</div>
)
}
export default Hello;
OUTPUT :
PAGE NO. : 1.1
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
AIM : (b) Create a functional component to display an alert message
onclick event in Reactjs.
Code : Hello.js(parent class)
import React from ‘react’
function showAlert() {
alert(“This is alert in react!”)
}
export const Hello = () => {
return (
<button onClick={showAlert}>show alert</button>
)
}
export default Hello;
App.js(child class)
import ‘./App.css’;
import React from ‘react’;
{
return(
<Hello />
)
}
export default App;
PAGE NO. : 1.2
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
OUTPUT :
PAGE NO. : 1.3
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
Practical -2
AIM : (a) Create a functional component to display id and name from
a list of persons in Reactjs.
Code : PersonList.js(parent class)
import React from 'react';
const PersonList = ({ persons }) => {
return (
<div>
<h2>Person List</h2>
<ul>
{persons.map((person) => (
<li key={person.id}>
ID: {person.id} - Name: {person.name}
</li>
))}
</ul>
</div>
);
};
export default PersonList;
PAGE NO. : 2.1
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
Code : App.js(child class)
import React from 'react';
import PersonList from './PersonList'; // adjust the path as needed
const App = () => {
const persons = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
return (
<div>
<h1>Welcome to the App</h1>
<PersonList persons={persons} />
</div>
);
};
export default App;
PAGE NO. : 2.2
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
OUTPUT :
PAGE NO. : 2.3
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
AIM :(b) Create a class component that receives and displays user
information (like name and role) using props passed from a
parent class component in Reactjs.
Code : UserInfo.js (parent class)
import React, { Component } from 'react';
class UserInfo extends Component {
render() {
const { name, role } = this.props;
return (
<div>
<h2>User Information</h2>
<p><strong>Name:</strong> {name}</p>
<p><strong>Role:</strong> {role}</p>
</div>
);
}
}
export default UserInfo;
PAGE NO. : 2.4
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
Code : App.js (child class)
import React { Component } from 'react';
import UserInfo from './UserInfo'; // Adjust path based on your
project structure
class App extends Component {
render() {
const user = {
name: 'John Doe',
role: 'Administrator'
};
return (
<div>
<h1>Welcome to the Dashboard</h1>
<UserInfo name={user.name} role={user.role} />
</div>
);
}
}
export default App;
PAGE NO. : 2.5
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
OUTPUT :
PAGE NO. : 2.6
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
AIM : (c) Create a functional component to display student details by
passing data as props from the parent component in
Reactjs.
Code : StudentDetails.js (parent class)
import React from 'react';
const StudentDetails = ({ name, age, grade }) => {
return (
<div>
<h2>Student Details</h2>
<p><strong>Name:</strong> {name}</p>
<p><strong>Age:</strong> {age}</p>
<p><strong>Grade:</strong> {grade}</p>
</div>
);
};
export default StudentDetails;
Code : App.js (child class)
import React from 'react';
import StudentDetails from './StudentDetails'; // Adjust path as
necessary
PAGE NO. : 2.7
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
const App = () => {
const student = {
name: 'Jane Smith',
age: 17,
grade: '12th'
};
return (
<div>
<h1>Welcome to the Student Portal</h1>
<StudentDetails
name={student.name}
age={student.age}
grade={student.grade}
/>
</div>
);
};
export default App;
PAGE NO. : 2.8
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
OUTPUT :
PAGE NO. : 2.9
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
Practical – 5
AIM : (a) Create a functional component to perform increment and
decrement operation onClick event by using useState in
Reactjs.
(b) Create a class component to update state onClick event in
Reactjs.
Code : Counter.js (parent class)
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // initialize count to 0
const increment = () => {
setCount(count + 1); // increase count
};
const decrement = () => {
if(count >0){
setCount(count - 1);
}else{
setCount(0);
}
PAGE NO. : 5.1
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
};
const update = () => {
setCount(0);
};
return (
<div style={{ textAlign: 'center', padding: '20px' }}>
<h2>Counter: {count}</h2>
<button onClick={increment} style={{ marginRight: '10px',
padding: '10px', background:'green'}}>Increment</button>
<button onClick={decrement} style={{marginRight: '10px'
,padding: '10px', background:'red'}}>Decrement</button>
<button onClick={update} style={{marginRight: '10px' ,padding:
'10px', background:'yellow'}}>update</button>
</div>
);
}
export default Counter;
Code : App.js(child class)
import React from 'react';
import Counter from './Counter'; // Make sure the path is correct
PAGE NO. : 5.2
UTU/CGPIT/IT/SEM-5/FSD
EN NO. : 202303103510263
const App = () => {
return (
<div>
<h1>React Counter Example</h1>
<Counter />
</div>
);
};
export default App;
OUTPUT :
PAGE NO. : 5.3
UTU/CGPIT/IT/SEM-5/FSD
