Thanks to Gmail and Facebook, people are accustomed to seeing real-time search results, instead of the “traditional” approach in which they type in a value, hit a submit button, and wait for the entire results page to redraw. So we’ve been asked to build a simple product-search interface, with the explicit requirement that the search must be quick and must be done without refreshing the page.

Solution

React is a JavaScript library designed for creating user interfaces that need to efficiently respond to a flow of data. Manipulating the DOM is one of the most expensive things we can do in a web browser. React solves this by using a virtual DOM for its components. We don’t ever manipulate elements on our page. Instead, we create them as React components that get rendered to the page. When we update our data, these components get refreshed—but only the components that changed, rather than the whole page. It’s incredibly fast, but it’ll require us to think differently about how we construct our page.

To test this out, we’ll create a simple search interface using QEDServer and its product database as the back end for our Ajax requests. We’ll place all of our files in the public folder that QEDServer creates in our workspace so our development server will serve them properly and allow us to make Ajax requests. So, start up QEDServer and ensure that it’s running at http://localhost:8080/.

We’ll place a new index.html file inside the public folder that QEDServer created for us when we started it up. In this file, we place our usual HTML skeleton and a <div> element that will hold our application. We’ll tell React to render its contents into this area of the page. We also import a few libraries in the header section of the page:

react/index.html

<meta charset=”utf-8″>
Product Search

<div aria-live=”polite” id=”content”>Waiting…


<script src="https://code.jquery.com/jquery-2.1.4.min.js">
<script src="https://fb.me/react-0.13.3.js">
<script src="https://fb.me/JSXTransformer-0.13.3.js">
<script type="text/jsx" src="search.js">

 

 

 

We’re including React, but we’re going to use jQuery for making our Ajax requests. React is purely a UI library; it doesn’t have its own way of fetching data from servers. The third library we’re loading is React’s JSX Transformer. React has its own dialect of JavaScript, called JSX, that makes creating templates easier. In production applications, you’d set up a development workflow that converts JSX files into regular JavaScript files—much as we do when we use CoffeeScript in future tutorials 31, Cleaner JavaScript with CoffeeScript. But since we’re only exploring, we can skip that step for now and do the transformations in the browser in exchange for a hit on performance. The last file we’re including is the file that will contain the JavaScript code that builds our search interface. We have to specify that we’re using JSX for this file so that the JSX Transformer can convert it.

Our Component Architecture

We’ll create a component called ProductSearch, which will be made up of two smaller components—a ProductSearchForm and a ProductList—as illustrated in the diagram.

The top-level component will communicate with our back end and will render the two child components. When a visitor submits the search form, we’ll pass the data up from the inner component to the outer component. The outer component will fetch the search results from the back end and then rerender the list of products using the new data.

Let’s start by creating the outer component. In search.js, we create the initial version of our ProductSearch component:
react/search.js
var ProductSearch = React.createClass({
render: function() {
return (

Product Search

);
 }
 });

The preceding code doesn’t do too much other than render a <div> with an <h1> inside. But it won’t actually render the component until we tell React to render it, like this:

React.render(, document.getElementById('content'));

 

We pass in the component we want to render, and the element on the HTML page that’ll contain the component. In our case, we’re rendering our ProductSearch component into the element on our page that has the ID of content. When we reload the page in our browser, we see the component rendered to the screen, as in the figure.

Now let’s get a little more interesting content on the page.