Facebook splits React library across Web and mobile

With React .014 upgrade, developers can share components that behave the same across platforms

Following an upgrade this week, the main React JavaScript UI library will be split in two, with the goal of sharing components between the Web version of React and the companion React Native framework.

With the React .014 upgrade, Facebook software engineer Ben Alpert said packages such as react-native (for building native apps with React), react-art (for vector graphics), and react-canvas (for rendering to <canvas>) make it clear “the beauty and essence of React has nothing to do” with browsers or the DOM.

“To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main React package into two: React and React-dom. This paves the way to writing components that can be shared between the Web version of React and React Native," said Alpert. He also noted React developers do not expect all code in an app to be shared but want to be able to share components that behave the same across platforms.

Overall, React .014 focuses on simpler coding. “This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.” React is the result of collaboration between Facebook and Instagram. React .014, currently available for download, is considered stable enough for production use.

The other major change in .014 involves exposing references -- or refs -- to DOM components as the DOM node itself. “That means: we looked at what you can do with a ref to a React DOM component and realized that the only useful thing you can do with it is call this.refs.giraffe.getDOMNode() to get the underlying DOM node. Starting with this release, this.refs.giraffe is the actual DOM node.”

The upgrade also introduces an easier syntax for components. “In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take props as an argument and return the element you want to render.”

Copyright © 2015 IDG Communications, Inc.

How to choose a low-code development platform