Hello Fellow Developers We are going to continue our discussion about thinking in react now that we got some hang of it lets take 2 steps at a time;)
Step 2: Build Static Version in React
Now that we have your component hierarchy, it’s time to implement our app. The easiest way is to build version that takes your data model and renders the UI but has no interactivity. It is best to decouple these processe because building a static version require a lot of typing and no thinking, and adding interactivity require lot of thinking and not a lot of typing.
To build static version of your app that render your data model, you will want to build component that reuse other components and pass data using props. props are way of passing data from parent to child. If you are familiar with the concept of state, dont use state at all to build this static version. State is reserved only with interactivity, that is data that change over time. Since this is static version of the app, you do not need it.
You can build any top-down or bottom-up. That is you can either start with building the components higher up in hierarchy or with the ones lower in it. In simpler example, it is usually easier to go top-down, and for larger projects, it is easier to go bottom-up and write test as you build.
At end of this step, we will have a library of reusable components that render your data model. The component will only have render() methods since this is static version of your app. The component at top of the hierarchy (FilterableProductTable) will take your data model as prop. If you make change to your underlying data model and call root.render() again, UI will be updated. You can see how your UI is updated and where to make change. React has one-way data flow keeps everything modular and fast.
Step 3: Identify The Minimal Representation Of UI’s State
To make our UI interactive, we need to be able to trigger changes to your underlying data model. React achieves with state.
To build our app correctly, we first need to think of the minimal set of mutable state that our app needs. Figure out the absolute minimal representation of state our application needs and compute everything else we need on-demand. For example, if we are building a TODO list, keep an array of the TODO items around; don’t keep separate state variable for count. Instead, when we want to render the TODO count, take the length of TODO items array.
Think of all pieces of data in our example application. We have:
- The original list of product
- The search text user has entered
- The value of checkbox
- The filtered list of product
Let’s go through each one and figure out which one state. Ask three question about each piece of data:
- Is it passed in from parent via props?
- Does it remains unchanged over time?
- Can we compute it based on any other state or props in our component? If so, it isn’t a state.
The original list of product is passed in as props, so that is not state. The search text and checkbox seem to be state since they change over time and can’t be computed anything. And finally, the filtered list of products isn’t state because it can be computed by combining the original list of product with search text and value of the checkbox.
So finally, our state is:
- The search text user has entered
The value of checkbox
Thanks for reading and see you guys in the final part of the blog
