React.js for the Visual Learner (Chapter 2 | What is React and Why is it Cool?)
Prerequisites
Read 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.
Overview of Modern JavaScript Web Development
If you are coming here as a beginner looking to learn React.js, chances are that you have heard “React” buzzing around the internet.
This might have you asking: “What is React and why do I keep hearing about it?”
We will be answering this thoroughly in this chapter. However, React is only a slice of the pie. We need to first ensure that we have a high-level understanding of the big picture of modern web development before we go on to discussing React in depth.
A Brief Overview of Modern JavaScript Web Applications
I don’t want to intimidate anyone with too much terminology at the start so I am purposefully going to keep this very brief.
A web application consists of a backend and a frontend. There is a client side and a server side.
The backend consists of a server, an application, and a database. The server hosts our application. The server also communicates with a database to get data.
The backend passes data to the frontend. In modern web development, JavaScript on the frontend takes the data from the backend and converts it to HTML.
Both the frontend and a backend compose a web application. However, in the frontend, specifically the browser, the web application is manifested visibly through a user interface. The JavaScript, again, converts data from the backend and outputs HTML which you can think of as instructions for what to have displayed as part of the user interface.
Single Page Applications
On any web application, there are multiple views. Let’s look at an example.
In the image above, we see the home page for a web application called Airtable. This is one view of the web application.
If I went ahead and clicked on “Sign In”, I would be brought to another view for the login:
Unless you were aware of the modern trends in web development, most of us would associate the change of views with the change of pages. Meaning, when a new view comes up in a web page, a new page has been loaded.
Traditionally, this was the case. A web application would be composed of multiple different pages.
In order to create a new view, an entirely separate page containing that view had to be loaded.
However, a more modern approach is to create single page applications.
A single page application refers to an application that is composed of multiple views but only a single page.
Instead of multiple pages being available to load separately and a new page being loaded each time a new view is needed, a single page containing all possible views is loaded up-front and the active view can be dynamically toggled.
To give an illustration, think about old video game consoles like the Nintendo 64.
If you wanted to load a new game, you would have to load a new cartridge.
Compare this to the PS4 where you can have games digitally downloaded on your console.
These digital games are already downloaded and available to play. If you want to switch games, you don’t need to load in a new cartridge like the N64. Instead, you can turn off the current game and load a game that is already available on the console.
With this illustration in mind, let’s return again to the example of Airtable.
Here is Airtable’s home page:
In a multi-page application, the product, templates, pricing, sign in, and sign up pages are all views on separate pages. If a user clicks the sign in link on the navigation bar, the sign in view needs to be loaded. In order for the sign in view to be loaded, an independent sign in page would have to be loaded.
In a single page application, a single page would be loaded and all the possible views in the navigation bar would be available. Although all of the views are available, there is only one active view for the home page. If a user clicks on the sign in link, the home page view would be toggled off as the active view and the sign in view would be toggled on. There is no need for a separate page to be loaded.
With all this in mind, let’s discuss how React fits in these modern concepts of web development.
What is React.js?
The official and broadest answer is that it is a JavaScript library created by Facebook for building user interfaces.
I will now unpack the specifics of what this means and how it is fitting for modern web development.
JavaScript Library
Saying that React is a JavaScript library is a fitting term. Meaning, the term encapsulates a really nice visual of what it means.
At a library, there is a collection of books. These books are already gathered and sorted for you. The heavy lifting is already done for you. If you want a book from the library, you can just go ahead and locate a book by referencing the Dewey Decimal System and grab a copy.
With a JavaScript library, there is code that is already created and made available for us. Specifically for React, there is prepackaged code available for us that we can use to make views for user interfaces. In the chapters that follow, we will look at the syntax for being able to use the code available in the library.
Declarative
We will also see that React has nice declarative syntax. Declarative syntax means that we will write more along the lines of being direct with what we want instead of writing out all the steps of how we want to get there (imperative syntax).
Without getting technical, let’s look at an example in plain English:
Declarative: “I need milk.”
Imperative: “Get in the car. Drive down the store. Find the milk isle. Grab milk.”
An advantage of declarative syntax is that is easier to see what the code wants to do which clears some confusion when debugging your code.
Single Page Applications
We previously discussed the modern approach of single page applications. With React, we can create single page applications by creating views for each state in our application (home page, login page, etc.) and dynamically toggle on and off the views depending on the state.
Because an application only has to load a single page at the beginning, navigating through different views in a React web application is really fast and requires no page loading.
Component-Based
We have discussed how single page applications are made up of views which we can create using React.
One of the main features of React is that it is component-based.
Components are the building blocks of views. We will go into the finer details of components when we actually start coding them. However, the basic gist is that we can create reusable, predefined chunks of code that can be put together to create a view. A basic example of a component would be a button on the user interface.
To provide a non-technical illustration, imagine we wanted to build a log cabin. If the final log cabin is equivalent to a view, then all the logs that make up the log cabin are the components.
If 20 logs of the same size need to be made, a single blueprint can be referenced to cut the 20 logs into the proper size before assembly. In a similar way, we can write code to create a blueprint for a component that can be used multiple times in a view.
Components are also reusable across views as well. For example, a button component can be used on a home page and a login page.
Coding for All Platforms
Nowadays, JavaScript code can be used to write not only web applications but desktop and mobile applications as well.
Cross-platform desktop applications can be written using React and other web technologies using Electron.
React also has its own framework called React Native for writing mobile applications. It uses the same design as React.
Both Electron and React Native are outside the scope of this book. However, it is important to mention that this is a really nice benefit to learning React.
Not only is it exciting from a developer perspective, but also from a business one. Businesses can now hire just one React developer who theoretically could handle desktop, mobile, and web applications without learning separate languages and technologies. This can potentially save a business money from having to find a developer for each specific platform.
This should also serve as motivation to continue on with this book and learn React.
The React Village Design
Alright. So far, we have discussed the concept of views and components that make up single page applications on a high level.
Views refer to the content that would traditionally appear on a separate page on multi-page applications. For example, the entire content, or view, of a home page or a login page.
An illustration that I gave is thinking of a view as a log cabin and with the components being the logs that make up the cabin. I alluded to the fact that React allows us to create blueprints for different types of logs that we can use in multiple places in the construction of a log cabin.
To be honest, I think that this illustration, while good for getting the basic gist, is too simplistic. Reason being, the concept of components is too vague.
This may be one of the main reasons that React was so difficult for me to wrap my head around. I couldn’t visualize the concept of components that making up views.
After learning vector graphics, I soon realized that the concept of components made perfect sense. Why? Because you are forced to look at graphics in terms of their components. You are also forced to develop a terminology to more clearly define the components.
Let me show you what I mean by this. 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 I am trying to get at is that there is a hierarchy when it comes to describing components. For this reason, there needs to be more clear terminology to understand how we can describe a React application in terms of components.
I have developed terminology to do just that. I call it The React Village Design.
In this 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):
- Village
- Neighborhoods
- Blocks
- Houses
Village
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.
Houses
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, the title, paragraph, sign up button, etc. are all individual houses that make up the view.
Blocks
At the next level of a 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.
Neighborhoods
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 two blocks. We have the video and the surrounding pattern forming one block on the left. On the right, we have the opt-in block which we previously described. These two blocks form our header section, or again, our header neighborhood.
Let’s go from the top of the Airtable site and point out the different neighborhoods.
At the top, we have the navigation neighborhood:
We then have the header neighborhood we noted earlier:
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 Testimonial Neighborhood:
Following that, there is another Opt-in Neighborhood:
Lastly, there is a Footer Neighborhood:
If you put all these neighborhoods together, we have a village (or a view).
I acknowledge that The 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 single page web applications consisting of views that contain a hierarchy of components.
As we go deeper into React in this book, we will begin to see the benefits of having a component-based approach to creating user interfaces.
Concluding Thoughts
In this chapter, I have attempted to provide an overview of how React fits in the scope of modern web development and its benefits.
Particularly, I discussed the concepts of single page applications and component-based user interfaces. I made sure to go into extra detail to the about the latter as it is crucial to understanding how we can use React to create web applications.
To summarize the answer to“What is React and why is it cool?”, I would say the following:
React is a JavaScript library that allows us to construct user interfaces that are component-based and that can be dynamically updated depending on the state of an application. This allows us to create intentional, complex and yet organized user interfaces that fit nicely into the current state of modern web development.
Going Forward
As promised, we will be coding visual-heavy components next to better grasp the concepts and features of React components.
After we understand the core concepts, we are going to be starting with houses and working our way up to create a user interface that is made up of multiple villages. In the process, we will explain the build system that goes into making a React application.
By the end of this book, we will also create a dynamic web application together so we have a better understanding of how React works within the scope of modern web development that we mentioned briefly at the beginning of this chapter.
Chapter 3
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
