This content originally appeared on DEV Community and was authored by Michael Mangialardi
In a previous article, I summarized that React, as a framework, offers a shorthand way to 1) add visually-sophisticated sections composed of elements to a web "document," 2) populate those elements with data, and 3) handle a user's interactions and inputs.
Now, it's time to dive deeper into the core concepts to accomplish what React offers.
Elements
Every web application consists of different pages that start off as a blank document/canvas.
Every subpath (i.e. http://example.com/i/am/a/subpath/for/example-com) offers a blank canvas (or "document") where we can add various sections composed of elements to build our application.
Element Hierarchy
So, what are the various sections that make up a "page"?
Well, that varies based on 1) what your application does and 2) what page of the application you are viewing.
However, let's go through an example.
Suppose we wanted a landing page for our product:
So far, I've been speaking of a web page as being composed of various sections which are composed of elements.
I spoke this way to keep things simple, however, to really grasp the concepts we'll need a more comprehensive mental model.
Technically, an element is anything that is rendered/displayed/drawn on a web page.
However, not all elements have the same function.
Some elements are "containers" used to contain/organize other elements. Some elements are used for displaying text or media (pictures and videos); other elements are used for encouraging a user's interactions (forms and buttons).
If you're curious, here's a full list of elements that can be rendered on a web page, grouped by their functions.
In a word, there are some elements that "contain" other elements, forming a section. And, there may be a section that "contains" another section. Hence, a web page is an organized hierarchy of elements.
The City Model
My mental model for thinking about this hierarchy of elements is what I call the "City Model."
A city also has a hierarchical organization of elements.
A city is composed of neighborhoods.
Neighborhoods are composed of blocks.
Blocks are composed of houses.
So, a city is composed of neighborhoods, blocks, and houses.
Houses
Starting at the bottom, houses are the building blocks of cities.
If you like science, you can think of them as the atoms. If you like Legos, you can think of it has the Lego blocks.
As far as a city is concerned, a house is the lowest/essential "element" of the hierarchy. It cannot be broken down any further.
Every web page is composed of "houses," that is elements that cannot be broken down any further. Elements that do not contain other elements.
Looking again at the landing page example, the title, paragraph, sign up button, etc. are all individual "houses" that make up the page:
Blocks
Moving a step up in the hierarchy are blocks. Blocks are a collection of houses.
On a web page, blocks are a collections of houses that work together to form a section with a specific functionality/purpose.
For example, the houses (title, paragraph, input form, and button) on the landing page example are working together to form an sign-up form, attracting the user to sign up:
Although the sign-up form constitutes an organized section, it can be broken down further (so it is not a house); it cannot stand on its own to constitute an entire web page (so it is not a city).
Neighborhoods
The sign-up "block" constituted its own "section" with its own function, however, we can tell that is part of a larger "section":
Adjacent to the sign-up form, there is a video. We know this video is associated with the sign-up form because 1) it is right next to it on the same "row" and 2) it works with the sign-up form to encourage the user to sign up.
For these reasons, the combination of the video and the sign-up form constitutes a neighborhood as it is a collection of at blocks (the video and the pattern graphic around it; the sign-up form).
A neighborhood, therefore, is a collection of at least one block and another house/block.
Visually, it forms the highest level of organization without constituting the city (the top/first/highest "container" element of a page).
Conceptually, it organizes blocks and houses by their shared function/purpose.
It is not a house because it can be broken down further; it is not a block because it is more than a block, as it contains at least one block and another house/block; it is not a city because it doesn't constitute a page on its own, rather, a "top-level" section of a page.
In our landing page example, we have at least two neighborhoods:
We have the video and sign-up form which we can group together as the "sign-up neighborhood." But, we also have other sections composed of blocks, such as the footer:
Cities
Cities, therefore, are a collection of neighborhoods, and hence, blocks and houses.
In terms of elements, a city is the first/top/highest "container" element that "contains" all the other elements, which can be organized into neighborhoods, blocks, and houses.
Components
Now that we've developed a mental model around how elements are organized to build a web page, we need to talk about how React, as a framework, aids us in building web pages. Specifically, how does React help us to render/display/draw elements, as well organizing them?
A Component is a Function
The basic way to think of a React component is a function that renders/displays/draws (the official React lingo is to say "render") an element.
A component is one conceptual layer "above" an element.
Since elements on a web page have a hierarchical organization (which we can label as cities, neighborhoods, blocks, or houses according to our mental model), components also can be organized in a hierarchy using our City Model.
Meaning, you could have a component for the city, a component for the neighborhoods, a component for the blocks, and a component for the houses since a component, again, is a function that renders an element into a web page.
Given that components are functions that render elements, they are used as an alternative to typing out elements in an HTML file.
Basically, React has you define a "root" in an HTML file:
<div id="root" />
Then, you write functions (components) that will be fired by React when an application runs in the browser, "injecting" the elements rendered by each component into the web page.
ReactDOM is used in your "city" component to do the initial connection between your React components and the web page.
Now, this all begs a question. What is the advantage of using React's functions (components) to render elements instead of just typing them out in HTML?
Plain HTML with typed elements is purely static. Functions that render elements is dynamic.
Fetching Data
Meaning, functions allow for you to render elements as part of a workflow of fetching/collecting data from an external source and rendering different things based on that data.
So, if you were making a clone of Twitter and had broken down the home page into organized components, some of those components don't need data (tweets, profile information, etc); some of those components depend on that data (i.e. the tweet feed).
By using a function, a React component can fetch the data, render a loading element as it waits (i.e. a spinner), and then render the element with the populated data (i.e. the tweet feed).
Without getting into the weeds, we can broadly say that a React component can fetch data and dynamically render different things based on that data.
You can hide/show elements based on data, show media and text dynamically, etc.
Keeping Track of User Interaction
React can not only fetch data and render different things based on that, but it can also keep track of what the user does. Based on what the user does, it can render different things, fetch new data, etc.
Passing Down Data
React's components in addition to keeping track of user's interaction and fetching data from somewhere can receive data from other component's higher up in the hierarchy.
A house component, for example, can receive data from the block component.
Refreshing Based On Data
When a React component receives new data, whether from an external source, a user's interaction, or from a higher/"parent" component in the hierarchy, it will "refresh" or "re-render" the elements.
In conclusion, React components can dynamically render elements based on a flow of data.
In the next article, we'll dive more into the mental model for the specifics on how React components render data.
This content originally appeared on DEV Community and was authored by Michael Mangialardi
Michael Mangialardi | Sciencx (2021-08-03T18:50:27+00:00) How I Think About React (A Mental Model For Beginners) | Part 2: Component Hierarchy. Retrieved from https://www.scien.cx/2021/08/03/how-i-think-about-react-a-mental-model-for-beginners-part-2-component-hierarchy/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.