ReactJS Interview Questions & Answers

Question 1. What Is Reactjs?

Answer :

React is an open source JavaScript front end UI library developed by Facebook  for creating interactive, stateful & reusable UI components for web and mobile app. It is used by Facebook, Instagram and many more web apps.

ReactJS is used for handling view layer for web and mobile applications. One of React’s unique major points is that  it perform not only on the client side, but also can be rendered on server side, and they can work together inter-operably.

Question 2. Why Reactjs Is Used?

Answer :

React is used to handle the view part of Mobile application and Web application.

Question 3. Does Reactjs Use Html?

Answer :

No, It uses JSX which is simiar to HTM.

Question 4. When Reactjs Released?

Answer :

March 2013

Question 5. What Is Current Stable Version Of Reactjs?

Answer :

• Version: 15.5 
• Release on: April 7, 2017

Question 6. What Are The Life Cycle Of Reactjs?

Answer :

• Initialization
• State/Property Updates
• Destruction

Question 7. What Are The Feature Of Reactjs?

Answer :

• JSX: JSX is JavaScript syntax extension.
• Components : React is all about components.
• One direction flow: React implements one way data flow which makes it easy to reason about your app

Question 8. What Are The Advantages Of Reactjs?

Answer :

• React uses virtual DOM which is JavaScript object. This will improve apps performance 
• It can be used on client and server side
• Component and Data patterns improve readability.
• Can be used with other framework also.

Question 9. How To Embed Two Components In One Component?

Answer :

import React from 'react';
class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );

   }
}

class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );

Question 10. What Are The Advantages Of Using Reactjs?

Answer :

Advantages of ReactJS:

• React uses virtual DOM which is JavaScript object. This improves application performance as JavaScript virtual DOM is faster than the regular DOM.
• React can be used on client and as well as server side too.
• Using React increases readability and makes maintainability easier. Component, Data patterns improves readability and thus makes it easier for manitaing larger apps.
• React can be used with any other framework (Backbone.js, Angular.js) as it is only a view layer.
• React’s JSX makes it easier to read the code of our component. It’s really very easy to see the layout. How components are interacting, plugged and combined with each other in app.

Question 11. What Are The Limitations Of Reactjs?

Answer :

Limitations of ReactJS:

• React is only for view layer of the app so we still need the help of other technologies to get a complete tooling set for development.
• React is using inline templating and JSX. This can seem awkward to some developers.
• The library of react  is too  large.
• Learning curve  for ReactJS may be steep.

Question 12. How To Use Forms In Reactjs?

Answer :

In React’s virtual DOM, HTML Input element presents an interesting problem. With the others DOM environment, we can  render the input or textarea and thus allows the browser maintain its   state that is (its value). we can then get and set the value implicitly with the DOM API.

In HTML, form elements such as <input>, <textarea>, and <select> itself  maintain their own state and update its state  based on the input provided by user .In React, components’ mutable state is handled by the state property  and is only updated by setState().

• HTML <input> and <textarea> components use the value attribute.
• HTML <input> checkbox and radio components, checked attribute is used.
• <option> (within <select>) components, selected attribute is used for select box.

Question 13. How To Use Events In Reactjs?

Answer :

React identifies every events so that it must  have common and consistent behavior  across all the browsers. Normally, in normal JavaScript or other frameworks, the onchange event is triggered after we have typed something into a Textfield and then “exited out of it”. In  ReactJS we cannot do it in this way.

The explanation is typical and  non-trivial:

*”<input type=”text” value=”dataValue”> renders an input textbox initialized with the value, “dataValue”.

When the user changes the input in text field, the node’s value property will update and change. However, node.getAttribute(‘value’) will still return the value used at initialization time that is dataValue.

Form Events:

• onChange: onChange event  watches input changes and update state accordingly.
• onInput: It is triggered on input data
• onSubmit: It is triggered on submit button.

Mouse Events:

• onClick: OnClick of any components event is triggered on.
• onDoubleClick: onDoubleClick of any components event is triggered on.
• onMouseMove: onMouseMove of any components, panel event is triggered on.
• onMouseOver: onMouseOver of any components, panel, divs event is triggered on.

Touch Events:

• onTouchCancel: This event is for canceling an events.
• onTouchEnd: Time Duration attached to touch of a screen.
• onTouchMove: Move during touch device .
• onTouchStart: On touching a device event is generated.

Question 14. Give An Example Of Using Events?

Answer :

import React from 'react';
import ReactDOM from 'react-dom';
 var StepCounter = React.createClass({
                    getInitialState: function() { return {counter: this.props.initialCounter }; },
                    handleClick: function() {      
                    this.setState({counter: this.state.counter + 1});  },
                    render: function() {
                    return <div onClick={this.handleClick}> OnClick Event, Click Here: {this.state.counter }</div>;
            }
});
 ReactDOM.render(< StepCounter initialCounter={7}/>, document.getElementById('content'));

Question 15. Explain Various Flux Elements Including Action, Dispatcher, Store And View?

Answer :

Flux can be better explained by defining its individual components:

• Actions – They are helper methods that facilitate passing data to the Dispatcher.
• Dispatcher – It is Central hub of app, it receives actions and broadcasts payloads to registered callbacks.
• Stores – It is said to be Containers for application state & logic that have callbacks registered to the dispatcher. Every store maintains particular state and it will update  when it is needed. It wakes up on a relevant dispatch to retrieve the requested data. It is accomplished by registering with the dispatcher  when constructed. They are  similar to  model in a traditional MVC (Model View Controller), but they manage the state of many objects —  it does not represent a single record of data like ORM models do.
• Controller Views – React Components  grabs the state from Stores and pass it down through props to child components to view to render application.

Question 16. What Is Flux Concept In Reactjs?

Answer :

Flux is the architecture of an application that Facebook uses for developing client-side web applications. Facebook uses internally when working with React. It is not a framework or a library. This is simply a new technique that complements React and the concept of Unidirectional Data Flow.

Facebook dispatcher library is a sort of global pub/sub handler technique which broadcasts payloads to registered callbacks.

Question 17. Give An Example Of Both Stateless And Stateful Components With Source Code?

Answer :

Stateless and Stateful components

Stateless: When a component is “stateless”, it calculates state is calculated internally but it directly  never mutates it. With the same inputs, it will always produce the same output. It means it has no knowledge of the past, current or future state changes.

var React = require('react');
var Header = React.createClass({
    render: function() {
        return( <img src={this.props.imageSource} />   ); }
});
ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);

Stateful : When a component is “stateful”, it is a central point that stores every information in memory about the app/component’s state, do has the ability to change it. It has knowledge of past, current and potential future state changes. Stateful component  change the state, using this.setState method.

var React = require('react');
var Header = React.createClass({
    getInitialState: function() {
        return { imageSource: "header.png" }; 
  },
    changeImage: function() {
        this.setState({imageSource: "changeheader.png"});
    },
    render: function() {
        return(
            <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />
        );
    }
});
module.exports = Header;

Question 18. Explain Basic Code Snippet Of Jsx With The Help Of A Practical Example?

Answer :

Your browsers does not understand JSX code natively, we need to convert it to JavaScript first which can be understand by our browsers. We have aplugin which handles including Babel 5’s in-browser ES6 and JSX transformer called browser.js.

Babel will understand and recognize JSX code in <script type=”text/babel”></script> tags and transform/convert it to normal JavaScript code.

In case of production we will need to pre-compile our JSX code into JS before deploying to production environment so that our app renders faster.

<!DOCTYPE html>
<html lang="en">
  <head><title>My First React JSX Example</title></head>
  <body>
    <div id="hello-world"></div>
    <script src="https://fb.me/react-15.0.0.js"></script>
    <script src="https://fb.me/react-dom-15.0.0.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
     <script type="text/babel">
      var HelloWorld = React.createClass({
        render: function() {
          return ( <p>Hello, World</p> )
        }
      });
      ReactDOM.render( <HelloWorld/>, document.getElementById('hello-world')); 
    </script>
  </body>
</html>

Question 19. What Are The Advantages Of Using Jsx?

Answer :

JSX is completely optional and its not mandatory, we don’t need to use it in order to use React, but it has several advantages  and a lot of nice features in JSX.

• JSX is always faster as it performs optimization while compiling code to vanilla JavaScript.
• JSX is also type-safe, means it is strictly typed  and most of the errors can be caught during compilation of the JSX code to JavaScript.
• JSX always makes it easier and faster to write templates if we are familiar with HTML syntax.

Question 20. What Is Reactjs-jsx?

Answer :

JSX (JavaScript XML), lets us to build DOM nodes with HTML-like syntax. JSX is a preprocessor step which adds XML syntax to JavaScript.

Like XML, JSX tags have a tag name, attributes, and children JSX also has the same. If an attribute/property value is enclosed in quotes(“”), the value is said to be string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression. We can represent JSX as <HelloWorld/>.

Question 21. What Are Components In Reactjs?

Answer :

React encourages the idea of reusable components. They are widgets or other parts of a layout (a form, a button, or anything that can be marked up using HTML) that you can reuse multiple times in your web application.

ReactJS enables us to create components by invoking the React.createClass() method  features a render() method which is responsible for displaying the HTML code.

When designing interfaces, we have to break down the individual design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time we need to build some UI, we can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.

Question 22. How To Apply Validation On Props In Reactjs?

Answer :

When the application is running in development mode, React will automatically check  for all props that we set on components to make sure they must right correct and right data type.

For instance, if we say a component has a Message prop which is a string and is required, React will automatically check and warn  if it gets invalid string or number or boolean objects. For performance reasons this check is only done on dev environments  and on production it is disabled so that rendering of objects is done in fast manner .

Warning messages are generated   easily  using a set of predefined options such as:

• React.PropTypes.string
• React.PropTypes.number
• React.PropTypes.func
• React.PropTypes.node
• React.PropTypes.bool

Question 23. What Are State And Props In Reactjs?

Answer :

State is the place where the data comes from. We must follow approach  to make our state as simple as possible and minimize number of stateful components.

For example, ten components that need data from the state, we should create one container component that will keep the state for all of them.

The state starts with a default value and when a Component mounts and then suffers from mutations in time (basically generated from user events).

A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the stateof its children. You could say the state is private.

import React from 'react';
import ReactDOM from 'react-dom';
 var StepCounter = React.createClass({
 getInitialState: function() {
         return {counter: this.props.initialCount};
},
  handleClick: function() {
  this.setState({counter: this.state. counter + 1});
 },
  render: function() {
  return <div onClick={this.handleClick}>{this.state.counter }</div>;
 }
});
ReactDOM.render(< StepCounter initialCount={7}/>, document.getElementById('content'));

Props: They are immutable, this is why container component should define state that can be updated and changed. It is used to pass data down from our view-controller(our top level component).

 When we need immutable data in our component we can just add props to reactDOM.render() function.

import React from 'react';
import ReactDOM from 'react-dom';
class PropsApp extends React.Component {

   render() {
      return (
         <div>
            <h1>{this.props.headerProperty}</h1>
            <h2>{this.props.contentProperty}</h2>
         </div>
      );
   }
 } 
ReactDOM.render(<PropsApp headerProperty = "Header from props..." contentProperty = "Content
   from props..."/>, document.getElementById('app'));

}

Question 24. What Is The Difference Between The State And Props In Reactjs?

Answer :

Props:

Passes in from parent component.<PropsApp headerProperty = “Header from props…” contentProperty = “Content&nbsp;from props…”/>This properties are being read by  PropsApp component and sent to ReactDOM View.

State:

Created inside component by getInitialState.this.state reads the property of component and update its value it by this.setState() method and then returns to ReactDOM view.State is private within the component.

Question 25. What Are The Benefits Of Redux?

Answer :

Maintainability:

Maintenance of Redux becomes easier due to strict code structure and organisation.

Organization:

Code organisation is very strict hence the stability of the code is high which intern increases the work to be much easier.

Server rendering: This is useful, particularly to the preliminary render, which keeps up a better user experience or search engine optimization. The server-side created stores are forwarded to the client side.

Developer tools:

It is Highly traceable so changes in position and changes in the application all such instances make the developers have a real-time experience.

Ease of testing:

The first rule of writing testable code is to write small functions that do only one thing and that are independent. Redux’s code is made of functions that used to be: small, pure and isolated.

Question 26. How Distinct From Mvc And Flux?

Answer :

• As far as MVC structure is concerned the data, presentation and logical layers are well separated and handled. here change to an application even at a smaller position may involve a lot of changes through the application. this happens because data flow exists bidirectional as far as MVC is concerned. Maintenance of MVC structures are hardly complex and Debugging also expects a lot of experience for it.
• Flux stands closely related to redux. A story based strategy allows capturing the changes applied to the application state, the event subscription, and the current state are connected by means of components. Call back payloads are broadcasted by means of Redux.

Question 27. What Are Functional Programming Concepts?

Answer :

The various functional programming concepts used to structure Redux are listed below:

• Functions are treated as First class objects.
• Capable to pass functions in the format of arguments.
• Capable to control flow using, recursions, functions and arrays.
• helper functions such as reduce and map filter are used.
• allows linking functions together.
• The state doesn’t change.
• Prioritize the order of executing the code is not really necessary.

Question 28. What Is Redux Change Of State?

Answer :

For a release of an action, a change in state to an application is applied, this ensures an intent to change the state will be achieved.

Example:

• The user clicks a button in the application.
• A function is called in the form of component
• So now an action gets dispatched by the relative container.
• This happens because the prop (which was just called in the container) is tied to an action dispatcher using mapDispatchToProps (in the container).
• Reducer on capturing the action it intern executes a function and this function returns a new state with specific changes.
• The state change is known by the container and modifies a specific prop in the component as a result of the mapStateToProps function.

Question 29. Where Can Redux Be Used?

Answer :

Redux is majorly used is a combination with reacting. it also has the ability to get used with other view libraries too. some of the famous entities like AngularJS, Vue.js, and Meteor. can get combined with Redux easily. This is a key reason for the popularity of Redux in its ecosystem. So many articles, tutorials, middleware, tools, and boilerplates are available.

Question 30. What Is The Typical Flow Of Data In A React + Redux App?

Answer :

Call-back from UI component dispatches an action with a payload, these dispatched actions are intercepted and received by the reducers. this interception will generate a new application state. from here the actions will be propagated down through a hierarchy of components from Redux store. The below diagram depicts the entity structure of a redux+react setup.

Question 31. What Is Store In Redux?

Answer :

The store holds the application state and supplies the helper methods for accessing the state are

register listeners and dispatch actions. There is only one Store while using Redux. The store is configured via the create Store function. The single store represents the entire state.Reducers return a state via action

export function configureStore(initialState) {

return createStore(rootReducer, initialState);

}

The root reducer is a collection of all reducers in the application.

const root Reducer = combineReducers({

donors: donor Reducer,

});

Question 32. Explain Reducers In Redux?

Answer :

The state of a store is updated by means of reducer functions. A stable collection of a reducers form a store and each of the stores maintains a separate state associated for itself. To update the array of donors, we should define donor application Reducer as follows.

export default function donorReducer(state = [], action) {

switch (action.type) {

case actionTypes.addDonor:

return […state, action.donor];

default:

return state;

}

}

The initial state and action are received by the reducers. Based on the action type, it returns a new state for the store. The state maintained by reducers are immutable. The below-given reducer it holds the current state and action as an argument for it and then returns the next

state:function handelingAuthentication(st, actn)

{

return _.assign({}, st,

{

auth: actn.pyload

});

}

Question 33. What Are Redux Workflow Features?

Answer :

Reset:

Allow to reset the state of the store

Revert:

Roll back to the last committed state

Sweep:

All disabled actions that you might have fired by mistake will be removed

Commit:

It makes the current state the initial state

Question 34. Explain Action’s In Redux?

Answer :

Actions in Redux are functions which return an action object. The action type and the action data are packed in the action object. which also allows a donor to be added to the system. Actions send data between the store and application. All information’s retrieved by the store are produced by the actions.

export function addDonorAction(donor) {

return {

type: actionTypes.add Donor,

donor,

};

}

Internal Actions are built on top of Javascript objects and associate a type property to it.