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

React creates a Virtual DOM. When state changes in a component it firstly runs a "diffing" algorithm, which identifies what has changed in the virtual DOM. The second step is reconciliation, where it updates the DOM with the results of diff.

• It uses the virtual DOM instead of the real DOM.
• It uses server-side rendering.
• It follows uni-directional data flow or data binding.

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

• It increases the application's performance
• It is easy to know how a component is rendered, you just need to look at the render function.
• JSX makes it easy to read the code of your components. It is also really easy to see the layout, or how components are plugged/combined with each other.
• You can render React on the server-side. This enables improves SEO and performance.
• It is easy to test.
• You can use React with any framework (Angular.js, Meteor, Backbone.js) as it is only a view layer.
• Using React, writing UI test cases become extremely easy

• It increases the application's performance
• It can be conveniently used on the client as well as server side
• Because of JSX, code's readability increases
• React is easy to integrate with other frameworks like Meteor, Angular, etc
• Using React, writing UI test cases become extremely easy

• React is just a library, not a full-blown framework
• Its library is very large and takes time to understand
• It can be little difficult for the novice programmers to understand
• Coding gets complex as it uses inline templating and JSX

Presentational components are concerned with how things look. They generally receive data and callbacks exclusively via props. These components rarely have their own state, but when they do it generally concerns UI state, as opposed to data state.

Container components are more concerned with how things work. These components provide the data and behavior to presentational or other container components. They call Flux actions and provide these as callbacks to the presentational components. They are also often stateful as they serve as data sources.

• Class components allows you to use additional features such as local state and lifecycle hooks. Also, to enable your component to have direct access to your store and thus holds state.
• When your component just receives props and renders them to the page, this is a 'stateless component', for which a pure function can be used. These are also called dumb components or presentational components.

The state is a data structure that starts with a default value when a Component mounts. It may be mutated across time, mostly as a result of user events.

Props (short for properties) are a Component's configuration. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components. Props do not have to just be data - callback functions may be passed in as props.

componentWillMount - this is most commonly used for App configuration in your root component.

• componentDidMount - here you want to do all the setup you couldn't do without a DOM, and start getting all the data you need . Also if you want to set up eventListeners etc . this lifecycle hook is a good place to do that.
• componentWillReceiveProps - this lifecyclye acts on particular prop changes to trigger state transitions.
• shouldComponentUpdate - if you're worried about wasted renders shouldComponentUpdate is a great place to improve performance as it allows you to prevent a rerender if component receives new prop. shouldComponentUpdate should always return a boolean and based on what this is will determine if the component is rerendered or not.
• componentWillUpdate - rarely used. It can be used instead of componentWillReceiveProps on a component that also has shouldComponentUpdate (but no access to previous props).
• componentDidUpdate - also commonly used to update the DOM in response to prop or state changes.
• componentWillUnmount - here you can cancel any outgoing network requests, or remove all event listeners associated with the component.

componentDidMount is where an AJAX request should be made in a React component. This method will be executed when the component "mounts" (is added to the DOM) for the first time. This method is only executed once during the component's life. Importantly, you can't guarantee the AJAX request will have resolved before the component mounts. If it doesn't, that would mean that you'd be trying to setState on an unmounted component, which would not work. Making your AJAX request in componentDidMount will guarantee that there's a component to update.

Returning null from a component's render method means nothing will be displayed, but it does not affect the firing of the component's lifecycle methods.

If the amount of times the component re-renders is an issue, there are two options available. Manually implementing a check in shouldComponentUpdate lifecycle method hook.

shouldComponentUpdate(nextProps, nextState){ // Do some check here return resultOFCheckAsBoolean}

Or using React.PureComponent instead of React.Component React.PureComponent implements shouldComponentUpdate() with a shallow prop and state comparison. This enables you to avoid re-rendering the component with the same props and state.

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow.

A child class constructor cannot make use of this until super() has been called. Also, ES2015 class constructors have to call super() if they are subclasses. The reason for passing props to super() is to enable you to access this.props in the constructor.

The basic idea of redux is that the entire application state is kept in a single store. The store is simply a javascript object. The only way to change the state is by firing actions from your application and then writing reducers for these actions that modify the state. The entire state transition is kept inside reducers and should not have any side-effects.

• Maintainability: maintenance of Redux becomes easier due to strict code structure and organisation.
• Organization: code organisation is very strict hence the stability of the code is high which intern increases the work to be much easier.
• Server rendering: This is useful, particularly to the preliminary render, which keeps up a better user experience or search engine optimization. The server-side created stores are forwarded to the client side.
• Developer tools: It is Highly traceable so changes in position and changes in the application all such instances make the developers have a real-time experience.
• Ease of testing: the first rule of writing testable code is to write small functions that do only one thing and that are independent. Redux’s code is made of functions that used to be: small, pure and isolated.

The store is a javascript object that holds application state. Along with this it also has the following responsibilities:

• Allows access to state via getState();
• Allows state to be updated via dispatch(action);
• Registers listeners via subscribe(listener);
• Handles unregistering of listeners via the function returned by subscribe(listener).

Functional programming concepts used to structure Redux:

• Functions are treated as First class objects.
• Capable to pass functions in the format of arguments.
• Capable to control flow using, recursions, functions and arrays.
• helper functions such as reduce and map filter are used.
• allows linking functions together.
• The state doesn’t change.
• Prioritize the order of executing the code is not really necessary.

Call-back from UI component dispatches an action with a payload, these dispatched actions are intercepted and received by the reducers. this interception will generate a new application state. from here the actions will be propagated down through a hierarchy of components from Redux store. The below diagram depicts the entity structure of a redux+react setup.

Actions are plain javascript objects. They must have a type indicating the type of action being performed. In essence, actions are payloads of information that send data from your application to your store.

Actions in Redux are functions which return an action object. The action type and the action data are packed in the action object. which also allows a donor to be added to the system. Actions send data between the store and application. All information’s retrieved by the store are produced by the actions.

A reducer is simply a pure function that takes the previous state and an action, and returns the next state.

A reducer is simply a pure function that takes the previous state and an action, and returns the next state.

• Reset: allow to reset the state of the store
• Revert: Roll back to the last committed state
• Sweep: All disabled actions that you might have fired by mistake will be removed
• Commit: makes the current state the initial state

Redux thunk is middleware that allows you to write action creators that return a function instead of an action. The thunk can then be used to delay the dispatch of an action if a certain condition is met. This allows you to handle the asynchronous dispatching of actions.

There are some specific testing tools and dependencies for testing with React:

• Enzyme, JavaScript Testing utilities for React by AirBnB
• Jest, delightful JavaScript Testing

Of course you can use other tools like JSDom, Mocha, Karma but Enzyme and Jest are highly recommended.