

In early 2016, I got so fatigued while trying to learn React that I almost gave up on being a developer. Impostor syndrome consumed me. Now, I am a full-time React developer and author of React.js for the VisualΒ Learner.
How did I overcome impostor syndrome and finally learn React? There are a few reasons but one of the most significant ones was learning how to make pure CSSΒ images.
In December of 2015, I graduated with a degree in Computer Science and wasnβt quite sure what in the world of development to focus on. After some exposure to entrepreneurial podcasts, I was fascinated by the fresh aroma of startups that had created revenue streams by making web applications. For that reason, I finally set a goal for myself to become a web developer.
As I researched modern web development, I realized that it was totally different than what I was taught in my formal education. My brief knowledge of HTML, CSS, JavaScript, and PHP looked totally different than all of these JavaScript frameworks that people were talking about. I saw a lot of buzz around React and decided to give it aΒ shot.
Hereβs a made-up conversation with myself that is accurate to the struggles I was experiencing in thisΒ pursuit:
Online Resources: React is what you want to focus on for creating user interfaces for modern web applications.
Me: Sounds great! What do I need to do to start a new ReactΒ project?
Online Resources: Yeah. We can initialize our project with npm. Then, we just need to install and configure Webpack and Babel so we can write in ES6 instead of ES5. Then, we can install React and ReactDOM so we can start coding withΒ React.
Me: Um. Whatβs ES6? Why do we need to use Webpack and Babel? Also, React and ReactDOM to use React? Is that aΒ typo?
Online Resources: ES6 is a newer release of ECMAScript. Itβs not well implemented in browsers but has some cool features that we can use. Babel processes the ES6 code and makes it compatible with browsers that support ES5. We can use Webpack to bundle our code and apply Babel. React is one library but you need to also include the ReactDOM library to make thingsΒ work.
Me: ECMAScript? I thought we were talking about JavaScript. Iβm not sure what bundling your code refers to. You knowβ¦this seems like a lot of work just to get started. Whatβs the benefit of React afterΒ all?
Online Resources: You can construct a user interface out of components that encapsulate JSX and data. Itβs reallyΒ modular.
Me: JSX?
Online Resources: Yeah itβs just JavaScript syntax for defining what you want your component to ultimately render as. It looks a lot like HTMLβ¦just use className instead ofΒ class.
Me: That kinda makes sense. Letβs carry onΒ then.
Online Resources: Sweet. Letβs start by me showing you the code for a Hello World component.
Me: Looks kinda awkward at first but these components do seem like a cool concept. I mean that Hello World component wasnβt bad atΒ all.
Online Resources: Great! I know you seemed a bit confused about creating a new React project. Donβt worry. Thereβs an awesome starter kit on GitHub that comes loaded with Webpack, Babel, and Webpack Dev Server. Go ahead and cloneΒ it.
Me: Woah. I have no idea what half of this code does. However, these components look familiar. I get the basic components, but why is their nesting of components goingΒ on?
Online Resources: Oh! Thatβs just because we can break up a view of a user interface into parent and child components. Then, we can pass data down betweenΒ them.
Me: But thereβs way more than a parent and child! Thereβs like a great great grandparent and great great grandchildren and the whole ancestral line in-between. WhatΒ gives?
Me: You know whatβ¦donβt answer that. React is popular so it must be simple. Iβm probably just dumb for asking so many questions. Clearly, Iβm not fit to be a developer. Iβll give up on this attempt to learn modern web development.
The point of this made-up conversation is to highlight the struggle that a beginner to React can go through. In particular, one of the main struggles is understanding the concept of components. Unfortunately, there can be a lot of fatigue before you even get to that issue. At that point, there needs to be a super practical explanation and not something that just throws out more buzzΒ words.
I truly believe that I accidentally discovered a wonderful way to explain React components after messing around with pure CSSΒ images.
Itβs a really good story. Grab a drink if youΒ want.
As I was trying to learn React, I had taken a job as an IT Support Specialist. After my first day when I had to screw in light bulbs on the third floor, I knew I couldnβt wait to getΒ out.
One day, I had to make a flyer for a broken printer or a broken door (you know since IT and maintenance are the same thing). I came across a vector graphic tool called Inkscape which I used to make the flyer. I had never been exposed to vector graphics but found it delightful to create shapes, manipulate shapes, and color shapes in order to make a finalΒ graphic.
In order to burn some built up frustration in my IT role, I decided to play with Inkscape for an hour during my lunch breaks. I eventually discovered Dribbble (show and tell for designers) and Affinity Designer (an awesome upgrade to Inkscape) which fueled me to work even more with vector graphics.
The more practice I got with vector graphics, the more I realized that the key to success was to look at a final graphic, break it down into smaller shapes, create those smaller shapes, and apply goodΒ colors.
I started to get really good. With this newly found confidence, I decided to give web development anotherΒ shot.
Before I got into React, I came across Codepen which I loved because it was like Dribbble for frontend developers. I kept checking their homepage to see all the cool things people were making. One of the things that caught my attention was pure CSS images. I thought to myself: βWoah! These are just like the vector graphics Iβve been making but they replace Affinity Designer withΒ CSS!β
I eventually learned how to make pure CSS images and got good withΒ them.
The workflow was just like with making vector graphics.
Step 2 in the list above was really the most difficult part. As I made more complex graphics, the more I realized that I had to have a better definition for components that would explain their hierarchy.
What do I mean by explaining the hierarchy of components in a pure CSS image? Well, letβs look at anΒ example.
Take a look at this vector graphic of a koala that IΒ made:
Now, if I asked you to tell me what components make up this koala, there are two possible answers I suspect you wouldΒ give.
On on hand, you could say that the koalaβs components are ears, eyes, a nose, a head, andΒ hair.
On the other hand, you could be even more specific and say that the koalaβs components are 3 light gray circles, 2 dark gray circles, 2 white circles, 2 navy blue circles, a brown rounded rectangle, and two light gray triangles.
Both of these answers arenβt wrong. The former explanation is broader and categorized while the latter explanation is very precise and particular.
What this shows is that there is a hierarchy when it comes to describing components of pure CSSΒ images.
A more complex pure CSS image, like the Zelda dungeon show below, would have even more levels to a component hierarchy.
While pure CSS images may look incredibly difficult, it becomes quite easy if you can look at a graphic you want to create and break it down into itβs smallest pieces then work your way up the component hierarchy.
Using the Koala shown above as an example, we could break it down into its individual shapes and then combine some of those shapes to form the more complex body parts (i.e. an eye andΒ ear).
The individual shapes are the lowest level of the component hierarchy and the next level up is the body parts where some contain multiple shapes. If you put all the body parts together, you form the final koalaΒ graphic.
To summarize, the ability to break down a final graphic that I wanted to create into an organized component hierarchy greatly simplified the process. I could start at the bottom of the component hierarchy and work my way up. The final graphic could be put together piece byΒ piece.
Flash forward to when I got back into learning React, the benefits of React being component-based now made perfect sense. However, I found the explanations of the hierarchy/organization of components to be very impractical (even though I now understood what they were trying to getΒ at).
For this reason, Iβve developed a way of explaining the hierarchy of React components, which I call React VillageΒ Design.
I will be making the comparison between the hierarchy of components in a React application and the hierarchy of a village/town.
There are 4 major levels of a village hierarchy (going from broadest to most specific):
Letβs start with village since it is the easiest toΒ grasp.
A village is the equivalent of a view such as a homeΒ page.
This is the broadest part of a village hierarchy. Now, what if I asked you to tell me the components that make up aΒ village?
Just like our koala, there are different ways in which we could describeΒ this.
Letβs start at the most specific level (the lowest level of the hierarchy). At the most basic level, we could say that a village is a collection of houses. Houses are the building blocks of aΒ village.
In a similar way, houses can be used to describe the building blocks of a view. They cannot be broken down anyΒ further.
In our koala example, a dark gray circle is aΒ house.
In the example of the Airtable home page show below, the title, paragraph, sign up button are examples of houses that make up theΒ view.
At the next level of the village hierarchy isΒ blocks.
Blocks are a collection of houses. So in a broader sense, we could say a village is a collection ofΒ blocks.
In our koala example, we could say that the eyes are an example of aΒ block:
The eyes are the next level up above the houses which contain a white circle and a navy blue circle. While we can categorize the eyes into a block, they do not form a final image on theirΒ own.
Blocks in a user interface are collections of houses that work together to form a specific functionality/purpose to the view. However, like our eyes in the Koala, they canβt stand on theirΒ own.
For example, the following title, paragraph, input form, and button in the Airtable home page are working together to get a visitor to βopt-inβ.
For this reason, we can call it a block made up of individual houses. Or, an opt-in section made up of a title, paragraph, input form, and button. Again, it cannot stand on its own as aΒ view.
In our village hierarchy, we could go another level up and describe a village as a collection of neighborhoods.
A neighborhood is a collection of blocks. In terms of a user interface, I like to think of neighborhoods as the sections of the interface.
For example, this is the header of the Airtable home page which is a neighborhood:
This header neighborhood is a collection of three blocks. There is the navigation bar at the top. Then, we have the video and the surrounding pattern forming another block on the left. On the right, we have the opt-in block which we previously described. These blocks form our header section, or again, our header neighborhood. All of the blocks in this neighborhood can be broken down into houses (i.e. Sign upΒ button).
Letβs go from the top of the Airtable site and point out the different neighborhoods.
At the top, we have the Header neighborhood:
Next, we have a content section neighborhood. Letβs call this Content SectionΒ A:
There is another content section neighborhood which we can call Content SectionΒ B:
We then have a neighborhood for testimonials which can call Content SectionΒ C.
Following that, there is another neighborhood which we can call Content SectionΒ D:
Note: Iβve highlighted the graphic above in green so you can see that it is a section despite only possessing one block which we described earlier as the opt-inΒ block.
Lastly, there is a Footer neighborhood:
If you put all these neighborhoods together, we have a village (or aΒ view).
Once you have broken down a user interface, you can create the React components for each one at a time. Like I discovered with pure CSS images, this greatly simplifies what can seem to be quite overwhelming from a birdβs eyeΒ view.
I acknowledge that React Village Design is not always going to be a perfect analogy. However, I think it serves its purpose to communicate the idea that with React we can create user interfaces consisting of views that contain a hierarchy of components. Like pure CSS images, there is a tremendous value to be able to create things piece by piece. This is where ReactΒ shines.
Hopefully, you can better understand React components and why React components areΒ helpful.
As I alluded to earlier, there are multiple reasons why React can be challenging for a beginner. If you enjoyed this post, you will certainly enjoy a new ebook I created called React.js for the Visual Learner. In this ebook, I teach the absolute basics of React.js through design principles, visual-friendly examples, and super practical teaching methodologies like I have done in thisΒ post.
You can read it for free or pay to support me to create moreΒ content.
Cheers,
Mike Mangialardi
Founder of CodingΒ Artist
Create your free account to unlock your custom reading experience.