React.js for the Visual Learner (Chapter 1 | What is This All About?)
Get the Official Ebook
If you want to support me, you can go here to get an official copy of this ebook via PDF, MOBI, and EPUB.
What is This All About?
Before we dive into coding in React, I am going to do a lot of explanation. In this chapter, I am a going to be focusing on addressing what this project is all about. If you are tempted to skip over this and look for code samples, you especially need to read this.
The Compact Explanation
I am writing a series of blog posts that teaches React.js to an absolute beginner through a heavy use of visuals and an extremely practical teaching methodology. These blog posts will eventually be compiled into a book that I will be selling.
What Does “Heavy Use of Visuals” Mean?
Since this is intended for an absolute beginner to React.js, there is a lot of concepts and terminology to unpack.
Personally, I had a hard time “getting things to stick” when learning React myself. I got so frustrated trying to learn React that I feel into a season of impostor syndrome and almost decided to give up on being a web developer all-together.
I had a bachelor’s degree in Computer Science while working a day job as an IT Support Specialist. On one hand, I was frustrated that I wasn’t really using my degree. On the other hand, I was frustrated that I was not taught modern web development despite my degree and falling short whenever I tried to get caught up.
I honestly can’t remember exactly how this happened (I think maybe I needed to make a flyer for a broken printer or something), but I was introduced to Inkscape which is a free program for making vector graphics. I started messing around with it during my lunch breaks as stress-relief after a morning of trying to figure out why Microsoft Access Runtime would not install on for the PCs for the compliance department (and other similar IT support stuff).
Over time, I got better and better at making vector graphics and eventually upgraded to a more robust tool called Affinity Designer.
I started to realize that awesome vector graphics could be made by combining simple shapes, bold colors, and an intentional layout.
Long story short, this was the start of a long process of finally getting back into web development.
Here’s a summary of the connections:
- Vector graphics lead to pure CSS images
- Pure CSS images lead to visual learning of Vue.js
- Pure CSS images lead to scalable vector graphics (SVGs)
- SVGs lead to UI design
- Vue.js lead to re-attempting React.js
- All of the above lead to an increase in creativity which then lead to writing, launching email challenges, creating video courses, and starting my own brand to encapsulate everything
Unintentionally, I learned three major things:
- Visuals are awesome for explaining web development concepts and terms.
- There is a strong connection between general design principles and web development principles.
- Coding graphics to learn web development was much more exciting than yet another To-Do app.
With these three things in mind, you can guess how I will use visuals to teach React.js to beginners:
- I will use visuals to explain concepts and terms.
- I will also explain concepts and terms by making connections with design principles.
- We will code graphics together as we learn React.
My hope is that this method of teaching will be a helpful and refreshing experience to finally conquering React.js. In addition to visuals, there are some other unique characteristics of the teaching methodology that I will use in this book that is worth mentioning.
My Super Practical Teaching Methodology
As you may have already noticed, my writing style always includes stories and personal experiences. I do this because I want to be as genuine and practical as possible.
As someone who has been writing technical blog posts for quite some time, I can tell you that tutorials are often the polished end result of a very tedious process. Some of my most popular articles may be only a 15-minute read, but they usually take between 10–20 hours. In those 10–20 hours, I often am in the middle of teaching myself the very thing the article is about.
I have often been on the opposite side of things where I was going through some tutorial and the following thoughts would pop up into my mind:
“Wow! This seems so easy for the instructor to teach…sure wish this came as easily to me.”
“How in the world did the instructor figure this out? Am I really that far behind?”
“I have no idea what that term means. Is that obvious or did they overlook something not so obvious?”
The list can go on and on. The point is that there can often seem to be such a wide gap between the instructor and the learner. I try my best to bridge that gap by letting you know that I’ve been there. Heck, I almost threw away web development and here I am writing this. Despite that, I am still often learning as I write and I still often get confused over the things that are often left vague.
In addition to being empathetic through sharing stories and personal experiences, I tend to avoid making assumptions that you previously know something that isn’t listed as a prerequisite and using buzz words without explanations. Rather, I try to explain things in a very beginner-friendly fashion using “this is how of I thought of it” type of stuff.
With all this in mind, here are a few fair warnings:
- I will go into great detail to explain things, even when things that might seem trivial to you. I do this because I rather explain too much than too little.
- If I err, it is because I write in a way that may not be technical. This may happen as I am often trying to avoid coming off like I am being overly technical and confusing.
Despite these warnings, I hope that this book is an easy and engaging read.
How to Read This Book
In addition to finding the connection between visual learning and web development, there was another major thing I learned that helped me conquer impostor syndrome.
The best thing about modern development is that there is a tremendous amount of available resources. The worst thing about modern development is that there is a tremendous amount of available resources.
It’s 12:35 AM right now and Grammarly is probably going to tell me a bunch of typos and mistakes that I need to fix shortly. However, the statement above is not a typo.
You’re on Medium and learning about web development…there’s a good chance that you’ve been animated with excitement from all the posts on frameworks, startups, tutorials, courses, etc.
There’s also a good chance that your mind might be spinning with things you want to learn. Angular, React, Vue.js, Elm, Elixir, Firebase, Mongo DB, Meteor, Redux, Babel, TypeScript, ES6, Node.js, Electron, Ember, Webpack, Gulp, NPM, GitHub, GitLab, artificial intelligence, machine learning, Python, Three.js, AJAX, Scala, Rust, Bootstrap, Express, Socket.io, Docker, Anime.js, GreenSock…just to name a few.
In my childhood, I experienced the sensation of money burning a hole in my pocket (as my mother would tell me). Someone would get me a gift card to a store. I went to the store. Let’s say Best Buy. I would walk around for an hour (maybe more) tossing back and forth on how to spend my gift card. A lot of times, there was nothing I really wanted, and if I had waited longer, I could have gotten something better. Nevertheless, I felt the urge to buy something immediately and was often disappointed.
This same sensation can be created when trying to learn web development. There are so many great resources to learn and topics to explore, but there’s only so much time in a day. If not handled properly, this can easily lead to fatigue.
You will learn much faster if you slow down. I know that sounds backward but I guarantee that if you concentrate on one topic or skill at a time, you will learn at a faster rate than if you try to rush through your huge backlog too rapidly.
Want me to let you in on a secret?
I have purposely structured this first chapter to contain no visuals (other than the cover), no code samples, and no mention of anything about React.
Why? Because I want to drive the point of this section.
Slow down. Don’t rush. Concentrate on this book.
If you can do this, you will learn a ton!
What is Next?
This past section was an introduction (I named it chapter 1 because I wanted to give away that it was a book in the title so I am going to stick with it).
In the next chapter, I am going to give an overview of React. I will then progressively go into more and more detail as we go over the basics and make an application together.
I’ll also provide you with the tentative table of contents. However, it’s not going to make much sense until we hit chapter 3.
Table of Contents
- What is This About?
- What is React and Why is it Cool?
- Building Our Houses
- Our First Village
- Additions to Our Houses
- Building Our First Project
- Building Our First User Interface
- Implementing React Router
- Chat Bot Demo Using Firebase
- Reacting to What We’ve Learned
Get the Official Ebook
If you want to support me, you can go here to get an official copy of this ebook via PDF, MOBI, and EPUB.
Cheers,
Mike Mangialardi
Founder of Coding Artist
