Bonnie Schulkin

You may have heard of React.js (also known as React), and you might be wondering: “What is React used for? Is this something I want to add to my toolbox?” If you have JavaScript experience or you’re an aspiring web or mobile developer, read on to learn more! 

What is React?

Developers use React to build user interfaces (UI) for web applications or mobile apps. Essentially, it is a tool to create interactive apps that respond to user input, such as entering text or mousing over elements. Technically, React is a JavaScript Library (the “js” in React.js stands for “JavaScript”).

Testing React with Jest and Testing Library

Last Updated November 2021

  • 88 lectures
  • Intermediate Level
4.7 (1,564)

Learn best practices for testing your apps with Jest and React Testing Library! | By Bonnie Schulkin

Explore Course

Wait, what is JavaScript?

When the web first started, websites were static. Static sites only change upon page refresh (triggered by, say, clicking a link or submitting a form). Then JavaScript entered the scene. JavaScript allows dynamic websites, which can change without refreshing the page. For example, a JavaScript developer can specify that an image grows larger when the user mouses over it. JavaScript programmers can respond to user actions by updating a small piece of the user view. No need to get a fresh version of the page from the server.

Note, JavaScript’s original purpose was to create dynamic websites. However, modern JavaScript applications can write code that does not run in a web browser (such as Node). 

Imperative vs. declarative JavaScript

Imperative JavaScript

“Vanilla” JavaScript (that is, JavaScript without an extra library like React) is imperative. When writing imperatively, a developer needs to tell the browser every step. For example, let’s say you want to let people know whether a password meets all requirements.

Mock up showing new password input with message in red that password is invalid.

Mock up showing new password input with message in green that password is valid.

The imperative way:

  1. Attach an onChange callback to the input field, which runs whenever the field changes.
  2. The onChange callback would
    1. Check to see whether the password meets all the requirements
    2. If not, update the page with a message that reads “Invalid password” in red
    3. If so, update the page with a message that reads “Valid password” in green

Declarative JavaScript with React

In contrast, React is declarative. Instead of coding steps that update the page, a developer “declares” the appearance of page elements based on data values.

The declarative way: 

  1. Store the contents of the input field in a variable called password. 
  2. Set the contents and style of the message to depend on the password value:
    1. If password doesn’t meet the requirements, show “Invalid password” in red
    2. If password meets the requirements, show “Valid password” in green

How is this different?

On the surface, these approaches seem similar. After all, they produce the exact same result. This post even used the same browser mock-ups for both cases! The key difference: the declarative example doesn’t tell the page what to do. Instead, it describes how the page should look based on data values. 

The above example is pretty simple, but web pages and mobile apps can be incredibly complex. React allows developers to focus on the logic of how the page should react to data value changes instead of having to rewrite tedious step-by-step instructions. 

Note, declarative programming is not unique to React libraries. Other JavaScript libraries, such as Vue.js, also use declarative code.

JSX

React developers can write HTML (the building blocks of a web page) within JavaScript using a language called JSX. Here’s an example of JSX: 

<div>
  <h1>Enter your new password</h1>
  <form>
    <input type="text" />
    <p style="color: red">Invalid password</p>
  </form>
</div>

If you’re thinking to yourself, “this looks just like HTML,” you’re right! The above example is not very useful for a dynamic site. The message is always red and always shows “Invalid password.” 

The real power of JSX lies in using JavaScript variable values. Let’s imagine there’s some code controlling the variables password, messageColor, and message. JSX can include references to these variable values by using variable names surrounded with curly braces ({}):

<div>
  <h1>Enter your new password</h1>
  <form>
    <input type="text">{password}</input>
    <p style="color: {messageColor}">{message}</p>
  </form>
</div>

Whenever the variable values change, the website will update accordingly. Did you notice that all of the JavaScript in this example used data values? However, JSX will accept any JavaScript enclosed by curly braces, including ternaries or other logic.

Disclaimer: When the user changes the value of the password field, the developer needs to update the password data value. This is an example of tracking data changes, which requires React state. Since React state is beyond the scope of this article, it has been omitted from the above example. 

Virtual DOM

JSX makes life easy for React developers, but that’s not its only advantage. JSX is also instrumental to React performance. React uses JSX, along with a virtual DOM to update an app simply and efficiently. Before we talk about the virtual DOM, though, let’s back up a bit and talk about the DOM. 

The DOM

DOM stands for Document Object Model, and it describes a “tree” of HTML elements on the page. In the password example above, the DOM would look like this: 

alt= ”A div element contains an h1 and form element. The form element contains an input and p element.”

The web browser or mobile app uses this model to display the page. 

The virtual DOM

React maintains its version of the DOM, called the virtual DOM. Whenever the virtual DOM changes, React will send only these changes to the browser. Here’s an example sequence based on the password example: 

  1. React code detects a change to the message value within the JSX
  2. React updates the virtual DOM to reflect that change
  3. React compares the updated virtual DOM to the old virtual DOM to determine how it changed
  4. React then sends instructions to update the actual DOM in the browser with these changes
1. message value updates
2. virtual DOM <p> element changes
3. React communicates updated <p> element to DOM

alt= ”Sequence of changes from message update, to virtual DOM change, to DOM update. The p element appears in purple.”

This method has two advantages: 

  1. React can optimize performance by sending the DOM as few steps as possible to get to the desired end result.
  2. React focuses on the actual updated DOM instead of collecting imperative instructions in response to each user interaction. This simplifies the DOM updates and reduces the chance of errors. From the React website

In our experience, thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.

Conclusion

This article touches on the basics of what React is, how it works, and how web developers use it. Consider implementing React components in your programming applications to make more responsive web pages or ios and android mobile apps. If you are interested in learning more, check out this Udemy course.


Frequently Asked Questions:

What is React in simple terms?

React is a JavaScript library that eliminates tedious, low-level JavaScript instructions. React developers specify a user interface that depends on JavaScript variable values, and React takes care of page updates when these values change. 

Why is React so popular?

Developers love React for its ease of use and excellent performance. (React web pages respond quickly to changes.) There is also a huge “ecosystem” built around React, with high-quality libraries that support complex React apps. 

Is React easy to learn?

As with any powerful tool, React has a bit of a learning curve. If you’re a traditional JavaScript developer, you may need some time to adapt to React’s declarative code and state concepts. Fortunately, there are many, many resources available for learning React.

Page Last Updated: November 2021

React students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo