This video is available to students only

React core concepts

So far, we've built and refactored a great React app. Now, it's time to talk about the fundamental principles of React components and its core concepts.

Under the hood: React core concepts#

In this final lesson in Module 2, we’re going to briefly introduce a core concept that lives right at the heart of React and that’s how to pass data around between different components.

I meet a lot of students who are both new to coding or new to React and one of the common sticking points is how to deal with data; passing it to other components, and getting other data back into the original, parent component.

Component relationships#

Because of the modular nature of React development, you will generally be focused on creating small, isolated parts of functionality within your apps. You’ll then build larger features or areas within the app by combining these modules or components together.

Even if one component is not a logical parent of another, that component may reference another in order to build some area of functionality. The component doing the referencing can be thought of as the parent component, whilst the component being referenced can be thought of as the child component.

As an example, a header is not naturally related to a shopping basket, but an e-commerce website might have a count of the current items in the shopping basket in the header somewhere. Therefore, we can say that the header component would be the parent component, and the shopping basket would be the child.

Of course, parents can have parents themselves and children can have children. The important thing to remember is this initial relationship as it dictates how data flows within a React app.

Data flow within React#

Without getting lost in complex topics such as Redux (which we’ll be covering in a later module), data generally flows in two directions within React:

  • Down via props

  • Up via events and event handlers

Looking at this visually:

Data flow within React
 

This page is a preview of Beginner's Guide to Real World React

No discussions yet