How to Setup a New React Native Mac App

Hi, in this lesson I'll just create a bare bones app for our course. I'm just going to follow the instructions in the lesson. So I have it open here and I have my terminal here. So before installing or creating our application we need to have certain things installed on your machine. You need to have Homebrew, which is a package manager that is going to allow you to install some of the tools. You need to have Xcode, you need to download it from the App Store, you open it , you accept all the terms and you should be good to go. You need to have a Node.js installation. So I recommend that you use Volta, which is a tool manager. It just allows you to have different installations of Node.js on a single machine. And once you install it, you have Volta, install Node 15 or whatever version you want. I had a little bit of troubles with Volta because I'm using a new Mac. So I'm using NVM, which is a different manager. But you can use whatever you want. As long as you have a working Node.js installation is fine. You also need to have Ruby installed. By default it comes with all Macs. If you have any type of problem, you can just run brew, install Ruby after you have installed homebrew and they will try to reinstall it for you. And finally, you also need a code editor. So I'm using VGS code, but anything you want as well works fine. So we need to have certain package managers. One's going to be for the JavaScript side of things and one's going to be for the native dependencies. So Yarn is the package manager that it will use for the JavaScript dependencies . If you're using Volta, you can just install it with Volta, install Yarn. If not, you can just install it with NPM-G Yarn. This is going to do a global installation in your machine. I really have it installed. So it's there. You also need CocoaPods, which is a package manager for the native dependencies . So you can install it via sudo Jme install CocoaPods. I already have it on my machine, so I'm not running all of the commands. Everything is kind of set up, but you should just follow the instructions on the lesson. Good. So now that we have all the tooling necessary, we can actually create a project . So I'm just going to take the command that I put in the console or in the lesson and paste it on my console. So I just need to replace the project name. I'm just going to go for something simple, building apps. And here you will notice that I set a specific version. So as a time of now, when I wrote the course, this is the latest version. And it's important that the React Native version and the macOS version match, right? Because otherwise you might have some issues in there. But I think the in-it template also kind of does some recognition. But just in case if you see anything that's not working, that could be the problem. So this is right now installing. We're going to give it a little bit. So this is the very React Native project. So I'm just going to run a couple more things. So I'm just going to cd into the directory that was created for me. And I'm going to execute the React Native macOS in it command. So this is going to prepare the project to run in macOS. We're also going to give it a little bit of time. So after that's done, our project is finally ready to run on macOS. So we will just use the command NPX, React Native, run macOS. So a new window will pop up in a little bit. That's the package, that's Metro. So that takes care of taking our JavaScript or TypeScript. And it can compile, set it and make sure everything is working properly in the simulator or in the mobile device because JavaScript needs to be compressed and a lot of things need to work on different JavaScript engines. So don't close that window. If you close it, your application will just stop working. But you will see we need to wait a little bit because this is all the native code that gets compiled. So let's just give it a little bit. So hopefully if everything went alright, you should now have a small window with a brand new application, which is our app. It's really cool. So I'm just going to open the project on Visual Studio Code. I'm just going to do it from the terminal, but there are many ways to do this. And I'm just going to go into the app.js file. And I'm just going to change some text a little bit just to show, just to make sure that everything is working right. So where it says edit blah, blah, blah, blah, I'm just going to change. Hello world. And that's it. You will see that on the package, it compile our index.js file. So every time we make any changes, metrics, just repackages our JavaScript and send this back to the application, which is really cool. So we're going to go a step further here. The idea is that we're not just going to start coding, but actually provide you with all of the tools that you would use in a real world project. So we're just going to add some extra commands that are going to make the life easier down the road. So we need to go to the package.json file. And here I will just copy and paste it. We added three commands, the macOS command, which is just shortcut to start the app. The macOS colon install command that will install all the native dependencies for us. And the new command. So sometimes things might get a little bit weird. They might get a little bit broken. So what you want to do is just clear the cache, clear all the dependencies and just kind of start again. That should fix a lot of problems. So we're just going to make a shorthand for it in case something happens. So if I need to call any of these commands, I can just go into the terminal and I can just say, yarn macOS, for example. I'm sorry, let me save it. And it's just going to run that command. So just a nice way to do certain things. So another thing that we're going to add into a project is TypeScript. TypeScript is JavaScript with types. It gets a little bit more complex than that. But it not only gives us types, it gives us auto completion and code navigation and a lot of good stuff. So it's just a very sensible choice for your application, especially as it grows, is going to help you a lot. So in order to install TypeScript, we're going to create a new file in the root folder of our project. We're going to call it the config.json. And I'm just going to take the configuration that I put on the lesson. Just going to copy that. And I'm going to paste it. So you can see there's a lot of options in here. I kind of set up everything for you already. So you can just use it. But you can actually configure how the language behaves quite a bit. Great. So now that we have TypeScript configured, we can actually start creating some TypeScript code. So in order to do this, I'm going to go to the root folder. And I'm going to create a new folder in there. It's going to be called CRC for source. Inside of it, I'm going to create a new app.tsx file. So I'm just going to take the code that I put on the lesson, copy it, paste it. So you can see it's just a simple component. We'll go over a component in a little bit. Don't worry about it. But you will see that your editor might complain about this. It says it doesn't know what React is. It doesn't know what React native is. So this is TypeScript complaining about this stuff. So we're just going to go into the console. I'm just going to clear this. And we're going to add this, this command. So we're going to do R, yarn, add, dash, dash, depth, types, forward slash, react, and types, forward slash, react native. So what this is going to do, it's going to fetch the types for both React and React native for TypeScript. So we get type completions and type safety on both of them. So now if we go back to the editor, then you'll see that both errors have disappeared. So I'm just going to save this file. Next, I'm just going to go into the index.js file. So this file is kind of the entry point of the application. So the native code is going to call this file first in order to monitor application. I'm just going to copy and paste again. Not much changes except the import of our app. So instead of importing app.js, I am now importing from the source app.tsx. So if I save this, and I go back into our application, then you can see hello form TypeScript, which is what we wanted. And that's it. We're pretty much set to go. So on the next lessons, we will start with state management and then move to them in with tailwind, but we now have a working application. [BLANK_AUDIO]