This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Exercise: Creating a Todo App with React" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott Moss: Our first exercise, what we're gonna do is actually we're gonna create a Todo app with React on the web. Just as a refresher so everybody can get familiar with React if you never used it before. If you have used it, this will be pretty simple. Here's a link to a starter I just pushed up on the FrontEndMasters GitHub that's got everything you need to just get started with the React web app.
[00:00:22] Now all you gotta do is just start writing code. It's already got Webpack, everything installed for you. Just look at the readme and run npm install, npm start and start writing your code. It'll live reload and everything for you. So that's the first exercise. Before we hop into it, let's just walk through some of the basic stuff through React, then I'll set you all free.
[00:00:42] If you already know React, feel free to go ahead. For the people who aren't really familiar with React, this is your chance to learn a little bit. So if you do have that starter repo, there's going to be a file source/app/todo.js. So basically what you're gonna be doing here is creating a Todo app.
[00:01:00] We're gonna create a basic Todo app here, in React. So actually, I'm just going to get rid of all this stuff. Wait, no, we'll keep that because that's not important. Actually, let's just focus on this. So most of this stuff is very independent from React Native and only works for the web like for instance, remember I said ReactDOM was separated from React.
[00:01:27] It's a completely different package, and that's because we want to render the components in the DOM. So that's completely separate, but we're gonna focus on the React part. So if we head over to todo.js. This is where this is exactly like React Native. It's literally the same thing.
[00:01:41] So in here, let's just go over some of the stuff that's happening. Let's actually just get rid of this right quick. So the first thing we did was we imported React and then we imported this component from React. And then, because we have access to ES2015 syntax, we can just go ahead and expose this module with the export.
[00:02:00] And then we can say class followed by the name that we want. And we want to extend the component class that React provides for us. This is literally just like inheritance in regular JavaScript if you've never used ES6. This is just some sugar on top of inheritance. And all we really need to do at a minimum is expose a render method that just returns the UI for the component that we're making.
[00:02:30] So the component we're making is Todo and we just need to return the UI for it. And this is all JSX, yes?
>> Speaker 2: Sorry, there's a pretty big delay. This question kind of goes back a little bit. So the question is, any React Native support for SVGs apps?
[00:02:45]
>> Scott Moss: For SVGs apps, well, there is support for SVG in React Native, yes. There's tons of libraries out there for animating, drawing SVGs, manipulating them, importing them. Yes, tons for sure. And most of them use the Native support to SVGs and not a JavaScript implemented version of SVGs if that makes sense.
[00:03:08] Cool, nice. So yeah, the syntax. Let's just go over JSX right quick. So remember I said it's like XML, or it's like JavaScript in your templates. So normally in other frameworks, if you want to write a template, you come in here and you do some strings, right, and you write some templates.
[00:03:26] But because we have JSX, we don't have to do that. So now I can just write something like a div like that in line and it's just regular HTML almost. There's some slight differences. So we can say like hello. I would say that. And all you gotta do is just run npm start on that and it should just serve it on port 5040 so let's go look at that.
[00:03:57]
>> Scott Moss: Cool, so there we go, we have hello.
>> Scott Moss: And then, if you wanna do things like inputs and buttons, let's go over that right quick. So a input would literally just be an HTML input that you would have, nothing different here. And then a button, you guessed it, is literally just a button.
[00:04:16] So it looks like HTML, it's really JSX. So this is just the basics of it. But the powerful stuff that we can actually do with it is if we wanna manipulate data. So for instance, let's say we have some data here, yes?
>> Mark: I thought you could only return one element.
[00:04:32]
>> Scott Moss: Yes, you know what? That is right, thank you. We were gonna run into that error when I saved it, so I'm glad you caught it before we did. So what Mark was saying, you can only return one element. He's right. You use so many template languages, you forget the nuances sometimes.
[00:04:48] There we go. So now, that won't break. So like I said, the powerful stuff comes when you actually want to manipulate data in your JSX. This is actually really, really cool. So let's say we had some data and actually, we'll just make it out here cuz I don't know what stage of ES6 I have on here.
[00:05:05] So we'll just say const. So let's make some data. Const items and it'll just be an array of, let's just call it nums for now.
>> Scott Moss: There we go. So now if we actually wanna list those numbers, what we can do is we can come down here and we can just do regular JavaScript.
[00:05:27] So we can do these curlies right here, which means we wanna do some JavaScript, and not some JSX. So inside of here, what we can do is we can get the nums, and we can call it .map cuz it's an array. And we could access that individual number, and we're just going to implicitly return because we're doing it on the same line here.
[00:05:47] With ES6, we don't have to put the Return key. I'm just gonna return a h3 with the num in there.
>> Scott Moss: So now if we go look at that,
>> Scott Moss: We'll have the nums. But because I put the word num in there, you see that it only just says num.
[00:06:09] So this is where the other part comes in, we could just use interpolation. So if we just wrapped this in brackets again, now it's actually gonna refer to the variable num and not the word num. So now we have the numbers.
>> Scott Moss: So that's the data binding in the JavaScript manipulation part of JSX.
[00:06:35] Some other cool stuff or some of the other differences, I guess, is eventing. So if you want to use events in JSX, you can actually just subscribe to them or you can refer to them right on the actual template. So for a button, we can say onClick,
>> Scott Moss: Followed by the method we want to run when we click so onClick, let's actually make a method and we'll just say handleClick.
[00:07:07]
>> Scott Moss: And actually this is, yeah. So we'll say handleClick and what we'll do is we're gonna get access to the event and we'll just say nums.push,
>> Scott Moss: Another number, 5. There we go. So well push a number in there. And then onClick, what we wanna do is we wanna say this.handleClick.bind(this).
[00:07:34] And the reason that I do .bind is because there's just a bug going on with auto binding in the ES6 syntax so we'll have to bind it.
>> Scott Moss: Now, if we come back here, Refresh, and we click this button. It's not working because let's put a key property on these bad boys.
[00:07:58]
>> Scott Moss: There we go. So we got that and now if we come down here, and Refresh, still not working because, why are you not working? onClick this.handleClick, let's see what's going on here. I think it's something to do with the auto binding stuff.
>> Scott Moss: That's there.
>> Speaker 4: Is it not rerendering?
[00:08:29]
>> Scott Moss: It's not rerendering because this is outside, that's why, so I need to put this inside the state. Let's do that right quick. So we can do on constructor function here. And we can just say, make sure we call super, otherwise babble will freak out. This.state = nums.
[00:08:55] And we'll just put this array here, there we go. So we got the nums there and then we just need to change this to this.setState which is gonna allow us to actually set the state of our component. So whenever you call a setState or whatever new props come into a component, this render method is called again.
[00:09:17] So whenever the state changes, it re-renders itself with a new state. So instead of going to update just this one part that changed, it's gonna completely re-render the entire template whenever the state or the props change. So setState allows us to do that. So the state we wanna change, this is gonna be nums, and we'll just say nums is going to be, first let's get the state
[00:09:50]
>> Scott Moss: Then we can say do some fancy ES6 stuff here.
>> Scott Moss: 6, so I'm just spreading all the numbers over a new array and passing it a new number like 6. So this is literally just concat. It's like a shorthand for concat. So I'll make it a new array called nums and I'm just gonna set this.state to that new array with the ES6 shortcut, which is the same thing as this.
[00:10:21] Because they're the same name, I can just erase it. So again, I'm making a new array, spreading the numbers from this.state along with a new number at the end which is concatting and just setting the state here. So now if we go back, I'll pause on debugger.
>> Scott Moss: Cool, we got a error cuz I forgot to change this to this.state.nums.
[00:10:51] There we go.
>> Scott Moss: Now, if we click, we'll get 6.
>> Scott Moss: So that's just a basic intro into the React syntax language with JSX. You don't have to be a pro at this to actually understand what's going on and if you're not a pro at it, it's not gonna stop you from finishing this workshop because the stuff we're gonna do is pretty simple.
[00:11:18] If you already know this stuff, it's just a refresher. So again, the first exercise if we go back is to.
>> Scott Moss: Just create a Todo app with React on the web. So if you can do everything in that todo.js file, just a basic Todo app, however, you want that to look, it's up to you.
[00:11:36] There's no right or wrong here. I would say just have an input with a list and then a button that when you click the input, it updates the list. Pretty much exactly what we just did. So once we have that, we're gonna actually convert that over to a React Native app in one step.