Back to course sections
    Mark As Completed Discussion

    What is React?

    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, with React Native) UI. Even though it was open-sourced only in 2015, it has one of the largest communities supporting it.

    Differences between the Real DOM and Virtual DOM

    Real DOMVirtual DOM
    It updates slowerIt updates faster
    Can directly update HTMLCannot update HTML directly
    Creates a new DOM if element updatesUpdates the JSX if element updates.
    DOM manipulation is very expensive.DOM manipulation is very easy.
    Too much memory wastageNo memory wastage.

    List some of the features of React along with its major advantages.

    Big features of React are listed below:

    • It leverages the virtual DOM instead of the real DOM, enhancing performance.
    • You can use both client-side rendering and server-side rendering, depending on need.
    • It follows uni-directional data flow or data binding, making it easier to debug.

    Some of the major advantages of React are:

    • It increases the application’s perceived performance by not re-rendering the entire HTML page.
    • It can be conveniently used on the client (as well as server-side) to support multiple use cases and be used alongside other frameworks.
    • Because of JSX, code’s readability increases.
    • React is easy to integrate alongside backend libraries like Rails, Node, Django, and even other frontend frameworks like Meteor, Angular, etc. if necessary.
    • Using React, writing UI test cases becomes easier since components are isolated and decoupled.

    What are the limitations of React?

    Limitations of React are listed below:

    • React is just a library, not a full-blown framework. You'll need to use plugins to get the full functionality others provide.
    • Its API library is very large and can take time to understand.
    • It can be a little difficult for novice programmers to understand, as you need to grok multiple concepts like composition, uni-directional data flow, JSX, etc.
    • Coding gets complex as it uses inline templating and JSX.

    What is JSX?

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

    The below snippet is an example of JSX:

    JAVASCRIPT
    1render(){
    2 return(
    3    <div>
    4      <h1> Hello World from World!!</h1>
    5    </div>
    6  );
    7}

    What do you know about the Virtual DOM? Explain how it works?

    The virtual DOM is a lightweight JavaScript object which originally is just a shallow copy of the real DOM. It forms a node tree that lists the elements, their attributes, and content as JS 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.

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

    The Virtual DOM and How It Works

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

      The Virtual DOM and How It Works

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

      The Virtual DOM and How It Works

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

    JAVASCRIPT
    1// Syntax has changed from ES5 to ES6 in the following aspects:
    2// 1. require vs import
    3// ES5
    4var React = require('react');
    5
    6// ES6
    7import React from 'react';
    8
    9// 2. export vs exports
    10// ES5
    11module.exports = Component;
    12
    13// ES6
    14export default Component;
    15
    16// 3. component and function
    17
    18// ES5
    19var MyComponent = React.createClass({
    20
    21	render() {
    22		return <h3>Hello World!</h3>;
    23	}
    24});
    25
    26// ES6
    27class MyComponent extends React.Component {
    28
    29	render() {
    30		return <h3>Hello World!</h3>;
    31	}
    32}
    33
    34// 4. props
    35
    36// ES5
    37var App = React.createClass({
    38	propTypes: { name: React.PropTypes.string },
    39	render: function() {
    40	return <h3>Hello, {this.props.name}!</h3>;}
    41});
    42
    43// ES6
    44class App extends React.Component {
    45render() {
    46	return <h3>Hello, {this.props.name}!</h3>;
    47	}
    48}
    49
    50// 5. state
    51// ES5
    52var App = React.createClass({
    53	getInitialState: function() {
    54		return { name: 'world' };
    55	},
    56	render() {
    57		return <h3>Hello, {this.state.name}!</h3>;
    58	}
    59});
    60
    61
    62
    63
    64// ES6
    65class App extends React.Component {
    66	constructor() {
    67	super();
    68	this.state = { name: 'world' };
    69	}
    70	render() {
    71		return <h3>Hello, {this.state.name}!</h3>;	
    72	}
    73}

    How is React different from Angular?

    CharacteristicsReactAngular
    ARCHITECTUREOnly the View of MVCComplete MVC
    RENDERINGClient-side/Server-side renderingClient-side rendering
    DOM


    Uses virtual DOM


    Uses real DOM

    DATA BINDING
    One-way data binding
    Two-way data binding
    DEBUGGING
    Compile-time debugging
    Runtime debugging
    AUTHORFacebookGoogle

    Build your intuition. Click the correct answer from the options.

    Everything in React is a _.

    Click the option that best answers the question.

    • Module
    • Component
    • Package
    • Class

    What is state in React and how is it used?

    State objects are the heart of React components. States are the source of data that feeds into the various views, and are encouraged to be kept as simple as possible. Basically, states are the objects and properties which determine components rendering and behavior (the final values that users see on their screen). They are mutable unlike the props and create dynamic and interactive components, and are accessed via this.state() or as variables with the useState hook.

    How can you update the state of a component?

    JAVASCRIPT
    1// State of a component can be updated using this.setState().
    2class MyComponent extends React.Component {
    3	constructor() {
    4		super();
    5		this.state = {
    6		name: 'Maxx',
    7		id: '101'
    8		}
    9	}
    10	render()
    11	{
    12	setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
    13	return (<div>
    14				<h1>Hello {this.state.name}</h1>
    15				<h2>Your Id is {this.state.id}</h2>
    16		</div>);
    17	}
    18}
    19
    20ReactDOM.render(
    21	<MyComponent/>, document.getElementById('content')
    22);

    Build your intuition. Click the correct answer from the options.

    In which directory React Components are saved?

    Click the option that best answers the question.

    • Inside js/components/
    • Inside vendor/components/
    • Inside external/components/
    • Inside vendor/

    Build your intuition. Click the correct answer from the options.

    How many elements does a react component return?

    Click the option that best answers the question.

    • 2 Elements
    • 1 Element
    • Multiple Elements
    • None of These

    Differentiate between states and props.

    ConditionsStateProps
    1. Receive initial value from the parent component

    YesYes
    2. Parent component can change the value
    NoYes
    3. Set default values inside the component
    YesYes
    4. Changes inside the component
    YesNo
    5. Set the initial value for child components
    YesYes
    6. Changes inside child componentsNoYes

    Are you sure you're getting this? Click the correct answer from the options.

    What is a state in React?

    Click the option that best answers the question.

    • Persistent storage
    • An internal data store (object) of a component
    • None
    • Both

    How can you embed two or more components into one?

    JAVASCRIPT
    1// We can embed components into one in the following way:
    2class MyComponent extends React.Component{
    3	render(){
    4		return( <div>
    5				<h1>Hello</h1>
    6				<Header/>
    7			</div>);
    8	}
    9}
    10
    11class Header extends React.Component{
    12	render(){
    13	return
    14		<h1>Header Component</h1>
    15	};
    16}
    17
    18ReactDOM.render(
    19	<MyComponent/>, document.getElementById('content')
    20);

    Are you sure you're getting this? Click the correct answer from the options.

    What is Babel?

    Click the option that best answers the question.

    • A transpiler
    • An interpreter
    • A Compiler
    • Both Compiler and Transpilar

    Are you sure you're getting this? Click the correct answer from the options.

    What does the "webpack" command do?

    Click the option that best answers the question.

    • Transpiles all the Javascript down into one file
    • Runs react local development server
    • Runs a module bundler
    • All of the above

    Are you sure you're getting this? Click the correct answer from the options.

    What port is the default where the webpack-dev-server will run?

    Click the option that best answers the question.

    • 3000
    • 8080
    • 3306

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

    Arrow functions is a convenient use of brief syntax for writing a function expression. They are also called fat arrow‘ (referring to the=>`) functions. These functions are bound to the context of their components, important to note since in ES6 auto binding is not available by default. Arrow functions are most useful while working with higher-order functions.

    JAVASCRIPT
    1// General way
    2render() {
    3	return(
    4		<MyInput onChange={this.handleChange.bind(this) } />
    5	);
    6}
    7// With Arrow Function
    8render() {
    9	return(
    10		<MyInput onChange={ (e) => this.handleOnChange(e) } />
    11	);
    12}

    Let's test your knowledge. Click the correct answer from the options.

    What is ReactJS?

    Click the option that best answers the question.

    • Server-side Framework
    • User-interface framework
    • A Library for building interaction interfaces
    • None of These

    Let's test your knowledge. Click the correct answer from the options.

    What are the two ways that data gets handled in React?

    Click the option that best answers the question.

    • state & props
    • services & components
    • Both
    • None

    Are you sure you're getting this? Click the correct answer from the options.

    In React what is used to pass data to a component from outside?

    Click the option that best answers the question.

    • setState
    • render with arguments
    • props
    • PropTypes

    Why can’t browsers read JSX?

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

    “In React, everything is a component.” Explain.

    Components are the building blocks of a React application’s UI. These components split up the entire UI into small independent and reusable pieces.

    It renders each of these components independent of each other without affecting the rest of the UI.

    What is the purpose of render() in React.

    Each React component must have a render() method. It returns a single React element-- the representation of the native DOM element. 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.

    What are Props?

    Props is the shorthand for Properties in React. They are read-only components that 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 helps in maintaining the unidirectional data flow and is generally used to render the dynamically generated data.

    What is flux?

    Flux is an application design paradigm used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook uses this pattern internally when working with React. The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:

    What is flux?

    One Pager Cheat Sheet

    • React is a component-based JavaScript library developed by Facebook in 2011 used to create complex and interactive web and mobile UIs.
    • The Real DOM updates slower but can directly update HTML, whereas the Virtual DOM updates faster but cannot update HTML directly, so it updates the JSX instead with no memory wastage.
    • React increases perceived performance, making it easy to integrate with other libraries, JSX increases readability, and UI test cases are easier to write.
    • React has a large API library and requires the use of multiple concepts and plugins to achieve full functionality, which may be challenging for novice programmers.
    • JSX is JavaScript XML that provides an easy-to-understand syntax for React applications to boost performance.
    • The Virtual DOM works by re-rendering the entire UI in its representation, calculating the difference between the previous and new DOM, and updating the real DOM with only the changes.
    • React's ES6 syntax has drastically changed from ES5 in terms of require vs import, export vs exports, component and function, props, and state.
    • React uses a One-way data binding virtual DOM, while Angular uses a Two-way data binding real DOM, and was created by Google and Facebook respectively.
    • React components are the building blocks of a React application, allowing for a more modular structure with built-in control of behavior and state to make the development process smoother and more organized.
    • React components use state objects to create dynamic and interactive elements by accessing them via this.state() or the useState hook.
    • The state of a component can be updated using this.setState().
    • React Components are typically saved in the js/components/ directory because they are written in JavaScript, making the structure convenient to keep the code organized and reducing setup when creating new projects.
    • A React component is a function or class that produces React Elements when invoked, potentially containing multiple or nested elements.
    • State is an object that keeps track of changing data within a component, and are managed within the component, while Props are used to pass data and event handlers from one component to another, and are managed by the parent component.
    • A React component's state is an internal object that holds data used to determine how the component renders and behaves, set with a default value and updated manually or when its props are changed.
    • We can embed multiple components into one using ReactDOM.render() and a parent component.
    • Babel is a JavaScript Compiler (also known as a Transpiler) that can transform ES6+ JavaScript code into older ES5 code supported by most browsers, enabling developers to use modern language features.
    • webpack bundles multiple individual JavaScript files, including those written with ES6 syntax, into a single file, while Babel compiles modern JavaScript code down to backward-compatible versions for browsers.
    • The webpack-dev-server bundles your source code and serves it to a local development environment accessible via the URL http://localhost:8080, running by default on port 8080.
    • Arrow functions are a concise syntax of function expression referred to as 'fat arrow', which bind to the context of their React components and are most useful with higher-order functions.
    • ReactJS is a JavaScript library developed by Facebook in 2013, used for building dynamic, reusable user interfaces for single page applications that can change data without reloading the page through its Virtual DOM.
    • ReactJS is a JavaScript library used for building user interfaces and web applications, which relies on state and props to track and pass data, respectively.
    • In React, props are passed to a component from outside to provide dynamic data.
    • Browsers can only read JavaScript objects, so JSX must be transformed into a JavaScript object using JSX transformers like Babel before being passed to the browser.
    • In React, components are used to divide the UI into small, independent, reusable pieces which are then rendered independently without affecting the rest of the application.
    • The render() method of React components must return a single React element which groups together other HTML elements, and must be kept pure.
    • Props are read-only immutable components that are passed down from the parent to the child components in React, helping to maintain a unidirectional data flow and render dynamic data.
    • Flux is a application design paradigm based on Unidirectional Data Flow, used to replace the traditional MVC pattern and is used by Facebook internally when working with React.