Recently in an interview I was asked, “What is React?” And it was funny, because I know how to use React, but I had a hard time selling it or explaining why it’s good. I mentioned components and fast page updates, but I couldn’t pull everything into a cohesive response. Thus, I decided I’d knock this question out of the park, once and for all. And so can you, since you’re reading this article!
So imagine an interviewer asks you:
“What is React?”
React is a Javascript library. Back in the early 2000’s, a Javascript library called jQuery was all the rage: it streamlined the implementation of Javascript and allowed developers to make increasingly complex web applications. As this complexity increased even further, large tech companies realized they needed an even better solution than jQuery. So, Google made AngularJS and Facebook made React, released in 2013.
“What problems does React solve?”
The short answer is that React allows us to create websites that perform fast, and allows us to create them faster. Specifically:
Component Architecture
A revolutionary idea in React is the idea of component architecture. Before React, we’d write a DOM tree in HTML (e.g. the head followed by the body, which contains a header, which itself contains an h1, and below that a p tag, etc). With React, we can make each visual part of the web app its own self-contained component. Then, we can place these components side-by-side like Lego blocks or even render components inside other components. These components make the development process faster. Not only that, they ultimately make the web app feel faster to its users. Here’s how:
Declarative Programming and State
jQuery uses an imperative style of programming, meaning it reaches into the DOM and changes elements directly. This style has a couple of problems. First off, changing individual DOM elements is an “expensive” process: relatively speaking, it takes a lot of time and resources. Also, if some parts of the web app needs to change based on others parts of the app, we developers potentially have to keep track of an intricate trail of changes.
React uses a declarative style of programming, which means that we developers change pieces of data and React accordingly figures out how our app should look. These pieces of data live in something called state. When we change the state of our app (e.g. updating a user’s login status), that change propagates through the relevant components in something called the virtual DOM, which is simply a Javascript representation of the real DOM. Like I said, updating the real DOM is expensive, so we want to update the virtual DOM first.
After the virtual DOM updates, React looks at those changes and uses a sophisticated internal algorithm to determine exactly which parts of the real DOM it needs to re-render. The upshot is that page re-renders happen as quickly and efficiently as possible, which is a great user experience. The users win, the developers win, the company saves money, everybody wins, and that’s why we use React.
Hope this helps, and thanks for reading!
Top comments (0)