Today, we will go over React.js library on the front end to build user interfaces. So far, we have done HTML for the structure of our document, CSS for the styling, and JavaScript to make it interactive and dynamic. Now, we're going to leverage JavaScript, the programming language, and write code in a certain way. And that certain way is using the React library. It's become really popular. Other alternatives to React are Angular, Vue, and many others. If you heard of that, today, we're going to use React. And what's good about React is if you learn this pattern, you can also build mobile applications with React Native, which is what we are going to do in the final day of this bootcamp on Thursday. Okay, so before we do anything, you need Node.js. If you don't have it installed, you have to install it. And then the code I will use is the code we've been building so far, which is this one. If you don't have it, you've got to clone or download this repository here to follow what I'm doing. Okay, so the application we have so far, great. So, so far, we learned HTML, this simple page, learned some styling, CSS. We learned how to build a form. And then last time we did some JavaScript to learn how we can add this text error and say hello, and it adds a comment like we do in when we post to X or Twitter, Facebook, Instagram, comments, social media in general. Now, we're going to do this using React. We're going to transfer all this code and use the React way and actually call upon a fake back end in the next session. Because this one is actually not calling any back end. It's just fake data, if I refresh, it's gone, not persistent. Okay, let's go. I'm going to open my Visual Studio code in that repository. Okay, let me see here. Any trouble along the way, just let me know if you have any. Okay, let me clear this. So, right now, we have the source code here, just simple. This is index, got messages. This is JavaScript from messages that we learned. So, what we're going to do is build a separate application using React and to do that, because there's a lot of boilerplate, what we call this. You got to set up this and that and that and that. That's very tedious to do. So, what we do is we leverage a third party tool called create React app that already generates everything set up for us. We don't have to worry about that. So, we just care about developing, not the boilerplate. Okay, so we're going to go to the root directory of the repository. I'm going to say mpx, space create dash react dash app. Space any name you want. I'm going to call it web-client because I think that's the appropriate name because we could have a mobile client. So, I want to differentiate by using web. It might take some time, so basically it's installing all the dependencies. And if you recall, if I expand that, there's, when we have an NPM project, that's something maybe you haven't talked much about that. So, when we, Node.js is basically a JavaScript that can be used outside the browser. Back in the days, like we learned in the last session, we had HTML, CSS, then they created JavaScript, the programming language, that's just for the browser to manipulate the document. But now, somebody had the idea, why not use JavaScript outside the browser? We have many programming languages, and why can't JavaScript do the same as the other one? So, they brought it out of the browser and called it Node.js. And this is what we're using right now to install. Right now, what's doing it's installing third party packages, which is basically code that somebody else wrote. So, React is just a way of doing the front end using JavaScript. In the manner of rules that somebody else laid out, they wrote the whole code already, so we don't have to write it from scratch. So, we're going to follow the React way. It's okay, so what's going on? Okay, it got generated, so we're going to CD to web client in the terminal here. I'm using this terminal, you can choose in VS Code, many different terminals. I'm using Windows Machine right now, so I have access to PowerShell, Command Prompt, Git Bash, and others. Right now, this one is PowerShell. If I want to Command Prompt, I just click there, it could get it there. Anyway, going back, that one, you can type npm space start, and that should start the development server. And if you notice, basically npm is a node package manager. It's a way for you to download third-party code that somebody else wrote. And this file packageization is what defines this directory project as an npm project, so therefore it will establish some metadata about your project here. What are the dependencies, for example? In this case, we have the dependency on the React library, or React DOM, React Scripts, and so on. And we have some commands that we can run, and the one we just did is start here, which is a special case. If you just do npm start, it will call this one, but for all the other commands, usually we have to say npm run, the command name, if I were to add, like, tasks here, 1, 2, 3. It will be npm run, tasks 1, 2, 3, it will do whatever you write it. Anyway. Okay, that should open a new browser window. And let me check here. Open my Firefox. And it's in localhost 3000, if you see here. If I hold Ctrl, at least on Windows, I don't know if Mac is Command. You can click that to follow that link, so I'm going to take that and go to my browser. Let me use Chrome instead of Firefox. Let's see. Where's my Chrome? Take this one. So I paste that there. And I can see, if I go to wild client, this is strange. Let's go ahead. This should not be like that. Let's see. Now we have client in the browser. Let me make sure not opening. Try Firefox. HP, localhost 3000. Okay, I think something's running in my machine that shouldn't be running. Let me know if you got the development server open with the React application, like a logo and everything. Let me see what I can do here. Change my port. Okay, let me try this for my case. 3.0 port 3001. I was doing something before that's probably running still. So I'm going to change my port. You probably don't have to do that. This might probably see now it's 4001 there. Now say upgrade required. Okay, something's going on in my ports. I think I was doing some programming before doing the live, but now it's working with a different port. Technical difficulties sometimes experience them. Anyway, this is what it should look like. Let's go back here. I'll change my port. And that's what it should look like. So we can change the code in Visual Studio Code in the SRC directory app.js. And if I say anything, for example, I change this message, hello world, save it, the server automatic compile everything if you look here. And if you go back to the browser, you should see the new message. Hello world here. Okay, so going back. So let's look at the anatomy of React. So basically what happens with React is we delegate all the manipulation of the document so that we only focus on building the user interface. And the way we build the user interface is with JavaScript files, and we create functions. And in React world, we call certain HTML things different ways. For example, when I have in HTML world, I would have paragraph element, I would have H1, I would have image element, so on. Now in the React world, we call them components. So here we have the app components, basically just a function definition, and we got a return from that function, what looks like HTML. But it's actually what we call JSX, which just happens to be syntactic sugar to JavaScript function calls to react dot create element. Okay, so if you were to write that in JavaScript, you would have to write react dot create element. And you have to say div, and then you give the class name, app like that. So it would be very tedious, and then you got to write the children there somehow, and it would be very nice instruction, very hard to see. So it's really not what we want to do. So we usually use the declarative way and React will take care to rebuild or adjust the document according to what we want to see. Okay, and if you're curious, how does it do all that stuff? Well, if you go to source index.js here, it's doing the injecting of the app here. Let me go to the browser, show you some curiosity, going back to the browser here, open the DevTools F12. You see the inspector, you see this is where the React application is injected, and that component is actually going here under this div of ID root. If you right click anywhere like view page source, you can see that when we go to the body of this HTML document, that there's only one div here with the ID root, ID attribute, and there's nothing inside. And what's happening here is the page is being constructed in a client side. So basically the browser asks for the HTML file and receives that, and then the client side will build all the whole page structure by manipulating the document that that's all React's doing. And this is what's called a single page application because you are never changing pages. When you want to go to a separate page as it's traditionally done in HTML, CSS, and JavaScript, it's actually always staying the same page and just rebuilding the document and restructuring things. Okay, the disadvantage of this is SEO, search engine optimization, in the sense that when the search engine probably goes here and sees nothing, you're not going to have any content to add to their database so users can find your content. So for that, usually what we do today is what's called a hybrid approach of doing server side rendering and then doing a single page application after the very first page load. If you want to learn more later on, you should look up Next.js, that's one way of doing that with React. In any case, let's go back here. So that's what's happening. Basically, this whole app is being built by React, and we don't have to do much about, you know, if you were to do this in JavaScript, pure JavaScript, you have to make many function calls. Like we saw when we build the app for messages under SRC, messages.js, we would have to create a div element here, because when you type a comment, you press the button to be able to see that comment at the bottom under the message list. I would have to create a new div element in memory, set its text content, add the class to that, and then finally find that container with the message list and append that new element. So it's kind of very tedious. Imagine doing that. This is just one single feature in a page. Imagine doing that with a lot of massive applications, be a huge mess. And that's why React makes things more organized, because it's everything is declarative instead of programmatically, most of the time like this. Obviously, you're going to have programmatic times when we write in React code, but for the most part we want to declare what we want to see, and then React will be in charge of building that for us. So it's kind of an inversion of control sort of way. Hey, React, you just focus on manipulating the document to look like according what I declare, and I focus on building the user interface, writing what looks like HTML. Anyway, enough of that. Let's try to build one of the, for example, index.html. How would we do that, React? Well, what do you want to focus on is the body. So let's just copy this whole body here, except the script, because the script is something else we've got to work on. So I can go here to app.js, we can delete everything, just add a div container here, and just base that there. Now there's some differences in React when you move from HTML. The first one is the class. Whenever you see class in HTML, you got to change that to class name. So for all these class equals as attributes here, by the way, I press control D to mode select. I'm going to replace them a class name. And the reason for that is JavaScript, the keyword class is reserved for object-oriented programming. So that's why you want to use class name instead of class. That's the first gotcha. Now another gotcha here, you might see the image tag. It's self-closing HTML, meaning we don't have to have a closing tag. So for React, we always have to have some sort of way to close this. So the easiest way is if you know HTML, you don't think much about it. Let me just close the image tag, that's fine. But since we don't have anything between the open and close, we can just do like this. A shortcut is just adding a slash in the open tag, and that should close it. Okay, so that's the gotcha there. And let's see if we have any other stuff. When we have attributes in HTML, they are called properties in React world. So when you hear about props, it's basically the attribute passed to this element, which in React we call component. Okay, what else we got here? I'm not using this logo, but you notice there, the way we would inject or link CSS in HTML, if you'll go back, let me put this open down. We would usually go to the head, and we would add a link tag like this to be able to use CSS from another file like index.css. Now, the way we can usually do React is we import that. Usually before outside the function at the top, we can say import. And as a string, you add the file name or path to the file, CSS file. In this case, it's taking this app.css here from the current directory, which means dot slash, dot is current directory, and then under that, this file. So that's what you would do here. So basically you would do import, for example, if I had index.css in the current directory, I would do it like that. And if I were to do the global one would be global, import, quotes, it can be single or double, it doesn't matter. And dot slash global.css. And optional semicolon. Obviously, we don't have these files in the same directory as SRC, so I would have to copy them based there, and the global one based it here. Now, I just think there's already an index.css here. Yeah, there's already one, so I'm going to move this thing to this other one. And maybe we can remove this other one if we don't want just default styles from create, React app. I'm going to remove this copy here. Save that we got global here. And I think that should take care of those. I noticed we have these link tags for this basically adding next journal font Montserrat. If you want this to be present in every single page, we would copy to this file under web client public index dot html, because this is the one that's used for the single page application. So you want to move this from the source slash index to web client slash public slash index dot html. So I'm going to take that, go to the head, find the end of head here and I can add those tags basically to add the Montserrat font. Okay, and this file index dot html by the way is the one that you see whenever you access the single page application. Let me expand this. Basically, you have under the body on a div whose ID is root, and there's nothing inside. So what it's doing is behind the scenes there's a whole build system with bundling. And I think it's using web back if you have heard that. That's what we react scripts is using. So it's taking this file and adding the JavaScript with the react application. Let me show in the browser. It's easier to see if we are here refresh. Oops, not this one. So is it this one? Yes, this one view page source. You can see here's the div root. And here you can see the script before the end of head. That's the actual application that we have. And it's a bundled file, meaning everything was jumbled together into a single file by where you see web back. It's by done by web back as I read web back here. So all that code is combined into one huge file. And if we do a search, maybe search for the some string that we use in the file, let me see. To find to validate that's actually doing anything. I'm going to look for Lauren Ipsen. Yeah, so basically you can see here that that code that we wrote is basically all function calls. And it's calling this function here. You know, it's very hard to read because that's the way they create the code that's basically functions with an object, class name ID. So if you were to not use JSX, it's really hard to understand what's going on. Okay, see the image of the dog is right here. This one source with alt and an image tag and so on and so on. Okay, that's basically what's happening. So that whole thing is injected constructed by react under this div here. And if you see the live document view. It's right there. Anyway, that's what's react is doing. And yeah, I don't not using loads. I'm going to delete that. But that's basically what another way you can load an image and react you can import that from SVG file is just basically an image written that's VG scalable vector graphics if you don't know. It's a way of building images vector images using pretty much XML which is what HTML looks like. Okay, basically, let's just reiterate create a function. By the way, the first letter of the function name must be capitalized by convention. I know some people might not notice that but it's the case matters here. So make sure that your component names is basically up capital way up. Okay, now this is just one page right in actually the what we had multiple pages here index we had messages sign up so how how we do multiple pages. Well, to do that basically you got to find a way to build a system. It's called a routing system, where you show your in a page it's not really a page it's in the illusion. So when you click a link, it's actually just a call to hey let's rebuild the page look like this other component. And that's basically it. Of course we don't want to reinvent the wheel and write our own routing system. So we're going to use something that somebody else wrote, and that's called react router that's probably a very popular one. That's what we're going to do. But before doing that, I want to show you how we can isolate this logic in our own component, because that's usually what we do. We want to isolate things into separate components so that we can kind of instantiate that like we do with HTML, right whenever you need anchor tag you just do a tag. When we need a button this button tag, what if with this whole thing were an HTML element. How would we build that well let's go outside here, create a function. Let's call it index parentheses no arguments and currently brace for the body of function remember function just a set of instructions, you can give an input via the parameters. There's none that I want to give right now, and then it's going to do some processing and return something back and that return it can be explicitly done with the return keyword. I'm going to use parentheses because I have multiple things being returned I'm going to take this whole thing from the function app, the return value. I'm going to include the div as well, by the way, we take that copy, paste it here. And yeah, if you like this visual studio code as this function that we can fold the code because I don't really care what's inside right now. It's taking up the whole screen so I can fold this for now to kind of hide it. Okay, I matched the div there. I can add an option semicolon. Great, this is a component that can use pretty much anywhere I need to show all these things. It's like think of it as a huge HTML component element. So I can use that but how would I use it well you use it the same way you did HTML open tag name of the element. In this case we call component is just the index and then close it. Well we can do it like this right open close tags but because I don't have anything between I can just do this last year to pretty much close it. And that's pretty much how we do it a custom component. And let me expand that. Let's go to the browser and test it out because every time you change the code we got to make sure it's not breaking anything right. Let's make sure we got no errors in the console. Oh we got an error there. We got to fix that. So basically it's still looking like it did before. Although we have an error here if you click in the DevTools remember F12. Click console. I see warning invalid event handle properly on click. Did you mean on click see capitalize. So that's not a thing to react. They don't like the HTML attributes names as they are of lowercase. So they if you have multiple words like on click they want the every subsequent word to have the first letter capitalized which is the camel case naming convention. So to fix that very easy so we go back to where we do on click right remember all these places here. So basically I'm going to multi select patrol D. I think it's command deal Mac by the way and I've just changed the C with capital C to fix that. Now these parts here are not going to work. So we got to do something about them. Let's do something about them. So basically the way events are handled and react is a bit different in the syntax from what we did with JavaScript. Remember when we did JavaScript we had an index.js file with vanilla JavaScript right. We're still doing JavaScript just the react way. So we define all these functions here change background when I click the button which is basically changing the paragraph background color and text content. And then there's bark when I click to play an audio player for this one this button and there's the other one for the image gallery. Let's focus on just one of them the background color which is a simple one. Well this is the HTML way which was capital lowercase C. So we want to change that the react way how we do that. Well first thing you got to do is get rid of the quotes here. So we're going to use instead curly brace and then get rid of this parentheses because we want to pass the definition of a function and not actually call the function right away. We want to pass the definition so that when you click it will trigger the function definition here. So remove the parentheses. Now it's complaining now that change background is not defined and that's because we got to define it before the return value here. You're going to break some new lines still within the function index and let's copy this background here. It's not going to be the same. So let's see what we can do. So get element by ID whatever whatever this will probably still work but it's not the react way of doing things just so you know. So basically define the function outside the return and every time you click the button it will go here. Okay call this from the top to the bottom. Notice that the function is sign of function. Okay that's totally okay. That's a bit weird but before react used to write components with classes but now they just want to do functions. That's why is we do it this way now. It's kind of weird but all right let's see if it's still working. Refresh here. This one's the warnings by the way is because we passed the string for the two other ones we can fix later. Let's focus on this button. That's still working right. If you refresh you see this is the if you right click here and inspect to see what's going on. This is a paragraph a P element that has an ID attribute first dash paragraph. And if you click this button it's calling that function to change the background color the text color and the content. Okay so it's still working. Now let me show you how we can debug this. We learn about the debugger. This is Firefox by the way and I can go here control P and search for the component name. In this case app.js press enter and you will see the code here. I think I can right here. Okay now let me show you in Chrome because we also have people use Chrome. So basically very similar thing that tools except instead of the bugger is called sources tab and then control P. I don't know if it's command P or Mac and then you type the app.js which is the name of the file that contains this particular component. So it's here so what we can do is put a break point here to see if it's actually calling the function right. We want to validate we are obviously we saw it visually but if you just would like to investigate things you can go here. Let's pull a break point line 7 and then you're going to click here and you see that the code the program stopped for you at this specific line. Because when we click the button it calls a function change background and goes here this execution is here it's about to do this. So it's waiting what do you want to do so you can investigate maybe you want to find out what this is right you could copy this. And I think you can click here to open a console somewhere. I don't know where it is but or you could click console there. Hold on I was in the wrong place. It's open my Firefox by accident sorry control back tick yeah control back tick will open the console here otherwise you got to go here. So I can paste that there and see whoops get element. I don't know why I didn't copy everything. Let me refresh there you go click. Let me try again I think I had typed something poppy and I just pasted here and I see OK this is when I hover it refers to that paragraph. And I can OK that's the paragraph is going to change style if I do that style. I get a huge object of all the CSS styles for that and I can see what's going on I'm going to change background color OK. If you go here and you can see there's background color here empty right because nothing defined yet. Yeah so you can click play to go to the next break point which there is it but you could add more like this for example at nine a click play it goes there OK. Then you can go to the next line pressing F 10 which is this one and it goes to the next line. And there's many other ways step into the next function and outside and so on very good way to the bug things. Anyway I removed all the break points or you can right click here in the sidebar and click play to so it keeps going so it's it's OK it's working fine. Let's fix the other ones. And then we go back to doing the react we. OK so the second one is this next image remember remove the quotes. And remove the parentheses define the function next image outside the return. Let's call I think this one next image and this one is dependent on this variable and this variable here which is not really the react way again. We can do. Put them outside here. For now. Save it. All right so. Let's test it out. You've no problems. So basically this one is the next image which basically to simulate a gallery. I will click next image another dog image appears. Click the next image another dog image appears. It's still working you know. Although that's not how we do. There's not a good practice in react to do it the vanilla JavaScript like that because if you do it that way react doesn't know what what is going on remember we delegate the construction and manipulation of the document to react. But we are kind of bypassing that and doing it yourselves here by doing all this manipulation. And that's not react will know about it just not notice it. So if anything weird appears in the app is probably due to things like that. Finally let's do the bark one. So this one is when you have the button you click and you hear the dog sound. Basically curly braids. No quotes. And then remove parentheses define bar copy from the other one. Like that. And go back. Test it out. Click that the dog. I should hear the dog barking right now. It's not in the recording but I'm hearing when I click that the dog. If you have any questions let me know. Now let's try to do it. Things that react way. Maybe I'll just do. Try to do one. Let me see. Because it might it's going to introduce a new concept. So maybe. Let me see what I can do. Let me see what I can do. Let me see what I can do. Let me see what I can do. Let me see what I can do. Let me see what I can do. Let me see. Let me see what I can do. Let's just do the background color here. So basically we got the element. P that has the ID for spare graph. And the reason we have an idea so that we can find this element of JavaScript. But since we're doing react we already have it available here as in So to see where to change the background color, so you could technically store the color somewhere. Let me see. We're doing, be here, this one. So basically one way you could do it, you can add a style here that would only be, if you remember, light blue. Basically that's what we want it to be. If you want to change the style you can add, by the way there's syntax I have to explain. In HTML you usually have attribute name equals sign and double quotes. And React, it's typically the attribute name equals curly braces. Now whatever's in size up to you. Now there's a special case if you have like a string as the attribute value. In that case you can omit the curly brace. That's why you don't see curly brace everywhere for class name, for the ID and so on. Actually you should have it explicitly. It's not going to be, it's going to be an object here if I want to change the style. If you were to do HTML it can write a string but because React you pass an object with the properties like this. Instead of writing CSS like background dash color you would do it the JavaScript way with naming convention camel case. Well if I do it this way automatically it will change to light blue but that's not what I want initially. Look there's light blue. So what I want to do, okay I got to keep track of this. Maybe I put in a variable. Let's say a paragraph style. So I can create a variable there, paragraph style that can either be this object with background color and all the other properties that we can add later. If I click the button so I have to check okay somehow if you know button is clicked that's one way. Or you could set this initially to a value that's empty like this and then when I click the button you change the value of this. That's one way. But you cannot just do a variable like this in React because React doesn't know that when you change it here when I click let's say I go to the paragraph. Sorry the button here change background. I go there okay change background and I can just do okay let's do paragraph style is equal to something. If I do it this way React will not know that you changed something therefore the document will not be updated. By the way it's complaining this is not, oh this is constant yeah I got to put the lat here to make it real. So if I do it this way let's see. I'm going to go to Chrome opened up tools I want to put a breakpoint so you know that's actually doing something okay and a function I want to put a breakpoint here. So I'm going to click I should remove the code by the way I didn't remove this code but anyway let me let me remove the code here so you don't confuse what's going on. I'm going to remove all this code by commenting out okay that's the vanilla way we don't want that comment out. Let's go back here refresh. Now click there it's here now if I look hover of paragraph style right now it's nothing right empty object remember control back tick what's the paragraph style empty object. But when I click I want to change it to that new object okay let's go to the next line. Now it's changed if you look at paragraph style again. It has a background color right and that's what it should be used here when scroll down. You see the styles paragraph style right but if I click go on it doesn't change it. Despite paragraph style background color light blue this value is not changed because react doesn't know about it. Okay react is not re rendering the component. Going back to the code here even though we change paragraph style the function itself the index function that returns this is never called again. And what we got to do is have a way we need to find a way to let react know hey react I want you to be aware that when I change paragraph style. That you should call this function index again to re render the component that is it's going to return this with a new value here for paragraph style being that object remember I want this to be instead of this initially I wanted to be changed to that. And the only ways by changing what's called the state and react when react sees a change in the state. It will trigger re render re render is basically just another function call to this index and then we back will understand hey I see a discrepancy between what I saw before what's actually showing to the user in the browser. And what's I have here in my what's called the virtual dome. And it's noticing that now paragraph style is an object of background color light blue but what the user are seeing is an empty thing meaning there's no background color defined there. So react is going to act hey I need to update the document to the user. And it does so behind the scenes. So that's the power react. So how do we let react know to track this well we got to use state. That's a hook before react did functional components a used to be just a function call to set state. On the object the component object because we could set an initial state in the component when we did class base but now we got to do functional way that's the encouraged way. And we got to use what they call a hook. And there are certain rules got to follow but basically you call a function and you let know hey react I want to track this in the state. And here's the initial value and then react will give us back to an array which is a list of things. And that array has two things the first being a variable that you can access the value that you keep in track of and the second one is a way to change that value. Okay a function to change that. So let's go here instead of saying like this raw we're going to use react I use state. And pass the initial value here. So that way hey react I want you to keep track of this value initially it's an empty object. And here returns two things. So people like to destructure like this. Set paragraph style. Basically because this is an array of two things you can extract the first element with the square brackets like this. And then the second element like that and put in a variable. And typically called a describe the variable and then set whatever this is called for this function that changes that value so whenever I need to change the value of paragraph style. I can set I can set paragraph style. So that's what I can do by the way I don't need a lot here anymore. So I would do go here and instead of saying paragraph style equals I have to call set paragraph style and pass this as the argument like that. Okay. Now it's complaining about react not defined so usually go to the top and put report react on react. I always add to report react to react whenever I have a component file just in case. Let's test it out see if it's working. What is going on here set paragraph style empty. I forgot to put. I forgot to revert my change here line 43. I forgot to revert this back to paragraph style. So it uses this value. Okay with that out of the way going back. Refresh. I still have a break point. Let's. Okay. Click here. It calls this right. Remember if I look at paragraph style empty. Where's that. Oops. Why is it complaining. Paragraph style is not defined. Okay. Yeah it's the order of it's complaining about that because we got to move this up. We got to take this and move it up here before the function so we can have access to that. Okay. I just move it up here. Let's try again. It wasn't working right. Let's just to debug is not. Let's go here again. Click. Oops. Break point should be here. Try again. There you go. Because I added code out to change the break point. So let's check paragraph style. Did I type it wrong with the hell. It's not defined. Why is it not defined. It should be. Anyway, it's changing there. Now react is recognizing it. Okay. Let me put the other ones down. So basically we're do. Yes. The P is the P capitalized for which one. Only for the. Yeah. Yes. Yes. When you have the function we usually capitalized every subsequent word after the first one. So P set P capitalized. Raff style. So basically you're going to do the color here to add the other one. And you're going to all the other one is text content is a bit different. So we did this one. We did that one. We're going to remove it. Let's test. Remove the break point. Refresh. Still working. I think the text was changed right from yellow to black. Yeah. Okay. So. Now what about this one? Change the text content. We learned the react way of changing style by keeping track in the state. Well for the text content, it's kind of similar. We would go here to where we got the text content. It's basically the text between the open and closing tag. This one. You have to start that in the state and do the same approach. So you take this value here. You can put in a variable. Let's first define it here. So react dot use state. Hey, here's the initial value. I want to show Laurie Ipsen and put this returns two things. Right. Remember it returns an array. Right. We have it's going to return Laurie Ipsen like this and a function to change its value. Right. So that's why we destructure extract this and that you don't have to the structure. But if you don't destructure it, you would have to do like this, for example. You got to use output zero to get access to Laurie Ipsen. And you would have to do it up to zero to set new value like this. That's why people use that notation. Okay. Anyway, we can do paragraph text and then set P capitalized graph text. And then what to do here, if you want to use the value from the variable within this, the tags, right. You cannot just say paragraph text, because if I do paragraph text like that, what happens? I literally see paragraph text. Look here. So to substitute the value of a variable, we have to have curly races. So what you do is you enclose that in curly races so that the value referenced by this variable is replaced here. Okay. That way, if I go back, I see Laurie Ipsen there. And because now I have a function to change its value, I can call it anywhere I want. Let me take this and put it all the way to the top where we have there. And then when we do change background, I can just say set paragraph text, which is this function here with the new value for the paragraph text, which is going to be hello world here as a string like that. Whoops. And that should take care of the others. Let's see it working. Click here. Hello world. Yeah, so that's the react way. Basically, whenever you need things changing, you have to ask react to store that value in the state using the hook. Okay, called use state. You might notice that some people like using the hook use state without react dot. If you want to use it like this, basically, you got to go here at the top and say use state. Okay. Like that. You would like doing that way. I prefer being explicit, but this pretty much what people do usually. And test the code again to make sure we didn't break anything. It's still working the same way. Okay, I think it's a good time for us to take a break.