Top React Js Interview Questions

Top React Js Interview Questions




What is ReactJS?

  • React JS is library of javascript for front-end development.
  • React Js developed at Facebook.
  • React Js used for development of  Complex Mobile and Web UI.
  • It follows component based structure helps to reusability of component.

What are the Advantages of ReactJS?

  • It’s performance is high because it use virtual DOM instead of the real DOM.
  • It is very simple  to integrate with other framework like Meteor, Angular, etc.
  • It Can used on the client as well as server side.
  • Writing Javascript is easier, It uses special syntax JSX,which mix that javascript and HTML.
  • It’s a SEO friendly framework.

How is React different from Angular?

React JS

  • It follows Only the View of MVC
  • Server side rendering data.
  • Uses Virtual DOM
  • One-way data Binding.
  • Developed By Facebook

Angular JS

  • It follows Complete MVC
  • only client side rendering data.
  • used Only Real DOM
  • Two-way data Binding
  • Developed By Google.

How to install react for a project

Step #1: Download NodeJS
If you don’t know How to install  node.js go below link
Link: https://nodejs.org/en/download/
Step #2: Download the ‘create-react-app’ Tool from GitHub
Link: https://github.com/facebookincubator/create-react-app
Step #3: Open you command prompt or terminal, then paste the below line

-> npm install -g create-react-app
-> cd my-app
-> create-react-app my-app

After installation folder structured will be like this.

What the main difference between is React Router & conventional routing?

React Router

  1. Only Single HTML page Worked with different component for each navigation.
  2. Only the history of attributes are changed.

Conventional Routing

  1. May be Involved different HTML pages in each navigation.
  2. Each navigation Http request send to server and fetch data based on the view page business logic.

How Redux are used in React?

Today’s market Redux is the one of the best library of front-end development.It is a predictable state container for JavaScript applications and is used for the entire applications state management. It helps application to test easily for different environment also.

What are the components used for Redux?

Basically Redux have four component’s
Action – It’s an object that follows what to be happened.
Reducer – It is responsible for state change.
Store – It the place where entire application is store.
View – Populate the data provided by the Store.

How render() works  in React?

render() is function which is the representation of the native DOM component in react. Each component must have one render() function which return single react element.Those react element is the bunch of HTML. If HTML component is more then it will wrap with <form> or <div>.

Can you explain React component’s lifecycle?

Initial Rendering Phase: This the first phase of rendering react element and added in DOM and populate in view.
Updating Phase: After initial Rendering phase done, it can update and re-render only when a prop or state change occurs.
Unmounting Phase: Component is destroyed and removed from the DOM in this phase. This is the final phase of a component’s life cycle.

Explain how can you create an event in React.?

class ShowIn extends React.Component({
show(evt) {
// code goes here
},
render() {

return (
<div onClick={this.show}>Click Me!</div>
);
}
});

What is refs And How to create And When it can use?

Refs is the stands for References in React. Its an attribute which can helps to stored reference of a component. It is used to return references to a particular element or component by using function render().

You can use the reference

  • Whenever you want like Managing focus, text selection, or media playback etc. you can use refs.
  • Integrating with third-party DOM libraries also you can use refs
  • To triggering imperative animations.

Create Refs
using React.createRef() you can create the refs.

class Student extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <div ref={this.myRef} />;
}
}