Developing a Desktop App using React Native for Windows: Step-by-step Guidance!

Author: Martha Jones

Would you like to architect a premium quality Windows Desktop Application? Well then, employing React Native for desktop/Windows is one of the most preferred solutions for desktop application development. The reasons are manifold.

Facebook devised React, a free and open-sourced library known for crafting dynamic user interfaces. Later on, the Facebook team coined React Native. Using the React Native framework, developers were able to build cross-platform native mobile applications with React as the core interface. Furthermore, they were able to develop native mobile apps for iOS/Android, employing a single codebase based on React syntax.

This blog provides useful insights on React Native for Windows, its usage in a project, and guides you through the key technical steps involved in building a React native desktop app. So, let’s get the ball rolling!

React Native for Windows: Overview

React Native Windows was devised by the Microsoft team a couple of years back and is actively created to date with an objective to keep its releases parallel to the React Native releases rolled out by Facebook.

React Native Windows allows using the React Native framework on desktop. It resembles React Native in terms of architecture, tools, languages used, eco-system, and developer experiences. Therefore, React Native app developers can easily comprehend and work with React Native for Windows. The only aspect that developers should watch out for is that React Native Windows is rooted in Windows technologies and hence, in such projects, the Universal Windows Platform (UWP) will be invoked at the back of the JavaScript code.

Using React Native Windows in a Project

There are two major approaches while setting up a React Native Windows project: Greenfield and Brownfield

  • Greenfield: A greenfield project can be created effortlessly as all steps that need to be followed are documented by the Microsoft team in a guide named "Getting Started". And, once the project is created, you need to view your repository that is provided with the Windows/ directory. Here, you will find the native windows implementation. However, it is necessary to separate the native implementation from the main JavaScript implementation for keeping the project in good shape. This can be done by creating a separate directory for storing all the JavaScript sources. You can name the directory as src/,source/ or any other name as per your standards. Now, you are ready to start implementing the application.
  • Brownfield: The UWP (Universal Windows Platform) application is based on XAML pages that contain the entire content of the app; just like a React Native Windows App that consists of a single page that stores the main App.js component. Therefore, if you already have the UWP app project as a legacy, and wish to port it to RNW, or extend the project employing RNW content the following steps needs to be executed: Creating a RNW project in a similar manner as the Greenfield project, moving the existing UWP solution to the project that has been created, and adding a new XAML Page with the below content.

Start without Debugging menu item. Once this step is done, your new app is visible. Also, Chrome should have loaded this URL in a new tab: http://localhost:8081/debugger-ui/in.

  • Select either of these two keys - Ctrl+Shift+I OR F12 - for opening Developer Tools in your web browser.

Inside React Native Windows: Key Aspects you Need to Know

  • There are various pre-defined React components - Image, Text, View, ScrollView, and TextInput – within the core of the React Native framework.
  • The official React Native runtime is capable of rendering genuinely native UI building blocks for the iOS/Android OS. The native rendering module was made entirely extendable by the React Native team and this enabled the dev community to extend it for other platforms too.
  • Windows app target support was added by the react-native-windows project that is capable of generating a Windows app having a truly native Universal Windows Platform GUI from a prototypical React Native project.
  • UWP apps function on every popular platform including Windows 10, Windows 10 Mobile, Windows Mixed Reality, and Xbox One system software.
  • A JavaScript engine - just like the one used in the original React Native project - is used for running the portion of the app that involves JavaScript. In the beginning, the Chakra JavaScript engine was used in the react-native-windows project, but later Facebook’s Hermes JavaScript engine was integrated into the development environment for enhancing the performance.

Building a simple App employing react-native-windows: Step3

Now create a simple UWP application that will display a greeting message after you submit your first name and last name. The steps are as follows:

  • Add the required code into the App.js file.
  • Add the required core components and core APIs of the React Native environment and React’s "useState Hook" for receiving user inputs.
  • Then, you get native Universal Windows Platform UI components from React Native components.
  • The react-native-windows project extension supports a Yoga-friendly syntax and as such, it can facilitate complex layout implementations.
  • Besides, the community of React Native app developers has created several amazing libraries that function on iOS/Android/ Windows apps.
  • App distribution is enabled if you open the UWP app source with Visual Studio.

Publishing the React Native Windows App: Step3

Use Microsoft store to publish your application. To build the standalone react native windows app:

  • Open your app solution in Visual Studio. You will find this solution in the windows/directory contained within the project’s root folder. The windows/directory contains the.sln file with your app’s name in it.
  • After opening and loading the solution in the Visual Studio, select the "Release configuration" option present in the "Configuration Manager" drop-down menu and then create it.
  • For building a ready-to-be-published package, click the option – Project-> Publish -> Create App Packages.
  • You will find the artifacts of the build at the same directory as.sln file- /windows/AppPackages/directory - in which your.sln file is there.

Conclusion

So, this is how you need to establish the set-up of a React Native Windows App and thereafter develop, debug, and publish the same. The React Native for Windows project undoubtedly renders platform-specific UI elements from a codebase that is based on JavaScript.

For any kind of technical assistance concerning React Native app development, contact Biz4Solutions, a proficient mobile app development firm delivering high-end React Native app development services to global clients across various industrial domains. Our skilled professionals possess the required experience and technical expertise to deliver highly functional and productive software solutions.