Quick Contact


    Question Answers on React JS

    Q1). Advantages of React JS in 2020 with its Limitation

    React JS is open source platform as well as SEO friendly. It is used by both Innovative Startups and Fortune 500 Companies. Sites using React JS are Netflix, Dropbox, Dailymotion, American Express, GoDaddy, Coursera, BBC, MDB, Mochi-Pet Supplies and Food, NewYork Times etc.

    To know more about advantages we can define React JS in few words i.e. Advanced, Non-Risky, Responsive or as Follows-

    1. Abstract and Encapsulation of code.
    2. 2) Increase speed by importing feature with synchronised UI System.
    3. 3) Don’t need to write whole scripting code. Just need to write the state and declare its components, DOM works automatically according to encapsulated script in React JS.
    Most helpful platform to build Skillful Application
    In next, take a look on Limitations or disadvantages
    • Its Framework is little bit confusing as compare to others due to containment of all parts like HTML and CSS. So, complete understanding of code is important.
    • Size of the file is large in React JS and code is written in JSX.
    • React only focused on View Section so knowledge of all parts of library should be learned first to create complete application.
    • In case of Routing/Angular routing you should include some external files in React JS.
    • Everything is Dynamic. URL is not created statically, so in SEO section you have to handle Dynamic Process.
    • Maintenance of Quality and Resultant steep learning curve in JSX is most competitive point or issue which developer is facing. So, Developer should have complete understanding of JSX.
    Q2). Role of Virtual-DOM and how it effects with React JS

    Document object model contain record of scripts and when it comes with react JS it can be called as Virtual DOM or React DOM. React DOM is actually the virtual copy of Actual DOM which is created when you modify or update using React and React then make changes to Actual DOM by creating its Virtual DOM. It’s quite expensive because browser take time to calculate CSS, all margins, Layouts, JSS modifying queries etc. As it’s expensive to make changes in Actual DOM so React created its Virtual DOM as copy and make changes in it and then later changes in Actual DOM will made.

    Q3). What do you meant by Import and Export in React and writes its Syntax.

    It’s very Important and main feature in React which makes it more useful and make process faster. Importing Files meant to be calling data from other files easily by giving export access to files. When we use different components in code, Import and Export helps to communicate with different code files of components. To know more about implementation following code is written-

    		Import React from “react”;
    		Import ReactDOM from “react-dom”;
    		Import myfav from “./App”;
    		ReactDOM.render(
    		< >
    		< ol>
    		< li> Ducat 
    		< li>my fav 
    		
    		,
    		Document.getElementById(“root”)
    		);
    	

    Component which is importing to be Export as follows-:

    Const Technical= “Ducat”;

    Export default Technical;

    Q4). How Classes or Class components are created in React, Explanation and its Syntax?

    React JS create class components with and without ES6. When you create classes without ES6 then following syntax is used-:

    		Var createReactClass = require(‘create-react-class’);
    		Var Greeting = createReactClass({
    		Render: function () {
    		Return < h1>Hello,
    		{this.props.name};
    		}
    		});
    	

    Moreover, with createReactClass(), you have to provide separate getInitialState method that returns initial state:

    With ES6 Binding function is used explicitly
    		Class SayHello extends
    		React.Component {
    		Constructor (props) {
    		Super (props);
    		This.state = {message:
    		‘Hello!’
    		};
    		this.ducat = this.ducat.bind (this);
    		}
    		ducat() {
    		alert(this.state.message);
    		}
    		render() {
    		return (
    		< button onClick= {this.ducat}>
    		Say hello 
    		);
    		}
    		}
    	
    Q5). Different Types of Components in react

    In React JS CONTAIN TWO TYPES OF COMPONENTS

    1. Stateless Functional Components

      These are JavaScript Function as-:

      				Function welcome(props) {
      				Return < h1>Hello, {props.name};
      				}
      			
    2. Stateful Class Component

      These are components having ES6 or regular classes that extend component class from react library. It must contain Render method returning HTML

      				Class welcome extends React.Component (
      				render() {
      				return < h1> Hello, {this.props.name} ;
      				}
      				)
      			
    Q6). State v/s Props in React?

    React make it easy to manage the data and rendering of data when data changes. Two main ways to think about data in react is states and props.

    Props

    Props are useful in passing the arguments to the components we are creating. It handles components outside updation for example- increment and decrement of counter Component. As when we create a class and its constructor so to pass constructor to a class props declare differently. It’s mostly used for static activities.

    State

    State is about to handle inside process of the component. State is mainly used to handle update storing activity and rendering of component of what user has been done. It is used for dynamic activities.

    Q7). Which Middleware or Function used to handle asynchronous dispatching of actions?
    Redux Reducer is used to handle asynchronous dispatching. Mainly three things are there to be noted in code i.e. state, actions and reducer.
    		Const redux = require(‘redux’)
    		Const createStore = redux.createstore
    		Const initialState = {
    		Loading: false,
    		Users: [],
    		Error: ‘’
    		}
    		Const FETCH_USERS_REQUEST = ‘FETCH_USERS_REQUEST’
    		Const FETCH_USERS_SUCCESS = ‘FETCH_USERS_SUCCESS’
    		Const FETCH_USERS_FAILURE = ‘FETCH_USERS_FAILURE’
    
    		Const fetchUsersRequest = () => {
    		Return {
    		Type: FETCH_USERS_REQUEST
    		}
    		}
    		Const fetchUsersSuccess = users => {
    		Return {
    		Type:FETCH_USERS_SUCCESS,
    		Payload: users
    		}
    		}
    		Const fetchUsersFailure = error => {
    		Return {
    		Type: FETCH_USERS_FAILURE,
    		Payload: error
    		}
    		}
    		Const reducer = (state = initialState, action) => {
    		Switch(action.type){
    		Case FETCH_USERS_REQUEST:
    		Return {
    		... state,
    		Loading: true
    		}
    		Case FETCH_USERS_SUCCESS:
    		Return {
    		Loading: false,
    		Users: action.payload,
    		Error: ‘’
    		}
    		Case FETCH_USERS_FAILURE:
    		Return {
    		loading: false,
    		users: []
    		error: action.payload
    		}
    		}
    		}
    		Const store = createStore(reducer)
    	
    Q8). Explain Pure Component?

    PURE COMPONENTS compare old states and objects to new states and objects to decide that re-rendering should happen or not for updation. If old states and objects are same with new code then pure component in react don’t allow re-rendering of functions. So, if we extend class component with pure component then there is no need to apply shoulComponentUpdate() lifecycle method. It is helpful in making application faster while in case of regular components, it will always re-render either value of states and props changes or not.

    Q9). Explain Commands as follows-:

    Following are the commands:-

    setState()-:

    It is a command in react which set the schedule for updation like clock components etc. and triggers when updation needed and set to rendering of code of the page.

    Render()-:

    When we create application Code written in components that will translated into elements that get mounted into DOM. React Application splits into two phases that is render phase and Commit phase. When traversing is done, while creating the elements CreateElement() is used and then works on DOM will start after creating and go to Commit phase.

    getState()-:

    When we creating const objects like const store= createStore(counter); then it carries all data or cases in following code and manage state updates which contains three main methods- GetState()- It retrieves current state of react Store written as-: console.log(store.getState()); and most commonly method is used dispatch()- to dispatch actions to change state of application written as- store.dispatch({type: ‘INCREMENT’ }); Third method is Subscribe method- it register callback anytime dispatch occurs written as-

    		store.subscribe(() => {
    		document.body.innerText = store.getState();
    		})
    	
    Q10). Explain use of React Component API- findDOMNode method?

    For DOM manipulation ‘findDOMNode’ method is used. Before we apply this we have to declare object in body as -:

    < button onClick=(this.findDOMNodeHandler)> Find DOM  Node 
    	< div id=”myDiv”>Dom Node 
    	findDOMNodeHandler= () => {
    	let myDiv = document.getElementById(“myDiv”)
    	ReactDOM.findDOMNode(myDiv).style.color=”green”
    	}
    	

    Copyright 1999- Ducat Creative, All rights reserved.