Introducing React Native Windows for cross-platform apps

Building on Facebook’s React, Microsoft is delivering tools for building cross-platform code for Windows, the web, and beyond.

It’s not a big secret that Microsoft’s builds many of its own properties using TypeScript, its open source JavaScript alternative. With strong typing and a transpiler that converts code to pure JavaScript, it’s designed to deliver large projects on top of web projects. But a tool like TypeScript is only part of the development story.

There are a lot of tools needed to build applications on top of TypeScript, especially if you want to deliver a native user experience. While Electron works well as a host, with API calls that link your application to the Windows platform, it’s still only the foundations. TypeScript on top of Electron alone would just give you another console application, missing all the familiar elements of a modern user experience, from windows and controls to a canvas for your own user elements.

You’re also in a cross-platform world, where your code needs to run not just on Windows, but also on the web, iOS, Android, and MacOS. Users expect not just the same app on each platform, but the same user experience and the same level of functionality. They want to bring what they’ve learned on iOS to Windows and on Windows to Android. Controls don’t need to look the same on each platform, but they do need to behave the same way.

From React to React Native

While Microsoft has a large fleet of tools to bridge the cross-platform divide, it wasn’t the first company to realize it needed to solve this problem: building on a web platform to deliver native code. Facebook’s React UI framework and its React Native platform have become popular tools, so it’s not surprising that Microsoft is building on then for its own cross-platform web-based tools, used in applications like Skype, Teams, Visual Studio Code, Office 365—and now in your own code.

React takes a view-based approach to UI development. It’s a declarative language that brings together JavaScript-based components to build your application. Components are stateful, and are displayed and updated using a render() method that handles assembling and display a view. You build React elements and components with a JavaScript extension, JSX, that implements a programmable template model. Under the hood, React implements its own DOM to host rendered components, rerendering changed elements as necessary, without affecting the rest of your page.

Elements are like JavaScript functions that take properties, called props in React, as arguments, using them as properties to display data or format components. Once you define an element, each time it’s used in a page it’s called by a simple tag-like declaration, with the element name and any appropriate props, before rendering. Components are more complex combinations of elements, wrapped in a function and then used in your UI. It’s best to keep components as small and simple as possible.

Microsoft and React: from Skype to Windows and beyond

Microsoft has released several different React tool sets, which help build native cross-platform code. The first of these is React XP, from the Skype team, building on top of Facebook’s frameworks to give Skype a consistent look and feel on every OS.

Skype designed React XP to support only the cross-platform elements of React Native, initially for its own code. By limiting options, it aimed to use it to as a quick way to build code that you can be sure will run on all your target platforms. While that’s also possible in React by using carefully chosen components and props, using React XP removes the risk that you might accidently call an unsupported option.

React Native Windows followed React XP, adding React support to Universal Windows Platform (UWP) applications. This expanded the range of target environments to any that support UWP application, including Windows’s augmented reality applications on HoloLens. Installed via familiar NPM commands, it runs as a plugin to the React Native tools top of Node.js.

Getting started with React Native Windows

Installation is quick and easy, using familiar web development tools. Once everything is installed, you start by creating a React Native project, before installing the React Native Windows tools into the project directory. Once that’s in place, you can start building an app in Visual Studio. React Native Windows creates a mix of boilerplate code and system files. You can add code to the main page, as well as customizing the C# code that handles the bridge between the React Native Windows modules and the Windows UWP APIs.

Once that’s in place, you can start to bring in existing React Native components or start to write your own, taking advantage of the specific features exposed to your web components. The same code can then form the basis of the UI layer for Reactive Native apps running on iOS, Android, and the web.

It makes sense to start with the Windows side of any cross-platform app, because it’s React Native Windows that defines what capabilities it exposes to your elements and components. Your TypeScript or JavaScript code will update as the project adds new capabilities.

Because it’s an open source project, you can even fork it to add your own specific features or use pull requests to submit new features to the mainline project. Similarly, you can extend existing React Native components with React Native Windows support, making the changes available to other users, either by publishing an updated and forked component or by submitting changes to the project owners.

Microsoft keeps a list of the React components that have Windows support on its GitHub repo. The list is reasonably comprehensive, and where there are Windows alternatives to iOS- or Android-only controls, it gives options. Although Microsoft is working to provide controls, it’s obviously focused on what’s needed in its own projects, so it may not have the same needs as you. You may also need to use separate projects in a single Visual Studio application to use Android and iOS controls in device-specific versions of your code.

Building cross-platform versions of your apps isn’t going to be easy, no matter what techniques you use. If you’re only writing code for devices, then a mix of Xamarin and UWPis probably going to give you the best performance. However, if you’re adding the web to the mix, and considering using Electron to support Linux and MacOS along with Windows, iOS, and Android, then React Native Windows is well worth a look.