Ads Top

Learning the basics - ReactJS and Redux

Learning the basics - React and Redux

REACTJS

A JavaScript library built by Facebook for building user interfaces. It is currently one of the most popular JavaScript libraries and is used in creating interactive reusable UI components. ReactJS has an advantage over other libraries, that it can run not only on client side and server side but also in mobile apps using React Native.

ReactJS works on the concept of virtual DOM instead of direct DOM manipulation.

Virtual DOM

Most modern and interactive applications are based on DOM manipulations. Let's say you have a list of 20 items and you made changes to the first item only. Most of the JavaScript frameworks will rebuild the entire list rendering all the 20 items again. The other 19 items didn't need to update. This may not seem a big problem for any browser to update but websites may have huge amount of DOM manipulations to do which slow down the process. This inefficient updating of DOM led to the creation of Virtual DOM in ReactJS.


Virtual DOM is just a representation of an actual DOM. In ReactJS, every DOM object has its own corresponding "virtual DOM object". Virtual DOM is like a blue print of actual DOM. 

When we render an element with a change in the DOM, the virtual DOM gets updated. React then compares the new updated virtual DOM with the previous snapshot of virtual DOM. It checks for the updates as which virtual DOM object is updated. This process is called "diffing". After this check, React updates only and only those objects on the real DOM which involved the change instead of the whole DOM.

So, if we have updated only one item in the list of 20 items then virtual DOM will push the update to the DOM with only one item change instead of rebuilding the whole list of 20 items again.

Component

An individual component in ReactJS can be considered as a UI component in an app. React components associate cleanly to UI components and are self-contained. A component has its own markup, logic and style(sometimes) contained in itself which makes it reusable in React.

JSX

JSX(JavaScript eXtension syntax) is a syntax extension for JavaScript built by Facebook. JSX lets us write the markup for component in an HTML like syntax. This JSX code then compiles to vanilla JavaScript.


ReactJS basic example


class MyFirstProject extends React.Component { //using ES6 class method
 render() {  //render() is the only required method for a react component
  return(  //JSX syntax
   <div className="container">     
     Hello World!
   </div>
  );
 }
}


Important Points

  • In JSX, braces{} are a delimiter which signals to JSX that what resides in-between {} is a JavaScript expression.
  • React follows a uni-directional pattern of data flow which means data flows only in one direction i.e from parent to children through props.
  • Event flows from children to parent through functions.
  • A child component does not own its own props. Parent component owns the props and passes down the props to the child component.
  • Props are immutable. Thus, they cannot be modified.
  • State is owned by the component itself.
  • When the state or props of a component update, the component will re-render itself.

REDUX

Redux is “predictable state container for JavaScript apps.” In other words, it is an application data-flow structure architecture unlike other traditional libraries or frameworks like Angular.js or Underscore.js. It is based on flux implementation but not entirely.
Redux data flow
  • Actions: Any change made to the app state. When we need to trigger an action on a component, we call action with required data passed as an argument.
    Action Creator is a function returning call back for dispatching an action.
  • Reducers: Reducer is a function which takes the current state and returns the new function based on the action. Redux puts the new state to the component and re-renders the view.
    Reducer accepts the current state and returns the new state based on the action.
  • Store: It is just one big JavaScript object which creates the whole state tree of app. It stores all your application’s state/data. There should only be single store in your app.
  • Provider: Provider is responsible for connecting all of its containers with the actual store.
  • Containers: Containers fetch state data and use it to render (display) components. When app’s state changes, components are re-rendered. Its main purpose is to connect directly to the global store so you can avoid having to manually manage state and props.

Why Redux?

Imagine you have an arrangement of squares and a circle and you want to swap the positions of the second square and the circle.
Why Redux?
Let’s try 2 different approaches to achieve the desired result.

Approach 1:
approach_a
In order to achieve this desired state of squares and circle, we’ll have to drag the circle down, drag the square to the top-right and nudge the circle a little to its right (as illustrated in the picture):

Approach 2:
approach_b
Let’s create another setting B which is an another instance of A (the initial state) but with the desired set up. We don’t need to go to setting A to make the changes, instead we are going to make changes in the setting B which is a new and unique setting. If somehow, we didn’t like the new set up, we can always switch back to setting A in no time without changing the whole set up again into initial state.

Q - Which approach was faster and better?
A - Approach 2
Reason: Creating new and unique setting B might took time but it didn’t take more time in switching states than “dragging the circle down, dragging the square to the top-right corner and then nudging the circle to its right” approach.
There is a flexibility to time-travel between different app’s states as we saw in approach 2.
This is exactly - what Redux does to our app.

Consider this as your application state with child nodes:
initial state of app containing children nodes
Initial State
Q - How would you make changes to the children nodes?
A - No, you can't because the application state is immutable.
How does Redux help ?
With redux, you can make the duplicate of the children nodes you want to adapt the changes. Therefore, the original children nodes will stay put and they won’t be re-rendered. The new and unique children nodes will show the new state changes. It is also easy to switch between the original children nodes and the new children nodes back and forth which comes handy while debugging.

new state of app containing children nodes
New State

REACT + REDUX


React is a view library which manages state as well but we need Redux to manage persistent change of state.

difference between react and redux use

8 comments:

  1. I definitely comply with some points that you just have mentioned on this post. I appreciate that you just have shared some reliable recommendations on this review.

    ReplyDelete
  2. Great article, Thanks for your great information, the content is quiet interesting. I will be waiting for your next post.

    ReplyDelete
  3. Very interesting blog. A lot of blogs I see these days don't really provide anything that attract others, but I'm most definitely interested in this one. Just thought that I would post and let you know.

    ReplyDelete
  4. It was an excellent Blog to see from you which is very useful. Thank you so much for gathering all this information about React.js, it’s very clever and will be extremely helpful for all people.

    ReplyDelete

  5. It'sVery informative blog and useful article thank you for sharing with us , keep posting learn moreReact js Online Training Hyderabad

    ReplyDelete
  6. Nice work, your blog is concept-oriented, kindly share more blogs like this
    React js Online Training

    ReplyDelete
  7. Nice post. I learn something totally new and challenging on websites I stumble upon every day. It's always useful to read through articles from other authors and practice something from other sites.
    Reactjs Training in Bangalore

    ReplyDelete

Powered by Blogger.