HOC Example

 Create HOCHome class and write following code in it

import React, { Component } from "react";

import Counter from "./Counter";

import Hover from "./Hover";

class HOCHome extends Component {

  render() {

    return (

      <div className="container text-center mt-5">

        <div className="row">

          <Counter />

        </div>

        <div className="row mt-5">

          <Hover />

        </div>

      </div>

    );

  }

}

export default HOCHome;

Create HOC.js and write following code in it

import React from "react";

const hoc = (Component) => {

  class NewComponent extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        count: 0,

      };

    }

    updateCount = () => {

      this.setState({

        count: this.state.count + 1,

      });

    };

    render() {

      return (

        <Component count={this.state.count} updateCount={this.updateCount} />

      );

    }

  }

  return NewComponent;

};

export default hoc;

Create Counter.js and write following code in it

import React, { Component } from "react";

import hoc from "./HOC";

class Counter extends Component {

  render() {

    return (

      <div className="container">

        <p className="display-6">Clicked me {this.props.count} times</p>

        <button className="btn btn-primary" onClick={this.props.updateCount}>

          Update Count

        </button>

      </div>

    );

  }

}

export default hoc(Counter);

Create Hover.js and write following code in it

import React, { Component } from "react";

import hoc from "./HOC";

class Hover extends Component {

  render() {

    return (

      <div className="container">

        <p className="display-6 lead" onMouseOver={this.props.updateCount}>

          Hovered me {this.props.count} times

        </p>

      </div>

    );

  }

}

export default hoc(Hover);

Topic Wise Questions & Answers

 ➤ Basic UI/UX & Web Development

➤ HTML 

➤ CSS

➤ Java-Script

Basic UI/UX Questions

 1) Software application and software product : 

➢ A Software that is designed according to client requirements is known as “Application”. 

➢ A Software designed according to market requirements is known as “Software product”. 

Example : IRCTC - Application MS Office - Product

2) Types Of Applications and Products :

• Desktop :It is a stand alone application that is installed and used in the business with less user base and no remote access. 
• Web Application: It is an internet based application used for business with large user base and remote access.
• Distributed :A Distribute technology allows applications running on two different machines to share info between them.
• Gaming: It is a 2D and 3D graphics application supported to game consoles like X-Box. 
• Mobile: It is a mobile relative application that runs on android, IOS and Windows. 
• AI: It is an Artificial Intelligence application that enables automation and robotics.
• IOT: It refers to Internet Of Things, which is an embedded technology that allows remote access.

3)What Is UI ? 

➢ A Software application handles various functionalities according to the business requirements. The Functionalities are designed by using different technologies.

 ➢ The user requires special skills in handling an application designs with specific technology. Hence we provide a user friendly interface so that users can easily interact with application. It is often known as “UI”

4)What Is UX ? 

➢ UX in software application refers to user experience. 

➢ The modern applications require more UX along with the UI. 

➢ The challenges with UX in modern web applications are (a) Fluid UX (b) Unified UX 

➢ The Fluid UX enables an application to load every content on to single page. The new details are updated page. The new details are updated without reloading the page. 

➢ The Unified UX provider same experience for application across any device i.e from a mobile to browser. 

5)What are Progressive Applications ? 

A: Progressive application will provide app like experience even on a browser.

6) Network : A Computer network comprises of group of computers connecting with each other for sharing info and resources. 

7) Types of Networks : The Computer networks are categorized into 3 major types - i. LAN ( Local Area Network ) ii. MAN ( Metropolitan Area Network ) iii. WAN ( Wide Area Network )

8) Internet : It resembles a wide area network that connects computer across the world.

9)Web :  Web is a portion of internet with restricted access.  Tim Berner’s Lee introduced web in 1990.  It uses a network mechanism where client sends request and server send response. The standards of web are maintained by W3C ( World Wide Web Consortium ).

10)Web Page : Web page is a hyper text document that provide an UI for website. It allows the user to view,access and interact with resources in a website. 

 The web pages are categorized in to 2 types 1. Static Page 2. Dynamic Page

11)Static Page : 

➢ The term static refers to continuous memory. 

➢ The memory allocated for the first request the same memory will be used across other requests. 

➢ A static page contains same information to display across any no.of requests and clients. 

➢ The static pages are designed by using HTML, CSS, and Client side script. 

➢ A static page have two extensions .html, .htm. Example : home.html, about.htm

12)Dynamic Page : 

➢ The term dynamic refers to non static memory. 

➢ It is a discrete memory i.e, memory is newly allocated for every request. 

➢ A dynamic page contains information that change according to client requests, it generates a response customized for every request. 

➢ The dynamic pages are designed by using server side technologies like JSP, PHP, ASP etc, 

➢ They have the extension like .jsp, .asp, .php, .aspx. Example : results.jsp, movies.aspx, ticket.php.

13)Web application : A Web application provides an UI from where user can interact with the business. It requires server side technologies like JSP, PHP, ASP etc.

14)Web debugger : It is a software tool used to track the performance of any page (or) application. Every browser have a debugger which you can invoke by using F12 function key. Example : fiddler, post man etc.,

15) Api’s :Api is a service provided by third party sources which you can integrate in to any application to provide a specific functionality. Example : google maps api, facebook login api, captcha api etc.,

16) URL and URI : ➢ URL is the virtual path generated by a web server and used by clients in order to access the resources from a website. 

➢ It is a uniform resource locator. 

➢ The URI is an identifier used to access any specific location within the resource. URL ↑ http://www.amazon.in/electronic.jsp#mobiles ↓ ↓ ↓ Protocol Domain URI

17)Protocol : A protocol defines a set of rules that are used by computers in network to communicate with each other. The popular protocols are - http, https, ftp, file, ttp/ip, msmq, named pipes, smtp etc., http - Hyper text transfer protocol - web https - secured http - web ftp/file - file transfer protocol - intranet Smtp - simple mail transfer protocol - email