SRI KRISHNA COLLEGE OF ENGINEERING AND TECHNOLOGY
(AN AUTONOMOUS INSTITUTION,
AFFILIATED TO ANNA UNIVERSITY, CHENNAI)
COIMBATORE – 641008
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
21IT301- WEB DEVELOPMENT USING REACT
LABORATORY
CONTINUOUS ASSESSMENT RECORD
Submitted by
Name: ……….…………………..……………..
Register No. : ………….……………….………
Degree & Branch: ………….………………..…
Class & Semester: ………….……………….…
Academic Year: ………….……………….…….
SRI KRISHNA COLLEGE OF ENGINEERING AND TECHNOLOGY
(AN AUTONOMOUS INSTITUTION,
AFFILIATED TO ANNA UNIVERSITY, CHENNAI)
COIMBATORE – 641008
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
21IT301- WEB DEVELOPMENT USING REACT
LABORATORY
Continuous Assessment Record
Submitted by
Name : ……..…….……………………..………… Register No. : .............……………………
Class/Semester :…………………………………. Degree & Branch: ……………………………..
BONAFIDE CERTIFICATE
This is to certify that this record is the bonafide record of work done by Mr./Ms.
during the academic year 2022 – 2023.
Faculty In-charge Head of the Department
Submitted for the University practical examination held on
INTERNAL EXAMINER EXTERNAL EXAMINER
SRI KRISHNA COLLEGE OF ENGINEERING AND
TECHNOLOGY
(AN AUTONOMOUS INSTITUTION,
AFFILIATED TO ANNA UNIVERSITY, CHENNAI)
COIMBATORE – 641008
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
21IT301- WEB DEVELOPMENT USING REACT
LABORATORY
Record of laboratory work
ODD SEMESTER - 2022-2023
[Link] Maheswari
Dr. [Link] /
Name of the Faculty
Dr. [Link]
[Link]
CONTINUOUS EVALUATION SHEET
REFERENCES RUBRICS TABLE
Range of Marks
Criteria Below
Excellent Good Average
Average
Objective & Description
with sample data (20)
18-20 17-18 15-16 0-14
Formation of 27-30 21-26 15-20 0-14
Program (30)
Execution and Testing (30)
27-30 21-26 15-20 0-14
Documentation (10) 9-10 7-8 5-6 0-4
Viva (10) 9-10 7-8 5-6 0-4
Overall Marks 90-100 70-89 50-69 0-49
INDEX
Page
[Link] Name of the Experiment No. Marks Signature
a. Study of React Installation and Terminal
1 Commands
b. Demonstration of a Stateless Functional
Component
Demonstration of Stateful Class Component
2
Implementation of Conditional Rendering using Class
3 Component
Implementation of Communication between Parent
4 and child Components
5 Designing a Registration Form with material UI
6 Design a Custom Navigation bar using React
Implementation of React component to handle HTTP
7 requests
Implementation of a Dropdown component using
8 React
Implementation of Routing in React
9
Implementation of FORM validation in React
10
SRI KRISHNA COLLEGE OF ENGINEERING AND
TECHNOLOGY
COIMBATORE – 641008
(AN AUTONOMOUS INSTITUTION, AFFILIATED TO ANNA UNIVERSITY, CHENNAI)
DEPARTMENT OF COMPUTER SCIENCE AND
ENGINEERING
21IT301- WEB DEVELOPMENT USING
REACT
LABORATORY
ODD SEMESTER: 2022-2023
Components EX1 EX2 EX3 EX4 EX5 EX6 EX7 EX8 EX9 EX10
Objective &
Description with
sample data
(20 Marks)
Formation of
Program
(30 Marks)
Execution and
Testing
(30 Marks)
Documentation
(10 Marks)
Viva
(10 Marks)
TOTAL
AVERAGE
Consolidated Mark (100)
Faculty Signature
1.a)Study of React Installation and Terminal Commands
Objective
To install the node js.
System and software tools required
● Visual Studio Code
Definitions /Theory/ Steps
1. Open the browser in your computer.
2. Download the node js from the browser.
3. And set up the node js .
4. Type the command “node -v” to see the version of node and “npm -v” to see the
version of
npm(Node Package Manager).
5. Open the terminal in VS Code and type the command “npx create-react-app
my_react” to create the new react app.
6. To start the react app type the command “npm start”.
7. You can use the command “npm cache clean –force” to clear the cache in react
app.
8. Now the react app will open in the browser.
React app:
1
1.b) Demonstration of a Stateless Functional Component
Objective
To Study the Stateless Functional Component.
System and software tools required
● Visual Studio Code
Description
A React functional component is a simple JavaScript function that accepts props and returns a
React element. After the introduction of React Hooks, writing functional components has become
the standard way of writing React components in modern applications.
Algorithm
1. Create the new js file name it as [Link].
2. Create the new function component and name it as demo in fcomponent.
3. Inside the function componentreturn the html element.
4. And export the function component demo.
5. Now import the function component from fcomponent file.
6. Inside the [Link] use the component.
7. Now the output will display in the react app.
Program
[Link]:
import React from 'react'
function demo() {
return(
<div>
<h1>Hello everyone, Welcome to react.</h1>
</div>
)
}
export default demo
[Link]:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Fcomponent from './fcomponent';
const root = [Link]([Link]('root'));
2
[Link](
<[Link]>
<Fcomponent/>
</[Link]>
);
Sample Output
Result
Thus the function component is successfully implemented.
3
2. Demonstration of a Statefull Class Component
Objective
To Study the Statefull Class Component.
System and software tools required
● Visual Studio Code
Description
A class component is a more featured way to define a React component. It also acts like a
function that receives props. The component has to include the extends [Link]
statement, this statement creates an inheritance to [Link], and gives your component
access to [Link]'s [Link] component also requires a render() method, this
method returns HTML
Algorithm
[Link] the new js file name it as [Link].
[Link] the new function component and name it as Demo in ccomponent.
[Link] the render function of the class componentDemo return the html element.
[Link] export the class component Demo.
5. Now import the class component from ccomponent file.
[Link] the [Link] use the component.
[Link] the output will display in the react app.
Program
[Link]:
import React from 'react'
class Ccomponent extends [Link] {
state = { }
render() {
return (
<div>
<h1>Class Component:</h1>
<h2>Hello Everyone,Welcome To React</h2>
</div>
);
}
}
export default Ccomponent;
4
[Link]:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Ccomponent from './ccomponent';
const root = [Link]([Link]('root'));
[Link](
<[Link]>
<Ccomponent/>
</[Link]>
);
Sample Output
Result
Thus the Class component is successfully implemented.
5
3. Implementation of Conditional Rendering using Class Component
Objective
To Implement the Conditional Rendering using Class Component.
System and software tools required
● Visual Studio Code
Description
A conditional rendering is a piece of content that is displayed or rendered when a
predefined condition is met. You can use conditional renderings to control the way visitors view
and interact with your website.
Algorithm
[Link] the new js file name it as [Link].
[Link] the new function component and name it as Demo in conditionalrendering.
[Link] three functions,changeColor1, changeColor2 ,changeCount for changing colors
of the Buttons and text.
[Link] the render function of the class componentreturn the html Button elements.
[Link] export the class component Conditionalrendering
6. Now import the class component from conditionalrendering file.
[Link] the [Link] use the component.
[Link] the output will display in the react app.
Program
[Link]:
import React, { Component } from 'react';
import 'bootstrap/dist/css/[Link]';
class Conditionalrendering extends Component {
state = { count: 0 ,name:"Zero"}
changeCount(){
if([Link]===0 )
return"Zero";
else if([Link]===10)
return"Ten";
else
return [Link];
6
}
changeColor1(){
let str="btn btn-";
if([Link]===0){
str+="danger";
}
else {
str+="success";
}
return str;
}
changeColor2(){
let str="btn btn-";
if([Link]===10){
str+="danger";
}
else {
str+="success";
}
return str;
}
render() {
return (<div style={{textAlign:'center',padding:50}}>
<h1 style={{padding:100}}> Conditional Rendering:</h1>
<button className={this.changeColor1()}style={{width:100,height:50}}
disabled={[Link]===0} onClick={() =>
{ [Link]({ count: [Link] - 1 }) }}>- </button>
<span style={{padding:50,fontSize:27}}>{[Link]()}</span>
<button className={this.changeColor2()}
style={{width:100,height:50}}disabled={[Link]===10}
onClick={() => { [Link]({ count: [Link] + 1 }) }}>+</button>
</div>);
}
}
export default Conditionalrendering;
7
[Link]:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Conditional from './conditional';
const root = [Link]([Link]('root'));
[Link](
<[Link]>
<Conditional/>
</[Link]>);
Sample Output
Result:
Thus the conditional rendering is successfully implemented.
8
[Link] of Communication between Parent and child Components
Objective
To Implement the Communication between Parent and Child Component.
System and software tools required
● Visual Studio Code
Description
In React parent components can communicate to child components using a special
property defined by React called as Props. All the components in React will be having this proper
defined by default which will hold all the properties as key value pairs that are sent from the
parent component.
Algorithm
[Link] the new js file names them as [Link],[Link].
[Link] the new class component and name it as Child in [Link] and return the html
elements..
[Link] the render function of the class componentit should return the html element.
[Link] export the class component Child.
5. Now import the class component from child file.
[Link] the render function of the parent’s class component it should return the child
component
[Link] the output will display in the react app.
Program
[Link]:
import React from 'react';
import Child from './child';
class Parent extends [Link]{
state = {
name: "",
}
handleCallback = (childData) =>{
[Link]({name: childData})
}
render(){
const {name} = [Link];
return(
<div style={{textAlign:'center'}}>
9
<h1>Child and Parent Components</h1>
<Child parentCallback = {[Link]}/>
{name}
</div>
)
}
}
export default Parent;
[Link]:
import React from 'react'
class Child extends [Link]{
onTrigger = (event) => {
[Link]([Link]);
[Link]();
}
render(){
return(
<div>
<form onSubmit = {[Link]}>
<input type = "text"
name = "myname" placeholder = "Enter Name"/>
<br></br><br></br>
<input type = "submit" value = "Submit"/>
<br></br><br></br>
</form>
</div>
)
}
}
export default Child
[Link]:
import React from 'react';
import ReactDOM from 'react-dom/client';
import Parent from './parentchild';
const root = [Link]([Link]('root'));
[Link](
<[Link]>
<Parentt/>
</[Link]>
);
10
Sample Output
Result:
Thus the conditional rendering is successfully implemented.
11
5. Create material UI Card using React
Objective
To Create the material UI Card using React.
System and software tools required
● Visual Studio Code
Description
A react card component is a content container. It incorporates options for images, headers, and
footers, a wide variety of content, contextual background colors, and excellent display options.
Algorithm
1. Create the [Link].
2. Create the new function component and name it as a demo.
3. Inside the function component return the html element.
4. And export the function component demo.
5. Now import the function component from UiCrd file.
6. Inside the [Link] use the component.
7. Now the output will display in the react app.
Program
import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
export default function MediaCard() {
12
return (
<Card sx={{ maxWidth: 345 }}>
<CardMedia
component="img"
height="140"
image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/EBnda3IIUzAJDMXe9
0eQQqbmJJyyw5uaqPyjJYna8yYStYSTmNCA+agBA+EsBXjrWNR0VxSpiJqlAODLDgubLLU
o1vHdFxb9CHlUqXubGSaJ5DygjhNkonoClKUChbhm+HIqrg6iA8nEpDB/A7o1HR+ozCu938Ij
mTMIp82Ckl+ /rjE3wp5woUA1wVtTHRbthQoZPY2ZeI4UKGhM//2Q=="
alt="green iguana"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
SKCET
</Typography>
<Typography variant="body2" color="[Link]">
SKCET is one of the finest colleges in South [Link] is well known for it's infrastructure,
academics and the placements offered. With Asia's second-largest library, SKCET is well -known
for it's architecture and maintenance.
</Typography>
</CardContent>
<CardActions>
<Button size="small">Share</Button>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
);
}
13
Sample Output:
RESULT
Thus the Program is Executed Successfully.
14
6. Design a Custom Navigation bar using React
Objective
To Design a Custom Navigation bar using React.
System and software tools required
● Visual Studio Code
Description
Bootstrap navbar is a horizontal navigation component which apart from traditional, text links,
might embed icons, dropdowns, avatars or search forms.
Algorithm
1. Create the [Link] file .
2. Create the new function component and name it as ResponsiveAppBar in navbar.
3. Inside the function component return the html element.
4. And export the function component ResponsiveAppBar.
5. Now import the function component from navbar file in [Link] file.
6. Inside the [Link] use the component.
7. Now the output will display in the react app.
Program
import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
15
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import AdbIcon from '@mui/icons-material/Adb';
const pages = ['Products', 'Pricing', 'Blog'];
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
function ResponsiveAppBar() {
const [anchorElNav, setAnchorElNav] = [Link](null);
const [anchorElUser, setAnchorElUser] = [Link](null);
const handleOpenNavMenu = (event) => {
setAnchorElNav([Link]);
};
const handleOpenUserMenu = (event) => {
setAnchorElUser([Link]);
};
const handleCloseNavMenu = () => {
setAnchorElNav(null);
};
const handleCloseUserMenu = () => {
setAnchorElUser(null);
};
16
return (
<AppBar position="static">
<Container maxWidth="xl">
<Toolbar disableGutters>
<AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
<Typography
variant="h6" noWrap
component="a"
href="/" sx={{ mr:
2,
display: { xs: 'none', md: 'flex' },
fontFamily: 'monospace',
fontWeight: 700, letterSpacing:
'.3rem', color:
'inherit', textDecoration:
'none',
}}
>
SKCET
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
<IconButton
size="large"
aria-label="account of current user"
17
aria-controls="menu-appbar" ariahaspopup="true"
onClick={handleOpenNavMenu} color="inherit"
>
<MenuIcon />
</IconButton>
<Menu id="menuappbar"
anchorEl={anchorElNav}
anchorOrigin={{ vertical:
'bottom', horizontal:
'left',
}}
keepMounted
transformOrigin={{ vertical:
'top', horizontal:
'left',
}}
open={Boolean(anchorElNav)}
onClose={handleCloseNavMenu} sx={{ display: { xs: 'block',
md: 'none' },
}}
>
{[Link]((page) => (
<MenuItem key={page} onClick={handleCloseNavMenu}>
<Typography textAlign="center">{page}</Typography>
</MenuItem>
))}
18
</Menu>
</Box>
<AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
<Typography
variant="h5" noWrap
component="a"
href="" sx={{ mr:
2,
display: { xs: 'flex', md: 'none' },
flexGrow: 1, fontFamily: 'monospace',
fontWeight: 700, letterSpacing:
'.3rem',
color: 'inherit',
textDecoration: 'none',
}}
>
SKCET
</Typography>
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
{[Link]((page) => (
<Button
key={page}
onClick={handleCloseNavMenu}
sx={{ my: 2, color: 'white', display: 'block' }}
>
{page}
19
</Button>
))}
</Box>
<Box sx={{ flexGrow: 0 }}>
<Tooltip title="Open settings">
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/[Link]" />
</IconButton>
</Tooltip>
<Menu sx={{ mt:
'45px' }} id="menuappbar"
anchorEl={anchorElUser}
anchorOrigin={{ vertical:
'top', horizontal: 'right',
}}
keepMounted
transformOrigin={{ vertical:
'top', horizontal:
'right',
}}
open={Boolean(anchorElUser)}
onClose={handleCloseUserMenu}
>
{[Link]((setting) => (
<MenuItem key={setting} onClick={handleCloseUserMenu}>
20
<Typography textAlign="center">{setting}</Typography>
</MenuItem>
))}
</Menu>
</Box>
</Toolbar>
</Container>
</AppBar>
);
export default ResponsiveAppBar;
[Link]
import React from 'react'
import Hello from'./over';
import Card from './button';
import UpdatedComponent from './update';
import './[Link]';
import ResponsiveAppBar from './navbar';
function App(){
return(
<ResponsiveAppBar/>
);
21
export default App
Output
Result
Thus the program is Executed Successfully.
22
[Link] of React component to handle HTTP requests
Objective
To implement a React component to handle HTTP requests.
System and software tools required
● Visual Studio Code
Description
Most useful React applications involve interacting with a server to load and persist data. To do
this on the web, we use HTTP requests with the browser’s built-in fetch API (or you may use
some other open source library that’s built on top of this API).
Algorithm
1. Create the [Link] file .
2. Create the new function component and name it as FectchAPI in fetch.
3. Inside the function component return the html element.
4. And export the function component FetchAPI.
5. Now import the function component from FetchAPI file in [Link] file.
6. Inside the [Link] use the component.
7. Now the output will display in the react app.
Program
[Link]:
import { useEffect, useState } from "react";
export default function FetchAPI(){
const [user, setUser] = useState([]);
useEffect(() => {
fetch('[Link]
.then(res => [Link]())
.then(res => setUser(res))
})
23
[Link](user)
return(
<div className="main">
{[Link](u => (
<div>{[Link]}, {[Link]}, {[Link]}</div>
))}
</div>
[Link]:
import './[Link]';
import FetchAPI from './fetch';
function App() {
return (<>
<FetchAPI />
</>);
export default App;
24
Output
Result
Thus the program is executed successfully.
25
8. Implementation of Drop-down Component using React
Objective:
To implement a Drop-down component using React.
Algorithm
[Link] a react-app using npx create-react-app appname.
[Link] cd appname and npm start to run the app.
[Link] a [Link] and [Link] in the src folder.
[Link] a dropdown input UI in the [Link] file.
[Link] the required style in [Link] file.
[Link] a dropdown menu UI in the [Link] file.
[Link]/Close dropdown menu handler in [Link] file.
[Link] select/deselect dropdown item in [Link].
[Link] create a Multi Drop-down select.
[Link] a Callback function with the selected values so that the App can do other stuff.
[Link] the [Link] file in the [Link] file and include the file inside <div> tag.
Coding:
[Link]
import Dropdown from "./main";
export default function App() {
return (
<div className="App">
<Dropdown placeHolder="Select..." />
</div>
);
}
[Link]
.dropdown-container {
text-align: left;
border: 2px solid rgb(57, 19, 196);
position: relative;
border-radius: 5px;
}
26
.dropdown-input {
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
user-select: none;
}
[Link]
import * as React from 'react';
const App = () => {
return (
<div>
<select>
<option value="fruit">Fruit</option
<option value="vegetable">Vegetable</option>
<option value="meat">Meat</option>
<option value="Groceries">Groceries</option>
<option value="Snacks">Snacks</option>
<option value="Footwears">Footwears</option>
</select>
</div>
);
};
export default App;
Output:
Result:
Hance a Drop down component using React is successfully implemented.
27
9. Implementation of Routing in React
Objective
To implement Routing in React using react-router-dom.
Algorithm
1. [Link] a react-app using npx create-react-app appname.
2. [Link] cd appname and npm start to run the app everytime.
3. [Link] react-router-dom using npm command.
4. [Link] [Link] import BrowserRouter,Routes,Route,Router from react-router-dom.
5. [Link] function App() return statement open the BrowserRouter tag.
6. [Link] the BrowserRouter tag give their specified router inside the <router> tag.
7. [Link] the <router> tag specify the Route path and element using <Route Path> tag.
8. [Link] the app using npm start.
[Link]
import './[Link]';
import './[Link]';
import Mainpage from './mainpage'
import Returnpage from './returnpage'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {
return(
<Router>
<div className='App'>
<Routes>
<Route exact path='/' element={<Mainpage />}></Route>
<Route exact path='/mainpage' element={<Mainpage />}></Route>
<Route exact path='/returnpage' element={<Returnpage />}></Route>
</Routes>
</div>
</Router>
)
}
export default App;
28
[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = [Link]('div');
[Link](<App />, div);
});
[Link]
html, body, #root, #root>div {
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100%;
}
[Link]
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './[Link]';
[Link](
<App />,
[Link]('root')
);
29
[Link]
//import React from 'react';
import "./[Link]"
import "./[Link]"
import { Link } from "react-router-dom";
const Mainpage = () => {
return (<>
<div>
<h1>This is Mainpage</h1>
<Link to="/returnpage" className="v2_21">Next Page</Link>
</div>
</>
);
};
export default Mainpage;
[Link]
.v2_21 {
top: 100px;
left: 50vh;
position: absolute;
font-family: Inter;
font-weight: Bold;
font-size: 30px;
text-align: center;
}
[Link]
import "./[Link]"
import "./[Link]"
import { Link } from "react-router-dom";
const Returnpage = () => {
return (<>
<div>
<h1>This is Next Page</h1>
<Link to='/mainpage' class="v2_21">Back to mainpage</Link>
</div>
</>
);
};
export default Returnpage;
30
[Link]
.v2_21 {
top: 100px;
left: 50vh;
position: absolute;
font-family: Inter;
font-weight: Bold;
font-size: 30px;
text-align: center;
}
31
Output:
Result:
Hence Routing is successfully implemented in React.
32
10. Implementation of form Validation in React
Objective:
To implement a form Validation in React.
Algorithm:
[Link] a react-app using npx create-react-app appname.
[Link] cd appname and npm start to run the app.
[Link], we need to update the [Link] and [Link] files.
4. The App Component will render a headline and the LoginForm Component it will create in a
moment.
5. Create the login form component.
6. The login form utilizes the usestate hook to Store the state for the form.
[Link] form State is defined, we have the onupdate field function, which is passed to a input field
as an onchange handler.
8. Further, the onSubmitForm method will be executed when the form is Submitted.
9. Finally, the LoginForm Component render a form that comprises three fields- email, Password
and Confirm password.
[Link] need to install the clsx helper. Run the Command below in the terminal.
$ npm install clsx
[Link] all validators in the [Link] file.
[Link] are going to put all the Validation logic in a custom hook called useloginForm Validator.
13. We have the ValidateForm function. It accepts an object with four properties.
form, field, errors, force TouchErrors.
14. Lastly, the SetErrors method is called with the Validation results and object with isValid flag
and errors are returned.
15. After the validate Form function, we have the onBlur Field function. It checks if the field that
was blurred is already dirty.
[Link] also had to update both onUpdateField and onSubmitForm functions
33
Coding:
1. Form validation in react [Link]
import React from 'react'; import './[Link]';
class RegisterForm extends [Link] { constructor() {
super(); [Link] = {
fields: {},
errors: {}
}
[Link] = [Link](this); [Link] =
[Link](this);
};
handleChange(e) {
let fields = [Link]; fields[[Link]] = [Link]; [Link]({
fields
});
}
submituserRegistrationForm(e) { [Link]();
if ([Link]()) { let fields = {}; fields["username"] = "";
fields["mobileno"] = "";
fields["password"] = ""; [Link]({fields:fields}); alert("Form submitted");
}
validateForm() {
let fields = [Link]; let errors = {};
let formIsValid = true; if (!fields["username"]) {
formIsValid = false;
errors["username"] = "*Please enter your username.";
}
if (typeof fields["username"] !== "undefined") {
if (!fields["username"].match(/^[a-zA-Z ]*$/)) { formIsValid = false;
errors["username"] = "*Please enter alphabet characters only.";
}
}
if (!fields["emailid"]) { formIsValid = false;
errors["emailid"] = "*Please enter your email-ID.";
}
if (!fields["mobileno"]) { formIsValid = false;
errors["mobileno"] = "*Please enter your mobile no.";
}
34
if (typeof fields["mobileno"] !== "undefined") { if (!fields["mobileno"].match(/^[0-9]{10}$/)) {
formIsValid = false;
errors["mobileno"] = "*Please enter valid mobile no.";
}
}
if (!fields["password"]) { formIsValid = false;
errors["password"] = "*Please enter your password.";
}
if (typeof fields["password"] !== "undefined") {
if (!fields["password"].match("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-
9])(?=.*[!@#\$%\^&\*])(?=.{8,})") {
formIsValid = false;
errors["password"] = "*Please enter secure and strong password.";
}
}
[Link]({ errors: errors
});
return formIsValid;
}
render() { return (
<div id="main-registration-container">
<div id="register">
<h3>Registration page</h3>
<form method="post" name="userRegistrationForm" onSubmit=
{[Link]} >
<label>Name</label>
<input type="text" name="username" value={[Link]}
onChange={[Link]} />
<div className="errorMsg">{[Link]}</div>
<label>Mobile No:</label>
<input type="text" name="mobileno" value={[Link]}
onChange={[Link]} />
<div className="errorMsg">{[Link]}</div>
<label>Password</label>
<input type="password" name="password" value={[Link]}
onChange={[Link]} />
<div className="errorMsg">{[Link]}</div>
<input type="submit" className="button" value="Register"/>
</form>
</div>
</div>
35
);
}
}
export default RegisterForm;
[Link]
import './[Link]';
import RegisterForm from '.form'; function App() {
return (
<div className="App">
<RegisterForm/>
</div>
);
}
export default App;
CSS
#register, #login {
width: 300px;
border: 1px solid #d6d7da; padding: 0px 15px 15px 15px; border-radius: 5px;
font-family: arial; line-height: 16px; color: #333333; font-size: 14px;
background: #ffffff; margin: 100px auto;
}
form label, form input { display: block;
margin-bottom: 10px; width: 90%
}
form input { padding: 10px;
border: solid 1px #BDC7D8;
.button {
background-color: #00BFFF; border-color: #3ac162; font-weight: bold; padding: 12px 15px;
color: #ffffff;
}
.errorMsg { color: #cc0000;
margin-bottom: 12px;
}
.sucessMsg { color: #6B8E23;
margin-bottom: 10px;
36
OUTPUT
Result:
Hence form validation is implemented in React.
37