How Do You Identify the Component Hierarchy?
Group automatically created 2020-04-29 15:44:15.880345
The course is part of this learning path
This module introduces you to Thinking in React, and Component Hierarchy in React.
The objectives of this module are to provide you with an understanding of:
- The development methodology suggested for React applications
- How to identify the component hierarchy for a given application
This learning path is aimed at all who wish to learn how to use the ReactJS framework.
We welcome all feedback and suggestions - please contact us at firstname.lastname@example.org to let us know what you think.
- [Instructor] In an ideal world, as front-end developers, we'd be supplied with wireframes and mockups to help us create beautiful UIs. To help us ensure that we display any data and 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 call 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 mockup, 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, it should do one thing on the data layout and the model should mark nicely. In our example, we have a Filterable Courses Table component. This is the container for the whole UI we are 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 cost category and a Cost 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.