1. What is React? State some of its key features.

React is a front end JavaScript library which was developed by Facebook in the year 2013. It is used to develop reusable UI by following the component based approach. React is used to create complicated and interactive web and mobile user interfaces.

Some of the key features of React are:

· React makes use of virtual DOM instead of the regular or real DOM.

· React is used for server side rendering.

· React has uni-directional or one-way data flow or data binding.

2. What are the advantages of using React?

Some of the major advantages of using React are:

· React helps enhance the performance of a web or mobile application

· React can be used on the server as well as on the client side

· It used JSX code which increases the code reliability and understandability

· React can be integrated with other frameworks like Angular, Meteor and more

· Writing UI test cases for React is very easy

3. Explain Virtual DOM in React.

Virtual DOM is an abstraction of the HTML DOM. It is lightweight and is not connected to the browser specific implementation details. React provides Virtual DOM for free. The ReactElements reside in virtual DOM. These elements make up the basic nodes of the Virtual DOM tree. Once the Reactelements are defines they can be rendered into the real DOM.

Every time the state of a ReactComponent changes, React runs a diffing algorithm. It identifies what changes have been made in the virtual DOM. It then updates the DOM with the results of diff. This process is faster than it would be in real DOM.

4. What is JSX?

JSX stands for JavaScript XML. It is a syntax extension of JavaScript and has all the properties of JavaScript. Any JavaScript expression can be used in JSX by containing it in curly braces. When it is compiled, JSX elements become regular JavaScript objects. You can use JSX in any statement, loop, to assign values, input arguments, and return functions.

React does not require the use of JSX but it is recommended way of describing the UI in React applications. It makes HTML file easy to understand and also makes the application robust and enhances its performance.

5. What is Redux?

A store in React is a simple JavaScript object. The idea behind Redux is to keep the state of the entire application in a single store, be it the state of the UI like which tab is active currently or the state of Data like the user profile details.

The state can be changed by firing actions from your application and then writing reducers for these actions that can modify the state. As the entire state of the application is in a single store it should not have any side-effects.

6. What are the lifecycle methods of React Components in detail?

Some important life cycle methods of React components are:

· componentWillMount()

· componentDidMount()

· componentWillRecieveProps()

· shouldComponentUpdate()

· componentWillUpdate()

7. What is the difference between state and props?

The state is a data structure that starts with a default value when a component mounts. This data structure can be mutated over time as a result of user events.

Props are short for properties and are the configuration of a Component. It is the way in which components communicate with each other. A component cannot change its props but puts together the props of its child component. The props of a component are received by the component above them, that is, the parent component and are immutable. Some components may have default props and they exist even if parent component does not pass down props.

Props and State are similar but their usage is different. Majority of components are usually Stateless. However, props are used to pass information or data from the parent to the child. Props are immutable and cannot be changed; however, State is used to mutate data and are useful for user input.

8. What are Controlled and Uncontrolled Component.

Controlled Components are those which take the current value through props and notify the changes through callbacks like onChange. The parent component controls this component by handling the callback and managing its own state and passing the values through props to the controlled component. As these components are controlled, they are also called dumb components.

The Uncontrolled component is one that stores and manages its own state internally. When you need the current value of the component you query the DOM using a ref and retrieve the value.

In most cases we make use of Controlled components.

9. What do you mean by HOC?

HOC stands for higher-order component.  It is an advanced technique in React that allows us to reuse component logic. HOC is not a part of the React API, it is a pattern which emerges from React’s compositional nature.

HOC allows you to reuse code, logic and bootstrap abstractions. Third party React Libraries usually contain HOCs. Other than sharing utilities libraries and simple compositions, HOCs are also used to share behavior or properties between React Components. If you need to write a lot of code which has the same functionality you can simply refactor that code into a reusable HOC which will reduce a lot of time and effort.

10. What are the phases of a React component’s lifecycle?

  1. Initial rendering phase: In this phase a component starts its life journey and makes its way to the DOM.

2.  Updating phase: When the component is added to the DOM it can update and re-render when its props or state changes. The changes can take place in this phase only.

3.  Unmounting phase: It is the final stage of the component. In this phase the component is destroyed and removed from the lifecycle.