1. What is Flow?

    Flow is a static type checker designed to find type errors in JavaScript. Flow types can express much more fine-grained distinctions than traditional type systems. For example, Flow helps you catch errors involving null, unlike most type systems.

  2. What is the difference between Flow and PropTypes?

    Flow is a static analysis tool (static checker) which uses a superset of the language, allowing you to add type annotations to all of your code and catch an entire class of bugs at compile time.

    PropTypes is a basic type checker (runtime checker) which has been patched onto React. It can't check anything other than the types of the props being passed to a given component. If you want more flexible typechecking for your entire project Flow/TypeScript are appropriate choices.

  3. How to use Font Awesome icons in React?

    The below steps followed to include Font Awesome in React:

    1. Install font-awesome:

      $ npm install --save font-awesome

    2. Import font-awesome in your index.js file:

      import 'font-awesome/css/font-awesome.min.css'

    3. Add Font Awesome classes in className:

      render() {
  return <div><i className={'fa fa-spinner'} /></div>
}

  4. What is React Dev Tools?

    React Developer Tools let you inspect the component hierarchy, including component props and state. It exists both as a browser extension (for Chrome and Firefox), and as a standalone app (works with other environments including Safari, IE, and React Native).

    The official extensions available for different browsers or environments.

    1. Chrome extension

    2. Firefox extension

    3. Standalone app (Safari, React Native, etc)

  5. Why is DevTools not loading in Chrome for local files?

    If you opened a local HTML file in your browser (file://...) then you must first open Chrome Extensions and check Allow access to file URLs.

  6. How to use Polymer in React?

    You need to follow below steps to use Polymer in React,

    1. Create a Polymer element:

      <link rel='import' href='../../bower_components/polymer/polymer.html' />
Polymer({
  is: 'calender-element',
  ready: function() {
    this.textContent = 'I am a calender'
  }
})

    2. Create the Polymer component HTML tag by importing it in a HTML document, e.g. import it in the index.html of your React application:

      <link rel='import' href='./src/polymer-components/calender-element.html'>

    3. Use that element in the JSX file:

      import React from 'react'

class MyComponent extends React.Component {
  render() {
    return (
      <calender-element />
    )
  }
}

export default MyComponent

  7. What are the advantages of React over Vue.js?

    React has the following advantages over Vue.js:

    1. Gives more flexibility in large apps developing.
    2. Easier to test.
    3. Suitable for mobile apps creating.
    4. More information and solutions available.

Note: The above list of advantages are purely opinionated and it vary based on the professional experience. But they are helpful as base parameters.

  1. What is the difference between React and Angular?

    Let's see the difference between React and Angular in a table format.

    | React | Angular | | ----- | ------- | | React is a library and has only the View layer | Angular is a framework and has complete MVC functionality | | React handles rendering on the server side | AngularJS renders only on the client side but Angular 2 and above renders on the server side | | React uses JSX that looks like HTML in JS which can be confusing | Angular follows the template approach for HTML, which makes code shorter and easy to understand | | React Native, which is a React type to build mobile applications are faster and more stable | Ionic, Angular's mobile native app is relatively less stable and slower | | In React, data flows only in one way and hence debugging is easy | In Angular, data flows both way i.e it has two-way data binding between children and parent and hence debugging is often difficult |

Note: The above list of differences are purely opinionated and it vary based on the professional experience. But they are helpful as base parameters.

  1. Why React tab is not showing up in DevTools?

    When the page loads, React DevTools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization. If the website is not using React or if React fails to communicate with DevTools then it won't show up the tab.

  2. What are Styled Components?

    styled-components is a JavaScript library for styling React applications. It removes the mapping between styles and components, and lets you write actual CSS augmented with JavaScript.