ReactXP – A library for building cross-platform apps

Posted by

This post has been republished via RSS; it originally appeared at: Channel 9.

Today's Web Wednesday post highlights a new Microsoft project that builds on React, with the intent to make it even easier to create cross platform web apps (the XP in ReactXP...)


Building on React

ReactXP builds on the popular React JS and React Native frameworks.

XP means X-Platform

Share most of your code between the web, iOS, Android, and Windows.

Apps Users Will Love

Create great-looking, responsive web pages and mobile apps that feel native.

The authors of React use the phrase “learn once, write anywhere”. With React and React Native, your web app can share most its logic with your iOS and Android apps, but the view layer needs to be implemented separately for each platform. We have taken this a step further and developed a thin cross-platform layer we call ReactXP. If you write your app to this abstraction, you can share your view definitions, styles and animations across multiple target platforms. Of course, you can still provide platform-specific UI variants, but this can be done selectively where desired.

ReactXP is designed with cross-platform development in mind. In general, it exposes APIs, components, props, styles and animation parameters that are implemented in a consistent way across React JS (HTML) and React Native for iOS and Android. A few platform-specific props and style attributes have been exposed, but we have tried to keep these to a minimum.

ReactXP is meant to be as lightweight as possible. The “core” components and APIs are limited to the functionality required for almost all applications. Extensions to ReactXP expose more specialized functionality in a similar cross-platform manner.

... [Click through for the site]

Getting Started

Web Technologies

React apps are written using web programming techniques. This documentation assumes that you are already familiar with web programming concepts including the use of JavaScript, the browser DOM, browser event handling, and CSS styling. There are many online tutorials that cover these concepts.

While it is possible to write ReactXP apps in JavaScript, we recommend using TypeScript or Flow instead. These languages add type safety, compile-time error detection, and IntelliSense capabilities to JavaScript. If you are already familiar with JavaScript, it is easy to learn TypeScript. Here is a recommended TypeScript tutorial.

Understanding React

If you are new to React, you should first familiarize yourself with the core concepts. We provide an overview and some simple examples. Also refer to the official React and React Native documentation sites.

Building Your First ReactXP App

The “samples” directory contains a minimal “Hello World” app that demonstrates some basic ReactXP functionality. You can use this as a starting point. Just follow the build instructions in the README file.

Nader Dabit has created a helpful video tutorial that walks you through the steps to build the sample app....

[Click through for more]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.