React Js Interview Questions

You are reading react js interview questions. Nowadays this is a very good web/ mobile application development front-end framework. Here you can get the most expected react js interview questions.

Table of Contents

What is ReactJS?
What are the Advantages of ReactJS?
How is React different from Angular?
How to install react for a project
What the main difference between is React Router & conventional routing?
How Redux is used to React?
What are the components used for Redux?
How render() works in React?
Can you explain React component’s lifecycle?
Explain how can you create an event in React.?
What are refs And How to create And When it can use?

What is ReactJS?

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

What are the Advantages of ReactJS?

Its performance is high because it uses virtual DOM instead of the real DOM.
It is very simple to integrate with other frameworks like Meteor, Angular, etc.
It Can be 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 an 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 your command prompt or terminal, then paste the below line

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

-> 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

Only Single HTML page Worked with a different component for each navigation.
Only the history of attributes is changed.

Conventional Routing

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

How Redux is used to React?

Today’s market Redux is one of the best libraries 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 the 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 have happened.
Reducer – It is responsible for the state change.
Store – It the place where the entire application is stored.
View – Populate the data provided by the Store.

How render() works in React?

render() is a function which is the representation of the native DOM component in react. Each component must have one render() function which returns a single react element. That 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 the initial Rendering phase is 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>
);
}
});

class ShowIn extends React.Component({

show(evt) {

// code goes here

render() {

return (

<div onClick={this.show}>Click Me!</div>

);

}

});

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

Refs are the stands for References to React. Its an attribute which can help to a 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} />;
}
}

class Student extends React.Component {

constructor(props) {

super(props);

this.myRef = React.createRef();

}

render() {

return <div ref={this.myRef} />;

}