Universal React

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.