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

Thinking in React: Component Hierarchy

Developed with
QA

Contents

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

The course is part of this learning path

ReactJS: Zero to Hero
course-steps
14
certification
5
lab-steps
3
description
1
play-arrow
Thinking in React: An Overview
Overview
DifficultyBeginner
Duration4m
Students66

Description

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.  

Prerequisites

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. 

Feedback 

We welcome all feedback and suggestions - please contact us at qa.elearningadmin@qa.com to let us know what you think. 

Transcript

- React makes developers think about the applications that are being built as they build them. Facebook's recommendation is to follow these steps when building apps in React. Firstly, start with a mock. Preferably some sample data and some wire frames or UI mock-ups. Once we have these, we can break the UI into a component hierarchy. This can be done using dummy data we have to display in any mock-ups that have been 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, We just want 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 gonna 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, we'll add inverse data flow. Quite often, components lower in the tree will provide data that we need further back up it like an input on a mystic form. React is uni-directional, 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

Students1742
Labs8
Courses29
Learning paths5

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