In an ideal world, as front-end developers, we'd be supplied with wireframes and mock ups to help us create beautiful UIs, to help us ensure that we display any data in components correctly. We should also have a sample dataset to work with, preferably in JSON. The mock and data that is shown here is for a course search form that will allow a user to type into the search box and filter the courses by using any part of their name. It will also only show advanced courses if a checkbox is checked. 

We can clearly see that the courses are separated into their category, and there are specific rows for each course and each category. Looking at our mock up, we need to draw boxes around every component and subcomponent we can identify on it. If we're lucky enough to have an image file created by a UX/UI designer, this may already contain different layers that may map to the components neatly. 

To help identify a component, you should do one thing, and the data layout on the model should map nicely. In our example, we have a filterable courses table component. This is the container for the whole UI we're trying to make. The first identified subcomponent is the search bar. This is responsible for recording the user's search parameters. We have a course table which will display the courses as a result of the search. This is populated by two further components. 

A course category row component whose job will be to display a course category, and a course row component, whose job will be to display the course name and its price. On this occasion, the component hierarchy is neatly defined, but it's also worth noting that this is not the only way we could implement this component hierarchy. That rings true across almost any application. The trick is to ensure that you are making as many reusable components as possible.