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”).

Wait, what is JavaScript?

When the web first started, websites werestatic. Static sites only change upon page refresh (triggered by, say, clicking a link or submitting a form). Then JavaScript entered the scene. JavaScript allowsdynamicwebsites, 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) isimperative. When writingimperatively, a developer needs to tell the browserevery step. For example, let’s say you want to let people know whether a password meets all requirements.

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 isdeclarative. 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 pagewhat to do. Instead, it describes页面应该如何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:

 
Enter your new password
 
  
Invalid password
 
 

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 ({}):

 
Enter your new password
 
 {password} 
{message}
 
 

Whenever the variable values change, the website will update accordingly. Did you notice that all of the JavaScript in this example useddata values? However, JSX will acceptanyJavaScriptenclosed 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 Reactperformance. React uses JSX, along with avirtual DOMto 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:

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

The virtual DOM

React maintains its version of the DOM, called thevirtual DOM. Whenever the virtual DOM changes, React will sendonly these changesto 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

alt = "序列变化的消息更新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 theReact 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 outthis 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.