Quick Contact


    Q11). Difference Between Controlled and Uncontrolled Components?

    When there is content in DOM but we cannot access it with some function then that input data or component in DOM comes under uncontrolled but when we bring that data or component into access with some function or variable then it comes under controlled component.

    For Example if there is a Submit Button , if submit is uncontrolled component then it directly picks data as exactly written in DOM because it is not in any state but when it comes under control then user can dynamically enter data into submit form and ‘onclick’ function will also works on button. You can check from following Code-:

    		        Import React, {Component} from ‘react’;
    		       Export default class App extends Component {
    		      Constructor(){
    		Super();
    		This.state = {
    		name = ””
    		} 
    		}
    		onInputChange = (event) => {
    		this.setState({
    		name:event.target.value
    		})
    		}
    		handleSubmit = () => {
    		  console.log(this._name.value)
    		}
    		Render() {
    		Return (
    		< div>
    		   < input type=”text” value={this.state.name} 
    		onChange={this.onInputChange}/>
    		< button onClick={this.handleSubmit}>Submit
    		
    		);
    		}
    		}
    	
    Q12). Explain redux and redux thunk?

    In react redux is a middlware which is used as a reducer for asynchronous activities and whereas in redux thunk dispatch method is used in which when components passed to middleware then by using dispatch method components are send to all reducers.

    Redux and redux thunk is better explained with charts and syntax as follows-:
    React + Redux Cycle
    Difference between Controlled and Uncontrolled Components

    In Redux thunk-:

    		Import ducat #(file objector component) from ‘file name’;
    		Export function abc () {
    		Const request = ducat.get(‘file path’);
    		Return (dispatch) => {
    		Request.then{({data}) => {
    		dispatch({ type: ‘FETCH_PROFILES’, payload: data })
    		});
    		};
    		}
    	
    Q13). Difference between ES5 and ES6 in JavaScript?

    ECMA Script – European computer manufacture association [organisation] used for client-side scripting on World Wide Web.

    ES6 ES5
    Latest version standard Old version standard
    ECMA Script is defined by ECMA. It is sixth edition. It is trademarked scripting language specification. It is fifth edition.
    Different function keywords are not used to define function and no keyword return is then to fetch computed value. In case of ES5 function and return both keywords need to use to define function.
    Object manipulation in ES6 processed move smoothly due to presence of destructing speed operator. It takes more time in object manipulation.
    With help of newly implemented feature and shorthand storage implementation, ES6 stores higher performance rank than ES5 ES5 is the prior version than ES6 and due to missing few features, performance is bit less than that of ES6
    Q14). Explain ECMA Script (ES)?

    ES define different standards for scripting of code. ECMA is ECMA-262 a specific standard which define different specification for the scripting languages. ES release different editions as ES1, ES2, ES3, ES4, ES5, ES5.1, ES6, ES7, ES8, ES9, and ES10. As to make it understand to the browser it is necessary to convert to ES standard form. The commonly used in react is ES6.

    FEATURE OF ES6 ARE-:

    – Arrows, Classes, Enhanced objects literals, Template Literals and Extended Literals, De-Structuring, Let and Const, Iteration generator, Collection Modules.

    Transpiler is another property used to convert ES6 code to ES5 code

    Babel, Typescript Compiler (TSC) is two transpiler to transpile ES6 Code.

    Q15). Difference between Angular JS and React JS?
    UI Router React Router
    Easier to pre-setup Additional webpack and install babel for this
    It has separation of controller factory and template HTML+ JavaScript are not easy to figure out at a glance. Allows us to manage all routes in one place.

    UI Router

    Npm install—

    Save angular-ui-router

    		< script src=”load script file in HTML body”>
    		
    		Var app=angular.module(‘name of app’, [UI router]);
    		React Router
    		Bower  install ReactRouter
    		Import react from ‘react’;
    		Import ReactDOM from ‘react-dom’;
    		Import {Router, Route, BrowserHistory} from ‘react-router’;
    	
    Q16). Explain class components?
    While creating class component ES6 is used to define a component written as-:
    		Class Welcome extends React.Component
    		{
    		render() {
    		return < h1> {‘Hello, $(this.props.message)}
    		}
    		
    		}}
    	
    Q17). Use of class components over function components?
    1. When component need a state or lifecycle method in its rendering then class components are used otherwise function component is used.
    2. In React 16.8, you can use state, lifecycle method and other features that were only available in class components right in your function component.
    Q18). Main Function of React?

    Virtual DOM is used instead of Real DOM because manipulation in Real DOM is expensive.

    React Support server side rendering.

    It contains binding function and having reusable UI components to develop view.

    React JS favours front view of application.

    React follows unidirectional data flow.

    Q19). Can Browser directly read JSX?

    To understand the JSX script by browser it should be first converted into ES standard form for which transpilers are used like Babel etc.

    Web Browser cannot read JSX directly because it only reads regular JS objects and JSX is not regular JS object. So, file needs to be transformed into regular Javascript object.

    Q20). Explain JSX?

    JSX is Syntax which is extension to java script. It is used with React to describe what User Interface should look like. With use of JSX, you can write HTML structure in same file that contain JavaScript code.

    		render() {
    		return(
    		< div>
    		< h1> This is JSX code 
    		
    		);
    		}
    	

    Copyright 1999- Ducat Creative, All rights reserved.