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.
In an ideal world, as front-end developers, we'd be supplied with wireframes and mock ups to help us create beautiful UIs, to help us ensure that we display any data in 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 course 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 mock up, 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, you should do one thing, and the data layout on the model should map nicely. In our example, we have a filterable courses table component. This is the container for the whole UI we're 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 course category, and a course 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.
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.