Kiki Saintonge, the head of the Microsoft team responsible for React Native for Windows and macOS, came on React Wednesday this week to discuss their project. The combination of React and React Native are compelling to build and support web, mobile, and now the desktop. Companies who use this poly-platform stack will be able to hire from large, defined pools of talent and move developers from project to project as many of the skills will transfer. I’ve never built a desktop application before and wanted to take a shot. Here are my experiences.
Step 1: Get your environment set up to create and build Windows apps with React Native
The team provides a clear, concise guide to install and build your first app. Following all of the steps and getting to a working environment took about 1 hour. There were no dead ends or problems I encountered.
An initial step is to make sure you have installed all of the development dependencies. This step consists of running a command on an elevated PowerShell terminal.
The next section, titled “Manual setup,” lists an alternative process to use in place of the script. I skipped over this section but later came back to it because I needed Visual Studio 2019 installed to build correctly. Note the listed options to check when installing Visual Studio 2019 (I used the community edition). Installation of Visual Studio required a reboot, so be prepared to save all your open files and get coffee.
I already had node and Chrome installed though if you don’t already have them in place, there are instructions to help you. The last step to finalize the development dependencies was to install yarn.
Now that you are ready to get ready, it’s time to install the React Native for Windows packages. Once again, the scripts and commands are in the Getting Started documentation.
Step 2: Create the app
At the end of this section, you’ll have a working Windows application running on your machine. The process is:
- Run react-native init
- Execute the npx command for react-native-windows-init
- Run your newly created windows project
The default app will load into a new Windows app. As you would expect, begin with the root App.js, and you can see how all this is connected. The directory structure and code look precisely like a React Native app, save the introduction of a new Windows directory. This new Windows directory holds platform-specific code just like the sibling android and ios directories.
Just so I could feel powerful and amazing, I changed some of the text to promote React Wednesday. It’s so cool to see my code run on the desktop!
What Next?
I’m going to find some existing React Native project and port it into the Windows platform. It’ll be interesting to see what code works and what needs to change. A few ideas come to mind:
- How will the differences in ratio/layout work on Windows?
- How much can I do in the React Native layer without resorting to the native Windows layer?
- What about native functionality like saving files?
- What interesting capabilities exist on the Windows platform that wouldn’t be familiar to mobile developers?
- How much latitude do I have for theming/skinning?
Stay tuned…
