Chapter 5. Mixins and the DOM

In the previous chapter, we took a deep dive into React Forms. We took a look at building multiple components and interactivity between them, Controller and Uncontrolled Components, building Forms and Form elements, and Form events and handlers for the events. We build a form to capture cart-checkout flow and orders being placed in a multi-step form.

In this chapter, we will focus on abstracting content using mixins and touch upon DOM handling.

Here, we will cover the following points:

• Mixins

• PureRender mixin

• React and the DOM

• Refs

At the end of this chapter, we will be able to abstract and reuse logic across our components and learn how to handle DOM from within the components.

Back at the office

The duo was back at work. Mike entered with a cup of coffee. It was morning and the office had just started to buzz.

"So Shawn, we did a lot of complex forms stuff last time. Our cart flow is now complete. However, now we have been asked to add a timeout to the cart. We need to show a timer to the user that they need to checkout and complete the order in 15 minutes."

"Any idea how we can do this?"

"Umm, maintain a state for timer and keep updating every second? Take some action when the timer hits zero."

"Right! We will use intervals to reduce the timeout values and keep updating our views to display the timer. As we have been storing the form data in a single place, our Bookstore component, let's go ahead and add a state value that will track this timeout value. Let's change our initial state to something similar to the following:"

getInitialState() {
    return ({currentStep: 1, formValues: {}, cartTimeout: 60 * 15});
  }

"60 X 15, that's 15 minutes in seconds value. We will...

Adding a modal

"Alright, this works well," continued Mike.

"However, it's a bit clumsy right now. After the timeout, there's nothing a user can do. We can add a popup to notify the user. Instead of showing the error page, let's display a modal with an alert and redirect the user to the first page so that the user can restart the flow. We can use Bootstrap modal to achieve this."

"Got it. Want me to give it a try?" asked Shawn.

"Go ahead!"

"Let me start with setting up the modal first. I will use a simple bootstrap modal to display it. After that's done, I will need to invoke display of the modal from alertCartTimeout, I guess. I will also be setting up to display the first page and reset form data."

"Correct."

"This is how the modal will look"

import React from 'react';

var ModalAlertTimeout = React.createClass({
  render() {
    return (

      <div className="modal fade" ref='timeoutModal'>
        <div className="modal-dialog">
          <div className="modal-content">
  ...

Refs

"I think we have used this before," asked Shawn.

"Yeah. What refs do is give us a handle to refer to some part of the component. We have done this in forms. Here, we are using it to get a handle to the modal so that we can invoke the modal() method on top of it."

"This would, in turn, display the modal."

"Now, notice how we are using the getDOMNode() method."

"Yup. What does it do?"

"The getDOMNode() method helps us to get the underlying DOM node, where the React element is rendered. In our case, we want to invoke a method on the DOM node."

"When we call this.refs.timeoutModal, it returns us a ref object of the component."

"This is different from the actual DOM component. It's actually a React-wrapped object. To grab the underlying DOM object, we invoked getDOMNode()."

"Got it."

"Next, we have wrapped all this in a setTimeout call so that we can call it after the React component is successfully rendered and modal content exists on the page.

"Finally, we called $(timeoutModal).modal('show') to...

Summary

In this chapter, we took a look at refactoring our components. We saw how to make use of mixins and extract similar functionalities to use seamlessly across components. We also took a look at DOM interactions, using refs, and related DOM actions from a component.

In the next chapter, we will explore how React functions on the the server side. We will see how React allows us to render and handle components on the server to pre-render HTML, which is useful for several reasons. We will also take a look at how this affects the React component life cycle.