LAB 8
REACTJS
October 09, 2025
REACT
▪ React (also known as React.js or ReactJS) is a free and open-source front-end
JavaScript library for building user interfaces or UI components.
▪ It is maintained by Facebook and a community of individual developers and
companies.
▪ Focus on UI
▪ Reusable code: “Write once use everywhere”
▪ It create single page application.
▪ Another advantage of this is that it allows us to divide the website into several
components.
▪ In React, we use JavaScript Extension.
2
CREATE FIRST APP
1. Install NodeJS
2. Install Visual studio code (editor)
3. To check the version of nodejs:
node --version
npm --version
4. Create app using npx
▪ Open terminal of visual studio code
▪ Go to the path where project is to be created using cd command and then run this command:
npm create-react-app <projectname>
5. Go to command prompt
▪ npm start
Note: package.json is used to store the metadata associated with the project as well as to store the list of
dependency packages.
3
CREATE FIRST APP
1. Install NodeJS
2. Install Visual studio code (editor)
3. To check the version of nodejs:
node --version
npm --version
4. Create app using npm
▪ npm install -g create-react-app
▪ create-react-app --version
▪ Go to the path where project is to be created using cd command and then run this command: create-react-app
<projectname>
5. Go to command prompt
▪ cd firstapp
▪ npm start
Note: package.json is used to store the metadata associated with the project as well as to store the list of dependency
packages.
4
Output Screen
5
HELLO WORLD PROGRAM!!!!
import React from 'react'; index.js
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello World!</h1>); OUTPUT
6
JSX – JAVASCRIPT
EXTENSION/JAVASCRIPT XML
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( JSX
<h1>Hello World!</h1>
);
ReactDOM.render('What to show', 'Where to show’)
7
WHY JSX?
▪ Declarative syntax: JSX allows you to describe what the UI should look like in a declarative way,
which makes the code more readable and maintainable.
▪ Better integration with JavaScript: JSX allows you to combine JavaScript logic and UI structure
in a seamless way.
▪ Component-based architecture: JSX enables a component-based architecture where you can
create small, reusable components that represent UI pieces. Each component can render its own
JSX, allowing you to compose a UI from smaller parts.
8
RENDER MULTIPLE ELEMENTS
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
root.render( OUTPUT
<div>
[
<h1>Hello World!</h1> <h1>Hello World!</h1>,
<p>This is a DBMS lab</p> <p>This is a DBMS lab</p>
],
</div>
);
);
Option 1 Option 2
9
EXAMPLE
import React from 'react'; <tr>
<td>John</td>
import ReactDOM from 'react-dom/client'; </tr>
const root = <tr>
ReactDOM.createRoot(document.getElementById('root')); <td>Elsa</td>
</tr>
const myelement = (
</table>
<table> );
<tr> root.render(myelement);
<th>Name</th>
OUTPUT
</tr>
10
REACT FRAGMENT
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( OUTPUT
<React.Fragment>
<h1>Hello world</h1>
<p>This is a DBMS Lab</p>
</React.Fragment>,
);
11
JAVASCRIPT EXPRESSIONS IN JSX
import React from 'react'; JavaScript
import ReactDOM from 'react-dom/client'; HTML
JavaScript {}
const name = "Amit jain";
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(
<> OUTPUT
<h1> My name is {name} </h1>
<p> After addition result is {2*4+3} </p>
<p> Random number is {Math.random()}</p>
</>,
); 12
TEMPLATE LITERALS
import React from 'react';
import ReactDOM from 'react-dom/client';
const fname = "Amit";
const lname = "Jain";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
OUTPUT
<>
<h1>{`My first name is ${fname}
and my last name is ${lname}`}</h1>
<p> After addition result is {2*4+3}</p>
<p> Random number is {Math.random()}</p>
</>, 13
JSX ATTRIBUTES
import React from 'react';
import ReactDOM from 'react-dom/client';
const fname = "Amit";
const root = ReactDOM.createRoot(document.getElementById('root');
root.render(
<>
It is editable
<h1 contentEditable="true">
My name is {fname} </h1>
<img src="https://picsum.photos/200/300" alt="SampleImage"/>
</>
);
14
JSX ATTRIBUTES
import React from 'react';
import ReactDOM from 'react-dom/client';
const fname = "Amit";
const links = "https://www.iiitdmj.ac.in/";
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render( Click on Image
<>
<h1 contentEditable="true"> My name is {fname} </h1>
<a href= {links} target="_Link" >
<img src="https://picsum.photos/200/300" alt ="randomImages"/>
</a>
</>
15
);
import React from 'react';
import ReactDOM from 'react-dom/client';
CSS STYLING import "./index.css"
const fname = "Amit";
index.js
*{margin: 0; padding: 0; box-sizing: border-box;} const img1 = "https://picsum.photos/200/300"
.heading{ const img2 = "https://picsum.photos/300/300"
color: #fa9191;
const root = ReactDOM.createRoot(document.getElementById('root'));
text-align: center;
root.render(
text-transform: capitalize; <>
font-weight: bold; <h1 className = "heading"> My name is {fname} </h1>
<div className = "img_div">
margin: 50px 0; <img src = {img1} alt = "randomImage" />
index.css <img src= {img2} alt ="randomImages" />
} </div>
.img_div {
</>,
display: flex; );
justify-content: center;
}
.img_div img {
width: 200px;
Output
height: 150px;
16
}
REACT COMPONENTS
▪ Components are independent and reusable bits of code.
▪ When creating a React component, the component's name must
start with an upper case letter.
▪ They serve the same purpose as JavaScript functions, but work in
isolation and return HTML via a render() function.
▪ Components come in two types:
▪ Class components
▪ Function components
17
EXAMPLE OF REACT WITHOUT
COMPONENTS
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<>
<h1> My name is Amit </h1> Output
<p>This is my world</p>
<ol>
<li> Amit </li>
<li> Jain</li>
<li> DBMS </li>
<li> Lab </li>
</ol>
</>,); 18
FUNCTION COMPONENTS
import React from 'react'; Go to src □ New file □ Heading.jsx
Go to src □ New file □ Para.jsx
import ReactDOM from 'react-dom/client';
Go to src □ New file □ List.jsx
import Heading from "./Heading";
Name should start
import Para from "./Para"; with capital letters
import List from "./List"
const root = ReactDOM.createRoot(document.getElementById('root')); Heading.jsx
root.render(
<> import React from 'react';
index.js function Heading()
<Heading></Heading>
{
<Para></Para> return <h1>My name is Amit </h1>;
<List></List> }
</>,
export default Heading;
);
19
import React from "react";
function List(){
return (
<ol> import React from 'react';
Para.jsx
function Para(){
<li> Amit </li> return <p>This is my world</p>;
List.jsx }
<li> Jain</li>
export default Para;
<li> DBMS </li>
<li> Lab </li> Output
</ol>
);
}
export default List;
20
CLASS COMPONENTS
import React from 'react';
import ReactDOM from 'react-dom/client’;
const root = ReactDOM.createRoot(document.getElementById('root'));
The component has to include the extends React.Component
class Car extends React.Component { statement, this statement creates an inheritance to
render(){ React.Component, and gives your component access to
React.Component's functions.
return <h2>Hi, This is a Car!</h2>;
The component also requires a render() method, this method
} returns HTML.
} Output
root.render(<Car/>);
21
REACT PROPS
▪ Props are arguments passed into React components.
▪ Props are passed to components via HTML attributes.
▪ React
Props are like function arguments in JavaScript and attributes
in HTML.
▪ To send props into a component, use the same syntax as HTML
attributes
▪ Props are also how you pass data from one component to another,
as parameters.
22
TIC TAC TOE EXAMPLE
import React from 'react'; class Game extends React.Component {
import ReactDOM from 'react-dom/client'; render() {
const root = return (
ReactDOM.createRoot(document.getElementById('root'));
<Board />
class Square extends React.Component{
);
render(){
}
return(
}
<button className="square">
root.render(<Game/>);
{this.props.value}
</button>);
}
}
23
class Board extends React.Component {
renderSquare(i){
return <Square value={i} />;}
render(){
const status = 'Next player: X';
return(
<div>
<div className="status">{status}</div>
Output
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div> );
}
} 24
REACT STATE
▪ React components has a built-in state object.
▪ The state object is where you store property values that belongs to
the component.
▪ When the state object changes, the component re-renders.
▪ const [current data, updated data] = Initial value
25
REACT HOOKS
▪ Hooks are the new feature introduced in the React 16.8 version.
▪ It allows you to use state and other React features without writing a
class. Hooks are the functions which “hook into” React state and
lifecycle features from function components.
▪ It does not work inside classes.
▪ Hooks should always be used at the top level of the React
functions.
▪ Node version 6 or above. NPM version 5.2 or above.
26
EXAMPLE
import React, { useState } from "react"; import React from 'react';
const App = () => { import ReactDOM from 'react-dom/client';
import "./index.css";
const state = useState();
import App from "./App";
const[count, setCount] = useState(0);
const IncNum = () => { const root = ReactDOM.createRoot(document.getElementById('root'));
setCount(count+1); root.render(<App/>);
};
App.js index.js
return (
<>
<h1>{count}</h1>
<button onClick = {IncNum}> Click Me</button>
</> );
};
export default App; 27
*{ h1{
box-sizing: border-box; color: white;
background: transparent;
padding: 0; text-shadow: 0 2px 2px black;
}
margin: 0;
background-color: #d2dbdd; button{
padding: 12px 20px;
} background: #9b59b6;
color: white;
div{ border: 2px solid #ecf0f1;
outline: none;
width: 100%; border-radius: 5px;
text-transform: uppercase;
height: 100vh;
cursor: pointer;
background: #8e44ad; } OUTPUT
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
index.css 28
REACT EVENTS
▪ Just like HTML, React can perform actions based on
user events.
▪ React has the same events as HTML: click, change,
mouseover etc.
29
ONCLICK AND ONDOUBLECLICK
import React, {useState} from "react";
const App = () => {
const purple = "#8e44ad";
const[bg, setBg] = useState(purple);
const [name, setName] = useState('Click Me’);
import React from 'react'; const bgChange = () => {
import ReactDOM from 'react-dom/client'; let newBg = 'pink';
import "./index.css"; setBg(newBg);
import App from "./App"; setName (“Submit!!”); };
App.js
const bgBack = () => {
const root =
setBg(purple);
ReactDOM.createRoot(document.getElementById('root');
setName("Back!!");
root.render(<App/>); }
return (<>
<div style = { { backgroundColor: bg} }>
index.js <button onClick = {bgChange} onDoubleClick = {bgBack}> {name}</but
ton>
</div>
</> );} 30
export default App;
index.css
*{
box-sizing: border-box; h1{
color: white;
padding: 0; background: transparent;
text-shadow: 0 2px 2px black;
margin: 0; }
background-color: #d2dbdd;
button{
} padding: 12px 20px;
background: #9b59b6;
color: white;
div{ border: 2px solid #ecf0f1;
width: 100%; outline: none;
border-radius: 5px;
height: 100vh; text-transform: uppercase;
background: #8e44ad; cursor: pointer;
}
display: flex; Output
flex-direction: column;
justify-content: center;
align-items: center;
}
31
FORMS IN REACTJS
*{ h1{ button{
box-sizing: border-box; color: white; line-height: 24px;
background: transparent; padding: 0px 20px;
padding: 0; text-shadow: 0 2px 2px black; background: #9b59b6;
} color: white;
margin: 0;
border: 2px solid #ecf0f1;
background-color: #d2dbdd; input { outline: none;
width: 50%; border-radius: 5px;
} padding: 10px 20px; text-transform: uppercase;
div{ border: none; cursor: pointer;
outline: none; }
width: 100%; margin: 20px 0;
height: 100vh; text-align: center;
}
background: #8e44ad;
display: flex;
flex-direction: column;
index.css
justify-content: center;
align-items: center;
32
}
App.js
import React, {useState} from "react"; const onSubmit = () =>{ import React from 'react';
setFullName(name); import ReactDOM from 'react-dom/client';
}; import "./index.css";
const App = () => {
import App from "./App";
const [name, setName] = useState(); return (
<> const root =
const [fullName, setFullName] = useState();
<div > ReactDOM.createRoot(document.getElementById('root'));
const inputEvent = (event) => { <h1> Hello {fullName} </h1>
console.log(event.target.value); <input type="text" root.render(<App/>);
setName(event.target.value); placeholder="Enter your name"
onChange = {inputEvent}
}; index.js
value = {name}
/>
<button onClick = {onSubmit} onSubmit>
Click Me </button>
</div>
</>
);
}
export default App;
33
Output
34
EXAMPLE 2
*{ input { import React from 'react';
box-sizing: border-box; width: 90%; import ReactDOM from 'react-dom/client';
padding: 0; padding: 10px 20px;
margin: 0; border: none; import "./index.css";
background-color: #d2dbdd; outline: none;
} import App from "./App";
margin: 20px 0;
text-align: center; const root = ReactDOM.createRoot(document.getElementById('root'));
div{ }
width: 100%; root.render(<App/>);
height: 100vh; button{
background: #8e44ad; line-height: 24px;
display: flex; padding: 0px 20px;
flex-direction: column; background: #9b59b6;
justify-content: center; color: white;
align-items: center; border: 2px solid #ecf0f1;
} outline: none; index.js
border-radius: 5px;
h1{ text-transform: uppercase;
color: white; cursor: pointer;
background: transparent; }
text-shadow: 0 2px 2px black;
} index.css 35
import React, {useState} from "react"; return (
const App = () => { <>
<div className = "main_div">
const [name, setName] = useState();
<form onSubmit={onSubmit}>
const [lastName, setLastName] = useState(""); <div >
<h1> Hello {fullName} {lastNamenew}</h1>
const [fullName, setFullName] = useState();
<input type="text"
const [lastNamenew, setLastNameNew] = useState(); placeholder="Enter your name"
onChange = {inputEvent}
const inputEvent = (event) => { value = {name}
console.log(event.target.value); />
<br/>
setName(event.target.value); <input type="text"
placeholder="Enter your Last Name"
}; onChange = {inputEventTwo}
const onSubmit = (event) =>{ value = {lastName}
event.preventDefault(); />
<button type="submit" onClick={onSubmit}> Submit Me </button>
setFullName(name); </div>
setLastNameNew(lastName); </form>
</div>
};
const inputEventTwo = (event) => { </>
);
setLastName(event.target.value); } App.js
};
export default App;
36
Output
37
