Understanding React: For Visual Learners

6 min readNov 3, 2020

When building a React Applications you are given a number of files. The files listed below are the essential files to understand the transfer, and rendering of data through our React App. In this article we will have a mock project with the App, Parent, and Child Class Components. The goal will first be to understand our file structure and communication, passing data “downstream”, and finally communicate back “upstream”. We will be exhibiting the cross class communication by “giving our Child” Class Component three meals (breakfast, lunch, dinner). The breakfast is stored in the App Class, lunch is stored in the Parent Class, and the dinner will also be created by the Parent Class, however the Child Class will need to give the Parent Class one of the ingredients.

**Focus on Class Component. React also has Functional Components, which are similar (one of key differences is that functional components do not have state🌟).

**other elements still persist in their classes, however they were removed from goal for esthetic purposes

File Structure: On the left we see our files, along with some details, and our component tree. The Parent Class is the “child” of our App Class, the Parent Class is the “parent” of our Child Class.

File Communication & Passing Data “Downstream”

As mentioned above, there will be several standard files. The index.html provides the “skeleton” HTML for the page. The index.js connects our App to the index.html file. As we can see on the left,<App /> is appended (added) to the div where id=“root”(1). The App.js will act as our table of contents. In this example we have only one direct child of App(Parent), however there may be several ✨. App has a variable named breakfast, assigned to a string called “eggs and toast”(3). With this line we are appending the Parent Component(B) to the App, and sending the breakfast argument(prop) 🌟(3) to the Parent Class.Below we can see the Parent Class and Child Class.

The Parent class now has access to breakfast, and can call on it by stating 🌟“this.props.breakfast”. We can now pass the breakfast down to the Child components, additionally we are adding a lunch prop (*4) to pass down to the Child. Below we can see we are appending two Child Components (*C) to the Parent class, and sending the breakfast, and lunch to the Child Component (*4)(which in this case is the “child” of the Parent Class). The Child Component Class now has access, and can render both breakfast and lunch.

✨A class may have several “child” components. For example we may have a <Header /><Footer /><Parent /><Parent2 /> listed in our App Class. The order and number of times each component is called will effect its location, and number of appearances in the browser. These components will be named to best describe the data they hold.
🌟The only way to pass data from a Parent to a child is through props. Props are sent to the child class as follows<NameOfClass key=”value”/> The only way to call on an argument that is passed from Parent to Child is by stating “this.props.key”

Below we can see what communication paths are allowed (annotated by the green arrows). Basically only direct relationships. Sibling cannot pass information between each-other, and Grandparents/Grandchildren cannot communicate directly with each-other. However as we saw above, data can be communicated through components that are directly connected with each-other.

Allowed communication paths are annotated with the green arrows. Basically only direct relationships, sibling cannot pass information between each-other, and Grandparents/Grandchildren cannot communicate directly. However as we saw above, data can be communicated through components that are directly connected.

Callback Functions & “upstream” Communication

Our final objective is to pass “dinner” down to our Child Class, however the Child Class needs to pass the “potatoes” up to the Parent Class, so the Parent can “makeDinner(“with the potatoes”)” and send the finished dinner to the Child. To send information (“potatoes”) from a “child” class to a “parent” class we use a 💫callback function. This transaction gets a little more complicated, so we we will break it down step by step. Step one will be to create a variable called “dinner”, which will be the finalized prop that we send to the Child Class.

The conventional way of doing this is by adding dinner to the Parents Class using state⭐️(*1). We do this because we are initializing the dinner to be “ ” and want to re-render the new value (steak & potatoes) once the “dinner has been made”. Next we create a function called makeDinner (*2) in our Parent Class. To make the dinner we need the argument called(sideDish), which will be provided by the Child Class. To get the sideDish argument from the Child Class, we have to send the makeDinner function as a key value pair (*3). The Child component can now call the function, with the “potatoes” argument (*4). We will call on this function with the onClick event connected to the button(*4). Once the button is clicked we call the makeDinner function, now with the argument “potatoes”(*5). This “this.setState”⭐️ changes the value of dinner (*6). We can now send dinner to the Child Class (*8), and finally render it (*9). Yayy!!!!

If we didn’t have state: to better understand state we can look at the above example where state is not used. When we run the makeDinner function, the updated dinner will only effect the (1)dinner if we add (**)this.force();.

💫The only way for a Child to send information to a Parent element is through9 a callback function. (*1) We set the function in the Parent Class (*2) We send the function to the Child Class (*3) The Child Class calls the function with an argument (usually with an event; onClick)
⭐️The State object is where you store property values that belong to the class component. We initialize our state values in the class constructor (this is the only place where we can assign state). The only way to change the value of a state is through setState. Set state is very useful for two primary reasons.1. It is accessible throughout the class (this.state.key) 2. When the state object changes, the component re-renders (it will change it wherever it is used).
🔑 Data can only be communicated directly with direct the Child and Parent Components. A Child cannot send data to its Sibling, and a Parent cannot send data to its Grandchild. However a Parent can send information to its Grandchild through its Child, and a Child can talk to its Sibling through the parent.
🔑All Components/Class Return A SINGLE HTML argument (can be nested <></>)

Side Note: Something that tripped me up at first was seeing the different syntax used to build a Class. In the following two examples we can see the two different, but essentially the same.