React.js for the Visual Learner (Chapter 3 | Building Our Houses)
Prerequisites
Read Chapter 1 | What is This All About?
Read Chapter 2 | What is React and Why is it Cool?
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.
Code Collection
http://codepen.io/collection/79bd1b9e4529a963fbc918c55cdf9dc5/
Defining Our Approach
Good news! We will finally get to coding with React after dedicating 2 chapters as an introduction to what we are working with.
Hopefully, you have been able to gather the basic concepts of React and not been too intimidated.
In this chapter, we are to start by going to go over the core concepts of building houses. In other words, we are going to go over how to get started with making basic React components that can be used in a user interface.
As promised, we are going to be using visual code examples to understand these core concepts.
Before we begin, however, I want to make note of how I am going to approach teaching these core concepts.
React is notoriously confusing for a beginner because there is a lot of setup that is usually needed to get started. Many tutorials will acknowledge this but still go on ahead and try tackling the setup from the onset.
We will eventually be discussing the setup for React in a complete project, but I don’t want to introduce that when we just trying to get started with learning the core concepts.
Codepen
As an alternative, we will start off by doing our development in Codepen. Codepen will allow us to write out our code and instantly see the results on the same page.
It also allows us to easily add the React library while doing all the setup automatically for us “behind-the-scenes”.
There will still be some setup, however, it won’t require nearly the amount of effort as if we were creating our own local project.
With that said, go ahead and create a Codepen account if you do not have one already.
After that, create a new pen and we will go over the rest together.
Setting Up Our Pen
Editor Setup
Once you have your new pen open, let’s start by naming it React for Visual Learners | 1.
Next, let’s change the editor layout.
Click on Change View and select the far left icon under Editor Layout:
Now, we will have the editor (where we can put HTML, CSS, and JS) on the left-hand side of the screen and the preview of our code will be on the right-hand side of the screen:
Hello World
Let’s make sure this is working.
Type the following in the HTML column:
<h1>Hello World</h1>Now, we should see the following:
Cool! We can see the output of our code instantly.
Go ahead and remove this Hello World line.
Adding Babel
Next, we will tell Codepen to add the React library and it will do the work behind-the-scenes.
Click on Settings and then click JavaScript.
Under JavaScript Preprocessor, select Babel:
Don’t close just yet, we need to add update more settings. But before we do that, let’s explain why we just added a “JavaScript preprocessor” called Babel.
ECMAScript, ES5, ES6, and Babel Explained
What is Babel? Before we answer that, it is important to define some terminology of ES5 vs. ES6.
First off, there is ECMAScript which is a language standardized by ECMA International and overseen by the TC39 committee.
Basically, there are people who are standardizing a coding language. Just as book publishers might publish new additions of books with updated features, so there are people working on adding new features to this coding language.
JavaScript is merely implementations of the standardized ECMAScript language. JavaScript is not tied to any one particular edition of the language. As new editions with new updates and features of ECMAScript as released, JavaScript can implement them.
The problem is that it takes time for browsers to be compatible with the new editions. Therefore, there may be new editions the standardized ECMAScript language available but supported well in the browsers.
ECMAScript 5 (ES5) was standardized in 2009 and most contemporary browsers can process it.
ECMAScript 6 (ES6) was standardized more recently in 2015. Therefore, browsers have not yet caught up to process it.
To write code in React, we want to latest features of ES6. This begs the question, how can we write React code using the ES6 standard if browsers have not yet caught up? The answer is Babel.
Babel is a JavaScript preprocessor.
Essentially, Babel says this: “Hey you want to write code using ES6? Yeah, I know…those browsers are taking forever! No worries, though! I got you covered. Just add me to your project and write away in ES6. I’ll straighten things out so the browser can still process you.”
In short, Babel takes ES6 code and converts it to ES5 so the browser can process it.
Adding React
Now that we have added and explained Babel, we will need to add React as an external library to our pen.
In the same JavaScript Settings window you have open, select React from the Quick-add dropdown:
We can now see that a URL was inserted under Add External JavaScript:
To use an illustration, adding this URL is like getting a physical address for your local library. Having an address to your library would allow you to then be able to go the library and pick up books. In a similar sense, we have specified the address to the React JavaScript library so we can make use of it.
Before you save and close, we also need to add ReactDOM which can be added from the same Quick-add drop-down:
Wait a second, Mike! Hold up!
Are you pulling a fast one on me? This entire time you have been talking about using a React library not React libraries.
React and ReactDOM might be poor naming conventions but they are both subsets of the entire React library. However, both are technically separate libraries. The short answer is that React is the core library and ReactDOM is the bridge between React and the DOM. If that definition still seems confusing, don’t fret! For now, you can think of ReactDOM as an assistant to the core React library.
We will explain this more in the next section.
Understanding React Core and ReactDOM
So far, we have distinguished that ReactDOM is an assistant to the core library. For this reason, I will distinguish between the React(describing the entire React library as a whole) and React Core (describing the core library used in making React components as distinguished from ReactDOM).
Each one serves a particular purpose. To better understand their purposes, we need to explain what exactly a component does on a bit more technical level.
In the previous chapter, we briefly mentioned that modern web development, such as in React, JavaScript outputs HTML.
With React Core, we create components that have encapsulated instructions for what to display in the user interface.
For example, we could create the following React component:
<Button />This component could be an encapsulation the following:
<button>Click Me!</button>We would ultimately have the following displayed in our user interface:
React Core is used to define the encapsulation of a React component.
ReactDOM is the bridge between taking an encapsulated component and having it render as HTML.
In the button component example above, ReactDOM would be used to render the <Button /> component in the HTML so the button could be displayed in the user interface as shown above.
I know we have used a lot of terminologies so far, so let’s use another illustration to summarize.
Imagine an online store that sells stickers. If someone places an order, they have to assemble the requested stickers that need to be sent out to the user into a package. This is essentially what we do when using React Core.
In order for the package to get to the user, the postal service has to transport the package. This is essentially what we do when using ReactDOM.
Now that we have our pen all set up, it’s time to dive into creating our first React component. In terms of The React Village, we will be building our first house.
Creating Our First Component
Insert imaginary sound of drum roll here
We finally have some code to look at!
Here’s code to add to the JS column in Codepen:
class Hello extends React.Component {
render() {
return <h1>Hello World</h1>;
}
}In this code snippet, we won’t see anything on the screen. Why?
This is only the React Core portion where we create an encapsulated component. We will later use ReactDOM so the encapsulated component can be rendered in the HTML.
Before we move on to ReactDOM, however, let’s explain what’s going on in the code above by re-creating it piece by piece.
ES6 Class
First off, we create a child class called Hello from a parent class called React.Component (hence extends React.Component):
class Hello extends React.Component {
}The use of classes like is shown above was introduced with ES6.
Quick reminder, using ES6 is totally cool because we used the Babel as the JavaScript preprocessor.
For now, you can think of classes are “special functions”. We don’t need to use any of the special features of classes (in comparison to functions) at the moment. However, we will use them in the chapters to follow.
extends React.Component might seem confusing at first so we will explain it some more.
In Chapter 2, we mentioned that React is a JavaScript library. A JavaScript library has code that is already created that can be accessed and used for a particular purpose. With the React library, we can use existing code that does some heavy lifting for us to help with defining encapsulated components and rendering them (using React Core and ReactDOM accordingly).
Specifically, the React.Component class contains existing code that allows us to make components. Adding extends React.Component after class Hello basically says this: “I see you have class Hello here. You want to create a new class called Hello? Cool! What’s this? You want to extend Hello from React.Component? Ok. No problem. You now have access to all the code within React.Component.”
Render Function
class Hello extends React.Component {
render() {
}
}Remember, we are trying to create a basic component that can be rendered as HTML. In the code above, we have added a render function. In this render function, we are going to return what we want our component to render as when ReactDOM does its thing.
We will add the return statement in the next step.
JSX
JSX?! Another term?!
Unfortunately, now you can see why React is notoriously hard for beginners.
Don’t worry. One, JSX is really simple. Two, I’ve added a glossary at the end of this chapter.
class Hello extends React.Component {
render() {
return <h1>Hello World</h1>;
}
}JSX is just extended JavaScript syntax that allows us to write out what we want our component to render as when the component is used.
The bold code above is the JSX. When we use this Hello component, a Hello World will be rendered as if we had written out the following in HTML:
<h1>Hello World</h1>This completes the creation of our component. Now, we need to have it render as HTML using ReactDOM.
Rendering Our First Component With ReactDOM
Alright. We have created our first component using React Core. Now, we need to render the component using ReactDOM.
Add the following code to your JS column in your pen:
ReactDOM.render(
<Hello/>,
document.getElementById('root')
);We still should see nothing output. There’s one final piece which we will get to in just a moment.
Again, using React does heavy lifting for us.
We can use ReactDOM to do the heavy lifting to access the render function from all the components we have:
ReactDOM.render(
);Next, we just need to use the components that we have defined.
The syntax is as follows:
//if class Example extends React.Component is up here<Example />
In our case, we add the following for our Hello component:
ReactDOM.render(
<Hello/>
);Remember, our Hello component’s render function returns this:
<h1>Hello World</h1>We have our component and we want to have it render as HTML. Previously, I used an illustration of ReactDOM as being like the postal service shipping a package. We need to “ship” this component to our HTML where it can then be rendered as the code snipped above.
With physical shipping, you need to define an address. In the same way, we need an address for an element in our HTML to render our Hello component. The proper terminology is to call say we need to specify an element in our HTML where we can mount our component.
This is why we add this last line of code:
ReactDOM.render(
<Hello/>,
document.getElementById('root')
);Here, we are saying that we want to mount our component where we have an element in our HTML with an id of root.
Time for the final piece!
Let’s add the following in our HTML column:
<div id="root"></div>We now see the following:
Cool beans! We have created and rendered our very first React component!
Because this is a very basic component, we can say that we have just built our very first house.
Final Code:
A More Visual Component
Now that we have built our first house, let’s begin a more visual example.
Eventually, we will be creating this Koala graphic:
If we described this Koala in terms of The React Village Design detailed in Chapter 2, then any of these shapes would be the houses.
Since this chapter is all about building houses, we are going to create a simple component called Head that will render as the head of the koala.
Grasping Pure CSS Images
The koala which we will create using React is going to be a pure CSS image.
Pure CSS images are a topic that I have discussed extensively.
Therefore, I am just going to punt to the existing video I have which explains pure CSS images. It also walks you through the process of making the koala graphic which we will eventually be making using React components.
Here is the article that accompanies the video.
Once you complete this video, we can continue on making the head of our pure CSS koala using a React component.
Creating a Head Component
- Go to your current pen and click Fork
- This is going to create a new pen with the same code and settings
- Rename it to React for Visual Learners | 2
- Replace the JS code with the following code shown below
class Head extends React.Component {
render() {
return <div className="head"></div>;
}
}
ReactDOM.render(
<Head/>,
document.getElementById('head-target')
);5. Update the HTML column to the following:
<div class="box">
<div id="head-target"></div>
</div>6. Add the following to the CSS column:
body { background: #25A9FC }.box{
position: relative;
margin: auto;
display: block;
margin-top: 8%;
width: 600px;
height: 420px;
background: none;}.head{
position: absolute;
top:16.5%;
left: 25%;
width: 50%;
height: 67%;
background: #A6BECF;
border-radius: 50%;
}
This has already been a lengthy chapter so let’s do a short summary of what we just did.
First off, we added our invisible box class straight into our HTML:
<div class="box">
<div id="head-target"></div>
</div>We also added the element where our Head component will mount.
In our JS, we have the following:
class Head extends React.Component {
render() {
return <div className="head"></div>;
}
}
ReactDOM.render(
<Head/>,
document.getElementById('head-target')
);The changes for this Head component are found in bold. This should be straight forward.
The only thing to note is that the JSX (what’s returned in our render function) has className instead of class.
This is something specific to JSX. You always replace class with className. I don’t want to go into the technical details but if you are really interested you can check this explanation out.
Just like that, we have created a head for our koala using React.
We still have a lot more to add to our koala and features of React components to showcase. We will continue this in the next chapter.
Final code:
Glossary
Codepen: CodePen is a playground for the front end side of the web. We can use it to write React code without dealing with the “behind the scenes” work.
DOM: The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Essentially, it connects web pages to scripts or programming languages.
React: A JavaScript library for building user interfaces.
React Village Design: Terminology to describe the hierarchy of React components.
ECMAScript: ECMAScript is a language standardized by ECMA International and overseen by the TC39 committee that is implemented in JavaScript.
ES5: The 5th edition of ECMAScript, standardized in 2009. This standard has been implemented fairly completely in all modern browsers.
ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015): The 6th edition of ECMAScript, standardized in 2015. This standard has been partially implemented in most modern browsers.
Babel: Compiles ES6 code to ES5 so it can be processed by browsers. It can be selected as a JavaScript preprocessor in the JavaScript settings in Codepen.
JSX: A JavaScript syntax extension used to specify what we want our component to render as.
React Core: The entire React library is divided into two separate libraries, React and ReactDOM. I find this to be poor naming convention so I refer to the separate core React library (as distinguished from ReactDOM) as React Core.
ReactDOM: The entire React library is divided into two separate libraries, React and ReactDOM. ReactDOM is the glue between React components and the DOM. It allows you to mount React components to HTML elements.
Chapter 4
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.
Part of the reason that I am publishing this as a post before I compile it as an ebook is to get feedback during the writing process.
There may be places where I misspoke or could have explained things better. Leave any feedback below, just remember to be nice.
Cheers,
Mike Mangialardi
Founder of Coding Artist
