JavaScript, Node.js

Modifying the DOM using jQuery within React Components in Isomorphic Applications

React works awesome within isomorphic JavaScript applications. There are a number of frameworks and design patterns available for accomplishing this. My personal favorite is Fluxible.

In an isomorphic application, your JavaScript renders views both server side and client side. Essentially the same view code is being executed client side and server side. At first it was hard for me to wrap my head around that concept. React components can be used to implement those views.

jQuery, especially it’s UI libraries, is a useful client side tool. Since jQuery itself relies on a client side DOM, we can’t use it server side. Therefore we need to execute jQuery code in our React components but only during client side renderings.

Here is an example ES6 React component using JSX. Let’s pretend we are using this as a view in an isomorphic JavaScript application where it is being rendered both server side and client side:

import React from 'react';
class MyComponent extends React.Component {
  render() {
    <div>
      This is my React component. <a title="Checkout my tooltip text.">Tooltips</a> are pretty helpful.
    </div>
  }
}

Let’s use the jQuery tooltip plugin to power our tooltip. First make sure you include jQuery and the tooltip plugin in your page output. It usually makes sense to add external scripts to your base React component.

Let’s setup our tooltip code:

import React from 'react';
class MyComponent extends React.Component {
  componentDidMount() {
    jQuery(React.findDOMNode(this.refs.tooltip)).tooltip();
  }

  render() {
    <div>
      This is my React component. <a ref="tooltip" title="Checkout my tooltip text.">Tooltips</a> are pretty helpful.
    </div>
  }
}

First, we added a ref tag to our tooltip. This let’s us reference our component node later. We then added a componentDidMount method. componentDidMount executes after initial rendering on client side only. Refer to the React lifecycle for more details on this. React.findDOMNode selects our tooltip node based on ref. We then wrap the node in jQuery and call the jQuery tooltip method. Since componentDidMount executes client side only this works perfectly and doesn’t cause any issues with our server side rendering.

Standard

3 thoughts on “Modifying the DOM using jQuery within React Components in Isomorphic Applications

  1. Thanks Taylor, this example is simple but extremely helpful. I have been looking everywhere trying to figure out how React and JQuery can talk to each other. Everywhere I looked it always seemed really complicated but I kept looking thinking it can’t be that hard.
    Anyway, thanks again for getting right to the point of what I needed to figure out.

  2. Can you give me any tips on how to get values or create eventListeners from a DOM element created by a jquery plugin? My specific case is with the datepicker plugin with UIKit. There are no refs for the UI of the datepicker. I can attach a ref to the text input of the box, but when you interact with the datepicker and choose a date, React can neither see the value inserted in the text field, nor can it detect any events occurring.I can’t find any examples so far that have helped me. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s