This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Exercise: Convert the Todo App to React Native Part 1" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott: Exercise two, we're just gonna convert the web Todo app to a React Native app. So let's actually just walk through setting up a React Native app and getting started. And some clues on how to transfer that stuff over. So what we'll do is we'll just make a new repo.
[00:00:18] I think I already have it here, Todo.
>> Scott: What's in here? I don't know what’s in there, let's just make a new one. I know that's going to take forever NPM install. So yeah, let's just walk a new one, let’s do that. So the first thing we'll do is navigate to somewhere on your computer where you want to make an app.
[00:00:39] And he's gonna run the command and react-native init followed by the name of the app you wanna create. So in this case, I called mine Todo with a capital T. So this is gonna create the directory for you. It's gonna create the Android and iOS app for you with the same name.
[00:01:01] So that's why I capitalized it here. That's gonna be the name of the app, Todo. You can change it, but by default that's what it's gonna be. You can put whatever you want, it's totally up you. But that's the directory name and the app names.
>> Scott: So once you have that, it's gonna take a minute to install.
[00:01:19] Don't worry about following along right now, I'm gonna set you guys loose on an exercise to continue doing this. Otherwise, that's there, you can go into that and you'll see what it creates is, let me get rid of this. By the way I'm using Atom. I've been switching editors for the last week between VS code, Sublime, Atom.
[00:01:40] They all have tradeoffs, like when I use Angular2, I use VS code, cuz it's got like great type of script support, but then it looks ugly. So I could back to Atom, cuz Atom looks good with an Atom's slow so you Sublime. But in Sublime, doesn't have good via, it's like man, it's not a perfect one.
[00:01:58] I don't know if I'm ready to go to the dark side with WebStorm yet. To much configuration for me, but I know it will do everything I need it to do. It's just like, do I really wanna set all that stuff up? Maybe I will, maybe I might have to do it.
[00:02:09] We'll see, one weekend. Sweet, so now let's open that up. But so far, I mean I've been pretty calm, but with Atom, it's just slow sometimes.
>> Speaker 2: I miss the command to create a new project, can you show it again?
>> Scott: Yeah, the command for the new project is just gonna be react-native init followed by the name of the project.
[00:02:36]
>> Speaker 2: Thanks.
>> Scott: Yep, so it's gonna like download some stuff. It's gonna take a minute, depending on who's all downloading. But once it's done, it's gonna create this for you. It's gonna create all this good stuff here. So let's just walk through this directory very quick. So notice the package.json.
[00:02:50] Boom, that means this is a node application. So that means, we can use no modules, awesome. So it's just JavaScript, that's a key indicator right there, I think that's amazing. And if you're looking at package.json, you'll see the name, it's called Todo. It starts off as private and it gives you the start command.
[00:03:03] And it already has react, and react-native downloaded for you. No react doms, cuz remember there's no dom here. And then if we head over, you'll see there's index.android and index.ios, and we look at them. They're actually the exact same, pretty much. And the reason they have these two files is these are the entry files to the two applications you want.
[00:03:27] If you're gonna be building for Android and iOS, they give you the opportunity to have two entry files to your application, so that you can have differences. So maybe the index.android is gonna be pulling modules in from a different party or app specific to Android. And indexed.ios is gonna pull the modules and specifically for iOS, because it's gonna build it differently.
[00:03:47] So this is how you can set of differences between two applications. This is one approach the other approach, the other approach is will get into later, is you can actually react-native will give you a module to determine what platform you're running on. And then you can just use that as conditionals everywhere in your code.
[00:04:01] If platform Android render this, if platform iOS render this. See, that's another way to do it too, or a combination of the both. So once we have all that, you probably wanna do is make a new folder somewhere, call a source or app or something. And that's where you gonna write your code, so your code is gonna go in there.
[00:04:22] So once all that's done, all you can do is now, you can just run react-native. Actually, can just run npm start, but for me, sometimes it breaks, let's see what happens. So if you are in npm start, let's actually just look at the command. Yeah, it's gonna start to see like, this actually breaks to me sometime, because of permission errors.
[00:04:42] So instead what I'm gonna do is I'm gonna run react-native,
>> Scott: Run-android. So I'm mainly gonna be running this on Android. We gonna iOS too, but once we go both of them, I'm just gonna stick with Android and go from there. It's just been easier for me as far as a far as developing with gene motions stuff.
[00:05:02] So when you want t run Android what's gonna do is going to look for a device by Android device on your computer simulated or a device that you have plugged up right now I'm not writing in later I don't have a device plugged up so once all this builds and it starts the is going to crash because it can't build something.
[00:05:18] So before you run this, you wanna make sure you actually have your device. And if you run on iOS, you have a Mac, just have Xcode download it with the simulator set up and you're fine. You don't have to do anything else. But for Android, what you want to do is, you could check, if you run adb devices here, it'll list all the devices that you do or do not have attached.
[00:05:36] And you can see right now, I have no devices attached. If I plug my phone up right now, and I'll put debugging on it. It'll show up here. I'm not going to do that. I'm actually just going to use Genymotion instead. And it already configured a Nexus 5X here, so I can just start that in Genymotion.
[00:05:53] That's just going to start up this virtual device here. So we'll let this build. And also, the emulators for android studio 2 is actually pretty fast now.I don't know if anybody's ever checked it out but they're actually pretty good now. I think they're actually even faster than Genymotion which is crazy because they used to be horrible, like the worst, and now they're pretty good.
[00:06:13] But I didn't feel like setting all that stuff up because I only have like three gigs left my computer so couldn't afford to download all those images. [LAUGH] I know I need to do something about that. Anyway, let's bring this, we'll keep it here for now. And what we'll do is, I've got so many things open.
[00:06:31] Let's do that. So what we'll do now is, I'll bring this over here side by side, so we can see what's happening. There we go. Cool. Okay. So I got my Android phone running. It's a full Android phone. You can do everything but make calls and use the camera.
[00:06:50] It's pretty dope. And now what I want to do is actually run that command. So if you head back here I can run react-native run android. And remember, if you're running on iOS, just do run iOS. I'm doing Android. Actually, let's just check and make sure the devices are set up, adb devices, there it is.
[00:07:13] There's our device that we just started. It's good to go. So we can just go ahead and run react If I can type, native run Android. Yeah I have an alias for this cuz it's just so much to type. So this is going to build our Android application using Gradle which is the build system that Android opted into.
[00:07:39] And the first time it's gonna take a little longer than it normally would after that because of caching absentization for the first I was going to take a little bit. So once this bill there's a few things that's happening here. You saw that it popped up in this window over here this new terminal.
[00:07:54] This is what's called the reactor native packager or so this is literally just a server that's running. That's watching our files using watchman. Actually that built pretty fast. I guess I must have cached already. This is watching our files and this is going to trance polities and babble just like we have with out react web app, it's doing the same thing on another server so this is just a light service trance polygraphs watching the files for us.
[00:08:16] That's it. And that in here you can see it actually built the application they did all this great stuff. This is all the great will build stuff install this case on. On this device. BUILD SUCCESSFUL. So now if we go back and look, you'll see boom, it went ahead and it launched the app for us on the device.
[00:08:36] Let me scoot this over just a little bit.
>> Scott: There we go. So there is our app. And we can confirm it's our app because if we go look at the index.android.js, we'll see the same stuff inside of the template here. We'll see, Welcome to React Native, there it is.
[00:08:55] To get started, and all that good stuff. Now let's actually take a look at what's going on in this file really quick. So we just made a React web app. And we talked about how to use a class and extend the component. I mean, this looks exactly the same.
[00:09:10] We're making a class called Todo. It's actually the same class that we made, the same name. We're extending a component here. We have a render method. And it's just returning some JSX. The only difference here is that we're using these things called views and text that we didn't use before, instead we used devs an input that is the only difference here and I just told you guys views is literally like a dev and a text is like a some text element like H1 or P tag that is only difference everything else exactly the same.I think that's pretty amazing.
[00:09:43] So now that we have that, any questions on this stuff so far?
>> Scott: No. So those components that we're using that's what react native provides for us. So we actually import those components from react native whereas React itself and the Component class that we're extending comes from React, the exact same react we just used on the web, it's the exact same react.
[00:10:10] The only difference here is where as on the web we were using react-dom, in native we're using react-native.