Please go to this website here. I'm going to paste the links. Just give me one moment. See if I have it. Now, paste in the chat. I just paste in the chat. The website is the first one. I'll sign up or whatever some people express not wanting to do that. There's alternatives like the playcode.io slash react, reactplayground.versal.app, or even running your own machine with the third link. The first link is what you should use, and you should sign up. And click on the top right fork, and then click your username. If you don't want to do that, you can try playcode.io slash react. That's one alternative. Or the other ones are running in your own machine, if you already know how to do that with create react app, for example, npx, create react app. And then cd to that, and then npm start. But that's for those who know how to run commands. Otherwise, just use the website that's the most straightforward way. So this last will be introduction to react. Basically, it's a library that we use to build user interfaces for the web, and now actually for other platforms as well. So if you use react, you can actually build for mobile phones like Android and iOS with React Native. You can also use it now with VR, say the Facebook's Quest. It's React Native VR. And even now, they created one for Apple Vision Pro. So here's the website, here's react.dev. But we're not going to pitch to that. Here's the website I'm going to use. So what you do is you log in or sign up. Usually on the top. And then you're going to click fork here, and then your username. And once you do that, you get a copy that you can actually change and type things inside. All right, so I'll be very practical here. I don't like talking too much about theory. It's basically you have the web, right? So you go to any website today, either in your phone or your computer. And how is it that built? That's build HTML, CSS, JavaScript, and there's other stuff in the back end. So we're talking about the front end right here, OK? So React is a library that we can use. So we can write the app in JavaScript language. Now, it's a very specific way of doing it. Of course, there are different ways, like Angular and Vue and others, OK? But I'm going to do it the React way here. So if you go to this environment here, so we have the source code explorer on the left-hand side under this folder, SRC, you've got different files. So we're going to go to app.js. That should be the default. On the right-hand side, the panel is like a browser. So we can refresh and so on. So basically, our code that we write here will be reflected on the right-hand side. So the way React works is pretty much everything is what's called a component. If you know a little bit, the requirement for this class is you have some knowledge of HTML, CSS, and JavaScript. So in the HTML world, we talk about elements or tags, right? Pretty much the same thing here, but instead of saying elements, we say components. So this is called the app component, and it's pretty much a function, JavaScript function, that returns something. And this something is like the template we want to render. So you can see here, it's pretty much looks like HTML. You have a tag for the div element, h1, h2, and so on. And you have an attribute here, in this case, for the class name. In HTML, it's just called class, OK? But in React, we have to say class name. And that's because the JavaScript language has the keyword class reserved, so you can build object-oriented stuff. So basically, this, whatever is returned here, is what you see here. So if you go ahead there and try to change this message to something else, and you can save that with Control-S, that's the shortcut, and it automatically on the right-hand side will reflect here. I made a change and changed the word after hello to world, OK? So this is the h1, and this is the h1, h2. So what happens in React is, essentially, if you go to this index.js, if you know a little bit about JavaScript, you can see DocumentGal element by ID here. Basically, you're trying to grab on the DOM the document object model on the element whose ID is root. So if you right-click here and click Inspect, I know it's a bit hard to see there. And you can see this div here with the ID root. This is actually where the React application is injected. Everything is inside this div here. You can see the ID is root. So that's precisely what this code is doing. It's getting this element here, and then you're going to inject or render something, something here. Ultimately, it's the app, OK? It's the app component. Maybe we have an opening tag here. It's self-closing. It's like an HTML element, OK? You can call it the element app, but in React mode, we call it component. So basically, it's this thing here. So that's how React works to the entry point there. Yeah, yeah, somebody commented JSX. I'm going to talk about that just now. So essentially, a function here, and then you got the HTML. What looks like HTML? That's actually not HTML. It's something called JSX, OK? So what's happening behind the scenes? You don't have to know this, but actually, this is actually a function called in JavaScript to react.createElement. If you want to learn more about that, it's called JSX. That suffices to say, that's just the way we write things. We don't want to be writing the way it's actually done, because that's just too hard to see and visualize. Oh, yeah, I want to comment just on that on the JSX. I want to comment about transpilation. So I pasted the code here on my left-hand side for the thing, a simple React component app that returns an H1 and Hello World, and there's a class name. And I want to show you what that looks like in transpilation. Classic. So like I said, JSX is what we write this in, but actually, that gets translated or transpiled to a call to react.createElement. And the first argument is the name of the element, in this case, H1. And then the second argument is all the properties or attributes, in this case, class name of value, greetings. And the third one, in this case, is the children, which is whatever you place between the opening and closing tags. So that's what it means. So browsers today, to support this kind of stuff, we have to transpile the code from one form to another. And this other form on the right-hand side is what the browsers will understand. Pretty much all the browsers today can understand this version of the code. But this one is still like, it might not support it just yet. That's why we always transpiled the code. But that's something very like, implemented specific. We don't have to worry about that. I just give you this as a curiosity. So Babel is a transpiler, if you want to read more about it. OK, I'm going to go back where we were. OK, let's talk about returning things. So I'm going to delete everything from the return. Say I want to return a p tag, a paragraph. And I'm going to press Control and then Ask to save it. So it can appear here on the right-hand side. Now, that's nice. You can see the auto-formatted things for me. That's something this environment does. I think it's usually what's called prettier. Every time you save it, it tries to format in a pretty way. So if you forget to do stuff like that, it automatically changes it. I think you can disable it somehow, but I'll just keep it like that. But that's why it does that. Anyway, so I've returned one thing, right? How can I return multiple things? Say I want to write another paragraph. In HTML, just say, OK, I want a p here. Yeah, like that, right? But it doesn't work that way, because this is like a function that returns something. And that something can only be one thing in JavaScript. So there are different ways to go about this problem. One of them is returning an array. If you know array, it's like a collection or a list of things. Another way is actually enclosing these two in one element. For example, a div. And then enclose this whole thing in that single div. And that way it works. OK, but if you notice here, when I inspect that, here's the root. That's the whole app that's being injected. You see the div here? That's what we wrote, right? This part here. Now, that's nice. If you don't like this wrapper div or wrapper element, there's a way that React made so you don't have that. It's called ReactFragment. So if you say React.Fragment instead of div there, make sure the closing tag has the same name as the opening, React.Fragment. And make sure the cases are uppercase for the first letter of each words, because case matters in programming, OK? Now, it's going to give me an error saying React is not defined. So what this means every time you have this kind of stuff is because when you use something that's not yet known to this file, you have to import it at the top. So we usually say import, space, whatever it is, like React in this case, from React like so. If somebody commented about the empty pair, that's what I'm going to say next, OK? So if you do it this way, inspect it again, you can see there's no longer a wrapping div. That's fragment. As somebody said in the comments, actually, if you don't like typing this long name, you can just say empty like this. And it actually means the same thing as React.Fragment, OK? That's a shorthand. Somebody asked, can we use JSX instead of JS? Do you mean for the file extension? If that's what you mean, the file extension can also be called JSX, that's correct. That's the conventions more like of the TypeScript road. Wherever they had JSX used within the code, they used, say, TSX. And if it's just JavaScript, JSX. The same thing, OK? Doesn't matter. Have you ever asked, this is able to be done in a React documents? Is that why this is possible? Because you import React. What do you mean? I don't get what you're asking. But whenever you're having a React component with JSX, it's always best to import it here. And the way I didn't have the import before is, I think this environment automatically injected somehow. But you always should have React there. You can hear me? Yes, Javier, go ahead. Yeah, so what I was asking is, is this able to be done because it's a document that is a React document, if that's such a thing? Or because you're importing React into this document and therefore that functionality is now a part of it? So React is a library. And when we do in the index.js, when we say, get element by ID here, and then we create root here, we're creating something from the React DOM client, and then call render. What it does for render, OK, React goes to the source code, the DOM, and it looks for this div of the ID root. And whatever's under this will be controlled by React, OK? So React will be in charge of this. It does the rendering, injecting all the DOM elements, and everything is done for you. You don't have to worry about it. All you have to do is declare it like this with a function and React will know about it. And the reason app is there is because of index for injecting and rendering the app right here. See that? We make an instance of this component like this. It's like an HTML element. And that's actually taking app imported here from the other file. And that's why it works just fine. I hope I could answer. I know it might be a little bit complicated. I know you're trying to understand the work in Zovery Act, so I ask that you keep going in this very simple case because people might not understand the in-depth stuff. So it's really meant to be an introduction. Is that OK? Yes, absolutely. Thank you. You're welcome. All right. So let's keep going. So let's do something more interesting. Let's make our own component. So you saw components basically always done this way. You make a function, give it a name, and then return something that's the template. So if I want to go outside that function and actually create, let's create a box component. It's just going to be a box of some color. So I can say box function space box like this. No parameters yet. And then I can return something. And I'm going to just return a div with the class name box like so. And I can self-close it in the world of React. So the same thing as this. You can either self-close it or just do it like that. Now, if I want to use, this is a component. It's just a function. And you give it any name you want. Typically, we name it using the first letter capitalized by convention. And I just added a div and then with the class box. If you're on the React world, every time you pass an attribute to an element in HTML notation, you have to give class name and then the value. Now, in the React world, we call this a component, right? That's the div components. And then the attribute is called a property or prop for short. So you might hear that more in the React world. Now, when I say I want to create, I have this box. I'm going to define the CSS in styles.css. Now, why is this going to work? Because up here, I have imports, space, and then quotes.slash styles.css. Now, I'm going to add some style for the class box. I just wanted to have, let's say, 80 pixels width, 80 pixels height, and then some background color green. And then I go back to app. And here, I'm going to add the box. So to use that component, simply say less than, name of the component, and then close it, self-close. Basically, the same thing as HTML. OK, so we got this component here. So if you want to add more, just do the same thing. You can write box like so, and it will add another one. OK, you see another box. Like that. Try to close this to be easier to see. Let's do the following challenge. So let's change the background color of one of the components. Let's say I want the box on line 13. Let's say I want to control its color. Say I want color red. So that way, it's kind of have some customization. I can have a box that's color red. And this other one, it can be color blue and so on. How would we accomplish that? Well, the first thing, you understand how is this key value pair passed on to the component? So this is a component called box. So here's the definition, right? That's a function called box. Now, here are the what we call HTML attributes. But in React mode, we call them properties, right? There's a property name and then the value. Now, to access them within the box opponent, you have to add a parameter here called props, OK? And then if you want to change that, let's change it with the style attribute, right? Just to make it simple. I can add style here. And it can change background color to be. Now, props is an object. So I can say props dot whatever name I passed here. In this case, color. Let me see if you can wrap the text here. It would be nice for you to see. There you go. That's easier. So what I just did, OK, when I say color equals red like that, I'm passing a prop called color that appears inside this object called props. So I'm passing an argument. It's like you're calling a function passing an argument. The argument is accessible via props. So you can see props dot color here. In this case, it'll be red, right? So you can think of this as being red right here. Now, that value is used in this object here. This is an object with background color there that's passed to this attribute called style or prop called style. So the way you do it in React world is you have to pass an object inside here. And you can see the notation for props. And you can see the notation for the property and values is actually like this with the curly braces. That's why I didn't use it here because you can omit it. But actually, it's like this. So you have the name and then equals and curly braces and whatever value it is. And you can see there's two curly braces here. So you have to be careful here. The one outside is for the syntax. And the one inside is because we're passing an object, a JavaScript object. So be careful of that. So if you have just the string as the value, you can actually omit the curly braces. That's why I didn't write it there. As you can see, the box is now red and the other is blue because the red is passed in to props.color here and then the background color of the style exchange. So if you right-click this, Inspect, you can see that the style attribute is indeed set to background color red. This is the CSS, right? So whatever I wrote there is translated here in HTML. Somebody asked, why two brackets that style props? I hope I answer your question, Andres, with what I explained before. Now let's talk about children. So if you remember HTML, we have elements with an opening tag and then some contents and then some closing tag. Notice the box itself closing. It doesn't have anything in between, right? But actually we could do that. Let's say the box had a closing tag and we type something inside, like box one. How would I access that from my component here? Like if I do it right now, nothing happens, right? But actually that's called props.children. This is called the children, okay? So when you go into the component itself, let's say I wanna add the text between the opening and closing of the div. I can actually do that, okay? But first I have to tell you, okay, if I were to say hello like this, you're gonna say hello there inside the box, right? But what if I wanna say whatever I typed between the opening and closing here? So that's when I have to use the props.children. It's always called children, okay? It's a special prop name for the thing that you've typed between the opening and closing. Now if I write it like this, that's literally gonna say props.children. Well, we actually wanna replace that with whatever is passed in, right? So to do that, whenever you have JSX, something like that, you have to add the curly braces to kind of substitute the value of this variable here. So if you do the curly braces around it, now we're gonna see box one here, okay? So that means whatever you passed between the opening and closing of the box element here appears in this prop.children, and then the value is replaced because we've got curly braces here. Now we typically use the curly braces within the JSX template thing here, okay? Not outside, it doesn't really make any sense. Outside here, that means like a block in JavaScript, but it's just for the situation, the context within the JSX. That means a substitution of the value of a variable. I think about a string interpolation if you want a term, programming term. Okay, let me see the questions. Can you insert a button like children? What do you mean, Andres? You could pass anything as children, okay? There could be an element, could be a string or whatever. Whatever you pass will be available here. Okay, so let's say I wanna add text to the second one, the same thing, make it an opening, closing, and then in between it can say box two, and then it appears here because it's props.children. Yeah, you can do that, Andres. You can actually make this a component. For example, like this. If you see the button there, you can add anything, okay? Let me revert the code. Just simple text. Let's say, that's nice. Let's say we wanna control the color. I wanna change the color of the first one using, well, if it's vanilla JavaScript, we'd have to document element by ID, for example, this box to grab it, target it, and then we can change the dot style, dot background color, but that's not really the react way. So the react way is a little bit different, so let's think about that. So I'm gonna add here a button. I'm gonna say change color for the label. It's basically a button at the top that says change color, okay? Just like HTML, button element, attribute type button, because it's not a submit button. So when I click that, I want something to happen. So I say click events. Remember from JavaScript, there are events, like on click. So we're gonna use that, but you know, remember HTML, one way of adding events is like this, right? So pretty much the same way in react, but instead of saying on click, all lowercase, the first letter of click has to be capitalized, so the C is capitalized there. And then you have to pass a value here. Remember, curly braces after the equals sign. Now this has to be a function. It's similar to JavaScript. In JavaScript, you'd say on click, and then some function, and then you call it like that. Here's slightly different. We had the curly braces, and then we got the function name. We don't need the parenthesis because that would call it right away. We don't want it to call it right away, only on click. So let's say on change color click. Let me call it like that. So I'm gonna define this function right before the return within the function. Yeah, that's kind of weird, right? We define a function within a function, but that's totally okay. So function, space, on change, color, click, parenthesis, curly braces, like that. Now when I click this button, this function will be called. Now I want this function to change the background color of the first box, or would that matter? Yeah, the first box, let's say. To be, let's say, green. So how can we do that? Well, usually we would say document, get element by ID or by class or whatever, right? To grab this first box. And then we can do like this example code here. Somehow, if it had an ID here. Let's not be a react way. If we do this, you're bypassing react. Remember, react is controlling everything, all the rendering. And if you do this, you're bypassing it. So we won't know when to re-rand or repaint things. So we cannot do it just like that with document, get element by ID. So we have to use the state. Yeah, this don't click is called event handler. This function is an event handler. But let me think about this. So we got the color here, right? Now the color is controlled by this value, right? So we need to wait to make that a variable thing. So let's say here's the box color. And that needs to be a variable, but it's a variable that changes. So it's something called state in react. So the way you do it is like this. So we got, oh, we're ready to give you the hands. I hate this out of complete. And anyway, so you can say react.useState and then you give an initial value. In this case, let's say for the box, it is red, okay? I want red to be initial value. And then this call, this is called a hook, okay? UseState is a hook, H-O-K. That's the technical name for this. So basically you're saying, okay, I want to keep track of a certain value. It's like a variable. The initial value is red, a string. And if you want to access this, this whole thing returns two things in an array. Okay, it's an array of two elements. So I want to extract those two things. So I got to use this notation here. So the first one is going to be the value itself. And then there's going to be a function. This returns two things, okay? An array, try to explain it. One of the things is the value like this. And the other thing is a function that allows you to change to a new value, okay? Does that make sense? So if I were to access this, I would have to say sub zero for the first element or sub one, but that's not convenient. So I have to use this destructuring notation to extract the first element in an array into this variable and the second element of the array in that other variable. Okay, you can give any name you want. It can be whatever here or whatever there. But by convention, I choose the scripted name here. And now let's follow with set by whatever the same name I use here to be consistent, okay? So that way now I had access to the box color and I can use it here in line 26. Now whenever I need to change it, that's when I can call this function set box color. So if I click change color button, it calls this function here. Now I want to change the colors, I call set box color, remember this second element from that array, with whatever value I want, green. So if I do that, save it and click change color, now it's changed. A hook is not an event listener, okay? Event listener is a function tied to an event. And for example, the button has a non-click. So we have this function here. This function, because it's tied to the unclick of the button, could be called an event handler function. Now hook is just the name of this thing, use state, okay? If you want to read more about it, go on the React website. But all it does is, okay, you want to keep track of some value, right? That can be changed over time in our application. The way you use it, you call this function called use state, give us an initial value for this variable, right? State variable. In this case, it's going to be the string red. So you can access the value from the return value of use state, that's an array of two things. Don't ask me why they wrote it this way, that's the way the people who wrote React did. I know it's a bit weird, but just the way they did it, it's simply an array that returns the first element being the value, like red in this case. And the second being the function that allows you to change that value to a new one, okay? That's why we always do this. So I use this destructuring notice from JavaScript to extract the first element of the array into this variable called box color. And then the second element of the array into this function, this called set box color. That's a variable, you can think of that in a variable as well. Anyway, I know it's a little bit weird, but I think you can just take it for granted now and keep going, maybe down the road you better understand. Yeah, so Carlos asks a good question. Every time state changes, the component is re-rendered. That's why I told you, before we cannot just do document get element by ID, and then set the style background color because you're kind of doing it around React, and React won't know that you changed it. So the reason we use state is that every time we change the state, any variable in the state, React will re-render the component, meaning it will repaint it, right? So when I say, if I want to refresh this, I click refresh to reset everything. When I click change color, what happens is it calls the function on change color. Click that in turn, it calls the function to change the value of the state for the box color. So because it changes to a new value, the state has changed. When the state changes, the function app gets called again. Therefore, this template is called again. Now the value of box color will be green, right? Because we changed it. And then at line 26, color will be green here. That's why it changed it automatically. So React reacted to it, okay? So as I was saying, the name of React is React, right? It's reacting to something. And every time the state changes, it reacts to it. Okay, the state change, we've got to re-render everything because things might look different. Okay, somebody asked, did it import use state up top or is it conventional to have it like React use state? Yeah, so that's a good question. So use state is available through the React object that we import at the top. But you're actually gonna see a lot of people using simply use state without reference to React dot. And that's totally fine. How can you use that? Well, in the top, you have to add a comma and then curly braces to take the use state from whatever this export is, okay? So that way you can use it in isolation. That's totally fine as well. I prefer to have it this way because we're beginning, so you understand where it comes from. Oh, okay, it comes from React, you know. But you can totally do it the other way as well. It's shorter. Okay, so everybody understand now that's why it's called React. Every time the state changes, it re-renders the component. Everybody that's in here will get re-rendered. The app itself gets re-rendered. At that in turn, re-renders the box. So everything gets a new look, fresh paint on top. And that's why you box color now, when I click that will become green because the new value box color became green. And then I call this again with that value. Okay, so every time you need to keep track of something, you just state, okay? Think of it like in normal programming, you wanna store something and change it later, possibly. You make a variable, right? It's kind of like that, except you have to use the React state so that it knows that you're changing it so it can react according. So we learned the state, we learned props actually, when you say color equals something that's passing a prop to the component, and then you can access it via the first, this argument here. Okay, now I wanna make the challenge harder. Can we control the color by text input? Let's try to do it. So I'm gonna add an input here, input, type, text, like that, and I'll type the color here, the yellow. And when I click change color, I want this yellow that I typed should be the new color for the first box. How can we do that? So this is about controlling a component, okay? You're gonna hear that term, controlled components. So the input by itself, we cannot have no control over the value here. Okay, how can I get, well, of course in vanilla JavaScript, you can click that and then the function here is gonna go here, document, get element by D, so you get this input and then you see the value attributes. But because you gotta do the react way, it's a little different. So let's do react way. So first we gotta control this input by adding the value attribute here to be some value that we're gonna store in the state. So let me say text color, okay? Now we're gonna create that, remember, it's a weird but it's always the same way, react.useState. Now you need to call this function given an initial value. Let's say the text is empty initially, so I'm gonna use an empty string here for the initial value. Now this returns an array of two elements, right? The first being how can access the actual text and the second with a function to change that. So we can use this structuring with this notation to extract the first element of the second into any arbitrary name we want. I usually use a descriptive name, like text color, comma, always followed by the set, whatever the previous name I used. It's just a convention, but you can use whatever. And by the way, if you don't know this case, it's called camel case. The first word of the letters lower and then every subsequent word, the first letter has to be capitalized. So it's camel case, like a camel. Camel case, like this. Just a convention we use in JavaScript. Other languages might use underscore like snake case or Pascal in C sharp. Now we got text color here. We can use that for the value of the input, but that's not really doing anything, right? We can type, actually we can't type. Why can't we type? Because we fixed the value on the text color, which is initially empty. So that's why when I type anything, nothing happens. Now this is now a controlled component. So you have to manually write codes so that whenever you type anything, it will change the value of the text color that's in the state. Now to do that, we can use on change prop like this. And you can pass as the value a function. Okay, let's create a function there. Let's say on text color change. Now the name of the function is arbitrary. I just like following this convention on whatever name of the variable and then the event. Okay, it's up to you to change your own, use your own convention. Now I defined a function here on text color change. And then I'm gonna take that like that. Now, remember I can type something here. Now to access that, I need to access the event variable that's usually passed in as the parameter to any event handle a function like this one. So when you have an input, you can access the whatever they use a type with the event object dot target dot value. Okay, that's just the way it is. So there's an event object, inside there's the target object and then inside there's a value. That's whatever the user typed, okay. Now since we got access to whatever the user typed, we need to assign that to the new text color here. So we're gonna say, remember we have a set text color function, can use that set text color and then passing the new value, which is gonna be that. Okay, now if I save that and try to type it, A, now I see the A is no longer just empty, right? Why does that happen? Because when I type the character, it calls the on change this function and it calls set text color with the A letter. So the value of text color now becomes A, okay? And then I can type in every type and type of character, it calls this function and sets the value of text color. Okay, every time I type any character. Okay, now that's nice, we got that stored. Now it's finally time for us when we click change color, we wanna change the color, background color, the first one, remember the first box, line 32, is controlled by the box color. That's a variable that's in the state. Now how can we change that? Well, set box color. That's already the code for the on change color click that is called when I click change color, but now it's hard coded to green. How can I change this to be whatever is typed in the input type text? Anybody have an idea what should be typed there? So it should be text color, okay? Because that's what we hold, that's where we hold the value for whatever the user types. So instead of green, now we say text color, so let's say if it works. So I type blue and click change color, now we can see it changed to blue. If I type green, click change color, now it's changed to green. Now we see the questions, why do you use a state on property on change text if that is a variable? Can you just just a variable not state? Yeah, so we cannot use just the variable because of react. Remember it's reactive only to the state change. If I did something like the text, let me see on change that color like this, right? A variable like just a plain variable with the text and I were to change the thing, it doesn't change the state. So a state not changing means it never re-renders the thing. So let me see if I can demonstrate that here. So we have the text color variable. If I put it in the input types text here, the text color. So we're using the variable now. So if I save that, it's always blue, I cannot change anything. And if I go on set text color, here I would have to say the text color equals, right? Something like that, then to do that, I gotta move this up maybe. Let me see. So you can see nothing happens even though we're calling, okay? Because react doesn't know that you changed. It didn't re-render anything. So the reason we have to always use state is so we let react know, hey, you have to react to this to this variable. Every time I change the value of this variable, you have to react to it and re-render everything so things are updated. If you don't use that, react doesn't know. It has no idea about this variable here, the text color. So I try to change it, nothing happens because it doesn't know. It won't change it, it won't re-render it, okay? So let me revert everything back to the correct. Okay, so that's the react way. If you have anything you wanna change, use a state so it knows about it and it will react and re-render according. I hope that clarified a little bit. Data might have updated but component won't pre-render to reflect, yeah. Hi, hi, Mark. Hey. I have a question. It's probably stupid, but I'm gonna ask it anyways. For the sake of understanding everything that's typed here, I'm curious why it's in the order that it's in and why, for example, line 24 wouldn't be at the very top or almost at the very top and then for the other pieces to sort of be underneath it. I don't know if that makes any sense. If you put 24 at the top, by virtue of the language of JavaScript, it will return right away without executing 14 and 15. So it won't know about those things. So if I do that, you get an error. You cannot access that scholar because it doesn't know what it is. You're returning right away from the function meaning everything after that return is ignored. So it gets out of the function early. Got it. It's a matter of programming language and scope of the variables. As for the order of the functions, this one doesn't matter. I can have it like this or like that, okay. And the reason I have it within the app instead of outside is because I need to access these two variables, right? There's no way I can access these because they're local to app. So there's not available outside. So I have to have them inside. And it's just the way they wrote it for this kind of way of doing React. In the beginning of React, they actually use classes. If you're a familiar object oriented programming, they define the components using a class and then you can instantiate objects of that class. Those are the components. But now they want to do it this way, defining all the components using a function and using hooks. And then you can define the functions within the functions. I know it's a bit messy if you're, I don't know, you're experiencing other languages. To me, it's kind of messy a little bit coming from another background of object oriented, but that's just the way it is now. I just want to finish with letting you know how we can actually define these components elsewhere. Cause typically when you define your own components, you write them in separate files. So the box here is in the same file as the app component, but by convention, it's best we separate them to be more organized. So all you have to do is create a file under source here. I'll call it box.js. Typically I call the file name the same name as the function name or component name. And then what we're going to do is go back to app. I'm going to cut the code line force through 10 for the box function. And I'm going to paste it here. Now within box.js, let's go to the top. Always we do report react from react like that. Go back to app. It's going to complain box is not defined because it isn't, right? So we have to import it. So to use code from another file, you have to import it. So import space, the name you want, could be any name. I like to always use the same name as the file or component name, in this case box, space from, and then you got to use quotes and give the path to the file. Now if you're referring to the current directory, that's dot slash, okay? Current directory is dot slash, and then box. Now you can say.js, that's fine. So usually people omit the extension.js and remove it like this, okay? But it's doing pretty much grabbing that file, okay? Now it didn't work here, why? Because whenever you have a nap, sorry, a component in a file and you want it to be available elsewhere, you need to export that, okay? The way I import it here is using, it's importing for the default export, okay? So go back to box.js, before the function, you're gonna say export default separated by space. That way, this function is now available to whoever wants to import that from the outside. And you can see things are working like before, you can test it out and it works the same way. All right, so that's just isolating every component in a separate file, that's a good practice, instead of having everything in one single file. Quentin asked about, if you're about object-oriented program, it's kinda not the topic for this class, but it's very important concept. If you're following computer science, you should definitely look into it. It's a different way of programming, okay? And it's very important. Yeah, Carlos replied, react to more object-oriented approach, like yeah, like I said, they used classes before, now they don't wanna use it anymore, that's correct. Thank you for explaining, Carlos, to like future react is more function, yeah. Hey, Matt, quick question. Yeah. Hey, this, do you prefer visual studio code for my reactor, what do you typically use? So you can program in any text editor of your choice. Today, the most popular one is visual studio code. It's like a jack of all trades. You can do whatever that, it just became like popular. Yeah, I used to use Atom, but now visual studio code is the one that's more popular. Yeah, but that depends on your use case, right? If you're doing more work in a company, they might use more, my language is there, you have to write more code, so you can use the IDs like visual studio, it's a different one, it's not visual studio code. If you're doing Microsoft stack, if you're using like Java, they have Eclipse and other stuff, it's more bloated, because it's more powerful, it gives you autocompletions, intelligence, it gives documentation as you type the code, it's a lot of fancy stuff, so depends on, but for all purposes, any text editor, and I recommend visual studio code.