Google News
logo
ReactJS Interview Questions
React is an open-source frontend JavaScript library developed by Facebook in 2011. React was created by Jordan Walke, a software engineer working for Facebook.
 
* React is used for building user interfaces especially for single page applications.
 
* It follows the component based approach which helps in building reusable UI components.
 
* It is used for developing complex and interactive web and mobile UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.
The major features of React are:
 
* It uses VirtualDOM instead of RealDOM considering that RealDOM manipulations are expensive.
* It uses server-side rendering.
* It follows uni-directional data flow or data binding.
 
Uses reusable/composable UI components to develop the view.
JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.
 
In the example below text inside <h1> tag is returned as JavaScript function to the render function.
class App extends React.Component {
  render() {
    return(
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    )
  }
}
Some of the major advantages of React are:
 
* It increases the application’s performance
* It can be conveniently used on the client as well as server side
* Because of JSX, code’s readability increases
* React is easy to integrate with other frameworks like Meteor, Angular, etc
* Using React, writing UI test cases become extremely easy
There are two possible ways to create a component.
 
Function Components : This is the simplest way to create a component. Those are pure JavaScript functions that accept props object as first parameter and return React elements:
function Greeting({ message }) {
  return <h1>{`Hello, ${message}`}</h1>

}
Class Components : You can also use ES6 class to define a component. The above function component can be written as:
class Greeting extends React.Component {
  render() {
    return <h1>{`Hello, ${this.props.message}`}</h1>
  }
}
If the component needs state or lifecycle methods then use class component otherwise use function component. However, from React 16.8 with the addition of Hooks, you could use state , lifecycle methods and other features that were only available in class component right in your function component.
React.PureComponent is exactly the same as React.Component except that it handles the shouldComponentUpdate() method for you. When props or state changes, PureComponent will do a shallow comparison on both props and state. Component on the other hand won't compare current props and state to next out of the box. Thus, the component will re-render by default whenever shouldComponentUpdate is called.
State of a component is an object that holds some information that may change over the lifetime of the component. We should always try to make our state as simple as possible and minimize the number of stateful components.
 
Let's create an user component with message state,
class User extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      message: 'Welcome to React world'
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
      </div>
    )
  }
}
Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.
Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, <group>,<div> etc. This function must be kept pure i.e., it must return the same result each time it is invoked.