React Js Interview Questions And Answers

1) What is React JS?

● React JS is front end Javascript library developed by Facebook, Instagram and other developer communities.
● It helps to recreate usable components.
● React JS offers simple programming model and enhanced performance.
● React JS is fast then most of the Javascripts. Applications made in React can handle complex updates and still feel quick and responsive.
● React JS is modular in nature. Instead of writing large, dense files of code, it can be written in many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems.
● React JS is scalable. Large programs that display a lot of changing data are where React JS performs best.
● React JS is very flexible. It can be used for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. There's room to explore.
● It can render at server side using node.

2) What are the different features of React JS?

Following are the key features:

● JSX(Javascript Syntax Extension)
● Components
● Unidirectional data flow
● Open source

3) What are the advantages of React JS?

● It uses virtual DOM which improves the performance of the applications as it is faster.
● It can be run on both client and server sides.
● Scalable, readable and maintainable.

4) What is JSX? And why React JS uses JSX?

JSX is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML. Here syntax extension means that it is not usual or valid Javascript so system can't read it.
So in order to make it read the file which has JSX code has to be compiled first via JSX compiler before it reaches to web browser. This compiler will convert the JSX code to Javascript code which can be very well read by the browser.
A basic unit of JSX is called a JSX element. This JSX element looks exactly like HTML! The only noticeable difference is that you would find it in a JavaScript file, instead of in an HTML file. Example of simple JSX element is:

<h1>Hello testfry.com</h1>

JSX elements are treated as JavaScript expressions. They can go anywhere where JavaScript expressions can go. That means that a JSX element can be saved in a variable, passed to a function, stored in an object or array. Also JSX elements can have attributes, just like HTML elements.
Here is the code of several JSX elements:

const myArticle = {
  art1: <article>test 1</article>,
  art2: <article>test 2</article>,
}

Following are the key reasons why JSX is being used:
● It is faster
● It is type-safe
● Easy to write templates.

Sample abc.jsx file:

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div> Hello </div>
      );
   }
}
export default App;

5) What will be output of below mentioned React JS code snippet?

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <h1>{7+10}</h1>
         </div>
      );
   }
}
export default App;

This is the example of expression. The output will be 17

6) What are stateless components in React JS?

These are the components that don't have any state i.e. where we are creating Header and Content separately and adding it inside JSX tree in App component.

7) What are stateful components in React JS?

These are the components where we are creating Header separately and instead of content tag we are creating table and tbody elements.

8) What is state in React JS?

It is a place where data comes from. It should be simple and should have minimum number of stateful components.

9) What is the major difference between state and prop in React JS?

The major difference is that props are immutable whereas state is not.

10) What is render function in React JS?

It updates the UI. You need to send the element to ReactDOM.render(). These elements are immutable.

11) In React JS, what are refs?

Its used for selection of text, controlling focus and triggering animation. It helps in getting the reference of DOM elements.

12) What is setState() method in React JS?

It is one of the method of component API which is used to update the state of the component. That is it add changes to the original state of the component.

13) What is forceUpdate() method in React JS?

It is one of the method of component API which is used to update the component manually.

14) What is ReactDOM.findDOMNode() method in React JS?

It is one of the method of component API which is used to manipulate DOM.

15) What are the components of Life Cycle in React JS?

Following are the methods:

● componentWillMount
● componentDidMount
● componentWillReceiveProps
● shouldComponentUpdate
● componentWillUpdate
● componentDidUpdate
● componentWillUnmount

16) In React JS, what are Synthetic events?

These are cross browser wrapper around native events. All the event handlers pass instance of SyntheticEvent.

17) What is flux in React JS?

It is container for application state and logic. It supports simple javascript objects.

18) What are the different elements of flux in React JS?

Following are the key elements of flux:

● Actions
● Dispatcher
● Store
● View

19) What is redux in React JS?

It is the container for Javascript applications. It allows live code editing.

20) What is arrow function in React JS?

These are very important functions which prevents this bug.