How Do You Identify the Component Hierarchy?


Group automatically created 2020-04-29 15:44:15.880345
How Do You Identify the Component Hierarchy?

This module introduces you to Thinking in React, and Component Hierarchy in React 

Learning Objectives 

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 

Intended Audience  

This Learning Path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 



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.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics