ReactXP — First Look🔥

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

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 software consultant and trainer and the founder of React Native Training where we teach developers at top companies around the world how to quickly get up and running with React Native.