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.
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....
Follow @CH9
Follow @coding4fun
Follow @gduncan411
