Chapter 3. Managing User Interactivity

In this chapter, we are going to learn how to manage the events generated by a user's interaction with the components of a React-based user interface. We will explore the events that are triggered during the lifecycle of a React component, and will learn how to exploit them in order to create efficient components. Finally, we will use the React Router library to allow easy navigation between the different views implemented by components.

By the end of this chapter, you will be able to:

• Handle events generated by user interaction
• Change a component's state on event triggering
• Use a component's lifecycle events for a better user experience
• Configure routing to allow navigation through components

Managing User Interaction

Any web application requires interaction between the user and the user interface (UI). An application without interaction is not a true application; interactivity is a basic requirement.

The application that we built in the previous chapter does not allow interaction. It simply shows data, and the user cannot do anything with it (apart from look at it).

Suppose that we want to introduce a little interaction into the catalog application that we started building in the previous chapter. For example, perhaps we want to show an alert with the price of the product when the user clicks on the product area.

Provided that the product data includes the price, as in the following JSON object:

[
  {"code":"P01", 
   "name": "Traditional Merlot", 
   "description": "A bottle of middle weight wine, lower in tannins
      (smoother), with a more red-fruited flavor profile.", 
"price": 4.5, "selected": false},
  {"code":"P02", 
   "name": "Classic Chianti", 
   "description": "A medium...

Component Lifecycle Events

In a React application, components are created dynamically, according to the evolution of the application at runtime. A user's interaction starts a component's creation, its visualization, its updates on the screen, and its destruction.

So, components go through different phases during application execution: these phases represent their lifecycles.

React allows us to intercept and manage the phases of a component's lifecycle in a customized way, thanks to a set of events that we can handle by implementing specific methods.

Before analyzing a component's lifecycle events, we should highlight that the first step in creating a component is the execution of its constructor. Although it is not one of React's lifecycle phases, it is the first step of a component's life. During the component's constructor execution, the DOM is not available, and it is not possible to access any child component. The constructor execution is the right time to perform the initializations that...

Managing Routing

Modern web applications, based on the Single-Page Application model, can't do without the routing mechanism, a way to navigate among views while remaining on the same HTML page.

We can consider a view as a placeholder in the UI where we can dynamically render one component or another in an exclusive way. Let's try to clarify this concept with an example.

Suppose that we want to add a navigation bar to our Wine Catalog application. In its simplest implementation, we want to alternatively show the Catalog and an About section, providing some information about the application itself. The new UI will look like the following screenshot:

When clicking a menu item, we expect the main area to change, while the header remains the same. In this case, the main area will be the view in which we display the Catalog component or the About component, depending on the menu item we clicked on.

How can we implement the routing mechanism in React?

Installing React Router

We can enable routing in...

Summary

In this chapter, we learned how to manage user interaction. In particular, we have covered the following things:

• Managed events that don't involve changes to a component's state
• Handled events that involve changes to a component's state
• Explored the component lifecycle and learned how to customize each phase
• Used React Router's components to configure navigation between components

This chapter concludes the book. It provided the basics for understanding how React works and how to build React-based applications. We started with an introduction to React and then explored creating components in detail. We finished with a look at how to manage user interactivity with React.