First look: Facebook's open source React library

Recently released as an open source library, React enables developers to assemble a modern JavaScript UI fast, once you climb the learning curve

The front end of a modern application is as important as its back end. Under the hood, your application may be beautiful, but if users hate the UI, you lose.

That’s where JavaScript user interface libraries and frameworks come into play. Some, like JQuery, have been around a while -- and have grown to be large, complex chunks of code. Newer libraries and frameworks tend to focus on modern Web application methodologies, including single-page applications.

React is a prime example of the latter. Originally developed by Instagram and Facebook, React is an open source JavaScript UI library that works with other frameworks, including AngularJS. Designed to offer a simple, declarative approach to UI design, React enables you to build reusable UI components that respond to changes in your data.

Building a React UI starts with understanding the components you plan to use and how they fit together in a hierarchy. For example, if you’re building a UI for a field service application, you might have a top-level component that handles a route, which encapsulates a list of jobs that are made up of addresses, tasks, and comments -- along with a form to indicate whether a job had been completed and to enter information on what had been done to complete the task.

Components are built as DIVs inside React classes, then called using React’s render function. While it looks like a standard HTML DIV, it’s not. React holds its own DOM structure in memory, which is how it can re-render elements on the fly -- using the most efficient method possible. That also means components don’t have to be HTML content, as long as it’s rendered when the application loads. This approach allows you to nest components using an XML-like syntax to show how elements fit together.

Key to React is the concept of “props” -- how data is passed from parent elements to child elements, which helps construct the static elements of a site. Props are closely related to state, which is how React handles interactive data. What’s most important here is the idea that both props and state flow down the hierarchy of elements in your React UI. That also means you can quickly build a prototype using props, then add state hooks once you’re satisfied with look and feel.

To continue reading this article register now