React Interview Questions

You can use applyMiddleware().

For example, you can add redux-thunk and logger passing them as arguments to applyMiddleware():

import { createStore, applyMiddleware } from "redux";
const createStoreWithMiddleware = applyMiddleware(
ReduxThunk,
logger
)(createStore);

You need to pass initial state as second argument to createStore:

const rootReducer = combineReducers({
todos: todos,
visibilityFilter: visibilityFilter,
});

const initialState = {
todos: [{ id: 123, name: "example", completed: false }],
};

const store = createStore(rootReducer, initialState);

Relay is similar to Redux in that they both use a single store. The main difference is that relay only manages state originated from the server, and all access to the state is used via GraphQL queries (for reading data) and mutations (for changing data). Relay caches the data for you and optimizes data fetching for you, by fetching only changed data and nothing more.

Actions are plain JavaScript objects or payloads of information that send data from your application to your store. They are the only source of information for the store. Actions must have a type property that indicates the type of action being performed.

For example, let's take an action which represents adding a new todo item:

{
type: ADD_TODO,
text: 'Add todo item'
}

React Native

React is a JavaScript library, supporting both front end web and being run on the server, for building user interfaces and web applications.

React Native is a mobile framework that compiles to native app components, allowing you to build native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use React to build your components, and implements React under the hood.

React Native can be tested only in mobile simulators like iOS and Android. You can run the app in your mobile using expo app (https://expo.io) Where it syncs using QR code, your mobile and computer should be in same wireless network.

You can use console.log, console.warn, etc. As of React Native v0.29 you can simply run the following to see logs in the console:

$ react-native log-ios
$ react-native log-android

Follow the below steps to debug React Native app:

1. Run your application in the iOS simulator.
2. Press Command + D and a webpage should open up at http://localhost:8081/debugger-ui.
3. Enable Pause On Caught Exceptions for a better debugging experience.
4. Press Command + Option + I to open the Chrome Developer tools, or open it via View -> Developer -> Developer Tools.
5. You should now be able to debug as you normally would.

React supported libraries & Integration

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.

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.

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.

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>
}

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)

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.

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 />;
}