React Js Modularity - Breaking a monolith react component into modular components

Earlier in 2017, I have written a few articles on Basics of SharePoint Framework, Use of React JS and React JS component life cycle. 

But Most of the SPFx web parts I created were task oriented and not application oriented. This means the size of the React components is small. 

Now I am working on a product / application level components which are complex and big in size.

Here is a screenshot of a POC I am currently working.

React Component Life Cycle

What is your favorite technical article?

For me, Understanding ASP.Net View State is my all time favorite article. I might have read it hundred's of times. It helped me all my career as a dot.net & sharepoint developer.

so, when we have our basics clear, complex tasks will be easy to handle. So the same applies for REACT as well.

Example: 
I have recently worked on a SPFX webpart integration with JqueryUI.

React Component Basics

For this post , i assume you are familiar with basics of SharePoint framework development, using yoman templates , node package manager and gulp. Else please refer to my earlier post Basics of SPFX

Sharepoint Framework (SPFX) is becoming popular as it is the only way to add custom functionality to a Sharepoint Online modern pages.

We can integrate any java script framework to work with SPFX. In last post we did integrate Angular with SPFX.  But, we need to do everything from scratch like importing packages and then adding them in config files, etc.

REACT is one of the java script framework which comes with yoman scaffold out of the box. So the installation, references and default code were taken care by yoman generator. React got lot of plugin support and its consistently improving by each version.

So REACT became a mandatory component to learn for SPFX development.

REACT coding is mostly dealing with properties and state on client side. 

For this we have 2 types of components in REACT.