Introduction to React

So this last will be an 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. All right. So here's the website. Here's React.dev. But we're not going to jump into that. Here's the website I'm going to use. So I hope everybody's there. If you're not, let me know. And then I'll try to help you out. Everybody's there. So what you do is you log in or sign up. Usually, you have 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. I hope this text is big enough for you. If you don't see it, well, let me know. And I increase the size, OK? You're welcome, Tiffany, who posted in the chat. Yeah, I'll try to watch the chat as well if you don't want to speak up in voice. OK. 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 pretty much looks like HTML. You have a tag with 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, 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. So this is the h1, and this is the h1, h2. OK, simple enough. Anybody have any questions? I don't know how well everybody is versed in HTML, CSS, and JavaScript. If I go too fast, let me know. Or just low, I try to help you out. OK. OK, people commented, they're good in the chat. 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 document-guile-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. It's the app component. Remember, we have an opening tag here. It's all self-closing. It's like an HTML element. 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. Let me admit somebody else. Somebody just got in. 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. Hey, somebody asked, are we going to receive the recordings? I'll be posting this. So I'll make sure to comment on wherever you saw this. 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.close. Create element. 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. OK, so let's do something more interesting. 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 in 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. And 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 could see the auto-formatted things for me. That's something this environment has. I think it's usually what's called pre-deer. Every time you save it, it tries to format in a pre-deer 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, I don't want to write a paragraph. 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 it encloses this whole thing in that single div. And that way it works. OK. But if you notice here, when I inspect that, this is 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 React fragment. So if you say React dot fragment instead of div there, make sure the closing tag has the same thing. Closing tag has the same name as the opening React dot fragment. And make sure the cases are uppercase for the first letter of each word, 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 it 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 dot fragment. OK. That's a shorthand. All right. So somebody asked me, are we sharing a screen? I'm the only one sharing the screen, because it's kind of like a webinar. If you have any questions, let me know. OK. Do you have any questions about your environment? It's not working. Just let me know here or in the chat. 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 use, say, TSX. And if it's just JavaScript, JSX. The same thing, OK. Doesn't matter. OK. Javier asked, this is able to be done in a React documents. That's why this is possible because of the 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, however it 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 getElementById 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 Zover React. 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.