Create a new React Native for MacOS application

Yoni Weisbrod
InstructorYoni Weisbrod
Share this video with your friends

Social Share Links

Send Tweet

In this lesson, we'll get up and running with React Native while installing the extension for MacOS. For current instructions, head over to the React Native for MacOS documentation site, which will point you in the direction of the latest version: https://microsoft.github.io/react-native-windows/docs/rnm-getting-started.

To run your new Mac application, run npx react-native run-macos. The first time you run this, it will take quite a while because project dependencies are being installed, but subsequent runs will go much quicker.

Yoni Weisbrod: [0:00] To get started with React Native from macOS, we're going to head to the Microsoft documentation site where we see that we need to initialize a new React Native project against the latest version of React Native from macOS.

[0:15] We'll start by typing npx react-native init and then our project name, which is test project. Then the latest version, which is .62.. Of course, you should check your documentation when you're installing this and use the current latest version.

[0:33] This can take a while, so we're going to speed through this -- don't be surprised if it takes longer on your computer -- until we get to the step where it asks you if you want to install CocoaPods. CocoaPods is a dependency manager used by Mac, so we're going to need that for React Native for macOS.

[0:51] You can either install it using RubyGems or Homebrew. I tried installing it using Homebrew. It did not work for me, so I just went on to the RubyGems installation and it worked fine. You just type in sudo gem install cocoapods and then type in your password.

[1:08] Now, looking back at the documentation, we're going to type npx react-native-macos-init to generate the Mac extension and everything we need to run React Native on our Mac.

[1:21] Once that's complete, we'll be able to run the actual Mac application. We'll type in npx react-native run-macos, and that will start our React Native application on Mac.

[1:36] Note that as it says in the docs, the first time you run this command, it will take a while. We can see that we have our new React Native for Mac application. We have our dummy application.

[1:48] I'm going to open up VS Code and make some changes, and see how they're reflected live in the application. We're just going to change step one to the classic Hello world. Then, we have an app. We'll press Save and see the changes reflected.