What is ReactLynx?#

ReactLynx is the official React framework for Lynx. It allows you to develop Lynx native apps with a React mental model.

With ReactLynx, you can build your UI using JSX and React components, just like you would on the web. ReactLynx turns your React code into calls to the Lynx Engine imperative API to render the native UI.

Main Features#

ReactLynx itself is an "idiomatic" React, but it also pioneered optimizations such as "dual-threaded React" and "JSX constant folding".

• "Idiomatic" React: ReactLynx is an implementation of React, under the hood it is based on Preact, so it has basically the same API and behavior as React, and this consistency allows many ecosystem constructions to be reused.
• Dual-threaded in Mind: ReactLynx follows the programming model of React, but by utilizing the dual-threaded runtime provided by Lynx, combined with its own programming paradigm (or rules) to achieve better performance and user experience.
  • Off-main-thread Reconciliation: ReactLynx puts some Reconciliation logic into the background thread to reduce the amount of calculation in the main thread and improve performance.
  • Lifecycle under dual-thread architecture: Due to the dual-thread architecture of Lynx, the lifecycle of ReactLynx is slightly different from that of traditional React in terms of calling timing.
• JSX constant folding: ReactLynx folds JSX constants at compile time to reduce runtime calculations.

For React Web Developers#

Change your import#

Since it has the same API as react, you can directly replace react with @lynx-js/react, and continue to use the React API you are familiar with.

- import { useState } from 'react';
+ import { useState } from '@lynx-js/react';

For a full list of APIs ReactLynx implemented, please refer to the @lynx-js/react API documentation.

Different component sets#

Unlike elements such as div and span on the Web, Lynx provides a set of native component sets, such as view, text, image, etc (full list). In ReactLynx, you can combine these elements to build your native UI.

- <div className="..." />
+ <view className="..." />

While the naming of native components is similar to React Native, ReactLynx do have some differences:

- import {View, Text, Image} from 'react-native';
- <View style={{...}} />
+ <view style={{...}} />

Different event naming#

Based on Lynx, ReactLynx uses a different set of event naming than the Web (go to Events to learn more).

- <button onTouchStart={...} />
+ <view bindtouchstart={...} catchtouchstart={...}/>

No document and window#

Lynx does not yet provide document and window objects, so ReactLynx does not support these two objects either.

This means that you cannot use any libraries that depend on document or window.

There are basically two ways for this difference:

• Most of the time, Lynx provides the feature with a different API. For example, you can use the APIs under the lynx object like lynx.reload to replace window.location.reload().
• Occasionally, Lynx does not provide the feature. You can use Lynx's NativeModules and Custom Elements to extend Lynx's capabilities.

Next Steps#

Further Learning ReactLynx#

Learn Lynx Basics#

If you haven't already, you should learn the basics of Lynx.