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.

Props are, obviously, properties. They’re used to take the contents of a React element and render it, using attribute names to populate objects. If you’re wrapping content in a React element, this is available as a child property of the tag. For example, we could have an element in our field service app that defined a job, with an assignment attribute for an engineer’s name, and content describing the job that can be passed down the hierarchy of elements and rendered by the appropriate component. This way you can reuse elements quickly and provide a UI structure that’s self-describing, allowing a designer to take your code and use it as part of a UI layout.

Dynamic data is treated in the same way as a prop, except it's JSON content. You can preload data into a page as JSON at runtime and use props to render it if you don’t need to update data interactively.

React treats state as something that affects a specific component only. It needs to be set explicitly: You first set the initial state of your components -- once and only once. When you've done that, you can use familiar techniques to get fresh data from a server, then apply that to a page. This technique works well with modern browser features such as WebSockets to give an application updates on the fly. Alternatively, you can write code to poll an API or simply allow your users to manually refresh state data.

That last option works well if you’re using a form to post data to your application. A user can fill in a form, submit it, and instantly see the data in the application. You’ll need to consider how you’re going to build event-handling into your code using React’s event handlers. You can add an event to any component -- for example, you could add an onSubmit event to a form that calls a React handler that refreshes the data.

The methodology behind building React components is a well-thought-out approach to breaking down the old designer/developer dichotomy. Starting with a comp from a designer or a sketched-out chunk of HTML, a developer can quickly group-design elements into components -- as well as determine reusable elements, like product details or user information. There’s no one way to do things in React: You build the components you need for your application, choosing how to frame elements and deciding what is part of a component and what is delivered as data.

Much of your React code will be written in an XML-like JavaScript dialect, JSX. This is handled by the React render method and delivered as HTML. One useful feature is the ability to work with other JavaScript libraries; for example, you can quickly add support for Markdown-formatted text in an application. React is also well suited for working with technologies such as AngularJS or .Net MVC, or even inside hybrid HTML 5 frameworks like Apache Cordova.

React might not seem intuitive at first, but it’s the framework underneath the code that drives Facebook and Instagram, which means it’s tried and tested. You’ll need to spend some time playing with React structures before you use it, especially if you plan to use JSX.

What really makes React handy is how it separates services and APIs from the code that displays them, with explicit state declarations driving the user experience. That makes it easy to quickly add new UI elements without changing the back end, as well as letting you tweak designs without affecting code.

Copyright © 2015 IDG Communications, Inc.