1. Home
  2. Training Library
  3. Programming
  4. Courses
  5. Thinking in React: Component Hierarchy

How Do You Identify the Component Hierarchy?

Developed with


Group automatically created 2020-04-29 15:44:15.880345

The course is part of this learning path

ReactJS: Zero to Hero
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. 


We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com 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.

About the Author
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics