Back To Basics: Rewind, React!

Review of the Fundamentals of ReactJS

Karina Guerra
Apr 17 · 6 min read

As I go through the motions of post graduation job searching, I wanted to go back to the basics as a way to solidify my knowledge on everything I learned in the past four months. In this series that I have titled as “Back To Basics”, I take a look at broad topics and break it down to its core. Maybe it can help another fellow programmer going through a boot camp or a refresher for anyone who needs it.

Lets Review React!

In this article, I will be going over the fundamentals of React. I will be breaking down the core concepts that can be treated as a review or introduction to the JavaScript library.

What is React?

Ripped straight from the official docs:

React is a JavaScript library for building user interfaces.

Its important to point out is that React is actually a JavaScript library and not a framework. Depending on who you talk to, this can be a heavily debated topic. However, the charm of React is that it provides you way more flexibility than a framework would. React comes with modularity, separation of concerns and even allows you to reuse components over and over in a single app. You are give the freedom to use as much and as little of React in your web app.

React is used to build user interfaces. It is UI library and a tool for building UI components. We tell React how we want each component of our UI should look, update, and render. That is why we say that React is declarative. It introduces the concept of a virtual DOM. When we write code with React we do not directly change what is on the screen. We instead manipulate the virtual DOM. Lets break this concept down!

Virtual DOM & The Process of Reconciliation

Before we get into it, lets define what the DOM is first. The DOM aka Document Object Model is an object-oriented representation of data that make up the structure and content of HTLM or XML documents. Every element’s style, structure, and content can be manipulated with a scipting language like JavaScript.

So why does React makes us interact with a virtual DOM and not the real one?

Well, DOM manipulation is slow. Frequently making changes and updating the DOM affects performance. Lets look at the DOM hierarchy.

The DOM’s hierarchy is organized as a tree structure as seen in the picture. All elements and objects are represented as nodes. Each of those nodes have their own properties and methods attached to them. Nodes can have a parent node and also many child nodes.

When we change an element, the DOM will update that element but will also re-render all of its children.

A web page can be complex and consist of many UI components. So the process of re-rendering more and more components can be so extremely slow.

Most web pages are dynamic Single Page Application which contain thousands and thousands of <div>s and so many event handlers tied to them. Imagine scouring through all those <div>s to find the element you need to update. And on top of that, go through all its children to re-render them. That’s not only hard to manage when it comes to debugging but it is also time-consuming and inefficient. That’s where the virtual DOM comes in!

The virtual DOM is only a representation of the actual DOM, the UI that is kept in memory. It has the same properties as the real DOM but it does not have the power to change what’s directly on the seen. So you can think of it as a light weight copy of the real DOM.

The process that React uses to make changes to the real DOM is called reconciliation.

When a render elements in React, a virtual representation of that tree of react elements will be kept in memory. When the react component’s state changes or a new element is added, a new version of the virtual DOM with the necessary updates. React will then dig up an old version of the virtual DOM that it kept in memory. From there React uses the diffing algorithm to compare the new version and the snapshot.

“Diffing” refers to the process of checking the difference between the to version of the virtual DOM.

React does this by implementing a heuristic O(n) algorithm. (Time Complexity bonus fact!).

It does so based on two assumptions. In the React docs, it states:

1. Two elements of different types will produce different trees.

2. The developer can hint at which child elements may be stable across different
renders with a key prop.

Now the behavior can vary depending on the type of root elements. If you are interested, you can read more about it here!

By computing the difference, React pin points what sub-trees need to be updated in the actual DOM. React will make changes to only those sub-trees on the real DOM. That is why it is faster and more efficient. Updating the virtual DOM is instant and React reduces the timely process of DOM manipulation by limiting DOM updates to certain number of objects. Thus, performance is significantly better.

React Components

React is all about splitting up the UI into components! Each are independent and free to be re-used over and over again. At its core, React components are basically JavaScript functions that return React elements that detail what should displayed on the browser.

Every component receives a list of attributes that we refer to as props. They can be passed down to other components as its first argument. It essentially an object filled with attributes and corresponding values.

There are two types of components: function and class components.

Function components are defined as:

As you can see functional components are pretty much just JavaScript functions!

Class components:

Class components are defined slightly different. One glaring difference is the render() function. Never forget to render before you return!

So which one do I use? Well, if a component needs to keep track of its data (aka state), then it must be defined as a class components. Functional components cannot handle state and does not have access to React Life Cycle methods.

If state does not matter, you should use functional components as they are easier to read and test. However, in React 16.8, the React Team introduced the world to React Hooks. They allow functional components have the same power as class components without writing them! It’s definitely becoming more popular but I will talk about it more in a future article since I am in process of learning it :)

React + JSX

In both examples, I returned what may look like HTML but do not be fooled. That is JSX, not HTML and not JavaScript. JSX is a syntax extension for JavaScript that gives us the ability to produce React elements. These elements are written in a syntax similar to HTML but with the power of JavaScript. This is then translate through a complier.

In the examples above, that header tag <h1> Welcome! </h1> is actually React.createElement(“h1”, null, “ Welcome! “). We can avoid writing React.createElement() over and over again by using JSX and translating it after.

Another cool thing about about JSX is that you can use JavaScript anywhere you want in your code as long as it written within curly brackets!

Conclusion

That’s about it for the fundamental concepts of React! I hope you enjoyed this article and I hoped this has helped you in some way! I’ll see you in the next one.

References

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Karina Guerra

Written by

Salvadoreña exploring the world of coding. Petting animals and building things that help people and the environment are my two biggest passions :) Based in NYC.

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store