Nr.1

Question 1

Difference between Real DOM and Virtual DOM.

Answer 1

Real DOM:

1. It updates slow
2. Can directly update HTML
3. Creates a new DOM if element updates.
4. DOM manipulation is very expensive.
5. Too much of memory wastage.

Virtual DOM:

1. It updates faster.
2. Can’t directly update HTML.
3. Updates the JSX if element updates.
4. DOM manipulation is very easy.
5. No memory wastage.

Question 2

What is Virtual DOM?

Answer 2

1. Virtual DOM is very easy to understand if you take an example of a lift which has a mirror inside it. Suppose, 4 people enters into the lift. Now, the mirror will reflect its appearance with 4 people. Again people entering into the lift will reflect the object of mirror. And same effect happens when people exit from the lift, the mirror object gets changes (increase, decrease, or even empty). So, in reality mirror has no real object, but it only reflects its presence with outer object.

Virtual DOM is similar in concept. It has no real DOM. It is just a copy of real DOM wrapped in a JavaScript object. Whenever the DOM changes, virtual DOM also changes.

2. In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation of a DOM object, like a lightweight copy.

A virtual DOM object has the same properties as a real DOM object, but it lacks the real thing’s power to directly change what’s on the screen.

Manipulating the DOM is slow. Manipulating the virtual DOM is much faster, because nothing gets drawn onscreen.

Question 3

What is React?

Answer 3

React is a front-end JavaScript library (developed by Facebook) used in web-development to build interactive elements. It follows the component based approach which helps in building reusable UI components.

Question 4

What are the features of React?

Answer 4

Major features of React are listed below:

It uses the virtual DOM instead of the real DOM.
It uses server-side rendering.
It follows uni-directional data flow or data binding.

Question 5

Some of the major advantages of React.

Answer 5

Some of the major advantages of React are:

• It increases the application’s performance
• It can be conveniently used on the client as well as server side
• Because of JSX, code’s readability increases
• React is easy to integrate with other frameworks like Meteor, Angular, etc
• Using React, writing UI test cases become extremely easy

Question 6

What are the limitations of React?

Answer 6

Limitations of React are listed below:

• React is just a library, not a full-blown framework
• Its library is very large and takes time to understand
• It can be little difficult for the novice programmers to understand
• Coding gets complex as it uses inline templating and JSX

Question 7

The two ways of creating a React component in JavaScript are:

Answer 7

Using the React.createClass prototype function, or creating a class that extends React.Component.

(1. React.createClass is a function that returns an object; the argument is an object that maps properties to functions. 2. In ES6, we can create classes using React.Component as the prototype.)

Question 8

The difference between a React component’s properties and its state is that:

Answer 8

The state can be changed after the component is initialized, but the properties should not be.

Question 9

Why choose React for frontend?

Answer 9

React JS is basically a JavaScript library built and maintained by Facebook.

React is an efficient, declarative, and flexible open-source JavaScript library for building simple, fast, and scalable frontends of web applications.

Language used to build React application - JavaScript

ReactJS is a stronger framework because of its ability to break down the complex interface and allow users to work on individual components.

Question 10

What is shallow rendering? / Pluralsight

Answer 10

Rendering just the component and not its children

Question 11

Given this React function component:

function useStatus(EmpID) {
  const [currProject, setcurrProject] = useState();

// …

return currProject;
}

What can you tell about the useStatus function? / Pluralsight

Answer 11

It is a custom hook function

Question 12

Which API can measure how often React renders and what the cost of rendering is?

React.Provider
React.Analyzer
React.Performance
React.Profiler

Answer 12

React.Profiler

Question 13

How would a tool such as Babel or TypeScript compile the following JavaScript XML (JSX) line? / Pluralsight

Send
React.createElement(button, { type: ‘submit’ }, “Send”)

Send
React.createElement(“button”, { type: ‘submit’ }, “Send”)

Answer 13

React.createElement(“button”, { type: ‘submit’ }, “Send”)

Question 14

What is the React syntax to lazy load a component?

React.lazy(import(‘./some-component’))
React.lazy(() => import(‘./some-component’))
React.load(import(‘./some-component’))
React.load(() => import(‘./some-component’))

Answer 14

React.lazy(() => import(‘./some-component’))

Question 15

A React component has this line: import “../style.css”
The style.css file has Cascading Style Sheets (CSS) rules and the React component is styled according to them. Assuming your React web app stack uses ReactDOM, Webpack, Babel, and TypeScript, which part of that stack makes it possible for your React component to import the CSS file? / Pluralsight

Babel’s “env” preset
ReactDOM
A webpack loader
TypeScript’s JavaScript XML (JSX) transpiler

Answer 15

A webpack loader

Question 16

Given the following simple component:

function Hello() {
    return <div>Hello {props.firstName}</div>;
}

Which code snippet will set props.firstName to User1? / Pluralsight

Hello.props.firstName = "User1"
Hello.firstName = "User1"

React.Hello.firstName(“User1”)

Question 17

You have this state variable:

code [obj, setObj] = React.useState({ a: 1, b: 2 });

Which call will correctly set obj to have its a property equal to 7 and leave obj.b equal to 2? / Pluralsight

setObj(obj.a = 7);
setObj({ a: 7 });
setObj({ …obj, a: 7 })
setObj([…obj, a: 7]);

Answer 17

setObj({ …obj, a: 7 })