Introduction to React

React is a JavaScript library used for building user interfaces, especially for web applications where the UI changes frequently. Instead of manually updating the screen, developers describe how the interface should look based on the underlying data. React then takes care of rendering the UI and efficiently updating only the parts that change when the data is updated.

Why React exists

Before React, developers directly manipulated the structure of a web page using imperative code. This typically involved a sequence of steps:

• Finding a specific element in the DOM

• Changing its content

• Updating its styles

• Ensuring that other parts of the UI remained consistent

This approach often led to several problems.

The main issue was complexity. As applications grew, managing multiple UI updates manually became difficult and error-prone. A small change in one part of the interface could unintentionally affect another. Keeping the UI consistent with the underlying data required constant effort, making the code harder to maintain, debug, and scale.

For example, in a shopping cart, when an item is added, multiple parts of the UI must be updated, such as the cart count, total price, badge, and checkout summary. All of these updates are handled manually. If even one update is missed, the UI becomes inconsistent with the actual data. As the logic grows, the code quickly becomes complex and difficult to manage.

React’s solution

React simplifies UI updates by shifting from manual control to a declarative approach.

Instead of thinking in terms of manually updating different parts of the interface, the UI is defined based on the current data.

Rather than writing step-by-step instructions, the focus becomes:
“This is what the UI should look like for this data.”

Once this is defined, React handles the rest automatically:

• It determines what has changed.

• It updates only the necessary parts of the UI.

• It keeps the entire interface in sync with the data.

This removes the need to manually manage UI updates and reduces complexity significantly.

Real-world example

When opening Gmail, the application loads once. After that:

• Clicking an email does not reload the page.

• Switching between the inbox and the sent feels instant.

• Composing a message opens smoothly without navigation.

Even though the content changes, the page itself does not reload. Everything updates dynamically. This behavior is possible because applications like Gmail are built as single-page applications using frameworks such as React.

SPA vs. MPA

When using a website, the way it loads and updates content determines whether it is a Multi-Page Application (MPA) or a Single-Page Application (SPA).

• In an MPA, every user action, such as clicking a link, reloads the entire page from the server, which can make navigation slower and less interactive.

• In contrast, an SPA loads the page only once and then updates only the necessary parts of the interface as users interact with it. This results in a faster and smoother experience. Many modern applications, such as Gmail and Netflix, follow this approach and are often built using React.

The differences between MPA and SPA can be summarized as follows:

Creating a React app

Modern React applications are commonly created using Vite, a fast tool that provides instant startup and quick updates. We use the following commands to create and run a React app:

During setup, choose "React" and select "JavaScript." Once the development server starts, the application opens in the browser, allowing changes to be seen instantly.

React project structure

After setting up a React app, understanding the file structure helps in navigating and organizing the project. A typical structure includes:

• index.html: Contains the root element where React renders the UI.

• main.jsx: Entry point that connects React to the DOM.

• App.jsx: Main component that defines the interface.

• src/: Contains components, logic, and styles.

• public/: Stores static assets like images.

This structure creates a clear flow from loading the application to rendering the user interface.

Most development happens inside the src folder, where components, styles, and logic are organized. Static files like images are placed in the public folder. Together, this structure creates a clear flow from loading the app to rendering the UI.

Try it yourself

Run the above commands in the terminal below: