Getting Started with Plain React Native

[00:00:00]
>> Before we carry on and actually start writing code, what I'm going to do is I'm going to show you what it takes to get to the same point or without Expo. One thing to note if you're using Expo and you're using the Expo app, is that you have to make sure you're on the same Wi Fi network as your computer because basically the JavaScript bundle that's being built, is being sent to your phone using Wi Fi.

[00:00:21]
And if you're not on the same network, you can't do that. If you're already familiar with mobile development, or if you just really don't wanna use Expo, you may want to use the React Native CLI. This requires for you to install Android Studio or Xcode depending on whether you want to build the Android or iOS or both In order to get started.

[00:00:42]
If you already have these installed, it should be up and running within minutes. But if not, it can take a couple of hours to install and configure them, especially Xcode is huge. Again, if you're on Windows or Linux, you won't be able to build on the iOS device, Xcode only exists for the Mac.

[00:01:02]
But you can still follow this along and build the Android app. Now the best thing to do is basically follow my favorite thing, which is the React Native CLI Quickstart guide on the React Native Website. Here you can choose your development operating system, and the target operating system, and pretty much just follow what they're doing.

[00:01:20]
And three, I'm going to do Mac and IOS. So I already have Xcode installed. And if you don't, you might have to install it from the App Store, on your on your computer. Get the things you want to make sure we have installed on Node, and Watchman. Node is the JavaScript runtime, and Watchman is basically a tool that allows us to hot update with React Native And again, if you've already installed Node on your system, make sure you have Node 8.3 in URL.

[00:02:00]
And if you don't have it, you can install it from the Node website. Okay, there you go, there's a link to Xcode to us, if you don't already have Xcode, you'll have to install it from the Mac App Store. So I already have this installed. So I don't need to do that.

[00:02:14]
And this will also install the iOS Simulators. And all the necessary tools to build iOS app, this is why it's so huge, it does everything. We'll have to install CocoaPods as well, CocoaPods is basically the iOS, Package management system. So you can think of it as npm for native iOS, it's a little bit different.

[00:02:35]
But if it helps, that's basically what it does All right, so if you have installed Xcode, Node, CocoaPods, now you should be ready to do this, all right. So, I think I'm gonna go back here, and I'm gonna initialize my React Native awesome project. I'm going to be using mpx for this, if you've never used that before it's actually a utility tool that's built into npm that allows you to run CLI commands without installing things globally.

[00:03:12]
So you remember we installed Expo globally, whereas in the React Native docs they recommend using mpx. So who am I to argue? You notice that this takes quite a long time because, there's a lot to do. Okay. So this actually, I didn't know that I was very brave yesterday and I upgraded my operating system, which it looks like it's uninstalled CocoaPods which so I didn't know that this did that.

[00:03:56]
But apparently it actually tells me that it will install CocoaPods for me, which I'm going to do. That was good to know. My pods installation failed, I'm gonna try installing them using this.
>> Do you write exactly the same experience?
>> [LAUGH] Yeah, I'm gonna have to report it to the React Native folks.

[00:04:41]
Yeah, we've done it. So happy. Right, okay. So now, Right, so in order to run like a React Native project, you actually have to do two things. So, the first you have to start the packager. And secondly, you have to build the actual native app. So if you do the command to build the native app, it does start the packager for you automatically.

[00:05:17]
But I like to do this explicitly because I would like to know what the packager is up to. So, I'm gonna do yarn start or npm run start if you're using npm. So this is just starting a packager. And then in a different tab, I'm gonna go to the same directory, and then I'm gonna do npx react-native run-ios.

[00:05:43]
So, this will build, install, and launch the application on your default iOS Simulator. And on the first time you do it, it will take a little while, because it's building all the binaries from scratch. But the subsequent times, if you haven't edited any of the native code it's quite a lot quicker.

[00:06:15]
Have this experience illustrates we're experts so much easier to get stuff. Yeah, okay. Cool, awesome. Well, that was a chore and a half. Yes, so this is the Hello World template for React Native. Using the React Native CLI, you notice that there's a lot more going on. And I've had people who are just new to React Native kind of go, well, there's so much going on I have no idea where to start.

[00:06:50]
But don't worry, we're gonna basically delete everything and start from scratch. So we have the same experience regardless of your platform. So this is running on iOS, and I'm also gonna show you how to get this running on Android. So if you are an Android user, you've had to install Android Studio, which I already have installed.

[00:07:09]
So I'm gonna just stop that, hopefully didn't disappear after my reckless upgrading of operating system. And we don't need to use Android Studio to actually launch a project, but we will need to launch the Android Virtual Device, before running the start Android command. So if you're on the latest version of Android Studio, I remember I was on 3.2 and I didn't have this option.

[00:07:40]
But basically, if you launch it and you go under Configure, you can open AVD manager, AVD stands for Android Virtual Device. And here you can create your virtual devices. So if you don't already have one, you can basically go here, click on Virtual Device, you can choose the device, you can choose which version of Android it runs.

[00:07:58]
And you'll basically download all the binaries and created for you. This will also take other, well, thankfully, here's one I made earlier. And I'm just gonna double-click to launch it. There is a command, If you know the device name, there is a command that you can run to just launch the emulator from your terminal.

[00:08:18]
But for the first time, it's just easy to do it through the user interface. And once this is launched, you can actually go ahead and just close Android Studio stuff cuz this is pretty standalone. Now, once this is open, I basically run mpx react-native run-android, and then this will pick up this virtual device and then install the app on it.

[00:08:47]
If you want to run this on your phone instead, all you need to do is take your phone and plug it into your laptop, and close the emulator. And then the AVD manager should just pick up your phone. If it doesn't, there are some deep debugging tips here, I think, yeah, you have to enable USB debugging.

[00:09:07]
So I don't have an Android device with me at the moment. But basically you go on to version number you tap on it's like seven times, and that will enable developer tools, and then you can enable the USB debugging and then you can install it on your phone.

[00:09:19]
So it's a hassle. I always use virtual devices if I'm developing just client projects. Cool,there it is, awesome. Right, so now we have the both the same exact application actually, running on both iOS and Android which is pretty cool. Now, let's have a look at the folder structure of a pure React Native project.

[00:09:43]
So this is the one that we just created, and launched on the virtual devices. And you can see that there's already a whole lot more going on. Now, the bits that are the most important here is you notice that there's an Android directory and an iOS directory. And these directories basically hold their native code.

[00:10:03]
So if you go in here, you'll have the app delegate, there's a header file, and there's the actual content file and this is Objective-C. And then the same Find List so there's an Android equivalent to this. So we're in here. Leave the Java naming convention, but very good.

[00:10:20]
This is the entry for the app. Now most of the time, you won't need to look at these. But it's a good thing to know that this is where the native code lives. We'll still have module for default or their dependencies, and another thing to note is that the react native template actually comes with flow pre-installed, they're still in the flow train.

[00:10:40]
So you'll have a buckleconfig and a flowconfig, we're not gonna be using flow for this, so feel free to ignore them. Finally, we also have prettierr and we have some babel and package.json, but notice that we also have an Index.js. So for Expo, Expo actually handles this mounting your application on its own, whereas with pure React Native, it's kind of done explicitly.

[00:11:07]
But we still have an App.js, which is where all our app code lives. So this is the file that you'll be working on.