.webp)
Universal React
One of the biggest advantages of React in comparison to other cross-platform technologies is the fact that it supports not only mobile platforms, but also web browsers. In this workshop we’ll play with ReactXP, the library that builds abstraction over React Native, React Web and React Windows. The scope of this workshop is to introduce best practices in writing cross-platform apps, present the best techniques to write code that will be universal across platforms, and provide a few ideas on how to handle the differences in a gentle way.
a. Explain the concept of a fully cross-platform app
The main idea is to write and debug code in whatever platform, and share it between mobile platforms and web with the confidence that the result will be satisfying.
b. Create a new app with create-rx-app
To initiate the project we’ll use ReactXP, which provides a cross-platform layer. The next step is to discuss project structure and understand the concept of building a complex app.
c. Create the first universal component
Once we are familiar with the concept of a cross-platform app, we can write our own universal component. We’ll start from creating fundamental building blocks, but gradually increase the complexity.
d. Handling differences
Reusing code wherever possible is the biggest advantage of the cross-platform approach. However, we need to know how to write separate platform-specific components, if necessary. To this end we’re going to present ways to achieve satisfying results with less effort.
e. Data persistence
Keeping data will be realized using the cross-platform AsyncStorage for React, built on top of React Native’s AsyncStorage and local storage.
f. Navigation
Thanks to the ReactXP extension module which provides cross-platform navigation support, we are able to control a virtual stack of screens. Our idea is to teach the audience how to push or pop those screens onto a stack.
g. Reusable state management
Reusing components across platforms is a common pattern these days, but it’s the only thing that can be shared. In this section we’ll write some basic reducers that can be used in both web and mobile.
h. Testing cross-platform apps
Since we want our tests to run often and fast, we will focus on unit and integration testing as much as possible, and avoid writing too many e2e tests. Thanks to the react-native-testing-library, we’ll explore a convenient way to test our JS code in any React codebase.
