How Pure CSS Images Helped Me Understand React Components

Michael Mangialardi
Jun 6, 2017 · 12 min read
Image for post
Image for post

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 .

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.

Sinking Into Impostor Syndrome

Image for post
Image for post

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 . Then, we just need to install and configure and so we can write in instead of . Then, we can install and so we can start coding with .

Me: Um. What’s ES6? Why do we need to use Webpack Babel? Also, React 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: t? I thought we were talking about . 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 instead of .

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.

Discovering Pure CSS Images

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Zelda | A Link to the Past | Pure CSS

The workflow was just like with making vector graphics.

  1. I would either look at an existing graphic that I wanted to recreate. Or, I would imagine a final graphic using Dribbble as inspiration.
  2. I would break that graphic down into smaller components that I needed to create.
  3. I’d create those shapes using CSS and position them in the appropriate place.
  4. I’d use Dribbble, Coolors, and/or Colorzilla to get colors.

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.

Understanding Component 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:

Image for post
Image for post

Now, if I asked you to tell me what 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 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.

Image for post
Image for post

Using the Koala shown above as an example, we could break it down into its individual and then combine some of those shapes to form the more complex body parts (i.e. an eye and ear).

Image for post
Image for post

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.

React Village Design

Image for post
Image for post

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):

  1. Village
  2. Neighborhoods
  3. Blocks
  4. Houses

Village

Image for post
Image for post

Let’s start with since it is the easiest to grasp.

A village is the equivalent of a view such as a home page.

Image for post

This is the broadest part of a village hierarchy. Now, what if I asked you to tell me the that make up a village?

Just like our koala, there are different ways in which we could describe this.

Houses

Image for post
Image for post

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.

Image for post

Blocks

Image for post
Image for post

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:

Image for post
Eye 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.

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”.

Image for post
Image for post

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.

Neighborhoods

Image for post
Image for post

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:

Image for post

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 . 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 Hneighborhood:

Image for post

Next, we have a content section neighborhood. Let’s call this

Image for post
Image for post
Content Section A Neighborhood

There is another content section neighborhood which we can call

Image for post
Image for post
Content Section B Neighborhood

We then have a neighborhood for testimonials which can call .

Image for post
Image for post
Content Section C Neighborhood

Following that, there is another neighborhood which we can call

Image for post
Image for post
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 neighborhood:

Image for post
Image for post
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.

Concluding Thoughts

I acknowledge that is not always going to be a 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 .

Image for post
Image for post
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

Coding Artist

Providing journeys for developers who see the web as their…

Michael Mangialardi

Written by

UI Developer in Southwest Virginia. Soli Deo Gloria. https://www.buymeacoffee.com/fgn7ts2

Coding Artist

Providing journeys for developers who see the web as their canvas

Michael Mangialardi

Written by

UI Developer in Southwest Virginia. Soli Deo Gloria. https://www.buymeacoffee.com/fgn7ts2

Coding Artist

Providing journeys for developers who see the web as their canvas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store