React Deck 1

Question 1

What is React?

Answer 1

React is a front-end JavaScript library developed by Facebook in 2011.
It follows the component based approach which helps in building reusable UI components.
It is used for developing complex and interactive web and mobile UI.

Question 2

What are the features of React?

Answer 2

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 3

In calling setState, when would you pick one method of calling this function over the other?

Answer 3

passing setState a function passes props and prevState.

Question 4

Is setState a synchronous or async call?

Answer 4

setState() is asynchronous - or is called after the completion of the function that it was called in.

Question 5

What are the different ways that you can call setState ?

Answer 5

render()
constructor()
componentDidMount()
componentDidUpdate()
componentWillUnmount()

Question 6

List some of the major advantages of React.

Answer 6

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 7

What are the limitations of React?

Answer 7

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 8

What is JSX?

Answer 8

JSX is a shorthand for JavaScript XML. This is a type of file used by React which utilizes the expressiveness of JavaScript along with HTML like template syntax. This makes the HTML file really easy to understand. This file makes applications robust and boosts its performance. Below is an example of JSX:

render(){
return(

<div>

<h1> Hello World from Edureka!!</h1>

</div>

); }

Question 9

What is the virtual DOM? Explain how it works within ReactJS.

Answer 9

A virtual DOM is a lightweight JavaScript object which originally is just the copy of the real DOM. It is a node tree that lists the elements, their attributes and content as Objects and their properties. React’s render function creates a node tree out of the React components. It then updates this tree in response to the mutations in the data model which is caused by various actions done by the user or by the system.
This Virtual DOM works in three simple steps.

Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.

Then the difference between the previous DOM representation and the new one is calculated

Once the calculations are done, the real DOM will be updated with only the things that have actually changed.

Question 10

Why can’t browsers read JSX?

Answer 10

Browsers can only read JavaScript objects but JSX in not a regular JavaScript object. Thus to enable a browser to read JSX, first, we need to transform JSX file into a JavaScript object using JSX transformers like Babel and then pass it to the browser.