25/05/2021
ReactJS Interview Questions and Answers
1) What is ReactJs?
• ReactJS is the Client Side Javascript Library.
• ReactJs given by facebook.
• ReactJS used to simplify the complex UI.
• By using ReactJS, we can split the complex UI to multiple executable solutions.
• Each executable solution called as component.
• Components are the building blocks of any React App.ReactJS is component based Library.
• We can reuse the components in ReactJS
• React’s one-way data binding keeps everything modular and fast.
• ReactJS is not a MVC Framework. ReactJS is the View in MVC.
2) Explain Virtual DOM??
• Virtual DOM is a lightweight JavaScript object.
• It is simply a copy of the real DOM
• Virtual Dom updates faster.
• Virtual Dom Can’t directly update HTML
• DOM manipulation is very easy
• No memory wastage
• The render() function in React is responsible for creating a node tree from the React components.
• A ReactElement is a representation of a DOM element in the Virtual DOM.
3) What is JSX ??
• JSX stands for Javascript + XML
• Brower can’t understand XML
• So, we must convert XML to Javascript
• We will use “Babel” tool for conversion.
• We will develop React Applications by using JSX.
• It makes easier to create templates
• It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript
• JSX is a XML-like syntax extension to ECMAScript without any defined semantics
Variable declaration:
const element =Hello, jsonworld!;
Above tag syntax is neither a string nor HTML.
It is called JSX, and it is a syntax extension to JavaScript. JSX produces React “elements”.
4) what is React.create Class ??
• React.createClass allows us to generate component classes.
• React 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 is using a custom JavaScript class system (createClass) while the other is using a “native” JavaScript class system.
• When using React’s createClass() method, we pass in an object as an argument. So we can write a component using createClass that looks like this:
import React,{Component} from “react”;
const Contacts = React.createClass({
render(){
return (
…..
);
}
});
export default Contacts:
• Instead of using a method from the react library, we extend an ES6 class that the library defines, Component.
import React,{Component} from “react”;
class Contacts extends React.Component({
constructor(props){
super(props);
}
render(){
return(
—–
);
}
}
• export default Contacts;
• constructor() is a special function in a JavaScript class.
• JavaScript invokes constructor() whenever an object is created via a class.
5) What is React DOM ??
• React DOM is the glue between React and the DOM.
• When you want to show your react component on DOM you need to use this ReactDOM.render(); from React Dom.
• The react-dom package contains ReactDOM.render, ReactDOM.unmountComponentAtNode, and ReactDOM.findDOMNode, and in react-dom/server we have server-side rendering support with ReactDOMServer.renderToString and ReactDOMServer.renderToStaticMarkup.
• – This package serves as the entry point to the DOM and server renderers for React.
–
• It is intended to be paired with the generic React package, which is shipped as react to npm.
Installation:
• npm install react react-dom
In the browser:
var React = require(‘react’);
var ReactDOM = require(‘react-dom’);
class MyComponent extends React.Component {
render() {
return Hello World;
}
}
ReactDOM.render(, node);
On the server:
var React = require(‘react’);
var ReactDOMServer = require(‘react-dom/server’);
class MyComponent extends React.Component {
render() {
return Hello World;
}
}
ReactDOMServer.renderToString();
API:
• react-dom
• findDOMNode
• render
• unmountComponentAtNode
• react-dom/server
• renderToString
• renderToStaticMarkupAttend
