A quick review of common frontend frameworks

Bootstrap

Use pre-styled class to change the style, such as img-responsive, text-center, etc.

jQuery

It is a JS library which simplifies HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.

In the beginning of the file, add the following code snippet in .

$(document).ready(function() {

// The code will run after HTML is rendered.


$("button").addClass("animated bounce");

//$(selector).do something(parameters);

}

Sass (Syntactically Awesome StyleSheets)

This is an extension of CSS. It allows CSS rules nesting, creating variables, etc. The most distinct feature for Sass is ‘@’ symbol.

React

It is used to build user interfaces. It creates components, handles state and props, utilises event listeners and certain life cycle methods to update data as it changes. React combines HTML with JavaScript functionality to create its own markup language, JSX.

Redux

A state management framework.

There is a single state object that’s responsible for the entire state of your application in Redux, which is called store. In Redux, all state updates are triggered by dispatching actions.

An action is simply a JavaScript object that contains information about an action event that has occurred.

Dispatch method dispatches actions to the Redux store.

Reducer modifies the state in response to actions. It returns a new copy of state as state is read-only.

subscribe method can subscribe a function. It will be called when an action is received and the store is updated.

It’s OK to define multiple reducers that handle different pieces of application’s state and then combine them to a root reducer.

Redux Thunk middleware deals with asynchronous requests.