Thinking in React: Component Hierarchy
Group automatically created 2020-04-29 15:44:15.880345
The course is part of this learning path
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.
We welcome all feedback and suggestions - please contact us at firstname.lastname@example.org to let us know what you think.
- 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