An Introduction to ReactJS

Kenlyn Terai
Aug 8, 2017 · 3 min read

Among the first questions I had before getting into the React section of the Flatiron School’s Online Full Stack Web Developer program was, “what is the difference between React Native and ReactJS?” As Alexis Mangin summarizes, while they are very similar, “React Native is a framework, [whereas] ReactJS is a javascript library you can use for your website.” As a full stack web developer, I’m excited to be learning ReactJS! Onward to the first lesson, JavaScript Virtual DOM.

Note 11/09/19: Originally written in context to ReactJS v15.6.1, this has been reviewed to ensure it is current to 16.11.0.

Why React?

From the React documentation, React isn’t an MVC framework, “[it is] a [JavaScript] library for building composable user interfaces. It encourages the creation of reusable UI components which present data that changes over time (emphasis added).” Going into two key reasons more deeply…

1) DOM trees are massive

The popularity of dynamic web apps (Single Page Applications — SPAs) have come with large DOM trees which require constant updates, resulting in significant development and performance pain for developers. For example, as Bartosz Krajka states, “if you [lose] the context of an event handler that you need to change, you have to dive really deep into the code to even know what’s going on. Both time-consuming and bug-risky.”

Instead of using templates, React breaks UI’s down into components. Therefore, instead of using low-level techniques like traversing the DOM tree manually, you simple declare how a component should look. In other words, React does the low-level calls to HTML DOM API methods for you!

2) Fewer real DOM changes === higher performance.

As great as automating DOM updates is, it does not meaningfully solve the performance issue. And this is exactly where React’s use of the Virtual DOM comes into play.

  • The Virtual DOM is a technique which builds a virtual representation of what a document should look like.
  • Through reconciliation (JSFiddle example), React automatically diffs and re-renders any changes made to data over time, unlike the manual changes required by various other approaches (e.g. Angular.js).
  • Tremendous efficiency gains are realized through bundling, or “batching,” changes together and then implementing them at the same time, thus minimizing the number of real, or HTML, DOM modifications.

As noted, Virtual DOM is an especially great choice when building apps where changes in the interface happen a lot.”

About Performance — How does it work anyway?

To begin with, let’s look at React’s two model data types that control a component, props and state. From the React Docs, props pass data from parent to child and are fixed throughout the lifetime of a component. state, on the other hand, is reserved only for interactivity, or data that changes over time. More on React State and Lifecycle here.

React Components vs. Elements

As for how diffs are found and calculated, we need to look again to the Virtual DOM. Detached from the hinderances of browser-specific implementation details, the Virtual DOM serves as React’s local and simplified copy of the HTML DOM, allowing React to do its computations quickly and efficiently. React Components and Elements are the keys to these computations.

ReactElements are used most frequently and are “light, stateless, immutable, virtual representations of DOM elements…[and] live in the Virtual DOM.”** (React Docs).

ReactComponents, in contrast, are stateful, meaning that whenever their state changes, the component is rerendered. Though they don’t have access to the Virtual DOM, they are easily converted to ReactElements, which capture changes in the Virtual DOM.

In Summary

What I’ve learned so far: React provides significant development and performance gains over manual front-end methods. Instead of taking the slow process of manually changing the “real,” or HTML, DOM, it uses the Virtual DOM technique and its diff algorithm to implement changes in React like this:

  1. A change is made on a website which registers to a ReactComponent
  2. The changed ReactComponentis then converted to aReactElement
  3. TheReactElement is inserted to the virtual DOM
  4. The diff algorithm compares and updates the Virtual DOM quickly and easily
  5. Virtual DOM diffs are batched and then converted to the low-level (HTML DOM) code, which is executed in the DOM and optimized per browser.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade