Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Writing Native Windows Apps with React and WinUI 3

Writing Native Windows Apps with React and WinUI 3

This item in japanese

The latest releases of React Native Windows, a Microsoft framework for building native Windows 10 applications, upgrade to the latest React Native version (0.64) and experimentally support WinUI 3 (in preview). Microsoft also maintains react-native-macos for native MacOS applications.

The latest release of Microsoft’s react-native-windows framework allows developers to build native Windows apps with React and WinUI 3. A React Native Windows app is a Universal Windows Platform (UWP) app. As such, it can leverage the Windows Runtime (WinRT) APIs on all supporting devices to access common functionality. All Windows 10 devices — desktops, tablets, 2-in-1s, the Xbox, mixed reality devices — can be targeted.

WinUI 3 is an important component of the Project Reunion, a new set of developer components and tools that unifies access to Windows APIs for Windows 10 apps. Developers who want to create Windows apps may choose between several application platforms and frameworks — Microsoft Foundation Class (MFC), .NET/Windows Forms, Windows Presentation Foundation (WPF), or Universal Windows Platform (UWP). Microsoft explained the Project Reunion objectives in the recent preview release as follows:

No matter which app model you choose, you will have access to the same set of Windows APIs that are available in Project Reunion.

Over time, we plan to make further investments in Project Reunion that remove more distinctions between the different app models. Project Reunion will include both WinRT APIs and native C APIs.

React Native for Windows has recently been used to develop the Xbox Store application. Stephen Crain explained in a community stand-up late last year that retargeting React Native to Windows devices had positive effects on productivity and performance:

Our most frequently asked question is why React Native? There are two important factors: developer productivity and app performance.
The productivity that can be achieved by leveraging React and the JavaScript community is incredible. There’s also plenty of open source libraries you can use that are tried and true for different application concepts. […] New developers can start learning immediately with documents and tutorials that already exist. […]
[About application performance,] while developing the new Xbox store, we considered fast launch times and smooth interactions to be top-line features. It turns out there are quite a few developers trying to make fast fluid apps in React Native and this is another area where the popularity of the ecosystem and the framework can have a big impact. The huge interest in JavaScript has continued to drive innovations in JavaScript engines over the years.

To add Windows support to a React Native application, developers need to install an extension. They can then use the react-native-windows CLI to create UWP apps (with the possibility of choosing between C++ and C#).

React Native Windows apps may be signed and packaged. They can be distributed, installed, and updated via the Microsoft Store, or a private application store. Submission to stores is subject to passing a certification test prior to the application being accessible through the store.

WinUI is a Windows framework that includes controls for building user interfaces based on Microsoft’s Fluent UI design system. Fluent UI is an open-source design system that supports a wide selection of output devices — the web, Windows, iOS, macOS, and Android. Fluent UI React Native controls, which are cross-platform, are currently limited (Button, Link, Persona, Text, and Separator), with plenty more being prioritized for development.

Developers may access examples of usage of the framework in the corresponding GitHub repository.

Rate this Article