React JS Interview Questions and Answers

Question 1 How does the reaction work? How does virtual-DOM work in response?

Response creates a virtual DOM. When the state changes a component, it first runs a "different" algorithm, which indicates what has changed in the virtual dome. The second step is reconciliation, where he updates the DOM with different results.

The HTML DOM always consists of trees - which is allowed by the HTML document structure. There are a lot of DOM trees these days because of the big apps. As we push more and more towards dynamic web applications (Single Page Applications - SPA), we need to constantly and heavily modify the DOM tree. And it's a real performance and development pain.

Virtual DOM is a summary of HTML DOM. It's lightweight and separate from browser-related implementation details. It is not invented by React but uses it and provides it for free. Response elements reside in the virtual DOM. They form the basic nodes here. Once we have defined the elements, the react element can be represented in the "real" dome.

Whenever a ReactComp component is changing state, a different algorithm runs in React and identifies what has changed. And then it updates the DOM with different results. The point is, - it's much faster than being in a regular DOM.

Question 2 What is JSX?

JSX is a syntax extension of JavaScript and comes with the full power of JavaScript. JSX reacts to "elements". You can embed any JavaScript expression in JSX by wrapping it in curved curves. After compilation, JSX feedback becomes a regular JavaScript object. This means that if you enter the JSX inside the statements and loop. , Assign it to a variable, accept it as arguments, and return it with functions. Event Half React does not require JSX, this is the recommended way to express our UI in the React app.

For example, in the reaction with JSX, there is a syntax below the syntax without any basic element.

Equivalent to the above using React.createElement
Image for post

Q3. What is React. createClass?

React.createClass allows us to create a "class" component. But with ES6, responsiveness allows us to implement component classes that use ES6 JavaScript classes. The end result is the same. We have a component class. But the style is different. And one "custom" is using a JavaScript class system (creation class) while the other is using a JavaScript class system.

When using React’s createClass () method, we move an object as an argument. So we can write a component using the creation class that looks like this:
Image for post

Using the ES6 class to write the same component is a little different. Instead of using a method from the reaction library, we extend an ES6 class whose library describes the components.

 

Builder () is a special function in the JavaScript class. Requests JavaScript Constructor () whenever an object is created by a class.

 

Q4. What is ReactDOM and what is the difference between ReactDOM and ReactDOM?

Prior to v0.14, all ReactDOM functionality was part of the response. But later, React and Rectum Dome split into two different libraries.

As the name suggests, ReactDOM is the glue between the reaction and the DOM. Often, we will use it for only one thing: growing with the React Dome. Another useful feature of ReactDOM is ReactDOM.findDOMNode () which we can use to access the DOM element directly.

For everyone else, there is a reaction. We use reactions to describe and create our elements, biological hooks, and so on. That is, the courage to ask for a response.
Q5. What is the difference between a class component and a functional component?
Class components allow us to use additional features such as local estate and life cycle hooks. Also, enable our own component to have direct access to your store and thus the state remains.

When our components are just found and presented on the page, it is a 'stateless component', for which a pure function can be used. They are also called dumb components or current components.

From the previous question, we can say that our book list component is practical components and is baseless.

On the other hand, the BookListContainer component is a class component.

Q6. What is the difference between state and support?

The state is a data structure that starts with the default value as soon as the components are mounted. This can change over time, as a result of most user events.
Props (short for Properties) are a set of components. Props are how the components communicate with each other. As far as the ingredients they receive are concerned, they are received from the above ingredient. No component can change your mood, but it is responsible for presenting your child's components. Purpose doesn't just require data - callback functions can be accepted as purpose.

One of the issues is that we may have default props so that the props are set even if the parent component does not pass the props.

Purpose and state work the same but are used in different ways. The majority of our components will probably be non-state. Props are used to transfer data from parents to another child or through a component. They are unchangeable and will not change. The state is used for variable data, or statistics that will change. This is especially useful for user input.

7۔ What are the controlled components?

In HTML, elements such as <input>, <textrio, and <select> form usually retain their state and update it based on user input. When the user submits a form, the values ​​from the above elements are sent along with the form. It works differently with the reaction. The form component will monitor the value of the input in its state and repeat the component every time the callback function is like onChange has been fired because the state will update. An element whose value is thus controlled by the reaction is called the "controlled component".

With one control component, each state variable will have a corresponding handler. This makes it easier to edit or validate user input.
Q8. What is a high order component?

A high order component (HOC) is an innovative technique in response to the reuse of component logic. HOCs are not part of the React API. This is a pattern that emerges from the structural nature of the reaction.

A high-order component is a function that takes a component and returns a new component.

HOC allows you to reuse code, logic and bootstrap abstraction. HOCs are common in third party reaction libraries. The most common is the redox connect function. Aside from sharing utility libraries and simple compositions, HOCs are the best way to divide behavior between components of opinion. If you find yourself writing addresses in many different places that do the same thing, you may be able to reactor this code into a reusable HOC.

Q9. What is a Create-Response-App?

Cricket-React-App is the official CLI (command line interface) for creating responsive apps without any configuration.

We don't need to install or configure tools like Webpack or Babel. They are pre-configured and hidden so that we can focus on the code. We can install as easily as other node modules. After that it is just a command to start a reaction plan.

It includes everything we need to create a reactive app.

Reaction, JSX, ES6, and flow syntax support.

Additional language extensions beyond object spread operators such as ES6.
Autofixed CSS, so you don't need wikit- or other prefixes.

A fast interactive unit test runner with built-in support for coverage reporting.
A live development server that warns of common errors.

A build script for bundling JS, CSS, and images with output lashes, hashes, and source maps.