September 18, 2022
  • September 18, 2022

Write native Windows applications with React and WinUI 3

By on March 15, 2021 0

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

The latest version from Microsoft 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 take advantage of Windows Runtime (WinRT) APIs on all supported devices to access common functionality. All Windows 10 devices (desktops, tablets, 2-in-1s, Xbox, mixed reality devices) can be targeted.

WinUI 3 is an important component of the Reunion project, a new set of components and development tools that unifies access to Windows APIs for Windows 10 applications. Developers who want to build Windows applications can choose between multiple platforms and application frameworks: Microsoft Foundation Class (MFC), .NET / Windows Forms, Windows Presentation Foundation (WPF) or Universal Windows Platform (UWP). Microsoft explained the goals of Project Reunion in the recent preview as follows:

Whichever app model you choose, you’ll have access to the same set of Windows APIs available in Project Reunion.

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

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

Our most frequently asked question is why React Native? There are two important factors: developer productivity and application performance.
The productivity that can be achieved by leveraging React and the JavaScript community is amazing. There are also many open source libraries that you can use that are proven to work 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 features. It turns out that a lot of developers are trying to build smooth and fast apps in React Native and this is another area where the popularity of the ecosystem and 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 app, developers need to install an extension. They can then use the react-native-windows CLI to create UWP apps (with the option to choose between C ++ and C #).

React Native Windows apps can be signed and packaged. They can be distributed, installed, and updated through the Microsoft Store or a private app store. Submission to stores is subject to successful completion of a certification test before the application is accessible through the store.

WinUI is a Windows framework that includes controls for creating 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), and many more are priority for development.

Developers can access examples of using the framework in the corresponding GitHub repository.

Leave a comment

Your email address will not be published.