Title: Javascript / Interview / SRIQ - Reactjs interview questions - sudheer jonna / Part I - Fundamentals / Chapter 7 - React supported libraries Integration

Front: What is Relay?
Back: Relay is a JavaScript framework for providing a data layer and client-server communication to web applications using the React view layer.

Front: Give an example of Styled Components?
Back: Lets create <Title> and <Wrapper> components with specific styles for each.
import React from 'react';
import styled from 'styled-components';
// Create a <Title> component that renders an <h1> which is centered, red and sized at 1.5em
const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;
// Create a <Wrapper> component that renders a <section> with some padding and a papayawhip background
const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;
These two variables, Title and Wrapper, are now components that you can render just like any other react component.
<Wrapper>
    <Title>{'Lets start first styled component!'}</Title>
</Wrapper>

Front: What are Styled Components?
Back: 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.

Front: Why React tab is not showing up in DevTools?
Back: 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.

Front: What is the difference between React and Angular?
Back: 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.

Front: What are the advantages of React over Vue.js?
Back: 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.

Front: How to use Polymer in React?
Back: 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: 'calendar-element',
    ready: function () {
        this.textContent = 'I am a calendar';
    },
});
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/calendar-element.html" />
3. Use that element in the JSX file:
export default function MyComponent {
  return <calendar-element />;
}

Front: Why is DevTools not loading in Chrome for local files?
Back: 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.

Front: What is React Dev Tools?
Back: 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)

Front: How to use Font Awesome icons in React?
Back: 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:
function MyComponent {
  return <div><i className={'fa fa-spinner'} /></div>
}

Front: What is the difference between Flow and PropTypes?
Back: 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.

Front: What is Flow?
Back: 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.

Front: What is reselect and how it works?
Back: Reselect is a selector library (for Redux) which uses memoization concept. It was originally written to compute derived data from Redux-like applications state, but it can't be tied to any architecture or library.
Reselect keeps a copy of the last inputs/outputs of the last call, and recomputes the result only if one of the inputs changes. If the same inputs are provided twice in a row, Reselect returns the cached output. It's memoization and cache are fully customizable.