 All right, hello everyone. Welcome to week two of the React.js course. I hope by now you should know how to create a very simple application using React. So this week you're going to create two very tiny components and also I think you're going to start to add Bootstrap to your application. So before we go any further, I'm going to spend in this video to talk about some of the technical things about React.js, the things that you should know, especially the JSX and text. Okay, so let me go to the website here and we'll talk about a few things here and also I'm going to just turn off my camera here. Okay, so on the website week two, make sure again, read the textbook in chapter one and two here by now, look at some of the things in there. Again, this is a review of the first video I posted last time. So just know these features and these meaning here. Okay, the real DOM, which is the virtual DOM. Okay, you're going to see this as we move along how things actually work. Okay, so this again, just some of the layers of behind the React program. Okay, so I'm going to go right here look at the JSX and text. Okay, so again, I already mentioned the previous video, but I do want to talk about this a little bit deeper and we'll do a little example as well to show you why this is so. Okay, so again, look at the syntax. It looks just like HTML. You will see that in React file, everything you write in there is really conformed to the JSX. Okay, even though they look like JavaScript and HTML and they're not usually, you know, you don't mix JavaScript and HTML in the same file. Right? So that's the JSX syntax. Okay, so let's look at that. Just if you got just about using class attribute, okay, you have to use the word class name because the word class is a keyword in JavaScript. So you cannot use the word class again because it's JSX and also in JavaScript, right? So in the code, you cannot use the word class as an attribute and among others as well, but that's one of the common ones. So down here, again, JSX followed the very strict rules of XML. If you are not familiar with XML, it just means that every tag must have a closing tag. Okay, so every tag is always comes with a pair. Okay, so unlike HTML, we don't have to close some tags. Like the BR image link or those tags, you don't need a closing tag, but XML requires it. So JSX follows that strict rules. Just make sure you follow the rules. Again, the structure, make sure you know what they are. Components. Okay, again, you have a root component. There's always going to be a root component. And then you can inject other components to that root component. So everything starts from that root component. Okay, if you kill that root component, everything's destroyed. Okay, so here in the IDE, I'm going to create a project in here. Well, let's create a unit two for now. Okay, so I'm going to go into the terminal and we're going to create an app that we can use in PX, react create react app. I'll call this just demo dash app. Okay, so we'll let this run. Well, that's been run. I'm going to go and do something here for you. I want to talk about the different types of importing exporting modules. Okay, so just really, really a quick refresher. Now react uses what's called the ES module system, which is quite common nowadays. I believe Node.js is already kind of used that as a default. But an older version of Node.js, I would say probably 16 or older, it uses the common JS module. Okay, so here's what I mean. Okay, let's go ahead and let's do this. I'm going to create a two files out here, just to test this out.js. Another one here called index.js. Okay, so in the data.js, let's say I'm going to create a variable called pet is equal to dot. Okay, and I'm going to export this. So using the common JS, so this is the common JS module, you usually, right, you usually use the module that exports property and then export the pet out. Okay, so we export that up to the index so I can use it. Let me put over here. Now to use it, you will use the variable called pet, the call save name, whatever I want, doesn't matter. I'm going to use the require. Okay, and then the coming from the data.js, right? Oh, just did, I think. Let's see if that takes it. Okay, and then I'm going to go ahead and console log back to the console. And I'm going to go ahead and open another terminal down here. Okay, so the other one is still running. Make sure I'm in the correct directory. Okay, so good. So usually you will just type node in the index.js, it will run. So you see that it says, and there's an error, it require is not defined in ES module scope. So I believe Node.js 18 maybe uses the ES module by default. Okay, so in the older version of Node, usually you just type node, it will run. Now only that it says it has a .js extension. So because of the newer version of Node.js, if you type the node.js file, it will assume that is that is the default ES module. If you want to use the common.js module, then you have to name it with the CJS. Okay, so in this case, I have to go ahead and rename this. And on that deletious rename to it's a quick way. So CJS is the common.js. Same thing here. Okay, and then I'm going ahead and run again this time. I'll put here CJS. Okay, so you see that it works this way. So the CJS extension is now treated as a common.js. If you leave it out, just put .js and Node.js will use it as the ES module. Okay, so you can see I export that as a dot. Now the common module, so the other one is the, this is the common module, right? Using the ES module, this is the ES module. You use the export. Singular, okay? Export default and then pet. Okay, so export that pet out. Over here, now I'm not going to use this required. Instead, you're going to do like import pet from and then the same data file. Okay, let's call it, let's call CJS. I think you have to name it with a JS now. So it's like going back between the two. Again, this has nothing to do with React, but this will show you why this is so. Okay, so let's put here, yeah, this is sync file, put here doggie. Okay, and then I'm going ahead and run Node and that's that JS. Okay, so you see that it works because I'm using the ES module system with that JS. So React and most frameworks you'll see use this ES module system. Okay, if you're working with Node.js or the Express framework, you'll see that it's usually used the common JS. So that's one thing I want to get out of the way before you may ask why. All right, so now let's go out to our application. Oops, let me go over here. I have too many of them. Let's get the other one. Okay, so let's go into our unit two and go ahead and go to the terminal and demo app. All right, so that it's good. I'm going to go ahead and run it. So npm start will run the application. Hopefully there are no errors and there shouldn't be any, right? If we didn't touch anything there. So here we go and I'm going to launch it. It's a different screen, but it should be running right here actually. Okay, so here we go. It's working nicely. And then, okay, so what is running? I'll leave it here and I'm going to go and talk about a few things. Okay, so this is running. You don't have to restart again. Now let's go into the src folder and the index.js. This is again the entry point to your program. All right, so one rule is that all in React, okay, all your import statements must be at the very top of your file. Okay, if you don't do that, it's not going to work. It cannot have any other statements above these other than a comment. So in other words, that can have like, you know, a comment here, right? Whatever it is, that's fine. Okay, move up here. It's okay, right? But if I have a statement, let's say, you know, that h is equal to 312. Okay, if I do that, it may not be maybe okay here. Let's get up into the application. I'm wondering. You can see it crashed. Okay, so it says import in a body module reordered to the top. All right, so when you do that, it's not going to work. So you must have all your statements above these import statements. Okay, very strict rule. If I do that, everything is okay again. Okay, that's one thing you need to be careful of. The react object up here is just the root object of your application. If you do not have that statement, again, it's not going to work. Okay, so every, so the entire application will use this import a react from the react library. If your file is supposed to be used in react, it must have that. Even if you don't have, even if you use it like you see down here, when I've been using this react, well, the object other than down here, right? Even if you don't use it, you still need to import it. Okay, so that react will know that this entire file is a react file. Okay, so that's that. The other one is that you must use, it's highly recommend that you use the JSX syntax for your application. So everything you see here is usually followed the forms of JSX. So let's do this. Okay, so I'll leave this as is. Okay, I don't want to mess it up. But you'll see that it imports the application from the app file, app.js here. So this way, notice you don't have the react imported here because it's already imported up here, right? So you input it in, it's already applied there. But of course, it's not going to hurt to do it again. I think if you want to, it's okay to do this. That's fine. If you use that in the code here, like, okay, but if you don't have to have it, it's okay because if you import it, it will be already used. So let's do something like this. Okay, so this is fine. The way it is. So what I'm going to do is, so let's say that let's remove, okay, so everything here you see here, okay, inside the return statement from here to here looks just like HTML, right? You've probably seen it. And you will see here again, the class name attribute in the regular HTML tag, you will just use class like this. Okay, because class ID is, is okay. ID is fine because ID is like, it's no problem, right? So yeah, one, two, three doesn't matter. Oh, maybe like a dash 123. Okay, so that's fine. But it'll crash the application because, let me see. I'm surprised it doesn't, but usually it, this is how you do. Okay, it didn't crash, I think, but it would, it should have some error in the message if I'm not mistaken. Interesting. Okay, so, so again, just, just don't use the class. Okay, I'm pretty sure it's going to crash somewhere, but use the class name. All HTML components, okay, of course, this is again JSX, but oftentimes we'll say this HTML because they have exactly same tags as in the HTML. So basically we add encompasses all the standard HTML and use that inside the application. In addition to that, you have your own component you can create because this is a custom react component. Okay, so all these standard HTML tag must be in lowercase only. You cannot have like a couple of D like this. In the regular HTML file, it doesn't matter because HTML is not case sensitive, but in react, all regular HTML tag must be in lowercase. Okay, that is a very strict rule that you must follow. So even though there's no error here, if I say the file go to the application, let's see what happens and you will see that div is not defined. Okay, because in the rule of react, all the custom components, in other words, all your react components that you create must be in Pascal form. So that means if you see any tag that has a capital letter in the front, react will automatically think that that is a react component. Okay, so that's just the rule. Okay, so all tag must be in lowercase if they're HTML. All the tag that you create custom application component must be in uppercase. I mean, are using the Pascal case, right? You capitalize every letter of every word in your function in your classes. So as you can see, it's called capital A. Okay, so if I create another component like this, like function, let's say stuff. Okay, and here I return a tag h1, like my stuff. Okay, so this is a function component in react, right? Just a regular function is a component. It can be treated by one, like one. If you use it, if you don't use it, it's just a regular function as well. But let's say I want to put it down here. Let me turn all these off here. Okay, and then I wish I could display it right here on my screen. Let me close this side. And let's rearrange this. I can see a little bit better. I wanted to see this and the output was that. This one here, right? Yeah. Okay, so let's see if this works. Okay, maybe this will work. All right, so the output is on the right side. And you see there's nothing there because I didn't point it in here. As you can see, if I type something here, it's going to show up over here. Okay, so if I put in here, so this is a custom component. It returns the h1 tag, so usually you would just do that, right? You see on the right side like that. Now, instead of this one, I'm going to add in my stuff like that. Okay, so you see that it's going to crash your program. If you press F12, it will tell you in the console that I'm invalid, dumb. Okay, so as you can see, class name, it was before right before it was there, but it doesn't recognize this tag called stuff. Okay, because again, lower case react would treat that as a regular HTML and it's invalid. Okay, so if your function, if your own component, you want to use that, you must capitalize your function name. Okay, all functions in class components must be in that format, very strict, and you must follow it. Okay, so you go, it comes right back. Normally, we don't create a function using all capital letters, but again, react is different. Okay, so follow that rule. This is a class component. I can also, you know, use a function component. I can also create a class. We'll do that next time. Okay, so I think that's all I wanted to cover. I want to tell you for this module and basically this week. Okay, so follow the syntax, practice, okay, practice it, use it in here. So what we have here is the regular JSX syntax, and this is the preferred way to do it because it's just easier to, you know, for us to write is that it's to make it very declarative. You just declare your tag and use it this way. So this is like a regular HTML to make it as simple as possible, but you don't have to use JSX. Okay, you could use regular JavaScript to do that as well. JavaScript function react includes those as well because there's sometimes you can do that if you want to dynamically. So for example, this is a declarative statement. I can rewrite this using the regular function that provided by react. First, I want to import a function called create element from the react. Okay, so this function here is part of react that allows you to create DOM elements. Like you normally use like the document that create element in JavaScript, the same idea. So for example, I want to create this exactly copy here in my code that I would do this or return here. I'm going to use the create element. It's a function. It takes a couple of parameters, not three things, three elements. The first one is the type of the element. Okay, so in my case, I want the h1. So I want a h1. Second is what's called a props. Props will be like classes, IDs, and unclick events, all those other attributes add to a tag, right? So it's an object of those things. You can leave it blank for now. And then the third one is, it's called children. Children means like other components, other things. So in this case, I'm just going to put here a text. So text is a children, right? It's an element. I mean, a node in the HTML. So here I can put here my cool stuff. Okay, so you can see that it comes right back up here. Let me clear this, right? So this is using what's called the just regular JavaScript method approach. This is using JSX. So you can see how they work. If I want to add, if I go into the ID here inside the class app, there is my h1. If you want to add an, let's say a class of ID, you put that in here, right? You put an ID and then me or something like that, right? And you're going to see that ID has been added to the tag. So this is the properties of that tag, okay? What if you want to nest another tag, right? So in the other way, I can do this and maybe I want to put like a span tag like this, right? Span and then you can do a span here. So let me turn this off again so you can see, okay? You see that it works just fine with my stuff and the h1 has h1 and then my span tag. So the clarity approach is nicer and easier to do. Imagine you have to do that in React and using code. Well, you can put that inside here. It's fine, right? I can put that like this. I can put the tag in here. It's fine. I want to do that. That's fine. Then using just regular HTML inside here, okay? But you see that it's not working the way you want it because it takes another way to actually entombulate that into actual element. But it's another way you want because it treats like a regular text. So you don't want to do that, right? So it takes some more effort to do that because you have to nest other child elements into that h1 and so forth. And that takes effort. So you have to create another element and put that in here. What does it mean? If I want to do what I just did here, then I have to do a little bit more work, okay? I have to inject another component in there using another created element and add it in here. And it's not really that nice. Okay. So that's why we use JSX whenever you can, okay? So just resort to use JSX. And I'm just going to show you why you use it and why you don't use it sometimes. You don't use it because if you're using the regular way like this, you have the ability to use variables and add stuff. What does that mean, right? So I can make this more dynamic. So instead of saying h1, imagine I do this. I could do a, I pass into this object, right? It follows in here an object called, I don't know, we call it like data, right? So data. And here I want to put like data.element, right? Like that. So for example, when I pass to the stuff, I'm going to pass in a data is equal to call it element and then has the value of h1, okay? Let's see. It's not going to where L is not defined. I think it's a data.data. Okay. That's h1, h1. Is it a colon? No, it is h1. Yeah, it's not working now, but this is how you actually do it. You can pass data to the data here and I'm not sure what it's not working. Let me see. I swear it's supposed to see what that looks like. I'm curious to see what it looks like if I run error indicator. So, okay. Okay, so this is, I think it's not right. I'm going to do this with the, I want to pass an object, okay? Or the key of element to data. And okay, so data is now shown element of, element is the key, right? So if you expand that is the element. So you see the data that element comes through because I'm extracting data from this entire object. So this becomes the data stores this object and then that element give me that element. So you can see that I'm making a little bit more dynamic. I can also add something here, right? I could add like the ID is going to be myself and then the text be like, hi there, right? So everything here will be dynamic. So I could do that like data, that ID, and then this text would be data dot text, okay? You see that it's dynamically, right? Using this approach. So I can pass in anything I want and my program dysfunction here about dynamically generate or run this data using this approach. Of course, this is not the only way to do this. You can also achieve this using just the regular way here as well. But again, you have to test what is the element type. Go ahead and then render this h1, right? If it's an h1 because it could have been anything, it could be like an h3, right? You can see that it's dynamic now because what if I pass to or render that type? But if you're doing the declarative method, you don't know what type it is. You have to check it, right? So that is why this will become handy when you create dynamic applications. Okay. So I hope that's enough, not to confuse you, but I do want to encourage you to use JSX. So whatever you do here, everything you do in this course will be just in plain JSX. Okay. So any questions, please let me know and thank you.