ReactXP — First Look🔥

Nader Dabit
Apr 8, 2017 · 2 min read

ReactXP is a new Library by Microsoft for building cross platform apps that run on iOS, Android, Windows, and the web.

To get started now with ReactXP, check out the create-xp-app project generator.

This library looks really promising, and I will quickly demo the library as well as talk about what it offers.

ReactXP is built using React and React Native, and the lifecycle methods remain the same across both platforms. The main difference between React Native is that ReactXP works out of the box with not only iOS and Android, but also on the web and on WindowsOS!

From the docs:

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.

ReactXP main points:

  1. Recommended to build using TypeScript or Flow
  2. Can compile directly to web without another abstraction 🔥🔥🔥
  3. If you already know React / React Native, you get get up and running quickly
  4. Very similar API to React Native. Below are examples of some code you may see in ReactXP
import RX = require('reactxp')import {
Styles,
Component,
Animated,
Types,
View,
Link,
Text,
} from 'reactxp'
const styles = {
container: Styles.createViewStyle({
flex: 1,
justifyContent: 'center'
backgroundColor: '#f5fcff'
})
}
class App extends Component<null, null> {
private _animatedStyle: Types.AnimatedTextStyleRuleSet;
componentDidMount() {
// do some stuff with the _animatedStyle
}
render() {
return(
<View style={ styles.container }>
<Animated.Text
style={this._animatedStyle}
>
Hello World
</Animated.Text>
</View>
)
}
}
export default App

props, state, and most React specific things work the same, because it is built on top of React and React Native.

Huge props to Microsoft + Open Source and all of the great people working there, they have been absolutely crushing it lately and I am excited to see where ReactXP goes from here!

If you’re looking to get started with a new ReactXP project, check out this starter project I created that you can easily clone to get set up -> https://github.com/dabit3/reactxp-starter.

My Name is Nader Dabit . I am a Developer Advocate at AWS Mobile working with projects like AppSync and Amplify, and the founder of React Native Training.

React Native Training

Stories and tutorials for developers interested in React…

Nader Dabit

Written by

Developer Advocate at AWS Mobile — Specializing in Teaching and Building React & React Native — http://reactnative.training https://aws.amazon.com/mobile

React Native Training

Stories and tutorials for developers interested in React Native

Nader Dabit

Written by

Developer Advocate at AWS Mobile — Specializing in Teaching and Building React & React Native — http://reactnative.training https://aws.amazon.com/mobile

React Native Training

Stories and tutorials for developers interested in React Native

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store