Some Top React Interview Questions

What is react?

React is an open-source JavaScript library, not a full-blown framework, and was created by Facebook. Instead of being a full MVC (like Angular) - it is only view - built with components. These components parse up the entire UI into small and reusable pieces. Then it renders each of these components independently without affecting the rest of the UI. Since React renders each UI component only as needed there are fast performance speeds.

What are some of the features of react?

It uses the virtual DOM instead of the real DOM, it does server-side rendering, and it does uni-directional data flow or data binding. It can increase an applications performance and can be integrated with other web frameworks.

What's the difference between the real DOM and the virtual DOM?

React makes a virtual copy of the DOM to determine what parts of the actual DOM need to change based on a user’s actions. It then grabs the change date from the Virtual DOM and selectively updates the actual DOM (instead of reloading reloading the entire thing). Since this prevents constant page reloading, it create signification performance improvements.

Real DOM

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

Virtual DOM

Updates Faster
Can't directly update the HTML
Update the JSX if the element updates
DOM Manipulation is very easy
No Memory Waste

What is JSX?

JSX is a shorthand for JavaScript XML. React utilizes the expressiveness of JavaScript along with HTML like template syntax.

Browsers can only read JavaScript objects but JSX in not like a regular JavaScript object, so to allow a browser to read JSX, we need to transform JSX file into a regular JavaScript object using JSX transformers like Babel or Webpack.

You don't need to use JSX to buld websites with React, though it is a helpful tool.

class Tickets extends React.Component {

    render() {
        return (
            <div class="from-edge">
                <Pricing />
                <Seasonpass />
                <Info />
            </div>
        )
    }
}

What does render() do in React?

It returns a single React element which is the representation of the native DOM component, it can also return a group of elements if they are nested within one html element.

Class Components vs Functional Components?

Functional components are a basic React component, defined by the components unchanging props (properties). Class components are the more complex components. Class Components allow you to execute component lifecycle methods as well as manage a component’s state.

What are Arrow Functions in React?

Arrow functions => are a syntax for function expressions and are one of the ways to pass parameters to callback functions. Using an arrow function creates a new function each time the component renders.

What's the difference between ES5 and ES6?

ECMAScript 6 was the second major revision to JavaScript and is also known as ES6 and ECMAScript 2015. ES5 was released in 2009.

Some of the big differences are with require vs import, how to export, and components

// ES5
var React = require('react');
// ES6
import React from 'react';

// ES5
module.exports = Component;
// ES6
export default Component;

// ES5
var MyComponent = React.createClass({
    render: function() {
        return
      <h4>Howdy!</h4>
    };
});
// ES6
class MyComponent extends React.Component {
    render() {
        return
       <h4>Howdy!</h4>
    }
}

What do you know about Flux?

Flux is an architectural pattern that enforces unidirectional data flow - and is not specific to React.

Action > Dispatcher > Store > View

While the Store data is shared between multiple Views, this data can’t be directly mutated — all of the requests to update the data must pass through the Action > Dispatcher chain first. Because of this when there are updates are made to the data, it is easier to find where the code requesting those changes is coming from.

What is Props in React?

Props (short for Properties) are read only components that are passed down from parent to child (maintaining the uni-directional data flow). They are immutable and mostly used to render dynamically created of gotten data - they describe the way a React component is configured.
Properties are set when instantiating the component, and they shouldn't be mutated afterwards. Mutating values within a component are tracked with the state property rather than the props property.

var TicketInfo = React.createClass({
  render: function() {
    return React.createElement("span", {
      className: this.props.className
    }, this.props.message);
  },

});

var ticketMessage = React.createElement(Message, {
  className: "coolTicket",
  message: "You have bought a ticket! Congrats!"
});
ReactDOM.render(ticketMessage)

What is State in React?

State is used to create dynamic and responsive components and can be accessed with this.state(). State is facilitated with event handlers on DOM elements that notify the component of the new state with the updated values retrieved from the DOM (like when a user types in an input box for example). The state of a component can be updated with this.setState().

 getInitialState: function() {
    return { message: this.props.message };
  },

  _ticketCount: function(e) {
    this.setState({ message: e.target.value });
  },

  render: function() {
    return (
      <div>
        <span>How Many Tickets: {this.state.countTickets}</span>
        <br />
        How Many Tickets? <input type="text" value={this.state.countTickets} onChange={this._ticketCount} />
      </div>
    );

What are Refs in React?

Short for Reference they help to store a reference to a particular React element or component, which will then be returned by the component's render configuration function. They are often used when you need to manage focus, media playback, or integrate with third-party DOM libraries.

What are some lifecycle methods?

All react lifecycle methods can be broken into these categories: Initialization, State/Property Updates, and Destruction.
Below are a handful of the lifecycle methods for react.

componentWillMount() This is called just before rendering takes place (client and also server-side).
componentDidMount() This is called on the client side only after first render - you might use this lifecycle method to fetch data from a server
shouldComponentUpdate() This returns a Boolean, by default false, of if you want your component to update.
componentWillUpdate() This is called before the rendering of a component.
componentWillReceiveProps() This lifecycle method is called as soon as the props are received from their component's parent class but also before the render is called (or recalled).
componentDidUpdate() This is called after the rendering for a component takes place.
componentWillUnmount() This is used to clear up the memory spaces after a component is unmounted from the DOM.

What is React Router?

React Router is a routing library built on top of React that keeps the URL in sync with data that’s currently being displayed on the web page while maintaining a standardized structure. It is used for developing single page web applications. Unlike for conventional routing only the history attribute is change instead of having a HTTP request sent to a server.