# The Process

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6Fr0Gu1mcs-gxKRl%2Fthinking-in-react-mock.png?generation=1551374294189759\&alt=media)

## Start with a Mock

* Break the UI into a hierarchy
* Single Responsibility Principle
* Think in terms of Information Architecture
* Atoms first, Molecules second

![](https://931438517-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LZp63GpoOlhb_GliLon%2F-LZp6B99VhGSOxb_uLTG%2F-LZp6Fr2R79VXGPXc8py%2Fthinking-in-react-components.png?generation=1551374291971738\&alt=media)

## Component Hierarchy

1. &#x20;`FilterableProductTable`: contains the entirety of the example
2. &#x20;`SearchBar`: receives all user input
3. &#x20;`ProductTable`: displays and filters the data collection based on user input
4. &#x20;`ProductCategoryRow`: displays a heading for each category
5. &#x20;`ProductRow`: displays a row for each product
