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.

6 hours
React, React Native


Training schedule

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.


Let's work together!

book a training

other modules

See more modules


Choose module for your React Native Training

I hereby agree for sending me by Sp. z o.o. with seat in Wrocław, by means of electronic communication to the e-mail address indicated by me, commercial information, within the meaning of the Act of 18 July 2002 on the provision of electronic services. For details see our Privacy Policy.