Component Based UI

• React -Angular. -Vue.

Step 1: Break The UI Into A Component Hierarchy

• single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. ..................

Step 2: Build A Static Version in React

To build a static version of your app that renders your data model, you’ll want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child.

note : What is the difference between state and props? props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function). .....................

Step 3: Identify The Minimal (but complete) Representation Of UI State

.....................

Step 4: Identify Where Your State Should Live

..................