Scribd
Upload
99 views

Aim: Create A "Hello World" Program Using ES6 Arrow Function in React

This document contains summaries of three React programming practical assignments: 1. Create a "Hello World" program using an ES6 arrow function. 2. Create two functional components: a) Displays an alert message on click, b) Displays IDs and names from a list of persons. 3. Implement a "Hello World" program in Node.js by logging "Hello World" to the console.

Uploaded by

sarthikbdobariya12
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
99 views

Aim: Create A "Hello World" Program Using ES6 Arrow Function in React

This document contains summaries of three React programming practical assignments: 1. Create a "Hello World" program using an ES6 arrow function. 2. Create two functional components: a) Displays an alert message on click, b) Displays IDs and names from a list of persons. 3. Implement a "Hello World" program in Node.js by logging "Hello World" to the console.

Uploaded by

sarthikbdobariya12
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
You are on page 1/ 5

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

You might also like