React in nutshell

After my first failed attempt to learn react last year. I decided to give it a go again and learning it. I started watching Cory house’s(@housecor) tutorial on plural sight.
https://www.pluralsight.com/courses/react-flux-building-applications
Surprisingly, this time I found it fun to learn and easier to understand. The main thing that you need to keep in mind when you start learning react is, you need to forget what you have learnt in the past.
Prepare your brain to stop over analysing react with what you have known before and give react time to set in your brain. For years, we as developer, were putting our java scripts codes into html.  With react and jsx, you need to put html into java script files. We have learnt this approach as a bad practice in the past and our brain starts to guard against it as soon sees it. Look into react with open mind.

React in nutshell

React is a light weight view layer library and has a pluggable nature. It is only responsible for rendering views. Some saying that react is responsible for V in MVC and some argue that react is responsible for VC in MVC.
React is fast and responsive. It is efficient in how and when it manipulates the dom. It also eliminates layout thrashing by using virtual dom. It can work with ES5 (2009) or ES6 (2015) with Babel transpiler.

Reconciliation process

When react component is first initialized, the render method is called, generating a lightweight representation of the view. From that representation, a string of markup is produced, and injected into the document. When the data changes, the render method is called again. In order to perform updates as efficiently as possible, react differentiate the return value from the previous call to render with the new one, and generate a minimal set of changes to be applied to the DOM. The data returned from render is a lightweight description of what the DOM should look like.

React is component base and you can have multiple nested components.  It creates components by invoking the React.createClass() method which expects a render method.

Props and State concept

The Top level component(Controller/View) keeps the state of component and it passes down the data to its stateless children(components) via Props.
React thinks of UIs as simple state machines. You update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM in the most efficient way.

React Life Cycle

React component has different life cycle phases and various methods are executed at specific points in a component's lifecycle. I categorizesh them into four categories as you can see in following.

1- Initialization
2- Mounting
3- Updating
4- Unmounting

Initialization:

• getInitialState
  Invoked once before the component is mounted. The return value will be used as the initial value of this.state.
• getDefaultProps
  Invoked once and cached when the class is created. Values in the mapping will be set on this.props if that prop is not specified by the parent component 

Mounting:

• componentWillMount
  Invoked once, both on the client and server, immediately before the initial rendering occurs
• componentDidMount
  Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. 

Updating:

•  componentWillReceiveProps
  Invoked when a component is receiving new props. This method is not called for the initial render.
• shouldComponentUpdate
  Invoked before rendering when new props or state are being received. 
• componentWillUpdate
  Invoked immediately before rendering when new props or state are being received. This method is not called for the initial render.
• componentDidUpdate
  Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.

Unmounting: 

• componentWillUnmount
  Invoked immediately before a component is unmounted from the DOM.

 

@tylermcginnis33  showed the pipeline nicely in above diagram.




resources:
https://facebook.github.io/react
https://www.pluralsight.com/courses/react-flux-building-applications
https://tylermcginnis.com/an-introduction-to-life-cycle-events-in-react-js-aa3796ad85aa