Enrollment No:202103103510099

Practical-1
Aim: Create a “Hello World” program using ES6 arrow function in react.
Program:

import React from 'react';

const Hello = () =>{

return(

<div>

<h1> Hello World! </h1>

</div>

);

export default Hello;

Output:

CGPIT/6IT-A /Full Stack Development 1

Enrollment No:202103103510099

Practical-2
Aim: a. Create a functional component to display an alert message
onclick event in Reactjs.

b. Create a functional component to display id and name from a list of

persons in Reactjs.
Program:

(a)

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

function App() {
return (
<div className="main-container">
<div className="center-container">
<TodoInput/>
</div>

</div>
);
}

export default App;

TodoInput.js

import React from 'react'

import { name,age } from './moduledemo'

export default function TodoInput() {

return (
<div>

<button onClick={() => alert(`Hello ${name} is ${age} old `)}>

Click

CGPIT/6IT-A /Full Stack Development 2

Enrollment No:202103103510099

</button>
</div>

)
}

moduledemo.js

const name = "Sarthik"

const age = 19

export { name, age }

Output:

(b)

App.js

import P from "./person";

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

export default App;

CGPIT/6IT-A /Full Stack Development 3

Enrollment No:202103103510099

person.js

import React from "react";

export default function personList() {

const person = [
{
id: 1,
name: "Sarthik"
},
{
id: 2,
name: "Jeel"
}]
const plist = person.map(person => <li>Hello {person.id}:
Your user name is:{person.name}</li>)
return (
<div>
{
<ul>{plist}</ul>
}
</div>
)
}

Output:

CGPIT/6IT-A /Full Stack Development 4

Enrollment No:202103103510099

Practical-3
Aim: Implement “Hello World” program in Node.js.

Program:

console.log("Hello World");

Output:

CGPIT/6IT-A /Full Stack Development 5