Step 1: Break The UI Into A Small Components Hierarchy
The first thing you want to do is to draw boxes around every component in the mock and give them names. If you’re working with a designer, they may have already done, so go talk to them. Their Photoshop layer name may end up being the name of your React components!
But how do you know what should be in its own component? Use the same techniques for deciding if you should create new function or object. One such technique is single resposibilty principle, that is a component should ideally only do one thing. If it end up growing, it should be decomposed into smaller subcomponent.
Since you are often displaying a JSON data model to a user, you will find that your model was built correctly, your UI will is map nicely. That is because UI and data model tend to adhere to the same information and architectures. Separate your UI into components, where each component match one of the pieces of your data model.
You will see here that we have five components in our app. We have italicized data of each component represents. The number in the image correspond to the numbers below.
FilterableProductTable: contains the entirety of the example
SearchBar: receive all user input
ProductTable: display and filter the data collection based on user input
ProductCategoryRow: display a heading for each category
ProductRow: display a row for each product
If you look at the
ProductTable, you’ll see that the table header isn’t its own component. This is matter of preference, and there is an argument to be made either way. For this example, we left it part of
ProductTable because it is part of rendering data collection which is
ProductTable’s responsibility. However, if this header grow to be complex it would certainly make sense to make this its own
Now that we have identified the component in our mock, let’s arrange them into hierarchy. Component that appear within another component in mock should appear as a child in hierarchy: