Introduction to ReactJS — Part 1
Before we begin, keep in mind that this is a beginner-friendly dive into React and we will only be going over the fundamentals. The goal is to make this an introduction, rather than a complete guide. If you have prior experience with React, your time will be better spent reading a more in-depth article elsewhere.
Within the scope of this introductory article we will explore some of the fundamental aspects of React. We will begin our journey with a bit of React history, get an understanding of what it is/what it is not, and dive into some of its features that make it one of the most popular programming technologies, namely, JSX, components, its Virtual DOM, and a few others. My hope is that by the end of this article, you will have a fundamental understanding of, and a desire to continue your journey into, React. Let’s begin.
Historical Fax on React
React is a relatively new technology compared to similar technologies on the market. It was created as a prototype, initially named FaxJS, by Jordan Walke, a software engineer at Facebook, working on the Facebook Ads team, in 2011. As the Facebook Ads application gained more features, the Ads team had trouble maintaining the code efficiently, leading Walke to create a solution, marking the birth of ReactJS in its earliest form.
The first use of React was on Facebook’s newsfeed in 2011. Shortly after, on April 9, 2012, Facebook acquired Instagram, whose team wanted to use React as part of their tech stack. This lead another Facebook engineer, Pete Hunt, along with a small team, to work on making React open-sourced, which eventually happened in May 2013.
Now that we have a brief understanding of the history of React, let’s answer a few questions.
What is React?
Taken directly from reactjs.org,
React is a declarative, efficient, and flexible JavaScript library for building interactive user interfaces. It lets you compose complex UIs from small and isolated pieces of code called ‘components’.
Isn’t React a Framework?
You will undoubtably hear React referred to as both a library and a framework, but before we answer the question, let us first differentiate between a library and a framework by use of a visual, non-programming-related example. An easy way of understanding what a framework is is by imagining it as a model home template used to build a house, while a library contains code that serves as the furniture and decorations for a prebuilt house.
So to answer the question, React is a Javascript library that provides developers with pre-written JS code that can be used for common tasks, bypassing the time-intensive process of coding by hand. Prior to the advent of React, developers built user interfaces with vanilla Javascript and/or less user interface-focused predecessors like jQuery, which meant longer development times and more opportunities for errors and bugs.
Front-end or Back-end?
React is used exclusively for client-side programming, so it is a front-end library. As stated in the above section, it allows you to build interactive, complex user interfaces.
Features of React
In addition to providing reusable library code, it comes with features that add to its appeal. Within the scope of this article we will explore a few, namely, JSX, ReactDOM, ReactDOM.render, and React.Component.
JSX
Anyone familiar with Javascript will look at the above image and automatically notice that the code is not normal Javascript. You may have said to yourself that it seems to be a fusion between Javascript and HTML; if you did, you are correct.
JSX is a syntax that allows HTML/XML-like code to coexist with Javascript/React code. This is beneficial to us as developers because it allows us to write markup and Javascript code under “one roof”, directly within our React file, in a similar structure as we normally would in a separate HTML file.
But the question arises, is the browser’s Javascript engine able to parse JSX syntax? No. JSX syntax is meant to be used alongside a transpiler, such as Babel, which preprocesses the code into normal Javascript, behind the scenes, so that a Javascript engine can later parse it. Let’s take a look at a visual aid.
In the above image, we have, to the right, our JSX, and to the left, the product of Babel transpilling our JSX into regular Javascript to later be handed off to the browsers Javascript engine for parsing. First thing you should notice is, there is a lot less code and complexity with JSX. It is incredibly readable, writes just like the HTML that we are already familiar with, and abstracts away repetitive usage of the .createElement method and allows us to focus on what’s important.
Using JSX alongside React’s Virtual DOM, leads to significant site performance improvements and efficiency. But what’s the Virtual DOM, you ask? Find out below.
ReactDOM
Let’s take a look at how ReactJS.org defines the Virtual DOM.
The Virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
Simply put, the VDOM is a copy of the site’s DOM which React uses to see what parts of the actual DOM need to change when an event happens. The bolded portion is incredibly important and is the reason that React is so efficient. Without using the VDOM, the entire DOM tree needs to re-render, using up time and processing power. With use of React’s VDOM, only what needs to re-render will do so. This is done by using the .render method of the ReactDOM library.
ReactDOM.render
The .render method on ReactDOM is how a node element is updated on the VDOM and later updated on the actual DOM. Above we see that we have an ‘element’ constant that holds a <div> with a nested <p>. This constant is what’s supplied as .render’s first argument, which is the element to be rendered. As its second argument, we must supply it a container in the DOM with which to render our element.
When the VDOM updates the DOM, the container node will not be modified, instead, all of its children nodes will be. If multiple re-renders are called on the same container, the VDOM will only re-render what has been altered or added.
React.Component
A component is a part or element of a larger whole. React components are exactly that, they are the elements of a website.
If we look at the screenshot above from YouTube as an example, every separate section is a component. Although it is not highlighted in the above image, all of the main components are actually within an additional “main” component. The header, marked in red, is a component which has multiple components within it. The video player is in its separate component, the video suggestions section is another, and so on and so forth.
Doing this allows for a separation of concerns.
In computer science, separation of concerns (SoC) is a design principle for separating a computer program into distinct sections such that each section addresses a separate concern.
So in React, you can think of components as separate functions that render or re-render elements on a browser, when called. Let’s see how that looks in React.
One thing to note here is that every component must contain a render function which will return JSX or other React components to be rendered to the DOM. Another note to make is the use of “props”. React Props function similar to function arguments and HTML attributes. In order to pass props into a React component, we use HTML attributes syntax…
…and the component receives the argument as a props object, which you can access like a regular JS object.
Conclusion
In conclusion, React is a declarative, efficient, and flexible JavaScript library for building interactive user interfaces. It lets you compose complex UIs from small and isolated pieces of code called components.
React gets it flexibility from the fact that it is a library that allows you to use its code where it’s needed. React gets its efficiency from the Virtual DOM which is used to compare differences to the DOM and only re-render what is necessary, cutting down on processing time and power. Lastly, React is declarative because we tell it, as concerned with our app, “it should look like this”, and it will take our declared code and handle the process of applying that to our application. In part 2 of this article we will dive deeper into React and explore other important features.
