ReactXP - A library for building cross-platform apps

Sign in to queue

Description

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...)

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]



The Discussion

  • User profile image
    Alan

    What's the SSR (server side rendering) and PWA (progressive web app) situation with ReactXP?

    Can't find any promising information by Googling, and those are both important for new projects today.

Add Your 2 Cents