React: thinking as a component

Demo

This should be one of the first to mention and start with while building react components and also best explained already by Pete Hunt his docs. My explanation and example are just reiteration of similar thinking. Following are the steps to keep in mind while working with react.

1. Break the UI into component hierarchy When you see UI mocks, you should be able to break down the UI into various components representing the hierarchy. This makes more sense as underlying structure, which is DOM itself is represented by tree structure. More you practice, better you would be in breaking the UI into various components and sub components. Some techniques: follow Single Responsibility Principle so that component will be doing only one thing. Next, check your data model, a component should be responsible to represent certain part of the model.
2. Build Static Version in React This will be the first time you write some code. Create all those components finalized from step 1 and have it render your static data model. Use props to pass data from parent to child. Build components either top-down or bottom-up approach. Note that the flow of data is one directional: You pass data model from parent to child components and child components renders to represent the view. However, this is true only for the first time. To make view interactive and update/render when data changes, the data being passed are categorized into two types: props and states. If a view changes the props value, component will be update itself however when state value changes the view gets render automatically. So now you know if you want to render view, you need to change the value of state data. Next is how to Identify the states.
3. Identify the minimal representation of UI state So what you learned so far from step 2 is only state change triggers re-render of your view. Some tips for Identifying what data make just props and what make states: Keep the states to minimal set, think of all the pieces of data in the application. And ask these three questions to qualify data for state:
   1. Is it passed in from a parent via props? If so, it probably isn't state.
   2. Does it change over time? If not, it probably isn't state.
   3. Can you compute it based on any other states or props in your component? if so, it isn't state.
4. Identify where the state should live Once we identify the states, next major step is Identifying where component should own these states. Following tips helps to find the owner of state:
   1. Identify all the components that renders something based on this state.
   2. Find common component of all components identified above up in hierarchy.
   3. Either this common component or another in higher up in the hierarchy should own the state.
   4. If you can't find a component where it makes sense to own the state, simply create a new component for holding the state and add it somewhere in the upper hierarchy as common owner component. Hence, the owner component should have getInitialState method to return the state object, the initial state of the application. Then pass this state object to child components as a prop and use this prop to render the view.
5. Add inverse data flow Remember the meaning of one-directional data flow: data or state should be changed only by their owner component and the child components should be simply responsible to let the owner know about user interaction and actions so that owner could update the data respective components could re-render to update the view. Basically this is done by creating callback function in owner component that updates the state and data. Such function will be passed to child components who will trigger on user interaction and consequently causing all the components to re-render if the state has been passed those components as a props.