Introduction to React & Redux

React

React is a JavaScript library created by Facebook for building complex and interactive UIs. Using Component-Based design, Virtual DOM (Memory DOM), and declarative view — make code more specific and predictable.
By keep updating the component that contains the data changes. Basically, React components are written in JSX (Javascript Extension Syntax) and ES6.

Redux

Redux is a concept of data storing and communication within an application, inspired by Flux. However, Redux manages the state with predictable behavior. With unidirectional data flow (one-way data flow). Remember that, always using immutable data in Redux.

To make it clear. Redux is all about Store, Actions, and Reducers.

First thing is to create an action in Redux. Here is an example of creating an action add todo for Todo List app. In this action contains type and text.

const action = {
  type : 'ADD_TODO',
  text : 'Call mom!'
}

To create an action in the component by using button onClick. The simple example will be something like the following code.

function addTodo(title) {
  const action = {
    type : 'ADD_TODO',
    title : title
  }
}
// create this action on
<button onClick={dispatch(addTodo('Call mom!')}>
    Add Todo
</button>

After the component dispatches action, Reducer will get state and action like when to add new todo in the todo list will set text as in input action.text and set default complete as false.

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [{
        text: action.text,
        complete: false
      }, ... state]
    default:
      return state;
    }
}

Note that Reducer takes previous state and action, and return the next state.

(previousState, action) => nextState

Good To Know

Babel is a javascript compiler that used to convert a JSX and ES6 into javascript syntax.

Webpack is simply a module bundler. For instance, webpack can be used to create hot reload (real time updates) using webpack-hot-middleware.

By understanding all basic of React and Redux. The next step is to create a simple application using React and Redux.