Congratulations on taking your first step with React! React is a great tool, one of the most powerful in web development surely, for building modern, interactive user interfaces. Before we get into the details, let's look at some common challenges of creating dynamic UIs with plain JavaScript. Understanding these issues first will clarify how React makes development easier and more efficient.

The problems with plain JavaScript

Let's assume for a moment that as web developers in a software company, we're tasked with creating a dynamic web page that displays a welcome message and allows users to trigger an alert by clicking a button. While JavaScript offers the necessary tools to accomplish this, the development of such interfaces can become challenging as project requirements expand. To demonstrate this, let's see how this feature is implemented using plain JavaScript. A heading <h1> will be used to display the message, and a button will be provided for user interaction. Clicking the button will trigger an alert containing a specific message.

This code works by manually injecting HTML into the DOM using innerHTML and attaching an event listener to the button. While it achieves the goal, it highlights some challenges of building dynamic UIs with plain JavaScript. As the application becomes more complex, we would need to handle frequent DOM updatesEach time the state of the application changes, the developer must manually locate and update specific DOM elements. For example, dynamically adding or removing items in a list requires carefully managing innerHTML or creating and appending new DOM elements., re-render multiple elementsThe renderUI function replaces the entire content of the container element using innerHTML every time it is called. If new functionality requires only partial updates (e.g., updating just the heading or button text), the entire UI is unnecessarily re-rendered, leading to inefficiency., and ensure event listeners are correctly managedEvery time renderUI is called, a new event listener is added to the button, leading to a potential buildup of duplicate listeners. This not only wastes memory but can also cause bugs, such as the same event being triggered multiple times.. This approach is not scalableIf new requirements are added, such as multiple buttons, dynamic lists, or more complex interactions, the developer would need to manually manage each element, its content, and its event listeners. This quickly becomes unmanageable as the number of elements grows. for larger applications.

How React addresses these challenges

React’s declarative and component-based approach offers solutions to the challenges faced when using plain JavaScript for dynamic UIs. Let's reimplement the above scenario and examine how React addresses each specific challenge present in the plain JavaScript implementation.

Note: At this stage, you shouldn't be worried about the different terminologies and coding constructs of React; we will explore them in detail as we progress through the lessons.

Let’s break down the above React code to explain the solutions that React provides.

Efficient DOM updates with the virtual DOM

In plain JavaScript, frequent updates to the DOM can lead to inefficiencies. For example, updating the heading text or adding a button dynamically requires directly modifying the DOM using methods like innerHTML. On the other hand, in React:

<h1>Welcome to React</h1>
<button onClick={handleClick}>Click Me</button>

These lines describe what the UI should look like, rather than how to update it. React’s Virtual DOM efficiently calculates the difference between the current and new UI states, ensuring minimal and optimized updates to the real DOM.

Declarative syntax for defining the UI

In plain JavaScript, we need to imperatively define every step to create and modify DOM elements. This can result in repetitive and error-prone code. However, in React:

return (
  <div>
    <h1>Welcome to React</h1>
    <button onClick={handleClick}>Click Me</button>
  </div>
);
Rendering a simple React component with a heading and a clickable button

The return statement declaratively defines the structure of the UI. We simply describe the desired outcome, and React takes care of rendering it. There’s no need to manually manipulate the DOM with methods like document.createElement or innerHTML.

Encapsulation with components

In plain JavaScript, rendering the UI and attaching event listeners are typically combined in a single function, leading to tightly coupled and less reusable code. But in React:

const App = () => { ... };

The function (e.g., App) is a component, a reusable, self-contained piece of UI. Components encapsulate both the UI definition and its associated behavior (like event handling), making the code modular and maintainable.

Simplified event handling

In plain JavaScript, we must manually find the DOM element and attach event listeners using the addEventListener method. Managing event listeners for dynamic elements is error-prone and can lead to duplicate listeners or memory leaks. On the other side, in React:

<button onClick={handleClick}>Click Me</button>

The onClick attribute directly binds the handleClick function to the button’s click event. React ensures that event listeners are efficiently managed and cleaned up when the component is removed, preventing issues like memory leaks or duplicated handlers.

Plain JavaScript vs. React

Comparison of the provided JavaScript and React implementations for rendering a heading and a button that shows an alert on click.

Aspect

Plain JavaScript

React

Rendering the UI

The renderUI function uses innerHTML to inject HTML into the DOM manually.

The App component declaratively defines the UI structure using JSX.

Updating the UI

Each time the UI needs to change, the entire container (<div>) is re-rendered, replacing all its content.

React’s virtual DOM ensures that only the part of the UI that changes (e.g., <h1>) is updated.

Event handling

A new event listener (addEventListener) is attached to the button every time renderUI function is called, risking duplicate listeners.

The onClick handler is defined inline within the JSX, automatically managed by React.

Modularity

Rendering logic and event handling are tightly coupled in the same function, reducing reusability.

The App component encapsulates both UI and behavior, making it reusable and easier to maintain.

State management

No explicit state management. UI updates must be synchronized manually, increasing complexity.

State (e.g., useState) drives the UI automatically. Updates to state trigger a re-render only where needed.

By addressing the challenges of plain JavaScript, some of which we saw above, React offers an efficient way to build dynamic, interactive, and scalable user interfaces. But how does React accomplish this, and why is it so popular for modern web development? Let's see about that in the next lesson, where we’ll explore React more closely and examine how its features simplify building web applications.