# IP UT1 QB
## 3 Marks Questions:
### i) Write short notes on:
#### URI
URI stands for **Uniform Resouorce Identifier**
It is a sequence of characters that distinguishes one resource from another.
A URI can be two types:
- Uniform Resource Locator (URL)
- Uniform Resource Name (URN)
#### URL
URL stands for Uniform Resource Locator
It is the address of a resource, which can be a specific webpage or a file, on the internet.
It is also known as web address which it is used with http protocol.
It was created in 1994 by Tim Berners-Lee
URL is a specific character string that is used to access data from the Wold Wide Web(WWW).
It is a subset of Uniform Resource Identifier (URI)
Every URL contains the following information:
- The scheme name or protocol.
- A colon, two slashes.
- A host, normally called domain name but sometimes as a literal IP address with a colon followed by a port number.
- Full path of the resource.
Example of URL: `https://example.com/file-path`
- protocol: `https`
- host or domain: `example.com`
- Path: `file-path`
#### DOM
The Document Object Model (DOM) is a programming interface for web documents.
The Document Object Mode (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.
**HTML DOM Tree of Objects**
### ii) What is react props? Give a suitable example?
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.
```jsx
const ele = <Car brand="Ford" />;
function Car(props) {
return <h1>I am a buying { props.brand } car.</h1>;
}
```
### iii) What is HTTP and HTTPS explain?
#### HTTP
HTTP is abbrieviation of Hypertext Transfer Protocol Secure.
HTTP is the most popular application protocol used in the internet.
It is a client-server protocol which means requests are initiated by the recipient, usually the web browser.
An HTTP client sends a request message to an HTTP server. The server in turn, return a response message.
HTTP is a stateless protocal. In other words, the current request does not know what has been done in the previous requests.
#### HTTPS
HTTPS is abbreviation of Hypertext Transfer Protocol Secure.
It is a secure extension or version of HTTP.
This protocol uses the 443 port number for communication the data.
This protocol is also called HTTP over SSL because the HTTPS communication protocols are encrypted using the SSL (Secure Socket Layer).
### iv) Explain the steps to create react app?
1. To run React app we first need to install NodeJS by going to it's website download section.
2. By installing NodeJS the NPM (Node Package Manager) automatically comes pre-install.
3. To create our react app we use `create-react-app` package.
```sh
npx create-react-app my-app
cd my-app
```
4. To run react app run `npm start` in terminal, this will start our app on `localhost:8080`.
5. Open the `localhost:8080` in the browser.
6. To change something, we can edit `App.jsx` file in `my-app` folder.
### v) Explain React DOM?
React DOM is a JavaScript library that helps you reader React components to the DOM.
It is port of the React library and is usedd to create user interfaces and dynamic web applications.
React DOM provides a number of methods for rendering React components to the DOM, including:
- `render()`: Renders a component to the DOM.
- `hydrate()`: Updates component with the latest state.
- `unmount()`: Remove component from the DOM.
React DOM also provides a number of other methods for interacting with the DOM, such as:
- `findDOMNode()`: Returns the DOM node that corresponds to a React component.
- `on()`: Attaches an event listener to a DOM node.
- `findDOMNode()`: Removes an event listener from a DOM node.
## 2 Marks Questions:
### i) Explain working of web Browser?
A web browser takes you anywhere on the internet.
It retrieves information form other parts of the web and displays it on your desktop or mobile devices.
The information is transferred using the Hypertext Transfer Protocol (HTTP), which defines hows text, images and video and transmitted on the web.
The web browse is an application software to explore WWW (World Wide Web). It provides an interface between the server an the client and requests to the server for web documents and services.
### ii) Write notes on loops in JavaScript?
A loop is a programming cocntruct that repeats a block of code until a specified condition is met.
Types of loops in JS:
- `for`
syntax:
```js
for (initialization; condition; increment) {
// block of code
}
```
- `while`
syntax:
```js
while (condition) {
// block of code
}
```
- `do...while`
```js
do {
// block of code
} while (condition)
```
- `for...of`
```js
for (variable of iterable) {
// block of code
}
```
### iii) Differentiate ES5 and ES6?
ES5 and ES6 are two version of ECMAScript standard which is a specification for the JavaScript programming language.
ES6 introduces many new features that make JavaScript more powerful, here is list of them:
- Classes
- Modules
- Arrow functions
- Spread operator
- Destructuring assignment
- Symbols
- Template literals
- Default parameters
- Rest parameters
- Iterators and generators
- Promises
- Proxy
### iv) Explain JavaScript DOM.
The Document Object Model (DOM) is an application programming interface (API) for manipulating HTML documents.
The DOM represents an HTML document as a tree of nodes. The DOM provides functions that allow you to add, remove, and modify parts of the document effectively.
## 5 Marks Questions:
### i) Explain arrow function in ES6 with Example?
Arrow function is one of the features introduced in the ES6 version of JavaScript.
It allows you to create function in a cleaner way compared to regular function.
```js
const add = (x, y) => x + y;
add(1, 2);
```
Output:
```
3
```
### ii) Write notes on:
#### Classes in JavaScript
Classes introduced in the ES6 version of JavaScript.
A class is a blueprint for the object. You can create an object from the class.
Classes in JS are built on prototypes but also have some syntax and semantics that are unique to classes.
Basic example of classes in JavaScript
```js
class Rectangle {
constructor(h, w){
this.h = h;
this.w = w;
}
}
```
#### Inheritance
Inheritance enables you to define a class that takes all the functionality from a parent class and allows you to add more.
To use class inheritance, you can use the `extends` keyword.
```js
class Person {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello ${this.name}`)
}
}
class Student extends Person {}
const student = new Student("Jack");
student.greet()
```
Output:
```
Hello Jack
```
#### Conditions in JavaScript
Conditional statements control behavior in JavaScript and determine whether or not pieces of code can run.
There are multiple different types of conditionals in JavaScript:
- **If:** Where if a condition is true it is used to specify execution for a block of code.
- **else:** Where if the same condition is false it specifies the execution for a block of code.
- **else if:** This specifies a new test if the first condition is false.
```js
const a = 1;
if (a === 1) {
console.log("A is 1")
} else if (a === 2) {
console.log("A is 2")
} else {
console.log("A is None")
}
```
Output
```
A is 1
```
### iii) Explain React components and its types with examples?
Components are like function that return HTML elements.
Components are independent and reusable bits or code.
They serve the same purpose as JavaScript function, but work in isolation and return HTML.
Components come in tow types:
- Class Components
- Function Components
#### Class Components
A class component must include the extends `React.Component` statement.
This statement creates an inheritance to `React.Component`, and gives your component access to `React.Component's` function.
The component also requires a render() method, this method returns HTML.
```jsx
class Car extends React.Component {
render() {
return <h1>Hi, I am a Car.</h1>
}
}
```
#### Function Components
A Function Component also returns HTML, and behaves much the same way as a Class component.
These are simply JavaScript function.
We can create a function component to React by writing a JavaScript function.
```jsx
function Car() {
return <h2>Hi, I am also a Car!</h2>
}
```
### iv) What is React router. Explain with an example?
React Router is a standard library for routing in React.
It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.
**Example**
Home.jsx
```jsx
import React from 'react';
export default function Home () {
return <h1>This is Home Page.</h1>
}
```
About.jsx
```jsx
import React from 'react';
export default function About () {
return <h1>This is About Page.</h1>
}
```
Contact.jsx
```jsx
import React from 'react';
export default function Contact () {
return <h1>This is Contact Page.</h1>
}
```
App.jsx
```jsx
import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
export default function App () {
return(
<Router>
<ul>
<Link to="/">Home</Link>
<Link to="/About">About</Link>
<Link to="/Contact">Contact</Link>
</ul>
<Routes>
<Route exact path='/' element={<Home />}></Route>
<Route exact path='/about' element={<About />}></Route>
<Route exact path='/contact' element={<Contact />}></Route>
</Routes>
</Router>
)
}
```
### v) Explain React Component life cycle?
**Mounting** - Means putting elements into the DOM.
**Updating** - The next phase in the life-cycle is when a component is updated. A component is updated whenever there is a change in the component's state or props.
**Unmounting** - The next phase in the life-cycle is when a component is removed from the
DOM.
**Example**
Code:
```jsx
class Header extends React.Component {
constructor(props) {
super(props);
this.state.color = "Blue";
}
static getDerivedStateFromProps(props, state) {
return { color: props.col };
}
render() {
return <h1>My favorite color is { this.state.color }.</h1>
}
}
ReactDom.render(<Header col="Yellow" />, document.getElementById("root"))
```
Output:
```
My favorite color is Yellow.
```
Sign in with Wallet
Connect another wallet