Thinking in React: Component Hierarchy
Group automatically created 2020-04-29 15:44:15.880345
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.
- [upbeat Music] - 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 in..in 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. [Up Beat music]
Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.
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.