Scribd
Upload
23 views7 pages

Advance Web Assignment 1 To 8

Uploaded by

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

Advance Web Assignment 1 To 8

Uploaded by

The RockyFF
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

LAB PRACTICAL 1 TO 8

ADVANCE WEB TECHNOLOGY BY ROSHANI


MALI MAM.

NAME: NAFIS PARWEZ


ENROLL NO: A710145023050
SUBJECT: ADVANCE WEB TECHNOLOGIES
COURSE: MASTERS OF COMPUTER APPLICATIONS
SESSION: 2023-2025
1.Installation and Simple Programs.

<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Add submission

2.Single page applications and use React Router to design


single page applications.

import React from 'react';


import { BrowserRouter as Router, Link, Route, Switch } from 'react-
router-dom';
import Home from './components/Home';
import About from './components/About';
import Products from './components/Products';
import Contact from './components/Contact';

const App: React.FC = () => {


return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/products">Products</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav> <Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/products" component={Products} />
<Route path="/contact" component={Contact} />
</Switch>
</Router>
);
};export default App;
import React from 'react';const Home: React.FC = () => {
return (
<div>
<h1>Home</h1>
<p>Welcome to our website!</p>
</div>
);
};export default Home;

3.Use various React features including components and


forms.

class NameForm extends React.Component {


constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) { this.setState({value: event.target.value}); }


handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}

render() {
return (
<form onSubmit={this.handleSubmit}> <label>
Name:
<input type="text" value={this.state.value}
onChange={this.handleChange} /> </label>
<input type="submit" value="Submit" />
</form>
);
}
}

4.Implement a functional front-end web application using


React.

function modulo(x) {

return function(value) {

return value % x

console.log(modulo(3)(5)) // 2

const isOdd = modulo(2)

console.log(isOdd(4)) // 0 (false)

console.log(isOdd(5)) // 1 (true)

5.Create a Dropdown Button Filter.

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput"
onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>

6.Create Basics Interactive examples using ReactJS.

class ShoppingList extends React.Component {


render() {
return (
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}

return React.createElement('div', {className: 'shopping-list'},


React.createElement('h1', /* ... h1 children ... */),
React.createElement('ul', /* ... ul children ... */)
);

class Board extends React.Component {


renderSquare(i) {
return <Square value={i} />; }
}

class Square extends React.Component {


render() {
return (
<button className="square">
{this.props.value} </button>
);
}
}

7.Demonstrate Function Components and Class Components


in reactJS.

Functional Components Class Components

Functional components are simple A class component extends from


JavaScript functions that take props as React.Component and the render
arguments and return JSX. function return the React element.

It is known as a stateless component A class component can also be referred


since it does not have any state to as a stateful component

A functional component does not Lifecycle events can be handled by


respond to a lifecycle event class components

A constructor is not supported by Provide a constructor for storing state


functional components before passing props to the parent class

React provides useState()Hook for It's a bit different for class components.
handling state functional components. The this keyword is required, along with
the setState() function and a
constructor.

Comparatively, functional components A class component is more complex: it


perform better than class components is an instance of React.Component with
a constructor.

8.Handling user events in React.

class Toggle extends React.Component {


constructor(props) {
super(props);
this.state = {isToggleOn: true};

// This binding is necessary to make `this` work in the callback


this.handleClick = this.handleClick.bind(this); }

handleClick() { this.setState(prevState => ({ isToggleOn: !


prevState.isToggleOn })); }
render() {
return (
<button onClick={this.handleClick}> {this.state.isToggleOn ? 'ON'
: 'OFF'}
</button>
);

}
}

You might also like