 If you're all waiting, I think last week we had the workshop at 1 PM, so we're still waiting for a few people who might be late. But yeah, let's just start. Before we begin, once again, in case you missed it earlier, just make sure you have Visual Studio Code installed. It looks like this, something like this. But OK, make sure you're on the Wi-Fi, TW Guest. The password is this big, long thing. Make sure you have Visual Studio Code installed, and make sure you have Node.js installed. If you're unsure about any of these things, call Amanda. She's our resident helper in debugging issues. So a little bit about me. My name is Sahil. I work at ThoughtWorks. Currently, I am one of the instructors for this Jumpstart program in ThoughtWorks, which is like a boot camp, a full-time boot camp that we're running for people who want to learn programming. If you have questions about that, feel free to ask me later or during the breaks. I have taught a little bit at General Assembly before as well. This is the first time I am teaching JavaScript and React in five hours. I think it might be the first time anybody is teaching JavaScript and React in five hours. But I think together, we can all make this happen. And the goal of today is to end up with something like this, a to-do list, which shows you a list of to-dos. You should be able to kind of check off the to-dos to mark them as done, and also to be able to add new to-dos like learn more JS, something like that. So that's the goal that we'll be reaching towards by the end of today. But in order to get there, we need to learn quite a lot of stuff. So let's begin. So today, roughly, the structure will be in the first half, we'll talk about JavaScript, the language, the syntax of JavaScript, some of the things you can do with JavaScript. And then in the second half, we'll apply those concepts and try to build that to-do list with something called React. If you haven't heard of React before, that's fine. We will talk about it more later on. Let's talk about JavaScript. So JavaScript is a programming language. What that means is it allows you to kind of basically in general programming languages allow you to specify things like, oh, when something happens, do this. Or given some data, show it in a pretty way. So an example of when something happens is in the to-do list example, when you click on one of the to-dos, it should be checked or unchecked. A programming language will allow you to do that. If you remember from HTML and CSS last time, HTML and CSS is all about the structure and the look of the thing. JavaScript is about the behavior of the thing. So when the user does something, what should happen? And also things like, in this case, you want to add more to-dos. How do we do that? So JavaScript kind of ties all that HTML and CSS together and helps us make it interactive. So as a programming language, it is a bit more complex than HTML and CSS. There are a few more concepts to learn in JavaScript. And the ones we'll be talking about today are variables, values, operators, conditionals, functions, arrays, and objects. A lot of new words there. No need to be alarmed. We'll go through all of them one by one. So before we start on the actual syntax of all these different things, I want you to go to maybe the folder where you stored all your HTML and CSS stuff from last time and just create a new folder there. So in my computer, I have this Tech Ladies folder. And I'm going to create a new folder there called, let's say, JavaScript. Just create a new folder. It can have any name. You can put it anywhere. Just make sure you create this new folder somewhere on your computer. And once you've done that, go to VS Code. Go to File, Open Workspace. If you can't see that, it's here. File, Open Workspace. And then choose that newly created folder that you just made. So choose the folder. Wait. Sorry, my bad. Don't click on Open Workspace. Click on Open instead of Open Workspace. Sorry about that. Choose the folder that you just created and click on Open. Cool. Any issues with that? Yes, so create a new folder somewhere on your computer. Then hang on. Yes, so create a new folder somewhere on your computer. Go to VS Code, File, Open. So under the File menu, there's an Open option. Click on that and choose the folder that you just created. So in my case, it's the JavaScript folder. It could be something else, whatever you named it. So choose that folder and click on Open. And if that succeeds, you'll see a new window in VS Code. The title of the window should be the folder that you chose just now. Cool. OK, so then there's one more step, actually two more steps. On the sidebar, you'll see this button with a plus and a file icon. It's labeled New File. Click on that. And it'll ask you to specify the name of a new file. You can call it anything. I'm just going to call it hello.js. So anything.js. So .js tells your computer it's a JavaScript file. So click on the New File button and enter a file name, something.js. It can be hello.js, whatever you like.js. Yes? I cannot put it. What does it say? If I open File. That's a good point. Cancel this. Go to File menu. Click on Open folder. I think the result is the same. Yeah, select. I'll just click on Save. That's fine, yeah. No, that's strange. If you cancel this, let's go try the open folder. Select folder, what does it say? Maybe don't say. Yeah, try it, don't say. Yeah, cool. For some, I think some of the versions of VS Code, you have an option called Open Folder in the File menu. So I only see Open and Open Workspace. If you see Open Folder, choose that instead of Open. If you just see Open, that's fine, too. Yeah, cool. So anyone does not have a folder in which they have a .js file? Everyone with me? OK, awesome. The next step is to open this feature of VS Code, which is the built-in terminal. It's the place where we can type some commands and see some results. To do that, let me find out how to do that. So go to View and go to the reason I don't know is I know the shortcut, but I don't know how to find it in the menu. Go to View and go to Integrated Terminal. You can also press the shortcut, which is Control and the back tick, which is next to the one on your keyboard. So once you do that, you should see this terminal thing open at the bottom. It says Terminal on the top. It might say something slightly different for you. That's fine, as long as you see Terminal here. If you see that, then press Type Node-V again, as we did before, and make sure you see some kind of version number. Thank you. You're welcome. I changed it. OK? Yes, I can help. I checked in the actual terminal in there. Oh, I see. But here, when you type Node-V, I can see it's back. Put a space between the dash and the node. Yeah. Yay. Cool. So it's the word node, followed by a space, a minus sign, and a V. Cool? If you've done that, try doing node, followed by the name of the file you just created. So node-hello.js in my case, or node-your-file-name.js in your case, and press Enter. And you should not see anything new, but just you shouldn't see any error as well. This is the same, right? Node. I see. When you ran Node-Dashree before, was it working? Or you hadn't tried that yet? I hadn't tried it. OK, so, yeah. Well, you have tried it here, and it seems to be fine here. That's interesting. But it works here. OK. There's probably some configuration issue. What we can do is, not to worry, you can enter all the commands that I tell you to in here instead of there. But before that, we need to just go into this folder. I don't know if that works. That does work. OK. OK. Now you can try node-hello.js in the JavaScript folder. Oh, help.js. File name doesn't matter, as long as it's the same in both cases. You should be able to right-click and rename as well. Yeah. Yeah. I think here there's some other issue, most likely. Same. Yeah, now you'll have to do it from there. But it should be fine here. Awesome. Cool. I guess you can just close this thing. Yeah. Yes. It's fine. Six and above should be fine here. OK, so just a brief overview or one line about what is this node thing. Node is a program that helps you run JavaScript on your computer. So all the syntax and new things that we learn about JavaScript, we'll use this node program, followed by the name of the file in which we put our JavaScript code. And that node program will run the JavaScript code and show us some output. Of course, there's a much bigger stuff I can say about that. But we won't use too much of the details of node. We'll just use node to run our JavaScript files. So let's try one little thing in JavaScript. In this hello.js file, type console.log2 parenthesis, opening and closing. And inside that, single quotes, and then hello or any message that you like. So console.log, opening parenthesis, single quote, hello, single quote, closing parenthesis, and save that. And now when you run node hello.js, you should see hello printed out. So type that into the hello.js file and then run it by doing node hello.js. And you should see whatever you typed inside the console.log parenthesis. You should see that printed out on your terminal. Cool? OK. So this console.log thing is something we'll be using a lot in the first part of the class. It's this helper function that comes with node.js. It basically looks like this. Console.log and an opening parenthesis and a closing parenthesis. And whatever you put inside those two parenthesis gets printed out when you run the file. So if you say instead of hello, you say hello world or you say hello tech ladies, you'll see when you run it, whatever you put inside those two parenthesis gets printed out onto the terminal. So try that out. Try changing the text inside the two parenthesis. Also try having multiple console.logs with different kinds of messages. Maybe a hello world, hello tech ladies. Oh, you didn't do this a few years ago. Remember to save your file after making the changes. If you haven't saved it, you'll see a little circle over here. When you do save it, it'll change back into a cross. It's just a way of indicating that it's not saved yet. Sorry. So the console.log is this function that's built into JavaScript. It basically just prints stuff out onto the screen. You give it some text, and it'll print it out onto the screen. I think that the terminology comes from the fact that the terminal is often called the console. And printing stuff to the console is often called logging to the console. So it's called console.log some stuff. Cool. So save that, run that. You should see some output. If you do not see that, raise your hand. One of us will come and help you. Cool. Awesome. All right. So this console.log will help us a lot. As we learn more JavaScript, we will basically learn new things and then print them out so that we can see what different things do. So let's begin. Do you use the slides? Yeah, I can share the slides later on. Yeah. OK, so that's the console.log stuff we saw before. It's the word console, a dot, and the word log, two parenthesis, and then some text inside it. Now one thing, yes? OK. So in some programming languages, there is a difference when you use double quotes or single quotes. In JavaScript, it's very forgiving, so it doesn't matter. You can have single quotes here. You can also have double quotes. The only rule is if you start with double quotes, make sure you end with double quotes as well. If you start with single quotes, make sure you end with single quotes. And you put that sample in there. Yes, I was just getting to that. That's another optional thing in JavaScript, which you'll see when you see samples online and stuff. Some lines end with a semicolon. Some do not. Again, it's optional in JavaScript. You can put the semicolon there, or you can leave it out. For today, or in general, I'm a bit lazy, so I often leave it out. If you like semicolons very much, put it in there. It will not change anything. It'll just, yeah, JavaScript will be fine. So if you try that, you'll see the same result. Semicolon is kind of in a lot of programming languages a way to say, this is the end of this line. So JavaScript supports that, but it doesn't need it. Cool. So we can do single quotes. We can do double quotes instead. Semicolons are optional at the end of the line. Cool. All right. So we're going to talk about something called variables. In programming languages, often you deal with a lot of different kinds of numbers and text and a lot of data, because you're really usually modeling something that you want to use in the real world. For example, in our to-do list, we have a bunch of to-dos. We have what's in the to-do, like does it say buy apples? Does it say buy something else? All this data that we have, we want to be able to give a name to that data. Just like when you talk to somebody new, when you think of them, you think of their name. And if you want to call them, you say, OK, I'm going to call so-and-so person rather than the person that I met at Tech Ladies five years ago who was carrying a laptop. Because that's very long and tedious. So we give names to things to make it easier to refer to them later on. In programming languages and in JavaScript, this thing, being able to give a name to a thing, is called creating a variable. So it looks like this. In JavaScript, there are actually three different ways you can create a variable. You can start with the word const, or the word let, or the word var, followed by the actual name of the variable, then an equals sign, and the value of the variable. So const let of var, name of the variable, equals sign, the value of the variable. So the value is what's in the variable. The name is what you're going to use to call that variable in different parts of your code. So in this case, I have three different variables. The first one is called lesson name. Its value is react. The second one is called duration. Its value is five. The third one is called isSaturday. And the value is this special thing called true, which we'll talk more about in a bit. But the basic structure is either const let of var, the name of the variable, equals sign, value of the variable. So unfortunately, JavaScript has had a very kind of colorful past, and it's changed a lot over the years. So until maybe four or five years ago, var was the only way to declare variables. And life was easy, and you didn't have to argue with your colleagues about which way to use to call variables. Then we had two new ways to do it, const and let. For today, we'll assume that let and var are pretty similar. Const is a bit different, and we'll see that very soon. So what we're going to do is let's try this piece of code out in our hello.js file. Let's go to hello.js. And either before or after the console logs, let's try const lesson name equals react, and then try console.log the name of the variable. So now instead of something in double quotes or some single quotes, we'll put the variable name directly. So create a variable. Its name is lesson name. The value is react. And then we use console.log to print out the variable's value. And if you run that, you'll see the word react. So what happens here? We create a variable called lesson name, and we say that the value of lesson name is react. And then we tell console.log we give it this variable name. So what JavaScript will do is it'll be like, oh, I see a variable name here. What's its value? It'll see, OK, the value is react. So it'll actually replace that variable name with its actual value, in this case, react. And then it'll print that out. So it basically looks up, OK, what is this thing that I gave a name? What is its actual value? And replaces it with that actual value and prints it out. So using this, if you have one variable or one sort of, let's say, text in this case that you want to use in multiple places, you can give it a name. And then you can have as many console logs as you want about it. And if you run that, you'll see react printed as many times. This is useful because if tomorrow you decide, OK, I don't want the text to say react. I want it to say react and JavaScript. You just have to change it in one place. And when you run it, it's changed everywhere. Versus if you put it manually here, you said react. And then you said react like five times. Then you have to change it in five different places whenever you decide that it has to change. So variables are useful in that sense where you can define something in one place and then use it in many places. Cool? Now try this out as well. Try changing the const to a let and save it and run it. And if you've done that, change the let to a var and save it and run it. So try changing the const to a let, save it and run it. Try changing the let to a var, save it and run it. And ideally, you should not see any difference between the three. If you do, please let me know because that means something is going wrong. If you're done with that, try creating a few different variables, maybe lesson name, day of the week, and try logging them out to the console. Cool? So let's just briefly talk about what is the major difference between const and let and var. The difference is if you have a variable like this, var lesson name equals something. Later on in your program, you can actually change the value that it's assigned to. So you could do var lesson name equals react and JavaScript at the beginning. And then you can change it to lesson name equals HTML and CSS. And now this variable will have the new value instead of the original value. So when you run your program, you'll now see HTML and CSS instead of the original react and JavaScript. So var and let let you reassign or redefine what the variable's value actually is. Sometimes this is useful. A lot of the time it's not useful. So we'll see what we can do instead. But the main difference to keep in mind is if you use var or let, you can declare the value of the variable. And then later on in your program, you can also change it to something else. Try that with the const. So try day of the week equals 10 instead and see what happens. So try changing day of the week to something else and try running your program. You should see a nice big error. So that's the major difference between const and let and var. With let and var, you can reassign the value of a variable like this. But with const, you can't. So day of the week is a const. When you try to change its value later on, it complains. It says you're trying to assign to a constant variable. So const kind of stands for constant. Constant means it should always be the same. So if it's originally 6, it should always be 6. You shouldn't be able to change it. And that kind of helps when you're reading the program, you see, OK, this is a const. Then you know that nowhere else in the program does the value change, which is quite helpful when you're reading through longer programs. Yes? Yes. Good question. Two minutes. Yeah, I'll get that. But yeah, that's a good question. OK, so const, let, var. For today, mostly we'll be using const. Sometimes we may use let. But most of the time, we already know beforehand what the values should be. So we can use const. Sometimes when we want to change it later on, we'll use let or var instead. Guess what const stands for? Good, you're listening. Cool. So you can declare variables. And then after you've declared them, given them some values, you can actually use them in console log. And as we'll see later on, other things as well. So basically like that. Declare it, use it. Now let's talk about the names of variables. Right now, we had some names like lesson name, duration, is Saturday. There are some rules around what the names can be. So these are the rules. It can start with any alphabet. So a to z, lowercase, uppercase, both are fine. It can also start with the dollar symbol. So if for some reason you really like the dollar symbol, you want your program to be really rich, you can add the dollar with the name. It can also start with an underscore followed by other things. You can put numbers in the name as long as it doesn't start with a number. So it could be person 23, but it can't be 23 person. So it must start with an alphabet, dollar, or underscore. And you can't put any spaces in the name or any special symbols other than dollar and underscore. So something like const day of the week, that's not a valid variable name because it has spaces in it. And VS Code will actually underline it to tell you that something is wrong. It can also not have any other special symbols like whatever, percent signs, hash, and so on. So only alphabets, numbers, dollar, and underscore. Cool? One convention that you'll see quite commonly in JavaScript, if the name of the thing that you wanted to have has multiple words in it, like in this case const day of the week. Usually the convention we follow is we capitalize the first letter of every word except for the first word, just to kind of shake things up. The first word, all lowercase, every other word, first letter is capitalized. If you see more programming stuff online, you might see something called camel case. This is called camel case because apparently it looks a bit like a camel's hump. Use your imagination. So this is quite a common convention in JavaScript. If you have multiple words, put them all together. No spaces, but capitalize the first letter of every other word except for the first one. Cool? So yeah, this is the same convention. Start with a lowercase letter. If the name contains multiple words, subsequent words will start with an uppercase letter. So in this case, it's number of students. OK, so we got a good question. Just now, we said maybe some of you noticed that as well. Some things start with single or double quotes, and some things do not. So in JavaScript, you can have a lot of different types of data. Sometimes it's text, like a person's name, their address, things like that. Sometimes it's a number, so maybe what their age is or just random numbers like when you want to sum up numbers, so you might have two numbers, 10 and 12, and you want to sum them up. And there are a few other different data types. So this text stuff, any words combined with spaces or any special characters, this is called a string in JavaScript. So a string is any text. It has double quotes around it or single quotes around it. So we have strings, numbers, and booleans, which we'll talk about in a few more. Let's talk about strings. So a string is any piece of text. It's enclosed by single or double quotes. So far, whenever we said stuff like hello world or hello from React or React plus JavaScript, all those things, they're all text, and they're called strings. So try to try this piece of code as an exercise. Wherever there are question marks, you need to replace it with something, either the value of the variable or the name of the variable. So maybe I can start typing out the first one for you. So it looks like, let's see, put it side by side. So it starts with const first name equals Jill, const last name equals, and now there are some question marks here. So the question marks means put something that makes sense in that place. You could put Jill, something. So some value. And in the place where you see a question mark here, there should be the variable name instead. So try typing out this piece of code, but replace the question marks with the actual thing that should be there instead. I think right now it's still the big news of people like, yeah, OK, OK, we can do this. They're like, yeah, exactly, like what? Yeah, because they'll react here. Hopefully some of you are going to shout out what I should be typing at that line. So let's try that out. So I've got the first name. I've got the last name. Now I'm on the third line country. Any suggestions on what I should type here? Good, that was an easy one. Single quotes or double quotes? OK, doesn't matter, as long as I start and end with the same thing. So Singapore, OK. Next line, const. Street. Street, address. OK, I hear more address. Doesn't matter, as long as the name makes sense, it's fine whatever the name is. So address equals upper cross street, all right. Then console.log, my first name is console.log In quotes or no quotes? No quotes, OK. Let's try that out. So usually, when I have some console logs in my program, although I haven't finished typing everything out, but I reached a point where I have some console logs. So at this point, I'll just save it and run it to make sure that everything till this point is fine. So I'll just do node hello.js. And I see my first name is Jill. So I'm like, OK, things are fine now. I can proceed. So let's do that. Console.log, my last name is console.log. OK, what should I put here? People at the back? All right, last name, cool. All right, so let's, again, I've got a few more console logs. Let's save that, run it, and see what happens. And now I see a very intentional error. But I see an error, right? And I know at first time, errors look really scary. There's like so many lines, and it's all in the same color, and so many numbers, and slashes, and words, like what is going on? Not to worry. Errors are badly disguised friends. So they look really scary, but they're actually really helpful. So let's find out how to read these errors. So every error has a lot of stuff. Usually what I'll do is I'll scroll to the top of the error. So this is where I said nodeHello.js. I see my first name is Jill, and this is where the error starts. So every error will have the name of the file on which the error happened, in this case, Hello.js. And then it'll have a number after that. This number is which line did the error happen on? So in your program, you have many lines. The number 9 tells me that the error happened on line 9. So I'll immediately go to my code, look at line 9, and this is where I'm going to focus and try to see where the error is. The next line actually shows you roughly where the error is. It's not very pretty, but this little arrow is pointing out. It's trying to say there's an error somewhere here. This little arrow is saying something is wrong at this point. And then the next line tells you it tries to give you an idea of what it thinks is wrong. So here it's telling you console is not defined. And now this is where things you have to kind of pay attention to what could be wrong. And if I look at this carefully, I see that I started console with a capital C instead of a lowercase c. So that is probably what's wrong. So let's change that, save it, and run the code again. And now it works. So every time you see an error, nothing to be alarmed. Try to see which file it's coming from, which line it's coming from, and then roughly which part of the line it's coming from. 99% of errors that I make in my code are just typos. I forget to maybe put the dot in the right place or the quotes in the right place or type something in uppercase when it should be lowercase. So most of the time, if you see an error, it's quite likely that you just mistyped something. Cool? So one other thing we see from here in JavaScript, the case matters. If you have something like console, you can't just say console in uppercase instead. That has a different meaning. So if it's lowercase, it must always be lowercase. And it can't be mixed like start with a capital letter or something like that. So yes. So as I said before, some parts JavaScript is quite forgiving about. So you can put a semicolon at the end or you can leave it out. I'm lazy, so I usually leave it out. But for things like this, the case is important. So if it's lowercase, then you always need to use lowercase. Cool? Awesome. So let's try the next one. After last name, we have console.log. I live in console.log. All right. Where do I live in? What should I put here? Country. Cool. So let's try that out as well. Cool. My name is Jill Doe. I live in Singapore. Awesome. The last one, console.log. My house is on console.log. Yeah. So this thing right here. So we call it address. If you call it street, then you'll put street instead. Whatever the name of the variable is, just put it inside the console.log. And when you run it, you'll see all the output. Any questions so far? Like between this I live in and Singapore? Yeah, so that's a good question. The question is, do we have to put the country and this, for example, what it is on different lines? Can we put it on the same line? The answer is yes. In console.log, if you want to put stuff on the same line, you can separate it by commas. So you can do I live in comma country. So now it'll put I live in followed by whatever the value of country is. So try that out. So now it's changed to I live in Singapore. Try that out. Try changing all your console logs to just put the variable on the same console log. And you can delete the one that has the separate one. So you should end up with something like this. By the way, for the folks at the back, can you hear me clearly and see the screen clearly as well? Okay, let me know if it's too small at any point. Cool, so that is variables with a name and a string value, so any kind of text in quotes. And you can either log everything on the same line, or you can put it on multiple lines. Let's talk about the next type of value. So we talked about strings. Let's talk about numbers. So numbers in JavaScript are used in a very similar way. The biggest difference is there are no quotes around them. So it looks like a number, it has no quotes around it. It's treated as a number in JavaScript. And you can do stuff like addition, multiplication and stuff like that. It's the same thing. Const, name of the variable equals sum number. It can be a positive number. It can be a negative number with a minus sign. It can also be a decimal number with a point and stuff after the point. Cool. And with these numbers, you can do arithmetic operations. You can do addition. You can do subtraction. The star is for multiplication. The slash is for division. So let's try that out. So maybe after this, let's try to create some numbers. I'll create a, I'll call it A is 200. B is 500. And let's try console.log A plus B. And you should see the sum of the two numbers as the last line. If you see that, try creating a few more numbers. Try subtraction, multiplication, division. And it's the same thing as before that we saw. So when JavaScript sees this, it'll see, oh, A, what is A? It'll replace it with its actual value. Then it'll see B, okay, what is B? It'll replace it with its actual value. Then you get 200 plus 500, and it sums them together, gives you 700. So try creating a few more numbers. Try some negative numbers. Try some decimals. And experiment with the different operators like subtraction, multiplication, and division. The space between, is there a lot of time? Here? Yeah, it's just a convention to make it easier to read. You could as well do something like this. So do you need spaces between the operators? No, you don't. But it just makes it easier to read, especially when you have more variables or more operators. So that's another kind of forgiving thing about JavaScript. You can have as much space as you like. Yeah, it doesn't make any difference. But of course, if you have random amounts of space, it looks a bit weird. So usually we just put one space between everything. Actually so far I've never been, so it's all good. Just let me know and feel free to stop at any point where you feel you have a question. So so far we talked about strings, we talked about numbers. Now we're gonna talk about something called booleans, which is just a fancy term for a variable which is basically something like either yes or no, or something that represents yes this is true or no this is not true. And in JavaScript, the two boolean values are true and false. So a lot of the time in your code you wanna say, is today Saturday? Yes, so you'd say today is Saturday? True, or you might wanna say is today Sunday? No, so you'll say today is Sunday is false. The true and false kind of represent this, these two states of whether something is true or not true, right? And the way they used a lot in JavaScript is in this structure called a conditional. So in programming you often have things like, oh did the user click on this? Yes, then do something, if not then do something else. So this scenario of if something, do something, otherwise do something else, happens quite a lot in programming. It's called a conditional situation. And in JavaScript we have this syntax called the if statement, which does that. So here's what it looks like. You have the word if, so all of this is, in some ways pretty strict, you have to have the word if, followed by opening and closing parenthesis. In the opening and closing parenthesis, you have a condition. We'll talk about what kinds of conditions we can put in there. But everything inside the parenthesis is the condition. Then you have a curly brace and a closing curly brace. Between these two curly braces is whatever should happen if the condition is true. So if the year is greater than 2000, we should console log it's the 21st century. And then optionally you can also have the else part, which is if it's not true, what should I do instead? There's the word else, two parenthesis, and then whatever should happen if the condition is not true. So if condition true part, else false part, right? If the condition is true, do this, else do that. Yes? So is there a way to also use the word let? Because I think that interchangeable. Yes, 90% of the time in JavaScript, you can use either let or var. Today mostly this code I actually wrote a while back. So today mostly we'll be using either const or let. Yeah. So let's try this piece of code out. Um, let's do const or can't really see it, can we? Oops. So let me put it side by side. Okay, so we'll do something like const year equals 2018. If year is greater than 2000, console.log, it is the 21st century. Else, console.log, or whatever, let's say it is not the 21st century. Okay, so you should have something like this, declare a variable using let or const, give it some value, and then this conditional statement, if year is greater than 2000, console.log this, else console.log that. And when you run it, if your year is greater than 2000, you will see it is the 21st century. If you change this year to something else like 1990, it'll say it is not the 21st century. So let's say instead of it is, you want to say it's with the apostrophe. One way to get around that is to use double quotes instead of single quotes around your string. And then you can do it's, oops, it's like that. So as long as there are double quotes outside, you can put as many single quotes inside. The other option is, let's do it here. So the other option is, the other option is if you do have single quotes around and you still want to put it in the string, put a backslash before the single quote. The backslash is above the enter key on most keyboards. What? Sometimes you need it. What if you have double quotes? Double quotes. They asked for it. Most of the time I don't do this route because it's harder to remember. I'll just swap the single quotes for double quotes and then use the single quotes inside. Cool? So let's take a look at what's happening in this condition part of the if statement. Most of the time when you have some kind of if statement scenario, you want to check if something is, well, you want to compare two things most of the time. You want to say, is this variable equal to this other variable or other value? Is it greater than that? Is it smaller than that? Is it not equal? So for numbers you can compare if it's greater and smaller. For strings you can compare if it's just equal or not equal. And most of the time you have a condition something like this where you have a variable. You have some way of comparing it and then you have something else to compare with. It could be the value itself or it could be another variable. So you could have const year two is 2000 and you could do is if year one is, okay, let's change both of them. If year one is greater than year two then console log something or if it's lesser then don't console log that, console log something else. So basically the idea is you can have either two different values or two different variables or a mixture of values and variables that you're comparing. And how do you compare stuff? We have a few special symbols we can use to compare things. You can check if one thing is equal to another thing by using the triple equals. You can check if something is not equal to something else by using this exclamation mark followed by two equal sign. We'll try all of those. And for numbers, you can check is one greater than the other? Is one greater than or equal to the other? So five is greater than four. Five is greater than or equal to five as well because it can be greater than or equal. Or you can check if something is less than or less than equal to. Okay, so let's try those out. Let me. Not equal is exclamation mark. Yes. It does. There's a slightly different way in which that's interpreted in JavaScript. We won't go too much into the details about that today. Yeah, so that's the thing. A lot of the times it works, but there are some cases where it does something special and that can cause bugs. So most of the time, we'll just be using, and definitely for today, we'll just be using the not with two equals for not equals and the three equals. Two equals for not equals and the three equals for equals. If you have just one equal, it's only when you're giving a variable a value. So one equal means I have a variable, I want to give it a value. I use one equal sign. But if I want to compare two things, as mentioned, there is the two equals, which we won't talk about today. We'll use three equals instead to check if something is equal. Or... Or not with two equals to check if something is not equal. So try that out with the years you have. Try the triple equal. Try the not double equal. And you can also try the greater than, greater than equals, less than, less than equals. Try varying the values you put in the years. So maybe try when they're both the same, when one is slightly greater than the other and things like that. So for now, basically, if you feel that the value of your variable is never going to change, use constant, and most of the time that it does happen that it's not going to change somewhere in your program. So I'd say go with constant. If you feel somewhere, oh, I really need to change your one to some other value later on, then change that constant to a let. But the sort of the default choice is use constant unless you have to use let or var. Can you like compare like year one and year two? Two different variables like constant or let? Yeah, that doesn't affect whether you use let or cons. Doesn't affect how you compare them. The let or cons is just whether you can reassign it later on or not. If it is a string, I mean in case in a single code or the whole code, then it has to be really exact like that. Yeah, so let's try that out. So here we're comparing numbers. Let's try comparing strings. So const name one equals Harry, const name two equals, let's try Harry with lowercase. And let's do if name one equals name two. Console.log names are the same. Else console.log names are different. So try that out, see what you get. Yeah, you should get names are different because again it's checking is it exactly the same both in terms of uppercase, lowercase, any spaces. So if I do lowercase, but I have some spaces, they're still different because the first one has spaces, the second one doesn't have spaces. So it's basically the exact value. Is it exactly the same? Yeah, I don't wanna get in there. I'm intentionally avoiding it. I'll give you the good parts. Do you know we have to do react today as well? Cool, everybody try that. Okay, so finally let's try this Boolean thing that I mentioned a few times. Let's say I have a variable called isSaturday and I set the value to true. So Boolean you have two options either true or false. You can tell if it's a Boolean by the fact that there are no quotes around the value. So it's false without quotes and not false with quotes. That makes it a string. If it doesn't have quotes, that makes it a Boolean. The two options are true and false. Okay, and with Booleans in an if condition, you don't need to compare them with anything. You can just say if isSaturday console.log today is Saturday else console.log today is not Saturday. So in the special case of a Boolean variable, you can just put that variable directly in the if condition and you don't have to really compare it with anything else. This part with the Boolean, okay. So let's talk about Boolean variables. Basically, a Boolean is a value in JavaScript which is either the word true or the word false. Okay, they're like special keywords in JavaScript. True is like, yes, this is correct. False is like, no, that's not what we think it is. And an if condition, how the if condition actually works is whatever you put inside the condition, it should give you the result of true or false. So what that means is when we actually compare things, right, these using these comparison operators of equals greater than and so on, that operator actually gives you a result of true or false. So in this case, if name one is equal to name two, you'll get the result of true. And if it's not equal, you'll get the result of false. So that's the if condition actually just needs something that ends up being true or false. So variable itself could be true or false or comparing something could be true or false. So that's why in an if condition, you can either have this with a comparison operator with two different values which are not booleans or you could put a boolean directly in there. So it's like saying, if true, console.logtoday is Saturday, else console.logtoday is not Saturday because we set Saturday to the value true. So what, sorry, just, yeah, of course, this is kind of contrived. So this will always be true, right? And it'll always execute this thing. Even when we put isSaturday like this, it'll always be true. It'll always execute this thing. But as we write more programs, we'll see we don't know what the value is. We don't know if it's true or not. So we'll compare something to something else and then we'll have two different scenarios where we can have two different console.logs or two different things. For now, just the general idea is if takes something that can be true or false and if that thing ends up being true or true, it'll do this stuff. If it ends up being false, it'll do the stuff in the else. Okay, so let's try an exercise. So this time I'm gonna let you try this out before I kind of start coding along. So here's what you have to do. Create a variable called birth here. Assign a number to it. Create a variable called current here. Assign the current here to it, which is we are not in the past anymore. It's 2018. Create a variable called age and the value of age is current here minus birth here. And then finally, sorry, print the age and then finally, if the age is less than zero, print you are from the future. So if the age is negative or less than zero, print you are from the future. You can do it in the same file or if you like, you can also create a new file just for this exercise. Any questions or any help needed? So this is just an example of the first one. So I'm creating a variable called birth here, assigning a number to it. Yeah, so after this exercise, we'll do like a very quick review and then break. Yeah. Yeah. Like that. Yes, const. Then. Awesome. Then. Con stage. Equals. Yeah. Current here. Minus. Minus. Birth here. Awesome. Then. Okay. What's the next part? Console. Console.Log. Paranthesis. Age. Or age. No quotes. No quotes. Okay. So if I put the quotes, it's actually the word age. If I don't put the quotes, it's the variable age and JavaScript will replace it with its actual value. Cool. Last part. If. Age is less than zero. Age is less than zero. Yes. Within, within, yeah. Paranthesis or, I say parenthesis because actually all three types of brackets have different meanings in JavaScript. So the parenthesis are used here. The curly braces are used here. And then the brackets itself we'll see later on are used for something else. Okay. So if age is less than zero. Awesome. And how do I run it? Note. I think I did, but let's, yeah. I usually press it like five times to make sure. Cool. Press enter and you see 108 and you don't see the console log because the age is not less than zero. You can try putting an else there and print something else instead. Yes. The else is optional. Maybe in some scenarios you only want to do something when the condition is true. So you don't put the else. In other scenarios you want to do something when the condition is true or something else when it's not true, then you put the else as well. So in this case you can say, oops. You can do this. And now I see, hi there. If I change my birth here to 2020 then I'll see. I'm apparently from the future. Whoa. Cool. Awesome. Good stuff. Let's do a very quick review. So yeah, we'll do a quick review and then we'll take a break. So what are variables? Variables are just names for different kinds of values in JavaScript. When do you want to use them? Usually when you want to use the same value in multiple places, you store it in a variable, give it a name, and then you can refer to it in multiple places. What's the difference between strings, numbers, and booleans? Anyone quick? What's a string? Yeah, some kind of text. Inside quotes, which can be single and double. Awesome. What's a number? Number is a number. Pretty easy. It can be positive or negative or decimal. Great. What's a boolean? True or false? Great. Different kinds of operators. So we have arithmetic operators such as? Yes, plus, minus, multiplication, star, and division, slash. We have comparison operators like? Triple equals? Not exclamation mark and double equals. What else? What are the other comparison operators? Greater than? No, greater than for you. This way. Greater than, less than, greater than equals, and less than equals. And finally, we can use the if statement with the optional else part to have some kind of condition checking to do different things when something is true or when something is false. Okay, awesome. Let's take a break and get some refreshments and then we'll resume after that. Cool. You can bring your food here if you haven't finished. That's fine. Okay, so we talked about, what did we talk about? Does anyone remember? Variables. Yes, we talked about variables. We talked about different types of variables like strings, numbers, booleans. We talked about operators. We talked about conditionals, which is the if statement and the optional else clause. The next part, okay, by the way, I know some of this is still quite abstract. It's just that we do need to know all the syntax so that we can put it all together when we get to the react part, which is the part after this. So there are three more things that we'll talk about. The first one is functions. So we'll talk about what they are, what it looks like, what is declaring a function versus invoking a function. And then we'll talk about how to pass values to functions, return values from functions. So let's start with that. What are functions? Functions are kind of a construct in JavaScript and many programming languages that allow you to reuse code. So if you find yourself doing the same thing in many different places, like maybe every time you say hello, you say the name of the person after that. You can kind of put that in this thing called a function, give it a nice name. So just like for variables, you have the same values appearing multiple places. You give them a name and reuse that. Now for functions, if you have the same code appearing in multiple places, you can put that in a function, give it a name and then use it in multiple places. And this is what they look like. A lot of symbols going on in there. So let's walk through that. It's the same const let of R as we saw before, followed by the name of the function, followed by the equal sign. So this part is the same, just like a regular variable, const name equal sign. Now in the function, the special thing is there are this opening and closing parenthesis, followed by this arrow, which is an equal sign followed by the greater than symbol. And then parenthesis and inside the parenthesis is whatever the function does. It could be console logs, it could be declaring variables, it could be a few other things that we'll see. But for now, just keep in mind that whenever you see this kind of parenthesis followed by an arrow, you've actually created a function rather than just another variable. So it's const name equals parenthesis, arrow, curly braces, and then the rest of the function, which is what the function does, also sometimes called the body of the function, right? So inside the curly braces is we can put any kind of JavaScript code. And when we call that function, we'll see how to do that. That code will be executed by JavaScript. So let's see how to do that. Let's go back to our JavaScript files. I'm just gonna remove everything for now. Okay, let's keep this file, let's create a new one. So go to the sidebar, create a new file, call it functions.js. Okay, new file functions.js. And inside that, let's type this new function. So we'll do const do something equals parenthesis, arrow. So equals parenthesis, arrow, curly braces. There's I think no easy way to remember that except write it down and keep coming back to it. There's equals, parenthesis, arrow, curly braces. And inside the curly braces, we put whatever the function should do. So in this case, let's say just some kind of console logs as, that says I do things. Okay, so we've created a function. It's called do something. And what it does is it does this console log. So now if you save this file and you run it using node functions.js this time because that's the new file that we created. If you just run that, you'll see nothing happens. If you see an error, let me know. Most likely there's some typo. So just make sure you have the equal sign, parenthesis, arrow, curly braces, body. Okay. So now this is different from before. Before when we said console log, we would immediately see it in the result when we ran the program. Now we've put it in a function and we don't see it. And that's because we haven't called the function yet. So we've defined the function. We've said what it should do. Now we need to do it. And to do that, we use the name of the function. So do something followed by another pair of opening and closing parenthesis. So over here, we've defined the function. We've said what it does. And now we've invoked or called the function, which will actually do what's inside the function. So if you save this and run it, you should see your console log. So how that works is JavaScript will see, okay, what does this do something? It'll look at this part. Then it'll see, okay, there are two parenthesis after this, that means it's a function. I need to call it. So it'll look here, okay, this is the body of the function. Whatever is inside here, it'll immediately execute that. So if you have two console logs, for instance, console.log, my name is do something. And just change it there. Don't need to change anything else. If you run it again, now you'll see both the console logs. It'll say, my name is do something, I do things. You can call functions as many times as you like, so you could have do something four times. And when you run that, you'll see whatever that function does, now it happens four times. So functions are a way to kind of reuse when you see the same code happening in many places in your file. You can put it in a function, give it a name, and then you can call that function wherever you need that code to be executed. Yes? Are we overconfident? No, so again with the functions, you could do let or you could do var. JavaScript syntax has evolved a lot over the years. There are actually four or at least three different ways of declaring functions. Today we'll just do this one to keep it simple, but yeah, you might see some of the other syntaxes online as well, but effectively it's the same thing. There's a name of a function and what that function does. So in this case, the name is do something, and then what it does is inside the curly braces, which is two console logs. Cool. All right. Yes, the parenthesis must always be there. Let's see what happens when we don't put them. So I have just one do something. If I don't put the parenthesis and I run the program, nothing happens. So if I want to call the function, I must put the parenthesis and only then will it be called. Yes, in two minutes. You know what's coming, I think. Cool? So declare a function, call the function wherever you need to. So syntax for declaration, and this is how you call it. Now this is sort of a more useful function. You can pass values to functions. So you can say some part of the function is always the same. I always want to say hello, but who I want to say hello to changes. Maybe in one place I want to say hello to Jane, in some other place I want to say hello to someone else. So you can say in your function that this name part will come from outside when I call the function. And this is how I use it inside the function. So it'll be console.log, hello. For strings, if you put the plus, it just puts the strings together. It's kind of like the comma in the console log. So you could do hello plus name plus exclamation mark. And name becomes like a variable inside the function that gets passed to the function when the function is called. Let's try that out. A few things are happening there, so let's try it out. So we'll create a const say hello equals. And now instead of empty parenthesis, we'll put a variable name in there. It could be name, it could be anything, just like any other regular variable name. Then the arrow, then the curlies. And inside that we'll say console.log. Let's keep it simple for now. We'll say hello comma name, just like we did before. And this name here is the same as this name in the parenthesis here. Now when you call this hello, you could say, say hello, chain, Justin, Jack. So now part of what the function does is always the same. It always says hello, but you can change other parts of what the function does. In this case, you can specify the name that the function calls. So it'll always be hello, and then the name will be the thing that you pass into the function. And these are called arguments or parameters. So this is a function that has no arguments or no parameters. This is a function that has one argument, and the name of that argument is name. It can be any other variable name, so it could just be the letter a, if you like. And you could say hello comma a, and then it'll still work the same. It'll be, you get the same output. So hello, Jane, Justin, and Jack. So what's actually happening here? Let's take a look. Let's take a look at the first one. So we say, say hello with Jane, right? This is like saying, when you call this function, whatever I put in here should be the value of a inside the function. So when this function is called, a will become Jane, and then you do console.log hello a, so it's hello Jane. The next time it's called, the value of a is Justin. So now when you call it, it'll be console.log hello Justin, and it'll say hello Justin instead. So it's a way of having a variable inside a function and specifying its value from the outside. So this makes it quite useful where you can do functions where some parts are always the same in the function. It always does the same thing, and then some parts come from the outside. So you can kind of parameterize what's happening in the function. You can change its behavior slightly, but still do generally the same thing. Cool? Any questions? So let's take a look at another function. Let's take a look at a function that adds two numbers, right? So we say const, give it a name, maybe add numbers. Now we said that it adds two numbers, so we'll give it two parameters, a and b. So if it has multiple parameters, just specify them with commas in between. So it takes two parameters, a and b, and then it says console.log the sum is a plus b. So now it's going to add the two numbers, and then it's gonna say console, it's gonna say the sum is whatever the sum of those two numbers is. And when you call it, you can do add numbers, five and six, for instance, any two numbers. If you run that, you should see the sum printed out. So one way of trying to figure out what is happening is to basically look at the function, look at what you're passing to the function, then see the actual function definition and replace those values with the things that got passed in. So here I'll see, okay, the name of functions add numbers, so it's this guy. I'm saying five and six. So a is five, b is six, and then in the console.log, this is five, this is six. So five plus six is 11. I get the sum is 11. Cool. So this is quite useful. The operation is the same, it always does addition, but you can keep changing what numbers are being added. You could say 11 minus six, you could say 51.something, and minus 43, yeah, any numbers. So now this function always adds the two numbers, but you can always change when you call the function, you can change what those two numbers are. So it makes it quite reusable and helpful. Okay, so what did we learn so far? We can define functions, which let us reuse code. The functions can take, so to call a function, we use the parenthesis with the name of the function, and we can also pass arguments to the function if we want to parameterize the stuff that the function does when it's called. So if it doesn't do different things every time it's called, no parameters are needed, no arguments are needed. If it does, if you want to do slightly different things every time it's called, we can use these arguments or parameters, and they behave very much like variables. It has a name, and when you call it, you give its actual value. Okay, and in the function, this name actually gets replaced by the actual value, and you'll get hello, and then the actual value in this case, it's more. You'll see that. And similarly, you can have multiple arguments as well. For example, in the add function, you could take two arguments and say the sum is a plus b. You could, if you like, you could take three arguments as well. You could have a, b, and c, and you can say the sum is a plus b plus c, right? So now when you call it, you give it three numbers and it'll add all of them and print out the result. Cool. So there's, I think there's probably some limit to the number of arguments, but there's no practical limit to them. You can have as many arguments as you like. Do you know what's the, yeah, must be some really high number. Cool, so let's take a look at these functions we've just defined so far. All of these functions do something, which is they log stuff to the console, right? Okay, so they log stuff to the console, all of these functions. But in JavaScript, you can do more than just logging to the console. You could show an alert to the user. You could put some text in your webpage, in the red color, for instance, right? You could still want to say the sum is a plus b plus c, but maybe you don't always want to put it on the console. Maybe you want to put it somewhere else. Maybe you want to change it a little bit before you put it somewhere. So there's this thing that you can do with functions, which is called returning values. So when we put in arguments to the functions, when we put parameters, we can put the stuff here. Oops, that's not what I wanted to do. So we can specify parameters to the function, which is what goes into the function, but we can also take stuff out from the functions, which is the value that's returned from the function. The functions can take in stuff via parameters and arguments, and they can give you back stuff via this return value. So what it looks like is this special word return, followed by the thing that you actually want to get out from the function. So let's play with that. Let's take this add function. Instead of console logging, the sum is a plus b plus c. We'll just return a plus b plus c. So the keyword return, followed by whatever it is that you want to return. In this case, you want to sum everything up. So you return a plus b plus c. Now, if you save it and run it, you'll see none of the sums are being printed out, because when we call this function, it's just returning the final value, and we are not doing anything with that value. So now it's kind of up to us to decide, do we want to log it to the console? Do we want to show it as an error? Do we want to do something else with it? So let's say for now I decide, okay, I do want to log it to the console. I can add the console log here around where I call the function. So I could do something like the sum is add numbers 563. And then I'll see the first one. It'll say the sum is 14. Now, this is nice because the thing I want to do, which is summing up numbers is always the same, but maybe I want to print different messages every time I sum up the numbers. The first time I say the sum is so and so, now I say the result is so and so. And finally, I want to say the answer is so and so, right? So now this function itself does lesser than it was doing before. Now it just sums up the numbers and gives them back to you. And now you can decide how you want to use that result. Previously, it would always just log to the console. So it was very specific. This function adds numbers and logs them to the console. Now we've changed it to be this function, just add some numbers and you can later decide what you want to do with that result. So if you try this out, you should see something like this. Okay, so let's do a quick exercise. I think I don't have it written down here. I'll just write it down, okay. So what you're gonna do is, hang on, let's, we'll create a few functions and we'll try to use them. So write a function that takes in four numbers as arguments and returns the sum of the four numbers, four numbers. Write a function that takes in two numbers as arguments, subtracts them and logs the result to the console. Okay, let's try these two functions. For the first one, if you want to see the result, you'll actually have to call console.log outside the function. For the second one, you should be calling console.log inside the function. So try these two things out. There's an error in line 20 that says that the result is this. But what is the main issue? So the, yeah, it does not very clear there. Basically, the issue is that you're missing this comma. For both, is it? Yeah, so the first line, you have the comma, but the other two, it's not there. So why do I need this comma? So how console.log works is, it kind of takes in different things. So here, what I'm gonna do is, every table is gonna give me part of the answer. We'll start from the back all the way there. So there are three of you, I think. Yeah, so, just volunteer, there is the answer. It could be wrong, that's fine. We'll try to figure it out together. Add numbers, sum of four, like that. Okay, yeah, cool. Yeah, okay, cool, that's awesome. All right, so let's say that table here. What should I put inside this function? Return, A plus, cool, awesome. Do I need a semicolon at the end? No, it's optional, everywhere. Well, almost everywhere, for today everywhere. Yeah, so that's our sum of four function. Everybody got that, same similar function, maybe different name. Again, the name here can be different. It could be sum of four, it could be add more numbers, it could be anything like that. And the variables or the arguments inside the function that you will eventually pass to it, they can also have any name. So this could be A, it could be X, it could be number one, anything like that. As long as whatever you put here is the same thing that you use inside the function. So if it's X in the list of arguments, then it's also X in the body of the function. If you use the word sum here, you mean for the name here? Let's try it, okay? So let's call it sum, let's see what happens. Okay, so this function takes in four arguments, returns the sum of those four arguments. How can I actually invoke it and print the result to the console? Is it stable at the back? Yes? Sum, okay, open another bracket. What should I put? Just give me some numbers, okay? So we have four arguments here, right? So we'll give four numbers. So let's say 20, 30, one, five, okay? So when I run this, let's see does it work or do I get an error? All right, so in this case it works. I get the sum of the numbers. If you got an error when you tried this, it's quite likely because above this you've defined a function called sum or a variable called sum. So remember with const, you can't redefine stuff. So the names have to be unique. If you have one sum function that does one thing, you can't have another sum function that does something else. So the names have to be unique. If it's called sum here, you can't have another function called sum before that. Yeah, that's usually the case. The name has to be unique of the function. So that JavaScript knows when I call this function what am I actually calling, right? Cool. The table here, what's the next part? Yeah, so the subtraction function. What should that look like? Sub numbers. The arrow, okay. Okay, cool, that's cool. We'll move on to this table for the body. What should this function do? Return A minus B, okay? Let's go back to the thing here. So it says it takes in two numbers, subtracts them and logs the result of the console. So in this case, we want all those things to happen inside the function. So, yeah, so instead of returning, again, this is just kind of an exercise for us to play with the different return versus console log. So here, yeah, we'll do console.log, and then inside the console log, we'll do A minus B, cool? Well, oops. I mean, I did a return. Mm-hmm. Then the next line after console log. Yes, that's fine too. That would be similar to the sum function where you return something and then outside the function you actually console log. Yeah, this was just to kind of show the two different ways of doing that. The result is the same in both cases. So let's try this. How do I call this function table here? Sub numbers, okay. So what should I see? I should see three, right? Let's try that out. Awesome. So 56 for the first one, three for the second one. Cool. A few things to note here. Most of our functions so far have been quite simple. There's only one line inside. It doesn't have to be that way. You could have more things inside. For instance, what you could do is, you could say inside you could actually create a variable called const sum of the numbers equals x plus b plus c plus d. And then you could return sum of the numbers instead. So sometimes when you're doing complicated operations, you might want to put it as a variable first and then just return that variable later on. So you can have basically any kind of JavaScript that's valid JavaScript. You can have it inside the function. You can create variables. You can do your math. You can have if conditions as well, which we'll see later on. And then you can either return it or you could console log it or do something else, okay? The other question, which I saw some of you had, the names of these parameters over here, do they have to be unique? So if I say a and b here, can I also say a, b, c, d here? Yes, you can. They just have to be unique for that particular function. Across functions, you can have the same names. So in this function, you could have a, b, c, d. In this function, you could have a and b as well. That's fine. As long as whatever you have in the list of parameters here is what you're using inside the function here. Cool? Any questions? We have inputs. Yes, so when we do this to-do list, we'll actually let the user type in stuff here and we'll take that from the user and put it in the list. Yeah. Yeah. Yes? Yeah, I was just wondering if, like, it's preferable to use the host so we would say it can be called a function. You mean the return versus this thing? I think it depends on the situation you have. We'll see a few different ways to do that when we do the react part. It depends on how flexible you want your function to be. Do you always want it to log to the console? So whoever's calling it, no matter when they call it or how they call it, it will always log to the console. Or maybe you just wanted to do some kind of calculation or some kind of data manipulation and let the caller decide how to present that result. So sometimes you want that flexibility. Sometimes you want to say, no, no, this should always go as an alert message to the user, for instance. All right, so it's a matter of how do you foresee this function being used later on? Cool, good question. Any other questions? Okay, if you think of something, just let me know. Let's do a quick review. So what are functions? What words come to your head when you think of the word functions? It's a way to... Yes, so add or subtract is the stuff we tried, but the general idea is reuse things in the code. So any code we see needs to be reused in multiple places. We can use functions for that. We saw the syntax for creating functions. The first part is similar to declaring a variable. The actual value is parenthesis, optional argument names, arrow, curly braces. Inside the curly braces we put whatever the function does. So you can declare the function as we did before and once you've declared it, you need to actually invoke it to make that thing happen. So declare it with the definition and the funny arguments and syntax and invoke it, just call it with the parenthesis. If it takes in any arguments, give those arguments inside the parenthesis. We can either make the functions just do something like log to the console, or we can return values from the functions and then decide what we want to do with the values later on. Ignore the last part. I think it came in from a different slide. Sorry about that. Yes, we'll talk about it in the react part. But yeah, for now, we'll just focus on the syntax. You can reuse code with functions. You can reuse more code by passing in arguments to functions and you can reuse even more by returning values instead of doing something in the function. Cool, okay. That brings us to sort of the last two things before we move on to the react side of things. And they both have to do with representing data in our programming languages. So a lot of the time when we write some programs, we want to model something from the real world, like maybe you have a class of students. You want to model, okay, these are my students. These are their grades in various subjects. What's their average grade, for instance? Well, you have some data, okay, here's a class of people studying JavaScript and react, maybe their names, what are their hobbies, stuff like that. Right, so very often in programming, you want to take some data from the real world and model it in your program or store it in your program. And how do we do that? So far we've been using variables to do that, simple variables. So a variable can be a string, a variable can be a number, a variable can be a boolean. But let's say you have this complex sort of table of data. You have a bunch of names, for each name you have their corresponding hobby, right? How could you put this, like, how can you take this data and write it in JavaScript in your program? So one way of doing that is the very manual way. For every type of data, you create a new variable. So person one name is John. Person one hobby is painting. Person two name is Jane. Person two hobby is writing. But, and while this works, it's kind of hard to maintain. If you have 100 people, you have to keep typing, okay, person 100 name, person 100 hobby. And it's just very tedious. And in programming, as soon as we start to see a lot of repetition, usually the first thing that should come to your mind is there's probably a better way. And if there's nobody around to ask what the better way is, ask Google. Google always knows the better way, right? But for today, of course, you can ask me and the other people around you. So this works, but it's just not very efficient. It doesn't work very well. So let's talk about the first part of it, which is a single row in this table. A name of a person and the hobby of that person. A nicer way to represent that in JavaScript is using this concept called objects, okay? So an object is kind of, think of it as some kind of composite value. So previously we thought, we saw just strings or just numbers. Now we have this kind of bag of items. And in this bag of items, we have different kinds of things. We have a name and we have a hobby. So it's like collecting two related variables together inside one variable called person. So let's look at the syntax. Const name of the object equals parenthesis. And then inside the parenthesis, you have a list of things. So maybe the name of the person, the hobby of the person, the age of the person, you know, the, I don't know, whatever else you wanna star about the person. And what that looks like is the property name, in this case name, colon, and the property value. So in this case, the name of the property is name and the value of the property is John. So we have a person whose name is John and that same person has a hobby, which is eating. Lucky John, okay? So this kind of collecting related data about one thing, using this structure called an object. In the object, you have a series of property names and property values. Sometimes you'll also see these called as keys. So the property name is called a key and the property value is just called the value, okay? So take a look at that. So it's then, again, the word let const of r followed by the name of the variable equals sign. And then you have these curly braces and then you put the series of keys and values. And you can use this to represent kind of the single row in this table. So here you'll create a row. You'll say the name is Jane and the hobby is writing. So you would do, okay, const person, name is Jane, hobby is writing, okay? Let's take a look at that. So in this, okay, let's create another new file. Let's call it objects.js. So create a new file from the sidebar, give it a name. I'm calling it objects.js. And let's try this person thing out. So person equals curly braces inside the curly braces, we have a name, chain and a hobby painting, okay? So it's like putting a collection of related variables inside one bigger variable. You have a bag of items. There can be multiple different items and each item has a key which you can use to get that item from the bag and it has a value which is what is that actual thing. And if you want to console log, you can say the name is, and now instead of just person, we'll do person dot name. So this dot is a special thing that tells it, okay, go inside this object, find me what is the name. So it'll look, okay, here's the object. Oh, I see there's a thing called name. The name is Jane, so it'll print out Jane. So if you wanna get something from inside an object, you do the variable name that holds the object, in this case, person, and then the name of the key that holds the thing that you actually want from it. So person dot name. If this name was instead called first name, then you would do person dot first name, right? So whatever is the name of the key goes after the dot. Whatever is the name of the actual variable that holds the object is before the dot. So try this out. You should see, so nodeobjects.js this time. You should see the name is Jane. If you see that, try logging out there, hobby as well. You can write this in simple, the console, also the variable name. Yes, that's a good point. You could also put everything together. You could do the person is person dot name, person dot hobby, right? Console log just lets you specify as many variables and values as you like. So you can do the person is person dot name, person dot hobby. And if your lines are getting too long, you can actually put line breaks in between. So you can do however, whatever looks prettiest to you. You can do console.log. The name is person name and person hobby. All right, sorry, person dot first name. I changed it. Cool, so an object is like a collection of related information about one thing. If I have a person, they have different properties like names and ages and hobbies. You can put all of that together in one object and that represents one person. If you have an animal, maybe you can store what's the name of the animal, how many legs does it have, stuff like that. So any related properties about one thing, you can collect it together in this object syntax. In the object, you have a series of keys and values, key, which is the name of the property, colon, the value, and each key and value is separated with a comma. So if the first, you have one key, then a comma, sorry, one key value, then a comma, then the second key value. So here, hobby, colon, painting. For the last one, the comma is optional. You could put it there or you could leave it out. It works either way. Kind of like how the semicolons are optional. In this case, it's only optional for the last one though. You can't leave it out here. Then you'll get a nice red line in your code. Cool, so you give this object a name and then when you want to get something from inside the object, you use the name of the object dot, the name of the thing you want to get from the object. All right, so it's like a complex data structure where you can store related variables and values. Okay, so if we see this table here, right? So this is also part of the problem that I showed before, which is this repeated variable names. Now instead of saying person one name equals John, person one hobby equals painting and so on, I can say person one equals object name John, hobby painting, right? And I can do person two equals object, name Jane, hobby writing. So I've eliminated some of the extra variables in my code. Let's try to do that. So create three people. Let's say this is person one. Let's create two more. Cons person two. Yes, next part, getting there. And add another person three. Give them some names and hobbies and try to print them out. You can add more than three of course. You put under person two, someone, anyone? Come on. First name or just name? Doesn't matter. Across different objects, you can have different properties. But yeah, it is good to be consistent when you have related stuff for the same thing. So let's say first name Jack, optional, not optional. Not optional if I have something else after that. Optional if it's the last thing. So in this case, I do have something else. What is that? Hobby. What is Jack's hobby? Doesn't matter anything. Let's say Jack likes to eat. Okay, cool. So that's person two. Again, after the second one, I can put a comma. It's optional. Or I can leave it out. It's, yeah, it's optional. All right, person three. First name, first name, Jill, hobby, programming. Jill is one of us. Cool. And then you can print out different things about each of these variables. So you could do person one, first name, person one, hobby. You can do person two, first name, person two, hobby. And you'll see the result on the console. Cool. So what we've done is we've used objects to gather related data about the same thing. Now let's use something else to gather related data about related things that are still different from each other. All right, so we have three people instead of creating three separate variables to store each of these three people and giving a different name to each variable. We'll use something called arrays to gather all these variables together and put them into a collection. So now for every row in this table, we used an object. For all the rows together, we'll use this thing called arrays. An array is just a fancy name for something that's like a list or basically like a series of values. So yeah, it's a collection of values. The values can be of different types or of the same type. So you could have an array where the first value is a string, the second value is a number, the third value is an object. But you could also have one where they're all strings or all numbers or all objects. Most of the time, you'll find we'll put similar values in one array. It just makes sense a lot of the time. Here's what it looks like. So more syntax. Now we see the last kind of bracket that is known to humans. We have the word const, the name of the variable. And now we see the square brackets and then a list, comma-separated list of the actual values in the array. So in this case, we have an array with three values. The first one is cat, the second one is rat, and the third one is lion. Okay, this kind of takes us to how we can actually put all our person objects into an array. We can have an array of a person object where the first person has a name of chain and a hobby of painting and so on. But before we get there, this is how you declare the array and this is how you get to a particular item in the array. So if you want only the first item from the array, you say the name of the array, so animals, then the square brackets and a number. And the number corresponds to which item you want except that it starts with zero. So most of the time when we count, we start with one for JavaScript and actually quite a lot of programming languages, they always start counting at zero. So zero is the first thing, one is the second thing, two is the third thing. So what will this print out? The first line will show cat because that's the zero of the first element. And the last line will print out lion because two means the third item, which is lion. Cool? Let's try that out as well. So in the same, or maybe just create a new file called arrays.js, let's create a new file, arrays.js. And inside that file, put in this code and run it. These are, actually no, these are the few slides from two years ago, slightly modified. Inside this, instead of putting just a string or a number, a boolean or an object, we put an array which has square brackets. Inside the square brackets, you can put as many items as you like separated by commas. So you could say cat, mouse, tiger, and so on, as many as you like. And then when you wanna actually do something with those values, you say the name of the variable that holds the entire array, followed by the square brackets and a number representing which item you want. So if you want the first one, it's zero. If you want the second one, it's one. If you want the third one, it's two and so on. Of course, you can use them in any order you like, so you could print out the last one first and so on. So if we run this, we do node array.js, see tiger, cat, mouse, okay. Just like you can have arrays of strings, you can have arrays of numbers as well. You can have const numbers equals one, two, three, four, five, and you could do, for example, the same thing that you can do with any other variable, you can do with stuff inside the array. So you could sum up the first and the second element. You could do array zero, sorry, not animal zero, number zero plus numbers one. So what this will do is it'll find the array called numbers. It'll get the first item from that, which is the number one, and it'll get the second item from that, which is the number two. Then it'll sum them up and print out the result. So in this case, you'll get one plus two, which is three. It didn't save it, yeah. One plus two, which is three. You can get, for example, the first one and the fourth one, sorry, the fifth one, yeah. So you get five plus one, which is six. So now I'm doing number zero plus numbers four. So zero, one, two, three, four, cool. So if you have some kind of related data, bunch of numbers, a bunch of animals, a bunch of names, you can put it all together in one collection called an array. Okay. Yes? Why is a square bracket used for this case? It's just how the people who wrote JavaScript decided, okay, arrays, yeah, arrays will be square brackets, objects will be curly brackets, yeah. I think it's also one way to distinguish. So when you see square brackets, you immediately know, okay, this is an array. But if you see curly braces, you know, okay, this is an object, cool. So before this, we saw how to declare individual objects. And now we see how to put different types of values inside our array. What this means is we can also put objects inside our arrays, right? So if we go back to this original example, each row in this was modeled as an object, and all those items together can be modeled as an array. So an array of objects, something like this. So now you have an array called people. We know it's an array because it starts with the square brackets. It starts with the square brackets. And then you have multiple items in that array where each item is an object. How do we know it's an object? It has a curly brace and it has this key value pair. The key and the value, the key and the value. So in this array, the first item is an object where the name is John, the hobby is painting. The second item, name is Jane, hobby is writing, Jack and sleeping, and Julie and eating. Now you have a collection of objects altogether inside an array. The object represents different things about one person and together they represent various people. So the question is then, if I have something like this, let me copy it. If I have something like this, how can I print out the name of the first person? So the name of the first person is, how do I print that out? So yeah, so you always start with the outermost thing, which is the array in this case, so people. So I want to print something from people. What do I want to print from people? I want to get the first thing from people, which is people zero. And then, so now people zero is this entire object. How do I get something from inside the object? I use dot followed by the name of the thing. So I can do people zero dot name. So people is an array. Get the first item from that array, which is an object. So this whole thing gives you the first object in the array and then you can get the name of that object by doing dot name. You can also do it in two steps. You could say const person one equals people zero and then you can print out person one dot name. So I'll put both the ways of doing that. You can do people zero dot name or you can split it into two. You could create a new variable, holding just the entire first person and then get their name from that new variable. So try this out as well. Try it with a few different people. Try it with the hobbies versus names. So the command is node, name of the file, press enter. If you get tired of typing the entire command every time, you can press the up arrow on your keyboard, which will give you the last command you typed. So if you're typing the same thing many times, press the up arrow and you can keep running it. You don't have to keep typing all the time. I definitely am very lazy, so I don't like typing. I prefer using the shortcuts if I'm doing the same thing again and again. So up will give you the last command you typed. If you press up again, it'll give you the command you typed before that and so on. Most of the time I'll usually just be, I'll just need the very last command that I needed. So just press up and press enter. Cool, let's do a quick recap. So what is an object? Anyone? The questions only get harder, so if you can tell me this one, then you don't have to answer the next one. What's an object? Yes, so we use people as the example, but generally speaking, it's a collection of a bunch of related properties about something. Could be people, could be animals, could be, as we'll see later on, our to-do list items and things like that. Mm-hmm. Go on. Yes, so remember, a variable is just giving a name to something. That thing, as we saw before, can be a string, it can be a number, it can be a boolean, but it can also be an object and it can also be an array. So an object is a kind of value that you can give to a variable. Cool, so inside the object, we have a bunch of keys and values, all right? So the key is the name of the thing, the value is the actual value of that thing. Cool, all right, what's an array? Yes, so it's just a bunch of, or a collection of different things. They can all be similar kinds of things, so they can all be objects, they can all be strings, they can all be numbers, or they could be like a mix and match, you know, you could have a collection of objects followed by strings, followed by numbers in whatever order. Well, I was gonna ask that as a question, but now I already said that, so cool. So an object is a collection of related properties about something, an array is a collection of different kinds of things. And quite often we have a lot of data, let's say you have, you know, 52-list items, you could put them all in an array and for each item you could use an object which is like the name of the item, whether it's done or not, when was it done, stuff like that. And we'll see that in the 2-list example later on. Now the last thing I wanna show related to arrays, okay, yes, arrays and objects. The last thing I wanna show related to objects is this special array function that we're gonna use later on called map. So quite often you have an array of items and what you wanna do is transform each item in a certain way and give a new array. So an example of that would be you have an array of numbers and you want a new array where each item is doubled. You have 10, 20, 30. You want a new array where each item is, where the items are 20, 40 and 60. So each corresponding item has been doubled. One way of doing that is like this. You create this new array with the square brackets and you say, okay, the first item is numbers zero into two. The second item is numbers one into two. The third item is numbers two into two. So it takes each item from the numbers array multiplies it by two and creates a new array. Cool. Any questions about this syntax? That's one way of, you know, you want every item from an existing array and you wanna do something to every item in that array. One way is to do it manually. But as you can already see, we're doing a lot of the same stuff. We're doing into two for every item and for every item, we're also just getting the numbers array and the zeroth item from the double numbers array corresponds to a doubling of the zeroth item from the numbers array and so on. So you could do this manually, but we have this special function in JavaScript called map which helps us do this in a more reusable way. Now the syntax is kind of related to what we've seen so far, but there are a few things going on. So let's break that down. Okay. So this part is the same. You have cons, numbers is an array. It has three items, 10, 20 and 30. Now what I want to do is for every number, I want to double it and I wanna create a new array with these doubled numbers. So my new array should be 10 into two, 20 into two, 20 times two, 30 times two. Okay. So how you can do that in JavaScript is you can do the name of the original array, numbers, dot map and here we put a function inside the map. So previously we assigned a function to a variable name. We said const add numbers equals blah, blah, blah arrow and so on. Here inside the parenthesis of the map, we're putting this function of ours, okay. And what this function does, it has one argument called number and it returns number into two, okay. So this function has one argument called number and it returns number into two. And what JavaScript will do is you'll see, okay, this is an array and it'll call this function for every item in that array. So it'll see, okay, the first item in this array is 10. So it'll call this function with 10 as the value. So number will be 10. It'll return 10 into two. Then it'll move on to the next item. You'll see, okay, the next item is 20. It'll call the same function. Number will be 20. It'll return 20 into two. Then it'll move on to the next item. Number will be 30. It'll return 30 into two. And then it'll put all these transformed values into a new array for you. So it'll take the original array. For every item, it'll call this function and it'll give you a new array with this transformed value, okay. So anytime you see something like I have an array for every item I wanna transform it in the same way and get a new array back, we can use this map function. We give it a function that's called for every item in the array. So you can try it out. Let's create a numbers array. Yeah, we can use let as well. As I said before, I think somebody else was also asking. The default choice is const. If you feel, if you see later on in your program or I actually do need to change this value, then you should use let. But const tells people reading the code that hey, this value is never gonna change. There's just kind of something that helps people who are reading your code. So you could do numbers, okay, we have 10, 20, 30, okay. And then you can create another array called double numbers. Equals numbers, which is the original array. Dot map and two parenthesis. Inside the dot map, we'll put that function that we've seen before. So this function takes one argument called number or N or A. Let's call it A for simplicity. The arrow, the curly braces and it returns A into two. So map is a function on the array. It takes in another function and that function gets called for every item in the array and the return value is what that item becomes. So it'll call this function for 10. A will be 10. It'll return A times 10 times two, which is 20. Then it'll call it with 20. It'll return 20 times two, which is 40. And then it'll call it with 30. It'll return 30 times two, which is 60. So you can try it out. Try to console log numbers. You'll see it's still the same. And then console log double numbers and you should get 20, 40 and 60. Yeah, yeah, I'll do, that's a good point. Should I say that? I'm not sure. Here, yeah, there are two of them. So this inner one is the function itself and the outer one is for map. So map is like a function for an array and it takes in another function as well. Where does it close? So the inner one opens here, closes here. The outer one opens here and closes here. In VS code you'll actually see that it kind of highlights the matching parenthesis. So for this one, the matching one is this one. That's why it's in a little box. Then for this one, the matching one is right here. So they're in two boxes. It does that for anything that can be matched. So for parenthesis and for curly braces and for brackets as well. So if I wanted to create an array using numbers but instead of doubling them, I want to halve them, what would I do? Halve numbers equals numbers dot map. Then some function inside that function takes one value which is let's call it n. You can call it a, you can call it something longer as well. And now instead of returning n into two or n times two we'll return n divided by two. So now this will give you halved numbers instead. So this is inside the map, it's just a regular function. It can return anything. No worries. Oh, okay. You can press control and this together. Yeah. Do you want just one? Yeah. Okay, then here just type exit and press enter. And then there also you can type exit. Yeah, now you just have one. Yeah. Yeah, this is the one. Cool. Yeah. Yeah, I think, yeah, I think numbers may be somewhere on top. So you change it, can I just add one better here? Yeah, you could, yeah. Yeah, cool. That's nice. I got this thing, but here console, the const person three. Right. And I got undefined, yeah. The name of the third person is undefined. Oh, okay. That's because in here you're saying name, but here it's always either first name or last name, yeah. So if it can't find that property, it'll just say undefined. Yeah, I think it should be capital N. Do you think people are still able to follow it? Yeah. Okay. But they might not really press. Yeah, yeah, we don't. So they like close the map because like they think it's a function called then they put the arrow sign. Ah. Yeah. So they don't know that because they're like passing that function. I know, I don't know if, yeah, I mean, it's not hard to explain it. We don't have so much time. It's already almost four. Like I was thinking, show them how to extract the function into its own name and then use that, okay. Yeah. I think for today, moving on from here, they'll have to take a lot of things on faith, like just do it like this. Yeah, exactly. Yeah, yeah, yeah, yeah. So yeah, I think this is the last thing that I'm going on to react. We'll take a 10 minute break and then we'll go to the end. No. Yeah. It's good that they're asking those questions and at least thinking about it. No, it can be so any array, whatever it contains, you can use map and that map function can do, let's say it's an array of strings. Let's say it's an array of names, right. So in your map function, you could change that array of names to an array of hello plus the name. It could be hello, Jane, hello, blah, blah, blah, and so on. So it doesn't matter what the array has, as long as the map function knows what to do with that item in the array. So in the case of numbers, it knows, okay, I'll multiply it. In the case of strings, it could change the string or add more stuff to it. In the case of objects, which we'll see in the react part, you can just change a list of objects to just a list of actual properties from the object. So if you have a list of name and hobby, you can then change that into a list of just the names or just the hobbies, stuff like that. It's quite powerful. Unfortunately, I don't think we have enough time today to go into all the details, because we want to still do some react stuff. Yeah. Yes, that is the hope. So this is the last part before we go on to that. Yeah. Yes, we should do it. Okay, people, let's take a 10-minute break and then we'll do some react stuff. I know we've all been waiting for that, so let's take 10 minutes. Then we'll come back and do some react, okay? In the meantime, if you have any questions or issues, just ask me or any of the other people around here. I do have an exercise for the map and objects and stuff like that, but we'll just do it as part of the react stuff that we're going to start now. So in react, we'll also do this exercise as well. This exercise is basically about creating an array of to-dos where each to-do is an object which has a description and whether it's complete or not. So we'll actually just, let's just move on to the react part because I know you're all waiting for that and we'll do that as part of that. All right, so let's talk a little bit about react. For today, I'm going to kind of help you create that to-do list that we saw before. There are still quite a few new things that are part of react, like their JavaScript things, but they're used in react. I will skip over some of the details in the interest of time. So some things you'll have to take on faith for today. I'll probably be hanging around later on if you have any questions and things like that. But for today, we'll try to see what react is capable of, what we can do with it. There are a few more syntactical things that we'll see while we do react, which we'll kind of just follow along for today. All right? So the basic idea behind react is, so far, like in the first class, when we created HTML and CSS web pages, these are kind of static web pages. They only change when you make a change to the code, you know, if you have a About Me page. If you want to change something, you need to open your HTML file, change the text, save it, commit it, push it, and then deploy it somewhere else. And then it actually changes. React comes in use when you want to make something that's a little bit more dynamic. So maybe you have a, you know, shop. And in your shop, you have a database of all your products, right? Now, today, you have 10 products. Tomorrow, you have 15 products. When those new products come in, you don't want to go to your HTML file, find, okay, this was the new product from yesterday. Let me copy that, paste it here. What's the other new products, all the five new products? I'll copy them, paste them, save my HTML file, commit it, push it, deploy it. That's very tedious, especially as the stuff that you're displaying grows larger and larger and the things you want to do with it grow more varied. So that process gets more tedious. So we use something like React that helps us to take care of that dynamic aspect of the website. So using React, you can tell it, here's my data. This is how you need to display it. And you can also tell it things like, okay, when the user clicks on this button, change the data in this way. When the user clicks on something else, do this thing and stuff like that. So you can show some data and then you can also change that data based on user behavior or user actions. And the four sort of new things that we'll talk about in the context of React today are components. This thing called JSX, state and events. The basic idea around this is in React, all the elements that you have on your page. Let's take a look at Facebook, for example. I'm not sure if I should open my Facebook, but let's see what happens. Okay, oh wow, Tech Ladies is the first thing. That's awesome. So let's take a look at an example for a pretty complicated website like Facebook. If you were to use React for this website, you would kind of divide different features or different aspects of this website into different components in the React terminology. So each component would be responsible for one kind of thing. So for example, this news feed, a list of news that you see here, that might be one component, a news feed component which displays different news items. This stories box on the side, it might be another component which just displays two links or three links. This navigation bar on the left side could be another component which displays links to different parts of your app. So the React way of thinking is kind of taking your website and all its functionality and dividing it into different components where each individual component does one kind of thing. So nav bar is responsible for navigation. The news feed is responsible for just displaying the news. This friends thing is responsible for showing you whose birthdays it is today. So whenever you try to apply React to existing design or existing website, try to break that website down into what are the different components of that website and what do they do. And that'll help you to decide in React what components you should create. The website we'll be creating today is a lot simpler. Depending on how you want to think about it, you can think about it as just one big component. It's basically a to-do list where you can add to-dos or mark them as done. If you want to get a bit more granular, think of it as maybe two or three separate components. One could be the component that just adds the to-dos. Another could be the component that just displays the to-dos. So there's no right or wrong way of dividing up this stuff. Generally the idea is, again, as we saw with JavaScript, as we see things that are getting more repetitive, we try to break them down into smaller reusable parts. So for today, we'll keep it simple. We'll just use one big component to create a better to-do list. It'll show us a list of to-dos. It'll give us the ability to add new to-dos with this input box, and you'll be able to check and uncheck the to-dos. Cool. The other things that were in that list, we'll talk about as we come to them. So that's state and events. We'll talk about that later on and JSX as well. What I want you all to do now is to go to this link. Let me find it. So I have a GitHub repository with some starter code. All right. So go to this link on GitHub. GitHub.com, spinning arrow, React to-do list. Sahil29 at Gmail. 29. Once you go to this link on the right-hand side of the page, you'll see this button that says Fock. Click on that. It gives, so basically on GitHub we have this repository with some code. So you can see my account. In order for you all to get it under your accounts, you need to click on this fork button. Can I see the link? Yes, the link is... Where did it go? Yeah. Can I show that? Oh, oh, oh. I think I have a slide with the Wi-Fi password. Hang on. Yeah, it's very long. Wi-Fi password. See the Wi-Fi? Let me know once you've got it. Let me try to show this side-by-side, actually. Wi-Fi password. Link. Um... Text. Probably a base into that. Yeah, it can. All right. Once you open this page on GitHub, click on the fork button on the right-hand side. It should take you to a new page under your username, assuming you're all signed into GitHub. If you're not, please sign into GitHub. And click on the fork button. It'll get you to the React to-Do list under your username. So instead of spinning arrow React to-Do list, it'll be whatever your username is to React to-Do list. Once you've forked it, you need to clone this project into your computer using the git clone command from the last class. If you don't remember that, so just copy the URL, whatever your URL is. Go back to VS Code. Open the terminal. Let me make it a little larger. Oops. Okay. In the terminal, let's see what's the best way to do this. Okay. Basically, whichever folder you're in, you can clone it there, or you can go to a different folder. If you don't know how to go to a different folder, you can just clone it right here. Do git clone and paste the URL that you copied. It'll be similar to this, but instead of spinning arrow, it'll be your username. Type git clone, press Enter. Mm-hmm. Yeah. Yes? Yeah. I'm unable to access myself. Are you able to open it here? And there's no issue. Try re-pressing it. Mm-hmm. Interesting. We can try. Ta-da. Mm-hmm. Oh, I understand you. Oh, my God. What happened? Scroll up a little. Oh, I don't think it did anything. Yeah. Okay. That's reasonable. Yeah. It's usually how computers work. I think you meant CD. Did you? Instead of TS? Yeah. Cool. Okay. Any issue? How do I go to the folder again? Ah, okay. So you've cloned it. Now you can do C. Actually, you don't need to do anything because it's right here. It's already here. Yeah. Yeah. Okay. No, you can do... Yeah, you can do the git clone. So git clone and then that, you are... Okay, let's try something else. Go back to the website. Scroll... No, scroll up. Ah, clone or download. Click on the screen button now. Click on use SSH. Click on this little... Okay, that copies that link. Let's try that link instead. Git clone. Git clone. Unfortunately, you have to use the arrow keys. All right. Yes, type yes. Damn. Mm-hmm. Let's go back to the report. Okay, we'll do it a bit manually for now. Click on that. Download as a zip and then just unzip it. Yeah. Left to figure out later what's going wrong. Yes, so I'll just show that. So once you've cloned it, just to make sure that you've cloned it successfully, if you've put it in the JavaScript folder, you should now see it here. React to-do list. It has a bunch of files inside. If you haven't succeeded in cloning, let me know because we kind of need it for the next part. You already put it here. Yeah, but how do I put it to the JavaScript? Oh, where did you clone it? Do you know? Okay, far. Where is that? Where is it? Is there a history? There should be. Where did you type the Git clone stuff? Git clone stuff. Git clone command. If I go to Safari, this is the one, and I've gone to- You've popped it, yeah, and then- So then you basically need to go into the terminal and VS code. You need to do Git clone. Ah, it's here. Ah, okay, so you did it here. Let me just see where it is. Okay, so I think the easiest way is to type code and dot. Oh well, okay, that's not the easiest way. So it's in this folder. In your k-folder, react-to-do-list. So what you can do is here go file and open. And then, yeah. There's this one. And then- Macintosh. Users. Ah, something. Just click on open. Yeah, that's fine, yeah. So now it'll just- Yeah, just save this one. So you automatically go there? Yeah, so now it's already there. Oh, okay. So this should be fine. Cool? Yeah? You could have the SSL certificate there, just manually. Yeah, we couldn't get past that, so we downloaded it as a zip file. She's also having the same errors. I don't know what you can do to have it all manually. Yeah, so if you go to GitHub to that page. Yeah, if you go to that page. Yeah. I think you may need to log in again. So just in the clone or download on the- yeah, download zip and just unzip. Folder. Sorry, if you clone it inside your JavaScript folder or whatever folder you were using before, you'll see it in the sidebar. You'll see React to-do list, and there are a few things inside it. There's a public, there's SRC, and a few extra things. So what I want you to do is, in the terminal, we want to change directories to this new React to-do list folder. So we'll type CD React to-do list. And you'll see now, well, basically the directory you're now in is the React to-do list directory. The CD React to-do list. Once you've done the CD React to-do list, type NPM install and press enter. You'll see stuff is being downloaded and being installed. It might take some time. NPM install. So CD into the folder, then do an NPM install. We're getting prepared for React. It needs a lot of extra stuff to be installed. So that's a good question. What are we doing? We're trying to install React onto our system, and it comes with a few other tools that'll help us write code in React and also kind of easily see what we're doing. I'll show you very soon, but for now, NPM install will install React and the other tools that it needs. Okay? Once the NPM install completes, you'll get back to your command prompt so what you need to type is NPM start and when you press enter your browser should open. That's an issue on my side. Let's see. Sorry about that. So type NPM start. Your browser should open and you should see an error. That's good. As long as the browser is open and you see an error when you type NPM start, we're still on the right track. Okay. So type NPM install. Once NPM install completes, type NPM start. And you should see a browser with an error. Yeah. Oh, it's doing things. It's just a bit slow. Yeah, it's doing things. You can hear the fan on your computer. No, mine was faster because I've done it before. It'll take some time. Once it completes, then you'll have to do NPM start. Yeah. Error is fine. As long as you see it, that's good. So the error is fine. As long as you've gotten to the error part of it, that's good. So what I would recommend now is if your screen has enough space, try to open your browser on one side and your VS code on the other side so that as you make changes in VS code, you can immediately see them in the browser. What React will do is, as you save, it'll automatically refresh. So it'll keep showing you the changes and you don't have to keep switching back and forth. So something like this. So put VS code in one half of your screen and the browser in the other half of your screen. Okay. Let's take a look at the directory structure of this code that you've cloned. It's actually written to kind of speed things up. But most React projects have this basic structure. There is an SRC folder. Inside the SRC folder, you have a components folder and then you usually have a bunch of components. For today, we have only one component. It's called app. And this will be the main component that will hold all our to-do list stuff. Okay. So open this app.js in your VS code. You should see an empty file. So inside this React to-do list folder, there's SRC. Inside SRC, there's components. Inside components, there's app. So open this app.js. You can do this even if your npm install and stuff is still going on in the background. Just open the app.js and you'll see this empty file. Cool. Okay. So now we're going to type some code, some JavaScript. So this is basically a regular JavaScript file. Almost a regular JavaScript file. We'll type some code in here and create a React component and we'll basically build our to-do list inside of that. So the first line in a React component is to tell the JavaScript file to use React. So it's like, okay, I'm using React in this file. This is a React component. So the first line is import React R from React lowercase in double quotes. So something like that. I don't know why it's so dark. But import React from React. So this is like saying there's a library that I've installed called React, which is what happened when you did the npm install. And now you're asking it, I want this React library and I'm going to import it from this React name. Sorry. What's the? I don't know actually. Oh, no, just ignore it for now. It's trying to tell you that you're not using React, which we are not yet. But we will soon. That's why it's great. It's like, yeah, you've imported React, but you haven't used it for anything. But we will soon. For now, just do import React from React. Oh, that's fine too. Yeah. So now we need a little bit more of this boilerplate code. We're going to use this thing in JavaScript, which is called a class. Today, I'm not going to talk about what it does. Just think of it, I think a decent model is kind of a collection of different things about your React component. So it's about what is displayed in this component, what data is shown by this component, what are the different events that can change stuff in this component. That's kind of a very, very high level of what is a class. And the syntax of it is the word class, the name of your component which is app. Then the word extends extends react.component and then two curly braces. So class app extends react.component opening curly brace closing curly brace. Yeah, so some of this is going to be a bit magical. Probably in the next lesson we'll cover a bit more detail what exactly is going on. But for today, we'll just try to get some kind of tool list up on the screen instead of a big red error. The high level idea is like I said in React, everything is a component and to create a component or to tell React that this is a component you need to say all this stuff and you say class app extends react.component and finally at the end of this, you need to add another line which is export default app. So app here is the same as app over here. So what we're doing here is we're importing React creating a component called app and then we're exporting that component. It's kind of how we tell React that hey, this is a component that uses React and it's called app. Okay, then the last part to get something up on the screen is inside this class that we've created there's a special thing called render. It's called the render method. It looks like this render followed by two parenthesis curly braces so it behaves very much like a JavaScript function. It just has a special name called render and from render you can return let's say a string like hello world and if we have typed all of that correctly we should see hello world kind of there's some default styling on the page which may be hiding it. You should see something like this. Try playing with the stuff that you're returning change it to something else. Cool, let's go over what we just did we created a component called app and every component in React has this special render thing and how React deals with that is render is whatever should be displayed on the page. Whatever is returned by render is the thing that's displayed on the page. If you return this string it'll display the string. If you return something else it'll display that something else. Okay, as far as why is it pink and why is the text in the middle all of that is just the CSS stuff that you've seen before all the CSS I've put some default CSS it's in the index.CSS file. So if you want to see what is happening in the CSS then on the body tag I have a background I have some alignment on the center and stuff like that. That's why you see the pink color and the text in the center. So no magic there it's just a CSS file it has all the CSS styles for the different things that we'll put on the page. Yeah, one thing about this React thing is as soon as you save let's say you change something and you save it the browser will refresh immediately so you don't need to switch over to the browser and keep refreshing. Just save it it should refresh on its own. So now what I want you to do is instead of returning a string from this render method let's return some HTML. So in React you can kind of return HTML from your render method and whatever that HTML is it'll be displayed on the page so we could do something like h1 hello from react slash h1 and now you'll see a title which has all the stuff. So instead of just a string you can return HTML instead. Which too? The difference is the string was just a plain string it didn't have any HTML tags in it so it's basically whatever it looks like it's just some text when you return HTML instead it can be as rich as you like so it could be a div with multiple things inside it, a list and it can be an entire web page inside. Cool, so this is the general structure of any React component you give the component a name in this case app and every component has this special render method. Whatever the render method returns is what is going to be displayed on the page right? You can return, most of the time we'll return HTML because we want to use React to create some HTML stuff so every component has a name and at the very least it has a render method which returns some HTML and when you return HTML or you write any kind of HTML in your React components that HTML syntax that you use is actually called JSX which is what I kind of put out on the screen before. It's basically very much like HTML it behaves in 90% of the cases like HTML but there are a few differences which we'll see soon enough and that kind of makes it sort of a more enhanced form of HTML. It's like HTML combined with JavaScript so I don't know why they came up with the name JSX but it's HTML that you return in React and you can mix in JavaScript and HTML together. So let's try to make this a bit more I guess rich. Let's put a div inside the div we have our h1 tag and inside the h1 let's put a paragraph this is a paragraph again all the styles are coming from the style sheet. I kind of put some styles already to make it look sort of decent right so from this render function you can return a big or small and HTML structure as you like it could be very complicated it could be very simple for today we'll put all our to-do list stuff inside this return function. So if this was a to-do list right what would how would we show list items in a list in HTML what tags do we use to display a list does anyone remember yes we use the ul tag and for each list item we use the li tag so what those process we're going to follow is first we're going to do everything manually just as if we were writing HTML then we're going to extract out the parts that change and use some react stuff for that. So for now let's just manually create a list of maybe 2 3 items using HTML and try to display that on the screen so we can do a ul inside the ul we have an li like buy something and then we close that ul tag we use ul for these numbers yeah you can do that as well so is it that we can only use these numbers we can't use any bullets or like oh for bullets it'll be ul for different kinds of numbers it'll be ul only for numbers like if you want to say like yeah with ul you can there are a few styling properties you can apply you can say instead of 1, 2, 3 or roman numerals as well so that's all in the CSS part of it yeah it's a very good point it's a very good point I think that's probably an issue with the style sheet indexing yeah index CSS oh I think I know the issues could you change this height to a min height so the value is fine just change it to min height min dash height so now in this to-do list what is the actual data we're displaying we're displaying the names of the to-dos right and as we saw in JavaScript any collection of things that we want to store we can use an array for that right so let's talk outside of react for a minute if I wanted to create a list of to-dos I can write a variable called to-dos which is an array and let's say for for each to-do let's say a to-do list looks something like this where you have from a data point of view it looks like this it has a description and it has an is done so maybe the first one is by apples and is done as false and the second one is by oranges and is done is true right so we can use the JavaScript array as an object that we saw before to represent something like this and it would look something like this so you have a list of to-dos which is an array and each item in that to-do is an object it has a description for example by apples it has an is done property which is basically to denote whether that item is complete or not so you could say is done as false for the first one let me just format that you can say there's another one description by oranges is done is true right so now I have a list of to-dos each to-do has a description and a boolean value whether it's done or not this is just how I might have represented the to-dos just using regular JavaScript so good strategy in React is to find out what data your app needs to show in this case a list of to-dos what kind of JavaScript you'd write to model that data and then you actually bring that into your React component okay so we've done the first two parts we've seen what data needs to change model that in JavaScript once we're done with that we'll see how to bring that into the component so when you need to display some data or have some data in your component in React that goes into a special variable inside the class and this special variable has the name state so it's like a special variable that React knows about it's called state and it's an object so it's a regular JavaScript object and inside this state object you tell it what kinds of data you'd store so in my case I'm going to store in this state I'm going to store a list of to-dos so the key is to-dos and the value will be this entire array that I created before so you can just cut it out or copy it and delete the rest of the stuff and what you end up with is state to-dos is an array with two objects inside it the state is an object it has a property called to-dos to-dos is an array with two objects inside this array we'll use it later on but the name can be anything it's just based on how we use it so when you save it if you don't see any errors that's good because the state is like a special let's call it a special variable in the React component it tells React what is the kind of data that this component will be displaying and it's the same data that we'll tell it this is what changes when the user does something it's kind of the special variable for the data that this component will be displaying and it looks like this state equals a JavaScript object inside that object we have one key called to-dos you can call it whatever you like to-dos is an array and in this in the example here it contains two items both of which are objects and each object has a description and an is-done property why did I why after the state oh okay it's kind of a rule or a convention in React the state is always an object yeah so state is always an object and then inside that object there are different properties because usually your app can have different kinds of state you might have the new to-dos the old to-dos in our case it's quite simple but if you think about something like Facebook you might have one state for the news feed one state for the sidebar one state for your chat messages and stuff like that so state is always an object and inside that the property name can be anything and for today for the to-dos list all right awesome so we have figured out what data our app needs we know how to model that in JavaScript and we've put it into the React components state the last part that we need to actually do is to use it in our render method so we're going to use this state and we're going to render the to-dos from this state so right now we've hardcoded some to-dos where instead of hardcoding stuff we're going to use these to-dos and display them on the screen okay and this is where the map method that we just learned comes in okay so I'll show you the syntax for it first then I'll walk you through what it's doing and you can try it out so remember this HTML stuff that we're typing is actually jsx basically it allows you to mix in JavaScript and HTML together so whenever you want to mix in some JavaScript inside this HTML like thing you use curly braces and I'll just show you first then I'll give you some time to try it out as well the way you refer to this state item is by saying this.state so previously when we looked at any variable we just said just the variable name when you're in a React component we need to use this followed by the variable name so this.state this.state means this state item okay so this state variable is this entire object which has a to-dos property a to-dos it has a to-dos property which is this to-dos property and this to-dos property is an array what that means is we can use the map method on it so I can say this.state.to-dos.map okay so state is that entire object to-dos is the array of to-dos inside it map is the array map method that we learned before now inside map we can take a function how does that work so in the function we have an argument let's call it a and we're going to return a.description okay so what is a so what happens here for every item in the to-dos this function gets called and what does this function do it takes in each item as the argument and returns the description key from that item because each item is an object previously we were doing like multiplying numbers right each item was a number so we could multiply it by 2 now each item is an object so we can use the object syntax for getting the description from the object and when you save that you'll see basically these two items in the result now before you try that the one last part is we want to actually show these as list items using the li tag so we're going to do return li a.description slash li sorry this here would be yeah curly brace you need to kind of keep in mind are you writing html or are you writing javascript if you're writing javascript it goes inside curly braces so now let's see what happened there so what this piece of code does is from the state it finds the to-dos which is a list for every item in that list it calls this function and what does that function do it takes in that object which is the each item is an object and for each item it returns an li tag with the description of the object if for instance you change this to a.isDone now you'll see true and false actually you won't see it because that doesn't get printed out but let's say instead of description we had something like x is 5 and x is 5 if we print a.x now you'll see those numbers instead the description is just referring to the same description here it's saying for each item get me the description property and the description property is the name of the to-do itself so try that out inside the ul replace your li's with this piece of code we'll use it for drawing the lines when you click on the item we should draw a line through it is it compulsory to use the name or you can use any other name the name is special it has to be state not yet right now if you click on it nothing will happen we are basically trying to take this list of objects that we have and convert it into a list of html tags so mapping is kind of transforming an object into some html and for each object we are returning an li tag instead because if we don't convert it into an li tag and we just print it like that it'll just be funny curly braces it'll look like javascript which the users probably won't understand it's not okay the description right I forget to put the curly bracket it doesn't work remember that jsx syntax works if you have any javascript code so this is the javascript part of it right this is the html part of it if you have any javascript stuff it needs to go inside curly braces otherwise it doesn't know that hey this is javascript it's just the rules of how the jsx part works all that stuff happening as you're typing it it kind of gets hard to indent everything nicely so the shortcut in vs code to auto format and make everything pretty is on the mac it's option shift f so option which is next to control next to yeah control option shift f and on windows it's alt shift f so I don't know how to show you but option shift f wherever f is somewhere if you do option shift f it'll automatically format all your code so alt shift f yeah this is to reformat all your code just to make all the indentation be more consistent f yeah f for format okay so I have a question from all of you it is 515 now we have two options we can either stop here for today continue this in the next class or today we can try to do the strike through of the to do list whatever you all prefer how many for stop here for today peer pressure who wants to stop now take like so we call it a day for today's class we continue in the next week or we continue on for one more feature which is when you click on a to do you see the line up here or disappear so continue okay stop alright okay we'll continue I think it'll take about yeah let's say it'll take us about another 20-30 minutes if that's fine yeah okay cool so we'll continue so just make sure you've gotten to this point where you're doing the mapping through the state to dos and you're able to see whatever to dos you declared in the state if you change it here from by apples to by grapes and you save it you should also see a change here cool if you have any issues with that let me know before I move ahead so yeah if it works fine it's all good yep cool okay let's take a quick look at the CSS file that I mentioned if you scroll down you'll come to this point that says ul li.complete has a text decoration of line through so what this is saying is if you have a ul inside that you have an li and that li has a class complete right so if it has the class complete it'll have the line through it if it does not have the class complete it won't have the line through it so what I want to tell React to do is when the to-do is done add this complete class to it and if it's not done don't add the complete class to it as soon as we add the complete class we'll see the line if we remove the complete class we won't see the line okay so let's just try that manually first without doing anything fancy let's say you have okay so this is where the slight difference between the HTML you say class in JSX you say class name you know we just like to be different so let's say if I did li class name complete and save that now both my to-dos would have lines through them just make sure that you do see this style when you add the complete class to the li you should see that there's a line through the to-do now what we want to do is instead of just adding that to every to-do we'll add it to only the to-dos which actually have is done set to true so if is done is true make the class say complete if is done is not true then don't do anything else okay so let's break that down into a few steps the first step is inside this render function we'll create a variable and this time we'll use let and we'll call it we'll call it the same thing we'll call it class name okay we'll say let class name equals empty string so it's just an empty string it doesn't have any value and then we'll add an if condition actually sorry we're doing it in the wrong place not inside the render inside the map here so inside the map we'll say let class name equals empty string and then we'll have an if condition and inside the if condition we'll say if a.is done class name equals complete so inside the map function we create a variable called class name we set it to the empty string however if the current to-do is done so if is done is true we set the class name to complete and then instead of not coding the word complete here we use the curly braces to go into JavaScript land and we put the class name variable here let me make that a little larger create a new variable if a.is done set that variable to complete and then finally use that variable as the actual class name you can call it something else as well you can say you know complete or equals empty string if a.is done I guess that's not much clearer anyway where you can say is complete you know what I'm going to say complete class so here inside the curly braces whatever you call that new variable and what we're doing here is we're just setting that value to be complete when the to-do is done so when the to-do is done this will be complete if it's not done it'll just be an empty string so it won't show anything else and if you save that you should now see the actual result whenever is done is false there's no line through when is done is true there is a line through if you change that let's say it's done to true you'll see the line through sorry so take a look at that sorry the variable name can be whatever you like as long as it's the same when you declare it reassign it and then finally use it yeah so this class name is fixed yeah this corresponds to the html class attribute but here is just a regular JavaScript variable can be any name okay so the name that you have here should be the same as all these three things should be the same so either complete class in all places or a class name in all places how come you don't see the line through okay so this is if the n has to be capitalized yeah nice yes here right in the ally the the angle bracket doesn't close immediately after the ally so yeah this one it's a space instead so put a space I think that should do it can check so basically it's the ally tag which has the class name attribute and then the description inside it but is there a simple bracket or this remember in html the opening tag if you have some attributes you put them in between the two angle brackets of the opening tag like ally, class name, id style, so on so all of that goes inside the angle brackets cool yeah try to understand this part so okay so I have two so I am defining a new variable mm-hmm mm-hmm what does this part mean so remember a is the current to-do object so it gets every time the map function will call that entire function with the current to-do object which will be a and then is done will be this is done property inside that object is it because this a is this thing every time for every item in that list this a is the entire item which is why we are able to do a.description okay that's because of the last part here you need to use the complete class in parenthesis instead of double quotes not parenthesis curly braces because it's now we are talking about the javascript variable called complete class yeah so whenever you are writing this jsx thing you are basically usually writing html but if you need to go into the javascript world inside that html then you need to put it in curly braces which is yeah so now we are inside this html stuff like we got to h1 well now we need some javascript so we start with a curly brace here and we close it here then inside this function we return again we return some html now we need some javascript so we put a curly brace here and we talk about this javascript variable like whenever in jsx you are writing html and then you need to do some javascripty stuff then you use the curly braces and do it inside that cool let me see okay here it's not this.complete class it's just complete class so if you just remove the this. so in this case I cannot say this because I'm inside the I'm inside the map function what have we seen so far we've got some data coming from our javascript data structures which is our arrays and objects we managed to display it on the page and so we basically in that data we have the description which is what is displayed and we have the is done which we use to either show the line through the item or not show the line through the item and as we see when we change this to false the line disappears when we change this when we change it back to true the line appears so we basically want to do something like this but instead of doing it manually we want to do it when the user clicks on the item so we need a way of saying when I click on this item for the item that was clicked on change the is done to true if it was false or change it to false if it was true so when I click on the item for that current item change the is done to true if it was false or change it to false if it was true I think I said that right cool so that's where the idea of events that I talked about comes in any interaction that the user does on your app is some kind of event if they're clicking on something that's an event if they're typing something that's an event even if they're scrolling that's actually an event so you could do something when the user scrolls on your website for instance in this case we only care about them clicking on the item so we're going to do something when they click on the item and this is kind of how should I say the way you write an event or the way you say what to do when an event happens in JavaScript in React specifically you create a function so just like we created a variable called state now we're going to create a function it can have any name I'm going to call it handle to do click so I'm going to create a new function handle to do click and it can take at least one or more than one argument so here I'm going to say for now it takes one argument called event and what does this function do so I'll teach you another sort of function in JavaScript it's called the alert function it displays a message to the user so anytime the to do is clicked I'm going to say on click to do so I've created this function when I call this function it's going to basically invoke this alert thing which show a message to the user and when do I call this function I call this function when the ally item is clicked so to do that you say so we've got the class name here now we say sorry curly braces this dot handle to do click so whatever the function was called let me just put that on separate lines to make it easier to see actually I have the auto format which doesn't work okay put it on separate lines so now besides the class name I've added this extra thing called on click which is something that's built into the browser so on click I'm saying you'll call this function called handle to do click and what does this handle to do click do it shows an alert message saying you clicked but to do so I'll give you some time to write that but first let's see if it actually works it does not what do I do no need no need handle to do click no no it's a reference to function line 8 line 8 oh whoa what happened here weird okay interesting okay so when I click on this I see this alert message of course this is not what we want but for now we just want to make sure that the clicking is being captured by the user alright so let's take a look at the code for that add a function give it a name and for now let's try to alert something to the user and okay add the function first then I'll show you the code because there's no place add the function give it a name it alerts something to the user and then later on we tell the code that when the li is clicked we'll call that function and maybe I can make it a little smaller it's not helpful is it yeah so it looks like that oops come on event just give it no arguments we're not using that anyway if the something is show an alert box we need to change it to actually change that is to do of the current to do so we need a few things for that the first one is we need to tell this handle to do click which to do was clicked so we need to kind of give it an argument and that argument will be which to do was clicked the way to do that is okay let's just go for it so you need to convert it into another function so parenthesis and an arrow and then you call this function with a as the argument so remember what is a current item in the map so it's the current to do so now we call handle to do click with a as the argument this is the way in JavaScript when you have something happening on an event you can pass some extra arguments to that thing in this case the extra argument we'll pass in is the current to do which is a if in your map you called it something else just use the name that you called it over here so change the on click another function that function looks like this parenthesis, arrow this dot handle to do click with a as the argument once you've done that we'll update this handle to do click to take in one argument you can call it a as well you can call it current to do usually it's a good idea to try to make something more descriptive so that you know what it refers to when you see it later on so here we're going to say handle to do click takes the current to do what does it do okay let's take let's do it slowly so for now what it does is current to do dot is done it just sets it to true it doesn't see whether it was false before whether it was true before it just always sets it to true so it takes the current to do and sets it to true and if you try this save it when you click on your to do you'll see that nothing happens but you should also not see any errors so far okay so it takes the current to do it sets it to true and the final part is to tell react that hey something changed can you check if you need to you know update the display so some data has changed do you need to re-render any of the stuff to show the change data and the way you do that in react is using a special function called set state so this dot set state you give it an object the object has a key called to do's and the value is this dot state dot state dot to do's yes okay let's do it in separate parts let's create a variable called updated state so this is the new state which is an object that has a key called to do's and the value is it's basically it's kind of like telling this kind of a way to tell react that hey the to do's have changed so you say okay this is the updated state the to do's are the current state of to do's which includes this update and then in set state you call it with the updated state and now if you click on a to do which is not done it'll just put a line through it so update the handle to do click to take in the current to do for the current to do change the is done property for now just always change it to true and then tell react that hey something has changed could you see if you need to redraw anything which is what the whole set state stuff is doing and don't forget to change this on click here as well pass in the current to do to the handle to do click function mm-hmm mm-hmm and object mm-hmm yes yeah so this this is actually the same to do's that we already have in the state but this is kind of just a way to tell react that hey something in the to do's has changed it's just how the react syntax works so every time something in your state changes you need to tell react that hey this state has changed and the way you often do it is by doing that yes do you always write within the state and render for you have to write for react you mean so in react most of the time everything will be inside the component so you'll have the state inside the component you'll have the functions inside the component and you'll have the special render function that shows stuff on the page yeah so there are some use cases where you might put some stuff outside but most of the time it will all be inside the component mm-hmm mm-hmm yeah very close there's an extra curly brace here yeah so after set state there's just parenthesis no curly brace oh so this extra yeah yeah something else can I see okay can you go back yeah let's go down ah okay I'll show that on the screen again small difference in the onclick for the ally it looks like this so the onclick for the ally two round parenthesis the arrow then this dot handle to do click I think you're missing this part yes yes curly first then parenthesis then the arrow then this dot handle to do click mm-hmm complete two dos line 18 let's go to line 18 oh I think there are this extra two dos word try try try to click on it it strikes it out yes yes same okay yeah that's we'll do that now so right now when you click on it it'll just get strike out thanks I'll just get strike out if you click on it again it won't get unstriked just yet we'll do that next so we can do that using the if statement that we learned before we can do if current to do so if current to do dot is done then set current to do dot is done to be false else set current to do dot is done to be true so what this does is it checks if it is done it sets it to false if it wasn't done it'll set it to true so if it is done which means it was already true now we change it to false right so if it was true before we change it to false if it was false before we change it to true so we just flip the state when you click on something when you click on the to do now it's not done so when I click on it I want it to be done yeah so it's just because you want to be able to do something like this so when you try it first try it first okay sorry thanks for coming so when it was true when it was true make it false if it wasn't true make it true oh this is just maybe you know in this to do list you can make it undone after it's done that happens try the alt shift F does it say anything interesting here if you want to check if it's true actually if you don't need to check at all you could just do current to do is done with nothing after that but if you really want to compare to true three equal signs so if it was complete when you clicked on it then mark it as incomplete now if it you can just keep clicking and it will keep changing okay is it working now something else 45 render return coming coming okay so this state is fine we got an extra this guy can just delete it how do you know cause there's no corresponding just trying to see where it's opening and closing now if you do alt shift F yeah so basically one way to also tell is is everything at the same level so state handle to duplicate and render they should kind of all start at the same vertical line oh there's one more okay so let's look at render so it opens here closes here so what we are missing is the outermost one this one we opened here what we didn't close it anywhere so where it usually closes is just before the export so anytime you open the what is it called curly bracket you need to close it yeah you're missing the I don't know if you can see it after updated state there's a this.set state line just above the render there's a this.set state after this with updated state yeah after this next line yes okay cool okay so it's working cool nice yes yeah mm-hmm mm-hmm so the state is whatever data you're showing in your app so it's the combination of that you know each to do with its description and the is done that's the all the state