Want to build a native Windows Universal app without the native language? React Native Windows can do that. The following is a walkthrough on how to get a native Universal Windows Platform (UWP) app up and running via a Windows 10 Virtual Machine on VirtualBox. Fortunately, you can explore this option for free with a Windows 10 Developer VM from Microsoft. If you’re already on Windows, just skip over the VM specific portions of this article.

You can download a Windows 10 VM that comes pre-installed with everything that you’ll need, apart from react-native and its dependencies. You’ll need about 80 GB of HDD space to do this.
https://developer.microsoft.com/en-us/windows/downloads/virtual-machines

After downloading, extract the archive and import the OVF file into VirtualBox (Import Appliance). You will want a minimum of 4GB of Ram for Windows 10, and definitely more if you can afford it. The minimum machine requirements for the Windows 10 Universal Emulator is 4GB. I recommend at least 6GB.

You will need a Windows Live (hotmail, msn, etc) account to use some of the pre-installed software, like Visual Studio CE.

It takes a significant amount of time for the import process to complete, so be patient. The good news is that afterward you can throw away the 20GB disk file that comes as part of the VM download. Just make sure you don’t toss the disk file created by the import process!

After the import process is finished, go ahead and fire up the VM. After booting, it will automatically log you in as the user, “User”.

It has been ages since I’ve used Windows, so my apologies if there are slicker ways to do this. To open an app in Windows 10, just click on the Cortana search bar and start typing in the name of the app. To run it as an administrator (akin to sudo), which is often necessary, just right click on it in the search results and select “Run As Administrator”. With that in mind, go ahead and follow these steps.

1. Install Chocolatey (package manager), Node, Python, Git, and React Native

Open Powershell as administrator

iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex

choco install nodejs.install
choco install python2
choco install git

npm install -g react-native-cli

2. Use React Native 0.39.1 for the project (at the time of this writing, the latest version of the Windows plugin is for 0.39.1)

react-native init --version=“0.39.1” MyProject

cd MyProject

npm install --save-dev rnpm-plugin-windows

react-native windows

react-native start

react-native run-windows

If the last command doesn’t work, you should be able to run the app by opening the solution file in Visual Studio and running it from there. To see how that works, let’s just use an example from the React Native Windows repo. Kill the React Native packager in Powershell before moving on.

Note: When opening Visual Studio, it may tell you that the trial version has ended. Choose the option to enter your license key. You don’t need an actual key. All you need to do is login with your Windows Live account and then you are good to go.

git clone --recursive https://github.com/ReactWindows/react-native-windows.git

cd react-native-windows

npm install

react-native start

Now do the following:

• Open “Examples.sln” (“Examples”, if you don’t have extensions showing) from the Examples submodule folder in Visual Studio
• Set the StartUp project to the example you want to run
  • Right click on “UIExplorer” for example, and select “Set as StartUp Project”
  • Change the architecture from “ARM” to “x86”, located near the run button (play button icon)
  • Select either “Simulator” or “Local Machine” from the devices dropdown
  • Press the “Run” button

Note: For now, just stick with “Simulator” or “Local Machine” from the list of devices. You’ll likely run into errors if you try to use a device emulator within a VM.

You should now have a native Windows 10 Universal app up and running. Go back to your initial app and open the solution file in Visual Studio. In Powershell, kill the React packager that’s currently running. Go back to your app’s directory and start the packager from there with:

Follow the steps above to run the app from Visual Studio. Now with the app running, open the “index.windows.js” file and make some changes to the text and save it. Now go back to the window where the app is running, click on it and then press “control” and the “r” key at the same time. This will reload the javascript bundle from the packager and you should see your changes in the app. Now you’re ready to dive in with React Native on Windows!

Check out this link to see which features of React Native are available for Windows development:
https://github.com/ReactWindows/react-native-windows/blob/master/docs/CoreParityStatus.md

Next time we’ll look at integrating React Native Windows into an existing React Native project, with this same VirtualBox setup, but using the host machine for both development and running the React Native packager.