Quiz

short Quiz from Day -01

1. What is ReactJS?

ReactJS is an open-source frontend JavaScript library which is used for building user interfaces, specifically for single page applications. It is used for handling view layer for web and mobile apps. React was created by Jordan Walke, a software engineer working at Facebook. ReactJS was first deployed on Facebook’s newsfeed in 2011 and on Instagram.com in 2012.

2. What are the advantages and disadvantages of ReactJS?

Advantages:

1. Increases the application’s performance with Virtual DOM

2. JSX makes code is easy to read and write

3. It renders both on client and server side

4. Easy to integrate with other frameworks(Angular, BackboneJS) since it is only a view library

5. Easy to write UI Test cases and integration with tools such as JEST.

Disadvantages:

1. It is only a view layer, you have still to plug your code for Ajax requests, events and so on. Some people get surprised by that.

2. The library itself is pretty large.

3. The learning curve can be steep.

3. What is JSX?

JSX is a syntax notation for JavaScript XML(XML-like syntax extension to ECMAScript). It stands for JavaScript XML. It provides expressiveness of JavaScript along with HTML like template syntax. For example, the below text inside h1 tag return as javascript function to the render function

render() {
  return (
    <div>
      <h1> Welcome to React world!!</h1>
    </div>
  );
}

4. What are the differences between Props and State?

Both props and state are plain JavaScript objects. While both of them hold information that influences the output of render, they are different in their functionality with respect to component. Props get passed to the component similar to function parameters whereas state is managed within the component similar to variables declared within a function.

5. What are some lifecycle methods in a React component?

They are componentDidMount, componentWillMount, componentWillUpdate, componentDidUpdate, shouldComponentUpdate and componentWilReceiveProps.

6. What is Babel?

Babel is a JavaScript compiler: Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

• Transform syntax

• Polyfill features that are missing in your target environment (through @babel/polyfill)
• Source code transformations

• And more! (check out these videos for inspiration)

// Babel Input: ES2015 arrow function 
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent 
[1, 2, 3].map(function(n) {   
  return n + 1;
});

7. What do you understand from “In React, everything is a component.”

Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces. Then it renders each of these components independent of each other without affecting the rest of the UI.

8. Explain the purpose of render() in React.

Each React component must have a render() mandatorily. It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as <form>, <group>,<div> etc. This function must be kept pure i.e., it must return the same result each time it is invoked.

9. What is virtual DOM?

The virtual DOM (VDOM) is an in-memory representation of Real DOM. The representation of a UI is kept in memory and synced with the “real” DOM. It’s a step that happens between the render function being called and the displaying of elements on the screen. .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.

https://slides.com/kumartarun/deck-18-18-19-20-21-23-28#/slides.com