Web Development Recipes, 2nd Edition

Recipe 15

Creating a Search Interface with React

Problem

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.

Ingredients

• jQuery

• React^[32]

• QEDServer (for our test server)^[33]

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 ...