Scribd
Upload
10 views17 pages

React and Node.js Practical Exercises

The document outlines practical exercises for creating various components in React and Node.js. It includes examples of functional components, class components, event handling, and state management in React, as well as basic server creation in Node.js. Each section provides code snippets and aims to demonstrate fundamental concepts in web development using these technologies.

Uploaded by

chirayupatel8724
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views17 pages

React and Node.js Practical Exercises

The document outlines practical exercises for creating various components in React and Node.js. It includes examples of functional components, class components, event handling, and state management in React, as well as basic server creation in Node.js. Each section provides code snippets and aims to demonstrate fundamental concepts in web development using these technologies.

Uploaded by

chirayupatel8724
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Enrollment No:202303103510026

Prac cal-1
Aim: a. create a “Hello World” program using ES6 arrow func on in React.
b. create a func onal component to display an alert message onclick event in
Reactjs.

(a).
Code:
//[Link]

import React from 'react';


// ES6 arrow func on component
const App = () => {
return <h1>Hello, World!</h1>;
};
export default App;

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

(b).
Code:
import logo from './[Link]';
import './[Link]';
func on App() {
return (
<div className="App">
<h1>!!!...Hello pritesh...!!!</h1>
<bu on onClick={Greet}>Click</bu on>
</div>
);
}
const Greet=()=>{
alert("What is your Name?")
}
export default App;

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

Prac cal-2

Aim: a. Create a func onal component to display id and name from a list of
persons in Reactjs.
b. Create a class component that receives and displays user informa on (like
name and role) using props passed from a parent class component in ReactJs.
c. Create a func onal component to display student details by passing
database props from the parents component in Reactjs.

(a).
Code:
//[Link]
import React from 'react';

import List from './PersonList'; // Make sure the path is correct

const App = () => {

return (

<div>

<h1>Welcome to My React App</h1>

<List />

</div>

);

};

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

export default App;

//[Link]
import React from 'react';

const List = () => {

const persons = [

{ id: 26, name: 'pritesh' },

{ id: 228, name: 'Henil' },

{ id: 220, name: 'Harshi’ },

];

return (

<div>

<h2>Person List</h2>

<ul>

{[Link]((person) => (

<li key={[Link]}>

<strong>ID:</strong> {[Link]}, <strong>Name:</strong> {[Link]}

</li>

))}

</ul>

</div>

);

};

export default List;

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

(b).
Code:
//[Link]
import React, { Component } from 'react';

import UserInfo from './UserInfo'; // Adjust the path if needed

class App extends Component {

render() {

const name = 'pritesh';

const role = 'Administrator';

return (

<div>

<h1>Welcome to the Dashboard</h1>

<UserInfo name={name} role={role} />

</div>

);

export default App;

//[Link]

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

import React, { Component } from 'react';

class UserInfo extends Component {

render() {

return (

<div>

<h2>User Informa on</h2>

<p><strong>Name:</strong> {[Link]}</p>

<p><strong>Role:</strong> {[Link]}</p>

</div>

);

export default UserInfo;

Output:

(c).
Code:
//[Link]
import React from 'react';

import Student from './student'; // Make sure the path is correct

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

const App = () => {

// Student data object

const studentData = {

name: 'Pritesh',

Semester: 5,

Id: 026

};

return (

<div>

<h1>Welcome to CGPIT!!</h1>

{/* Pass data as props to Student component */}

<Student

name={[Link]}

Semester={[Link]}

Id={[Link]}

/>

</div>

);

};

export default App;

//[Link]
import React from 'react';

const Student = ({ name, Semester, Id }) => {

return (

<div>

<h2>Student Details</h2>

<p><strong>Name:</strong> {name}</p>

<p><strong>Semester:</strong> {Semester}</p>

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

<p><strong>Id:</strong> {Id}</p>

</div>

);

};

export default Student;

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

Prac cal-3
Aim: Implement “Hello World” program in [Link].
Code:

// [Link]
[Link]("Hello, World!");

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

Prac cal-4
Aim: Create a simple web server using the HTTP module in [Link].
Code:
// Load the HTTP module
const h p = require('h p');
// Define server port and hostname
const hostname = 'localhost';

const port = 3000;


// Create the server
const server = h [Link]((req, res) => {
// Set the response HTTP header
[Link] = 200;
[Link]('Content-Type', 'text/plain');
// Send the response body
[Link]('Hello, CGPIT! This is a simple IT Department Server.');
});
// Start listening on the specified port
[Link](port, hostname, () => {
[Link](`Server running at h p://${hostname}:${port}/`);
});

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

Prac cal-5
Aim: a. Create a func onal component to perform increment and decrement
opera on onclick event by using useState in Reactjs.
b. Create a class component to update state onclick event in Reactjs.
(a).
Code:
//[Link]
import React from 'react';
import Counter from './Counter'; // Adjust the path if needed
const App = () => {
return (
<div>
<h1>Welcome to the Counter App</h1>
<Counter />
</div>
);
};
export default App;

//[Link]
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
// Func on to increase count
const increment = () => {
setCount(count + 1);
};
// Func on to decrease count

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

const decrement = () => {


setCount(count - 1);
};
return (

<div style={{ textAlign: 'center', marginTop: '50px' }}>


<h2>Counter</h2>
<p style={{ fontSize: '24px' }}>Count: {count}</p>
<bu on onClick={increment} style={{ marginRight: '10px' }}>Increment</bu on>
<bu on onClick={decrement}>Decrement</bu on>
</div>
);
};
export default Counter;

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

(b).
Code:
//[Link]
import React from 'react';
import Profile from './Profile'; // Adjust path as needed
const App = () => {
return (
<div>
<h1>Welcome to the Profile Manager</h1>
<Profile />
</div>
);
};
export default App;

//Profi[Link]
import React, { Component } from 'react';
class Profile extends Component {
constructor(props) {
super(props);
// Ini al state
[Link] = {
name: 'Pritesh',

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

role: 'Administrator',
status: 'View Profile'

};
}
// Method to update profile status
updateProfile = () => {
[Link]({
status: 'Profile Updated'
});
};
render() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>User Profile</h2>
<p><strong>Name:</strong> {[Link]}</p>
<p><strong>Role:</strong> {[Link]}</p>
<p><strong>Status:</strong> {[Link]}</p>
<bu on onClick={[Link]file}>Update Profile</bu on>
</div>
);
}
}
export default Profile;

Output:

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2
Enrollment No:202303103510026

UTU/CGPIT/IT/SEM-05/FSD/IT5024 1.2

You might also like