React Deck 2

Question 1

How different is React’s ES6 syntax when compared to ES5?

Answer 1

Syntax has changed from ES5 to ES6 in following aspects:

require vs import

// ES5
var React = require('react');

// ES6
import React from 'react';
export vs exports

// ES5
module.exports = Component;

// ES6
export default Component;
component and function

// ES5
var MyComponent = React.createClass({
    render: function() {
        return

<h3>Hello Edureka!</h3>

;
}
});

// ES6
class MyComponent extends React.Component {
    render() {
        return

<h3>Hello Edureka!</h3>
;
    }
}
props

// ES5
var App = React.createClass({
    propTypes: { name: React.PropTypes.string },
    render: function() {
        return

<h3>Hello, {this.props.name}!</h3>

;
}
});

// ES6
class App extends React.Component {
    render() {
        return

<h3>Hello, {this.props.name}!</h3>
;
    }
}
state

// ES5
var App = React.createClass({
    getInitialState: function() {
        return { name: 'world' };
    },
    render: function() {
        return

<h3>Hello, {this.state.name}!</h3>

;
}
});

// ES6
class App extends React.Component {
    constructor() {
        super();
        this.state = { name: 'world' };
    }
    render() {
        return

<h3>Hello, {this.state.name}!</h3>

;
}
}

Question 2

Differentiate between Real DOM and Virtual DOM.Real DOM vs Virtual DOM

Answer 2

Real DOM vs Virtual DOM

1. It updates slow. 1. It updates faster.
2. Can directly update HTML. 2. Can’t directly
   update HTML.
3. Creates a new DOM if element updates. 3. Updates the JSX if element updates.
4. DOM manipulation is very expensive. 4. DOM manipulation is very easy.
5. Too much of memory wastage. 5. No memory wastage.

Question 3

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

Answer 3

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.

Question 4

Explain the purpose of render() in React.

Answer 4

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 , ,<div> etc. This function must be kept pure i.e., it must return the same result each time it is invoked.</div>

Question 5

How can you embed two or more components into one?

Answer 5

We can embed components into one in the following way:

class MyComponent extends React.Component{
    render(){
        return(          

<div>

<h1>Hello</h1>

</div>

        );
    }
}
class Header extends React.Component{
    render(){
        return

<h1>Header Component</h1>

   };
}
ReactDOM.render(
    , document.getElementById('content')
);

Question 6

What is Props?

Answer 6

Props is the shorthand for Properties in React. They are read-only components which must be kept pure i.e. immutable. They are always passed down from the parent to the child components throughout the application. A child component can never send a prop back to the parent component. This help in maintaining the unidirectional data flow and are generally used to render the dynamically generated data.

Question 7

What is a state in React and how is it used?

Answer 7

States are the heart of React components. States are the source of data and must be kept as simple as possible. Basically, states are the objects which determine components rendering and behavior. They are mutable unlike the props and create dynamic and interactive components. They are accessed via this.state().

Question 8

How can you update the state of a component?

Answer 8

The state of a component can be updated using this.setState()

Question 9

What is arrow function in React? How is it used?

Answer 9

Arrow functions are more of brief syntax for writing the function expression. They are also called ‘fat arrow‘ (=>) the functions. These functions allow to bind the context of the components properly since in ES6 auto binding is not available by default. Arrow functions are mostly useful while working with the higher order functions.

Question 10

Differentiate between stateful and stateless components. Stateful vs Stateless Components React

Answer 10

Stateful Component

1. Stores info about component’s state change in memory
2. Have authority to change state
3. Contains the knowledge of past, current and possible future changes in state
4. Stateless components notify them about the requirement of the state change, then they send down the props to them.