React Summit Remote Edition

React Summit Remote Edition 2020

See how Microsoft is using React Native to solve some of their cross-platform problems, how they're working with Facebook to help make React Native for Windows and Mac great experiences, and learn how to get started building a Windows and Mac app.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Apps for both Windows and Mac

Hello everyone and welcome. My name is Kiki St. Onge. I've been with Microsoft for about five years now on the Windows UI Platform team and have recently been helping drive the React Native for Windows and Mac efforts with that team. I am Eloy Duran or Eloy. I have been using React Native professionally since early 2016 and have joined the Microsoft Office team in December to help them out with their React Native efforts. Today, we'll be giving you a very brief talk about React Native for Windows and Mac and that effort. Today, we'll be talking about our focus around that, why we chose to add it, how to set up in Windows and Mac. Then Eloy will be taking us through a more in-depth look at installing that, installing a community module running on both Windows and Mac and just the dev experience there. Then I'll go over future modules and how we want to support the community modules in the future with React Native, and then we will cover some resources and wrap up. As many of you may know, React Native originally started out as a way to bring JavaScript-based apps cross-platform to both Android and iOS. Of course, we're always looking for ways to bring more developers to Windows and we saw this as an opportunity. This framework has a great opportunity to entice web devs to experiment with the native Windows app development while still being able to utilize their skills and tools that they're used to. In adding support for Windows, there was a lot of gaps that we needed to fill in order to make it work great on our platform. So we added things like pen, mouse, and keyboard, that support was added, as well as support for other Windows devices like Xbox and dual-screen. But as we were doing this work, we realized that there was actually a lot of crossover between what we were writing for Windows and that desktop experience and what Mac OS has. In fact, a lot of APIs, and inputs, and even just general tools and functionality that we had written and enabled to work great for React Native for Windows matched very closely in behavior to what was needed to light up that same experience on Mac. So they took this realization as an opportunity to not only give back to the React Native community by driving the React Native for Mac effort, but also as a secondary opportunity to be a leader in the React Native space when it comes to cross-platform development for desktop experiences specifically. That's what we're going to be focusing on today. Now I'm going to pass this off to Eloy, who's going to show us how to do this in code. Thanks, Kiki. For the sake of time, because we have very little time, I'm going to be going through this as quickly as possible. So to create a Mac OS or Windows React Native application, we start with the normal template. You may also want to have an iOS and Android application, etc. So those are all in the default template.
So this should not be new to anybody creating React Native applications already. So now we wait for the template to be downloaded. Great. So now we can move on to adding the Mac OS bits. We do that using the mpx react-native-macos-init command. Before we continue, I'm going to already add another dependency, which is a dependency that has a native module that supports both Mac OS and Windows. Let's go ahead and open this up in VS Code. So as you can see, we've now added our Mac OS fork and also this native module. Let's go ahead and get that building. First, we'll need to install all the native bits, which is both React Native and the WebView. Then let's also start a packager. We can actually start the build as you are used to using mpx react-native and then run Mac OS. There we go. As you saw, it was loading. You can see that here as well. Here we have the well-known launch screen of the React Native app.

Then let's say you open up the app.js, and here we can, for instance, change some code. As you know by now, React Native instant reloading, pretty sweet. But we also added the community WebView module. So let's try using that instead. For that, I'm just going to paste in some code that I've prepared, which imports the WebView from the module and then just renders that WebView. Let's see. It will just show the React Native Windows site. Cool. We can do the exact same thing on Windows.

Here we'll be doing pretty much the same thing as before, except Windows is ahead a little bit. So we can actually use a newer version. Let's go ahead and create that. Again, that same project. Again, like before, we're going to add the Windows bits. So similar to before, except now it's React Native Windows in it. Again, like before, we're going to add the WebView native module. I am not entirely used to Windows, so forgive me. Let's see. We need to open the solution in Visual Studio. Once in here, we're going to navigate to the solution and add an existing project, which comes with the WebView package. Let's see. Here we go. So we add that, and then to the actual application, we add a reference to that project. We just add it to the product of that project. Okay. And finally, we're going to make a few code changes. Let's see. We're going to add include here, save that. And to the app file, we are going to add some initialization code. Let's see. We should do that just before initialize component. Oh, here I go. Command saving again. Cool.

Let's see. Then I'm just going to save all, close this project, and then we can, as normal, run the React native, and then in this case, run the Windows command, which will build all of the React native Windows sources as well as the WebView package. Okay. And there we go. Loading the bundle. And then let's say open this one here. And again, I'm going to just paste in the same code that we had before. Let's see. Control S to save, which will re-trigger, and there we go. Cool. Back to you, Kiki. Awesome. Thanks, Eloy. So a few things that I want to sort of talk about as you saw Eloy set up the WebView demo is that you may be wondering, well, what about all the other awesome community modules that React native has today and available for you? And I just wanted to let everybody know that we are tracking and working to enable a lot of the core and essential as well as we get further in the project, more and more community modules working for Windows and in turn working for Mac as well. So Windows comes first and Mac will follow closely after. Lastly, there's some resources that I wanted to have everybody know about so that they can follow us more closely. Obviously, the React native site, that's the origin. We also are our own React native for Windows repo as well as our doc site, and we do have a dual screen repo. We didn't talk about dual screen today, but we have some information up there if you're curious about it, and our Twitter handle as well as some tools and stuff that we recommend if you're developing in React native for Windows. Other than that, that's it for our talk, and I thank everybody for coming, and I look forward to seeing what you create. Microsoft Mechanics