Thinking in React: Component Hierarchy


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

The course is part of this learning path

Thinking in React: An Overview

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. 



React makes developer think about the applications that are being built as they build them. Facebook's recommendation is to follow these steps on building apps React. Firstly, start with a mock, preferably some sample data and some wire frames on UI mock ups. 

Once we have these, we can break the UI into a component hierarchy. This can be done using dummy date we have to display in any markups that are then supplied, once we have the component hierarchy, we can build a static version in React. This involves taking the data and displaying it creating the components that we need to display that data. 

At this point we're not bothered about any interactivity, which is what the markup in place before we add that, next we can identify the minimal but complete representation of UI state. For our application to be interactive, we're going to have some moving parts. The trick here is to identify what's likely to change and why. Depending on that we can decide if it's part of the UI state or not. 

Once we've identified the UI state, we need to identify where that state should live i.e which component state is the single source of truth for data in our React components. So it's important that we put state in the right place, we can pass state down the component tree using props and other mechanisms if we need to. 

Finally, a lot inverse data flow. Quite often components lower in the tree will provide data that we need further backup it like an input on a nested form. React is unidirectional, which on the face of it will cause problems with this, but we will see how we will overcome this using a strategy to pass handling functions as props, the next set of videos will walk you through this entire process, and introduce you to important concepts like props and state in react, as well as how to handle data and some tricks and tips on coding simple and efficient components.

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