React Native (feat. Redux) Convert the Todo App to React Native Solution Part 1

Transcript from the "Convert the Todo App to React Native Solution Part 1" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott: Was everybody able to convert the web app over to a native app? Yeah, some small things? Or is anybody confused on? And maybe you didn't finish, but maybe you were confused on what had to be done or some bugs or anything like that. Anybody, any blockers?
>> Speaker 2: Yeah, passing, value of text input to this starts to ask I just because getting a no that's the no is not an object this not status task but it seemed pretty some like as far as transferring.

[00:00:39]
>> Scott: I think you forgot to do the binding on the method, because I said this is an old saw it as a foreign see that this context which doesn't belong to the component, is part of the binding. That's what it sounds like. But with this next one you go to figure out real quick what was wrong with it?

[00:00:56] Any other blockers?
>> Speaker 3: I was just trying to get myself setup for Android side of development and I got at least running. But how do you make your refresh after you change your code?
>> Scott: That’s what we're about to talk about.
>> Speaker 3: Okay.
>> Scott: Yep.
>> Speaker 4: I was just wrestling layout.

[00:01:14]
>> Scott: Is it a layout tough?
>> Speaker 4: Yeah.
>> Speaker 5: I tried to move the todo class into another file.
>> Scott: Yeah.
>> Speaker 5: And it's like, [SOUND].
>> Scott: It blew up?
>> Speaker 5: Yeah.
>> Scott: [LAUGH] All right, so I'll make sure I do that on the solution, then. Okay, any other blockers before I get into it?

[00:01:33] No? Okay, cool. So we will just live code this. So what I'll do is, I'm just going to reset my Android to be exactly what the iOS is right now. There we go. There we go. And, wait, how did it know it was? How did it do that?

[00:01:55] Wait does that say Android? They both say Android, okay. I will say what okay so now what we do is we'll go through the go this illusion but I'm gonna make it so that it works on both platforms. So I'm just putting it instead of putting an index I enjoyed and in exile as you know separate I'm going to make a new fall inside a source make a new folder here.

[00:02:17] Call app and we'll put. To do .js just like we did on the web. So we got that. So protip, you always have to import react. That's top of your file even though we're not using it for this not global so react, from react. And then some of the elements that we're going to use.

[00:02:41] From react native which include the View, the Text, the TextInput,
>> Scott: And also do TouchableOpacity,
>> Scott: There we go, from react Native. There we go. And then we're going to go to export a class called todo that extends component. I don't know why I keep typing in the [INAUDIBLE].

[00:03:17] There we go. And then what we're going to do is go ahead and set up the render method right quick. So we can just make sure it's actually rendering and we'll just return a text, that says hello, so there we go. So we got hello here, if we head back over to Android I could just get rid of pretty much all of this except for app registry.

[00:03:46] And I want to do is import, from, we want to import our to do, from source slash app,slash to do so we have us to do here. And this is not going to be caught to do any more,cause it already have been called to do so this group and post it is going to call.

[00:04:05] I'm going to call it me. And then inside of Main, all you want to do is just return todo that looks like this. Because it's just self-closing, so we're just going to just put that there. Yeah, I know you can't find stylesheet. I know I took you out.

[00:04:26] Okay. I'll put you back I'll put style sheet back cuz it's using it for styles. Great so that's what we have there and then I'm also just gonna go ahead and do, I'm gonna copy this the exact same code and place it in iOS one too.
>> Speaker 2: You didn't change the registry, registry component.

[00:04:44]
>> Scott: Yeah and I didn't change the registry component. To main, also an Android. There we go, great. And actually because this is literally just doing, this returning this. We don't even need to do this. We can just and react now you can do this you gonna say constant equals function, is a stateless function and it's just got to return to do.

[00:05:18] We get to do that now work exactly the same, cause you are not doing anything there was a shortcut. Probably should just wrap that so it's not, there we go. So we could just do that and I was going to go back to my app todo here, there we go.

[00:05:39] So todo app still works. We still get this warning here. Actually this is a refresh. So if you want to do a refresh we're gonna get into this at the dissolution. And you just need to bring up the developer menu and Android emulator. There's a button down here, little arrow you can click that and you can hit the settings button right here, the hardware settings button and that's gonna bring up this developer menu.

[00:06:00] And you can just hit reload. And it'll reload and there we go we have hello to do that. I just made and I last you had that you can shake your computer. No it's a computer you can shake your phone with command D. Or there is at the top you can go to the hardware sake and it will bring up the menu as well you can type really you can hit reload.

[00:06:24] There's also a shortcut for reload which I think iOS is actually just come in are, to reload. And Android depending on what you're using the motion or whatever, and see if you command him. No, no that doesn't work. I don't know the shortcut for Android, I just come in here and reload.