React Native (feat. Redux) Exercise: Convert the Todo App to React Native Part 2

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

[00:00:03]
>> Scott Moss: So what we do now is we have our root component, and this is all set up for us. We don't have to write this. All you have to do is just register your root component using this AppRegistry register component. Which is to say, hey, this is literally just like doing the render method inside of React where you render the root component.

[00:00:19] This is the React native version of that. Because there is no DOM to render to, you don't need to register your component. And that happens for you automatically, so you almost never need to even come here and change this, unless you change the name of your application halfway through.

[00:00:33] So this is here for you. I will talk about style later, but that's basically it. It's the same thing, and all the stuff that we did as far as the methods we set up, most of that stuff is the same. You will run into some issues and we start getting into the events, onChange and stuff like that, because these aren't the same dummy events.

[00:00:53] So you're gonna run into some stuff up there. But most of it is the same. But now let's actually just go through some of those elements to kinda get you started with the to do app. So what we'll do first is, let's just get rid of all this stuff in here.

[00:01:07] And then what we'll do is we'll just go over some of the basic components. We'll talk about that hot loading thing that just popped up in a minute. We'll go over some of these basic components that we're gonna use. So we've got View which is like a div.

[00:01:18] And also in order to do app we had a what? We had a button, we had a text input, and we had like a list of things. So let's just do that. So we'll say constructor.
>> Scott Moss: Super and we'll do the same thing. We'll make some states. So the exact same code here.

[00:01:38]
>> Scott Moss: And we have todos. There you go. And now I come down here I'm just going to go ahead and just show you that is the same. I'm just going to iterate over the todos, which are just numbers right now. And I'm just going to say this.state.map or this.state.todos.map.

[00:01:59]
>> Scott Moss: Todo, no, not that todo. And all I'm gonna to do is render a text that says todo. So when I hit save, this thing broke because, no, it's not an object. I'm doing hot reload, that's why. So let's refresh this bundle, there we go. So the reason that broke is because I have hot reload on or hot module reload, which if you never have used React or heard of that before, instead of reloading the entire app or the entire browser or whatever, it's literally just going to patch the code that we changed and send it directly to the app.

[00:02:49] That way we can keep the state, and it doesn't have to reload. But because I actually did change the state itself it broke, so I had to actually reload the entire app for it to work. But there we go. So then we have our todos it on the page here.

[00:03:03]
>> Scott Moss: Pretty simple yeah?
>> Speaker 2: Got a question from the stream. Could you talk about what super is a little?
>> Scott Moss: Yeah the reason we need to call super here is because we're extending from another class here and super is just calling this class's constructor method. If you try to use the this keyword before calling super, this is gonna break.

[00:03:27] Because then this is like, well why did you even extend the component then? You need to set up the component you're extending first before you set up this component. It's just inheritance. You would do this yourself manually if you were not using the class syntax here in like ES5.

[00:03:44] Cool, so a few things to note here. One, this is exactly the same. Two, we've got some weird yellow thing here. We're going to talk about this stuff in a minute, but it's pretty much the same error we got in the browser when I forgot to put the key property on the stuff.

[00:03:58] I'm sorry, on the elements I was mapping over. It's just that React Native just puts it in this nice yellow box that you can look at. Cuz right now we don't have any logs and haven't talked about logs so this is a way that it just shoves it in your face like, look, check this out.

[00:04:12] Obviously you're not gonna want this here on production, and there's a way to turn it off. But this is here for you for development. And you can just say dismiss all. So that's for rendering, and then for input, let's just input a text input here. So we can say TextInput, and for the text input we can go just go ahead and just put a TextInput, there we go.

[00:04:35] And we don't put any properties on it or anything, we just say text input. And you'll see that right here, we get a text input. It's really small because the styles,
>> Scott Moss: Can I zoom in a little bit? Yeah, it's really small because we haven't messed with the styles.

[00:04:49] We can make it wider obviously. But that's a text input. And depending on what platform you're on, iOS or Android, that text input is gonna look different. It's going to use the native version of that, depending on the platform. So this is like a material-looking input for Android.

[00:05:04] For iOS, it will look like an iOS input. It will be completely different. But you can also overwrite those styles, which we'll get into later. So there's a text input. We can we can set value. We can listen for changes. For instance, for the text input, you can say onChangeText.

[00:05:23] And you can pass in a function here and you'll get the text that changed. You can also just say onChange as well which just gives you the entire element. So we'll just say onChange was the exact same thing we did last time, and we can just say this.handleChange.bind(this).

[00:05:45] And now we can do the handleChange, so handleChange, and we can say e. We'll setup some new state here, newTodo. There's a string, and then we can just say const ( value ) is going to be e.target.value, oops, e.target. So we get the value there, and then we can also put a value on here.

[00:06:25] And we'll set this to this.state.newTodo, exactly the same that we did in the web. It's the same thing. OnChange, handleClick, newTodo here, and we'll just say this.setState for the newTodo is the value. So that's gonna update that. Yes?
>> Speaker 2: Two questions. Andre Klaus's question is, yes, but you need to actually create a separate entity just for the key in your object array.

[00:07:03] Isn't there an easier way to do it?
>> Scott Moss: Butt you need to actually create.
>> Speaker 2: I'm not sure I understand the question.
>> Scott Moss: Yeah, I'm not sure I understand the question either.
>> Speaker 2: The second one is maybe easier. You got it, okay.
>> Scott Moss: Actually create a separate entity just for the key in your objects.

[00:07:22] Plus array or a zero. Okay, I guess, yeah, I think I know what he's saying. He's saying for that warning we were getting for when you iterate over an element in React and place it on. React needs a way to keep track of of the elements. So a key is like a unique identifier for the elements.

[00:07:40] That way you can render things efficiently. So yeah, I think what he was saying is like do we need to add on like a new property somewhere for each object for the ID. Well in this case because it's an array I mean with all the arrays have indexes, so we can just use index here.

[00:07:55] So we can just say i, and then key can just be i. So that's one way you can do it. So anything unique about the stuff, in case the index is unique for all of them, so we can just do i. That'll be the key. But if this was like coming from the server or something, these are Todos from the server, they'll probably have ID properties on them.

[00:08:12] And that's what you would use instead.
>> Scott Moss: Cool, so we have that. The only other element that we didn't do was a button. So like-
>> Speaker 3: I got a question. Text input is not showing up for me on the simulator.
>> Scott Moss: Text input is not showing up for you.

[00:08:32]
>> Speaker 3: I'm importing it.
>> Scott Moss: Importing text input, and are you self-closing it like this? You are? Okay I will come, are you getting an error anywhere?
>> Speaker 3: No.
>> Scott Moss: No, it's just not showing up?
>> Speaker 3: Yeah.
>> Scott Moss: Are you using Android?
>> Speaker 3: No.
>> Scott Moss: iOS?
>> Speaker 3: Yep.
>> Speaker 4: I have the same thing.

[00:08:47]
>> Scott Moss: Same thing, it's not showing up? All right let's run on iOS and see.
>> Scott Moss: React-native.
>> Scott Moss: Run-ios.
>> Scott Moss: Yeah, so they try to keep all the components the same across both platforms, but there's probably some differences. Maybe iOS you probably had to set a default value or something like that for it to show up.

[00:09:13] I'm not sure, but let's check it out. Or maybe it is there and it's just like invisible, because there's no styling. They're all different. Theyre like all-
>> Speaker 2: Yeah, they're saying you need to give it a height.
>> Scott Moss: Yeah, see there you go. You got to give it a height.

[00:09:29]
>> Speaker 2: For iOS.
>> Scott Moss: All right. That's a big iPhone 6. This iPhone 6 looks like a tablet
>> Speaker 2: You can change the size above.
>> Scott Moss: Yeah, it's just like it rendered it like that like here is. Look, no, it's just like-
>> Speaker 2: Do Cmd+3, it'll make it small.

[00:09:53]
>> Scott Moss: Okay, I'm like, what, is that what they look like now? [LAUGH] The retina! This is taking forever to build cuz I almost never built with iOS. But yeah, it was the height thing. Sometimes you just got to set some defaults. They try to keep it the same.

[00:10:15] What else was I talking about? Touchable input or touchable highlight. So touchable highlight is one of the touchables, I guess that's the word, for lack of better words, that you can do for buttons, so TouchableHighlight. So it's almost like a button. In fact, you can just use it as a button for now.

[00:10:39] It does some other things, like it allows you to like subscribe to when the button was pressed in, or when it's coming out. You can change opacity underneath it, all types of nice things, but we're going to use it like a button. And we'll just say TouchableHighlight. And then what we'll do is we'll put a Text here.

[00:11:01] It says tap me, and then instead of onClick because there's no clicks on a mobile device it's onPress. So you do onPress, and at this point it's the same thing. So this .handlePress.bind
>> Scott Moss: This.
>> Scott Moss: So we can save that.
>> Scott Moss: And I get an error because I forgot to make that method.

[00:11:36] I just got ahead of myself, so handlePress(), there you go. That's a nice error screen by the way, it just pops up red and just throws up in your face. All right, here you go. So now you can see I can hit tap me, and we have like this button here.

[00:11:52]
>> Scott Moss: Cool, so I'll get into more of the details. Now the next exercise is to convert what we had on the web. Use the scaffold app that you just scaffold out or you're still scaffolding out and head over to the index.Android or the index.iOS, whichever one you want to do.

[00:12:10] Or you can set up your new todo app inside of source and import it into both so it works on both platforms if you want to. Either way convert your todo app over to React Native and see if you can get it to work the same way you had it working on a web.

[00:12:24] Let's not worry about styles right now. If you want to get fancy and make it look good, you can do that, but we'll get into styles afterwards. So let's see if we can just get it working at least. If you need to look at the docs the see exactly what the properties or the props that you need to use or the events, totally do that.

[00:12:39] I'll be walking around too. So there might be some small differences, like for instance onPress compared to onClick, so that way you would have known that. But most of it's the same. Actually, everything I just showed you right now is pretty much all you need to do this.