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











Comments

Synsoft Global said…
This is a very nice blog.
I've gone through the blog and it seems proper detailed information which could help anyone to understand about reactjs. I was also searching to hire react js development company and got your blog.
Thanks for sharing such a great blog.

Synsoft Global
Synsoft Global said…
Nice Blog.
The details that you mentioned to use react js development and its details. This will help people to understand the details of this Javascript.
I was searching for reactjs development company and got this blog. Thanks for sharing such a great blog.
Back linker said…
The Latest Mount and Blade Warband 2022 Crack is the standalone expansion pack to the strategy action playing game. Mount And Blade Warband Crack
syedhaseeb said…
SiSoftware Sandra Crack brings new possibilities in benchmarking and diagnostic features that support remote analysis for PCs, mobile devices, and networks. Sisoftware Crack Download
Links For You said…
Provide a husband a deal with of love, fun, elegance and heavy feelings. Let us make daily a memory space that will assistance the base of your marriage more more powerful and complete of correct passion. Good Morning Husband
Ravi Rajput said…
This Blog is very helpfull for me. Thank you for providing as best information.
Oracle SQL Training in Gurgaon