 This workshop will introduce you how to use ReactJazz. So my name is Nathapakir Vithaya. So if you recognize from my name, I come from Thailand. The name is super long. And I also work as a React Native team in Choppy, the app that have a loan annals and a commercial. I see it everywhere here. And I also do a guest workshop before with Goway. And also have some share on React Native, which is an internal sharing inside Choppy. So, glad to share. Oh, sorry. Oh, sorry. So, okay, today we will... In this part, we really focus on web development. Last week, you were learning how to use Node.Jazz, right? That one is a back end. So today is a web development for fun. And so, simply start with the HTML first. Because every web development, even the most modern one, we still need HTML knowledge. So every website is built up from the HTML. And this is the first HTML site, which is just using the PLHTML. So the purpose of HTML is just to show the content, to display the content, like user can read. And I think this is quite nice website. It's have a header, have a link, have a content stuff. So it's like, you can treat it as e-books, like try to push the book into the website. So, but then come the time that people want to have more customized on your site, have more spacing, more layout. So that's why they also build the CSS language, which you also learn as well. It's a language that they care how to style your site. So CSS is only work with HTML. So you cannot really use it with Node.Jazz because CSS is built for HTML, right? But these two languages, it's really static. It means what you write, it will be same as you write. You cannot do some logical computation on that. If you write 2 plus 2, it will send out 2 plus 2 on the screen, not full. That is why they need to have another language. So it is a JavaScript. So the purpose of this is a script, which can be run on the browser and then can do some computation. So with these three languages together, this is how people develop the website nowadays. But talk about JavaScript. But JavaScript is, now it's like, people see an opportunity to make it strong because they have a lot of API that JavaScript can do. It's called Web API. So if you see the speck of Web API, this is all the API that your JavaScript that running browser can do. Like some DOM API that you can manipulate the HTML and also fetch API can also vibrate your phone as well. This is quite crazy stuff that JavaScript can do. So, technically JavaScript is kind of connect between the HTML site and also do a fetching and also do your CSS as well. So, I can say JavaScript is super strong now, which is why you can see in the modern website nowadays the JavaScript is really be a big part of the building, the application is take over the HTML. Your writing really feel HTML nowadays. So let's take a step back and because right now JavaScript is really big and it become really messy. So, let's take a deep breath and see what are you doing now. So, if you start writing some user list page if you're writing with PLTML you just need to write a whole list of the HTML which this one will display the user list as a user card as a list. And if you really take individually you will see the pattern of each one. It's like one card and this guy also same, this guy also same. So, technically everything is the same when you're writing your application. So, this one, as the developer you don't really want to writing a whole over and over again. You want to use for loop, right? So, this data, the source and the name that display here is different between each in that list, right? So, instead of this we use the template to replace the content here. And then you can put this at a string inside the JavaScript site and we create some data for our line name and then replace it and then put into the DOM. So, this is actually how using the PL JavaScript tool like having a really dynamic and fancy web application. And as you see it can be separated into two parts. First is the data. The next one is a template. So, with these two together it combined with CSS and then it can put into your website to be like rendered as one component. So, this concept is actually really good because it can make your application more clean and it's... So, we call this concept component. So, in each UI inside your application you just build a component which come from template, past date, data. It's also really good on the term of the separation of concern, right? The separate concern is you can really speed the file into a lot more file instead of putting together into one big file. And also it can be reusable because the template and data can be reused at any place anywhere. You don't need to really re-use only your application. You can use it for audit application as well. So, this is how really React created. So, React is building in based from this concept, the component concept which come from the template, past the data. So, but the concept of it is the template is a string, right? You're writing the template above here and then you replace by the content. Technically, this guy is good enough but it's just a string which means the structure of the code is kind of changed. It needs to be div and then span, image and span nested under the div. So, this makes things not really handy enough to work in with. Which is why instead of writing the string, they're writing as a JavaScript object. They do a create element of the div and then have a shielding as an image and span or something like that. So, with this, this can make your create something similar to what you're writing in HTML but you're writing in JavaScript. But this one is still really hard to really write it, right? Because you don't really imagine how it's going to be inside when you really run it. So, that's why they introduced the JSX. We will talk more in-depth about it later but it's extension JavaScript which is we will write it today as well. This might be a really tricky part when you start writing React as well. Because as you see the const element over here is you're just writing the HTML like tag. So, this one is look like an HTML. It's not, and it's also not a string. So, it's a special syntax for developing React. It's called JSX. With this, when you're running, you still need to compile it and then it will turn into something like this. But when you write it, you're writing something like this. This is why it's really handy and you're writing this it will show on your screen like this, like H1 as well. So, again, React is the framework library concept that create the design by the component base. So, just need to mention that it's a component because we will really heard about component quite a few times through this workshop. So, the concept is the UI is equal to some render function of the data, right? But the data inside React is not really, it's split into two things. The prop and the state. We will talk about it later as well but this one is the word that you really need to like and the state. Yeah, so, on your application, if you're writing as a component, you're writing your app component and then in app component, you just use three more component like header, list, or footer and your footer component also writing more sub-component, like menu and tag. So, when you write it, your application, you just need to concern what your pilot and student only one level. You don't need to concern all the things. The React will do that for you. So, after that, you have all the component. React will construct the three. So, your application is just the three of the component that like list down and then have all the students coming up and then build your application, build your UI from that. So, this is simply how React is thinking and the concept of React. But the thing is the dynamic template why the dynamic template is the create element that I show before is very slow. So, yeah, it is slow. So, React also do some optimization as well. It's called virtual DOM. But actually, this one is really, really my role stuff that I'm not going to talk about it for now. So, today, because I might also say that people also see that I'm really passionate about Pokémon. So, let's build some simple Pokédeck apps. So, I kind of promise you that if you you can make this by yourself after finish this workshop. So, what it do is like it just, there is a list of Pokémon here. You can choose a lot more and then have a list of infinite list of Pokémon. It's not infinite. It's like 800 Pokémon so far. Yeah. And if you choose here, it will show the content inside it is like how, what is the type and you also can type by yourself. Let's say you type Pikachu. And it will show as well. So, this just very simple. Maybe not. I don't know. Yeah. Okay. So, let's get things start. Are you ready? Okay. So, let's start with, because I think do you have your NPM running on, installed on your laptop already? So, you can run two commands. This one, Npx Share React Apps. My app. This will So, with this command it will boost up your project. So, yeah. So, let me know if you are really okay with. After running this command, if there is any issue, just rest your hand and tell me. Okay. So, first up, your terminal. It wasn't mentioned but what are your terminal? What we did last week and then run that command. Yes, this one. It will look like this when you run. The slides is in which slide is 29? Slide 29. Does anyone have trouble with running the script? No. Okay. So, if you have trouble with running the first command, maybe you try running the second command. NPM install dash g credit gap. And then, like, running the credit gap. My app. Very good. What should you see after they run this command? So, after you run this command, it will, like, show everything is initialized. So, after you're running this command, you will see something like your app is already created in this. And then, you can start developing that way. So, after you have seen this, you just use your CD. It's actually already here. So, use CD to your app. My app. And then, type young start. It will create your... It will start your server. Oh, yeah. Sorry. Just type NPM start. It will create your... It will jump through your browser and show your site, like this. Yeah. It's kind of magic. You just type the NPM start. You will have the cheap spinning on your browser. So, if no trouble, let's continue. So, if you're still stuck in the installing part, you can, like, lift your hand and then there will be a TA coming for you. Okay. So, after this, and you also get the server running, right? Let's open our VS code. So, your VS code, you just open the folder that you just created, which, in my case, is inside the workshop and my app. So, click open. So, you will see something like this. So, this is what they create for you. Just a bunch of files that you can really ignore everything. Just focus on the app.js. So, if you open the app.js, it will have some pre-defy P, defy the app already. This one is the one that create the spinner and then also the text here. The edit source let out and save to reload. So, this is actually the file that we really gonna edit it. Back to my slides. Yes. The command you just run is created app. It's like a starter kit officially from React. So, this will boost up your application. It will keep the part that you need to write all the compiler and then the bundling stuff. So, you just start right away with this. So, this is what they generate for you. But, what you want to forget really is just app.js. Yeah. So, let's start writing your first component. But, before going to writing your first component, you let's pay attention on the jessack. So, as I say, right, jessack is a syntax extension for JavaScript and we can use JavaScript to manipulate the DOM. Like, create an element, remove the element as well. So, if you writing something like this on JavaScript, you can create the h1 and the hello world inside the HTML site. But, this one is really painful to write. That's why jessack come to help. You just create h1 and then hello world nested in and then call render from React DOM. This will generate your DOM and your HTML page. So, yeah, jessack is not a string or HTML. It's just a jessack. So, this one is also, jessack also can do a really dynamic stuff. You can put the variable like this. Like, name is George Pierce and then call hello and then put the name inside. So, the output will be here. So, you can change as well. Like, this will update it and it also can do a calculation for you. Like, 2 plus 2 will be 4. So, this is what HTML is going to do. And so, the point is you need to put it under the query bracket like this. So, if you're not putting into the query bracket, if you're not doing anything, if you treat it like a string. But, if you put the query bracket, if you do a computation for you. You can also do like a really compact function, very compact correlation that you want to show here as well. So, this is how really handy of jessack. And so, important note even you see the render here is updated because we triggered the render. So, if you writing in your app and you're not fresh, it will still stay there. Like, if you edit, start edit here. It will stay there. The content will stay there until you reload the site. And so, to part because jessack want you to writing the your syntax similar to HTML. You can also doing pass the HTML attribute like you're building the HTML. Like, you can pass the tab in the class name or something. But, the naming here is maybe not really familiar for you if you're writing HTML because it's jessack. So, when you're writing HTML right, you're writing in kbub case like tab-index or min-high. So, but because javascript, jessack want to be more like JavaScript. That's why they instead of you writing in kbub you're writing in kamew case instead. So, this one is that like a big i, big h instead of that dash i and also the class need to be used class name instead. So, this is just the only difference between writing HTML and jessack. And the next thing is you can also passing the JavaScript function into it. Directly, like if you're writing the normal JavaScript, you cannot doing something like create a function and then pass a function into the DOM directly. This is really a feature of jessack only. So, yeah and we will also use this quite often so be prepared. And also, next thing to mention is the content that you're writing here is similar to writing the shy here as well. Like you're writing jessack is actually similar to have an attribute called shouldn't and then passing the string into the tag. So, this one is also similar. So, what they do after you're writing this when you run start, it will turn from this into a JavaScript that browser can read because this one, if you're typing in the browser, it cannot be read. It cannot be compiled. But before it passes the browser, it will turn to this command like create element and then the name is div. Have a shooting as a h1 or something like it. And then after react run, it will really generate the content on your HTML. So, this step need to be done and this one will done because you're using the create app to generate it. So, this guy will be doing it for you. Yeah. And another rules that better to know like you can you need to close the tag. Like usually in the when you're writing the normal HTML you may not need to close the tag. It still can show something right. But with this you need to close the tab unless it will be compiled. Like and also need to close by the corresponding tag. Like h1 cannot close by div. It will throw it compiler. H1 need to be close by h1. And also you need to let's say the image. Usually the image doesn't need to close right. But in jsx you need to close like this with this like slash and then the this tag close. Yes. So, this is really neat. And then if you're writing a multiple line of jsx you use the parent to close to group it together like this. Like have a div and then nest it h1 h1 and div right. You can writing the parent to close it and group it together into one variable. And the first level it cannot be two element. Like this one have two line. And so the parent of this have to have two tag. It's kind of doable in the jsx. So you need to wrap by something like this to make it work and to make it not compiler. So this three thing need to mention when you're writing jsx. And so let's start with create. We're getting close for creating the react component now. So we will start with simply build this app. This list first but it's not gonna look like this. So, but let's start with create a function component. So in component, the component inside react is just a function that return the jsx tag, jsx element. Like this is just a function that take a props and then return some the HTML element like this. And it will turn and when you use it, you just use it like as you are writing a HTML tag. Like if you create the function call list, when you use it, use it at list and then just cause like a custom tag for you. And then it will turn into like create element list and then passing the prop down for you. So with this you can writing your own list first. So and then you may curious like because your function also want to maybe sometime want to have a data and then you do some calculation to and passing into UI, right? So how to passing the data into your tag if you're writing like this. So the way that is really simple as well. You're using it as a attribute. Like let's say you have you passing you want to pass the name into your component. So you just do this like writing a name and then as a string if there is a number, you need to put a query back at and then passing into the name age and order can be an object as well. This one is a JavaScript object and inside your component, if you console log it out, it will return you are an object of the inside the props like name will be map to name will be map to like age also order also will be inside the JavaScript object. So this is how you passing data into your component. And then let's start so let's start with delete everything first. Yes, so just delete everything only the class name app that is needed and also if you don't want the style to pollute your site, you can also delete this as well. Okay, and take a look back it will be really empty like this. No, don't worry we will add something inside. Okay, I guess you are all done. Sorry, sorry, sorry. Okay, so yeah just which part are you guys at? Yeah, that, okay just so when you show a code just leave it on the screen so they can see what's going on here. So yeah, so whatever is in the class name app whatever is inside that is removed whatever is in there. After you're done, save it and you go back to the browser and you can see that if you come down on the page itself so you want to try that? Yeah sure. So the app.js is under the source folder and also the app.js is also under the source folder so these two just we can delete it. This far as well. Okay, I can do. I'm lost at the very beginning. So have you created No, I just opened my computer. Okay, so I think you can start with you have the node.js installed. I'm getting. Yeah. Okay. Okay, just to a little bit what we're doing. So we call the create that app so to generate your project it will look like this. And then we open the vscode using that it will show up this and inside the source folder go to the app.js and then we delete the content inside just remain the depth class name it and then other than that we just remove and then we also open the app.css and then remove the other class under it. This is how we remove only this left on the file. So let's create a very simple component first. We will call it header this will be our header. So doing by create a function call header and then inside the class name app we will use our component by writing a tag call header and then close the tag like this. So sorry, sorry, sorry. Wait, wait, wait. So after you write it it will show the hello world in your browser. So let's say you really have some trouble with typo it will it will show something like this. It may be caused by your didn't close the tag properly when you're writing the jessik. If you're not closing the tag it will show fails to compile. So make sure you close all the tag. Everyone have a hello world display right? So before we writing our logic into our header component let's spread into another file first. So with this we will create a new folder we will call it component and then we will create another file called header.js and then we move this into this. So it's also right also calling the import react and then export the header as well. So just import react. So this will be your header component in one file. And to use it in your app you need to import it here. So import it we will call it header and then from the component slash header. This will create a similar result as previous but we're just splitting the file. I will leave you guys for typing a little bit. How do you cook the bow with header like? Also low-key? Yes. Got it. Found it. Oh, yes. Is it on? Is it on? Found the mic. I don't know if it's on. It's charging. But it's not really connected. No, it's on. Oh, shit. Hello, hello. I think it's okay. Let me complain with the speaker. I think it's... Okay, you try speaking out. Okay. Hello. Hello. And I need to Hello. Can you hear? Okay. This is okay, right? Okay. Okay, so let's go to the next step. So next step we will be writing another component. Okay. Next step we will be writing another component so same way we will create a new file called list and then we will writing a function called list and then instead of right now prop is empty, right? We will try to use the data that we passing from props. But firstly let's create a file called the list. Yeah, in the same folder under the component. So what we will do with our list, right? The parameter that we passing, it will passing into the variable called props. So our list component will accept the attribute called items and then we will create, dynamically create the element for each item. Like let's say props.items and then we will use the map which what map do is just iterate all the array and then create a new array. So let's say we will do something like this and we will create li by 1. And then inside our app we just use it by import import list from the component set list and call the list with the items and passing like an array of something like 1, 2, 3, 4, 5. This will create a bunch of one inside our screen. My font might confuse people. Sorry. Sorry, sorry. My font might confuse you guys. It's just some dynamic of the font. Yes. So this one is an anonymous function, right? You're writing the e-hole and then list then to be a generator function. Okay. Can I catch up? Okay. Let's wait here a bit. Some more explanation about how map really work, right? Map is similar to you writing the for loop, like loop that I e-hole 0 to the props.items. You don't need to write this stuff. I just want to show you how it works. So this one will be similar to you writing the map here. So it will create an array and then it will look to every item inside the props.items and then push into a new array and then it will return an array from this. So with this, you can like changing this list of items So this one will duplicate like let's see here is like five number, right? Because we put the item here is like five element inside this list. Like let's say it's six, seven if you create like seven item here on the browser and this guy can change to anything as well. Like this one is just duplicate the item over using the list. And also the first element that passing into the map is it will be each item here. So if you console log it out, it will log like one, two, three, four, five, six, seven. Okay, so what now is I change from one to back it and items. So this one should show the content that you passing from the from the item here like this list, the item here is two, three, four, five, six, seven. If you generate the list on the left side here like this So if you just do a name there's a name for each of the cards you have. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Each one. Thank you so much for being here. Thank you so much for being here. Thank you. Thank you so much for being here. Thank you. Thank you so much for being here. Thank you. Okay. Okay. So, this is how, like, this is what helped me understand that function. So, I tend to visualize it as an array. So, what you take into a Mac function is an array of things, right? So, it can be whatever. And then how you grab things is you will take each of those items here and you turn that into something else. So, maybe my Mac function is to give it a head. So, I will turn all of these and then I give it a head. So, to put into the Mac function is what you want to do to each of those items. So, this is why a Mac function, what it takes, is a function. Okay. And then how you write that function, you can just write, you can write the function in the classical way. What we're doing here, also what we normally do is we want to just say that this function is turning a circle to a circle with a head or turning anything into anything with a head. And then the Mac function will return you this array. Does this help? A little bit. So, here what we're doing is we're saying across the items on that and then we're turning each of the items there into a list, an LI element that wraps around that. Okay. Thanks very much for explanation. No, no, no, it's not. It's an alternative explanation. Okay. Yes. So, coming to the next step. So, next step, we will also extract the LI, our function that just write into a React component called listItem. So, instead of we returning this guy, right, we will return listItem instead and then passing the item into the new component that we will create. So, just create the listItem component except a props and then we return this. So, as similar as this, we just turn anything into the listItem object that have a props.item to be anything here. So, you passing anything here, we will create a listItem from that. I think you need to create the component folder. Then we will put the list and also header with header. Just create the header. Then maybe you copy the header, you implement a simple header. Just copy from this linear to header, it's also fine. So, next thing, because we will implement the Pokemon list, right? So, I ask everyone to go to the API of Pokemon. It will in this one, we open here. So, the URL is both API.co. So, this is like a public API that you can fetch the Pokemon data. There is an example for you as well. Pokemon select Ditto, it will return you already all the detail about that Pokemon, like Ditto. Yes, but what we will do here, we will get the list of the first 10 Pokemon from here. So, instead of the parameter will be Ditto, right? We will change it to limit 10. And if you see the result, it will return you a list of all the names of the first 10 Pokemon with some URL. So, right now we will copy it over to our application. Just copy this list, like from the results. And then create a new variable here. And then place it. And instead of passing this list, we will pass the item here inside our list component. If you want to copy, you can click this. It will easier for copying, like view raw JSON and bottom of the screen, this button. So, with this, you can start, select all the things and then copy over. Okay, sure. Do you want to find the list.js as well? The name. Oh, yes, yes, yes. But I will stop this first. So, if you tap back to our app, right, it will crash. But no worry, because we need to change our list.js as well. So, open the list.js. And then instead of .item, right, we will use .item.name instead. And this will show the first 10 Pokemon name on the view. And if you didn't also, don't forget to change the list. Don't forget to change list item. So, previously it was RAI. Just change to the item that we just created. And then inside the list, we will call the... Oh, here, list.name inside item list. Let's see this here. Should be okay. Everyone okay? Can show this list already, right? Cool. So, the next thing is we will add the little icon in front of each name. So, the icon is come from this URL. So, there is a Pokemon DB that also have a free icon. Like, let's say it's a... Little, it will return a very small icon like this. Summing a bit. So, this one will be a URL that we will use for this page. I will show you on this. So, you can just type this down first. Type it down here. Inside the list item, because we will put inside the list item, right? And then after we got the URL of it. We will use it inside the image tag. And put this by here. So, this one is how we construct it from using name. Name. So, this URL... Because this URL is not return anything. You need to passing the name of Pokemon. Like, let's say it's a ditto, right? .png. So... Oops. Yeah. So, this one we will need to replace like this. Like, this one we need to replace this guy by the Pokemon name. Which we already got. So, in case of this, we just repeat by let's say the... Venezuela. Then it will show the... It will have an image there. Using the name. So, to construct it, we will use the... Sting template with the dollar size. And then the curry packet wrap allow this. Like this. So, this one will construct it the URL of each item. Of each Pokemon. And then we will use it inside the image tag. Put it into the source. So, if you're not familiar with the dollar size thing. It's similar to how you write the... Normal thing with concat. Like this. So, this tool is similar. But, I mean, it's easier to write this way. Okay, okay. Do not... For the sprite, it's a tactic. Not a single quote. So, do not do is a tactic. The tactic is... Just above your tinder. Just below your tinder. Yes. The tactic is not the... It's not a single quote. Not a single quote. And then behind this is here. It was not working. Why it was working before this? I just want to... This is here. Yes. Just behind this is here. Oh, yeah. The line... Why is it here now? So, you kind of move it? Yeah. Kind of move it. And you kind of move it. Because I... It's more than... It's more than... It's more than... Oh my God. It's still... It's still like an... It's more than... It's like an... It's more than... It's like an... It's more than... It's more than... It's more than... It's more than... It's more than... How are you? I'm okay. And I'm poking. So, you guys... I just want to change the source first. What? I want to play the game. Aw! Okay, so actually this one is like done for the props and create your first commonality so let's take a break first you can you can writing something like this and it can be like work as well but it's you need to really careful when you're writing this because if you suddenly like writing into the next like tap down into next next slide right and then it will not really treat as a similar to you you putting the pandas here so yeah so so this one will instead of return your your element right it will return an undefined and this code will be unreachable so which is why the best practice for you writing it is actually putting the pandas here yeah so if you have a another question you can also ask like where's up your hand and then so any anyone have the same question can be answered together thanks so next thing after after we you build your commonality right we talk about the state state is another value that so previously there's a props and state is another value that also control the UI as well but why we need state so just to wrap up we will we will build the this input and the behavior of this input right now is if you typing the name that is matching the name here it will highlight the list so just this first okay so why we need state because let's let's try because purely when you're changing something right you may need to refresh your your site to able to see an update but you cannot do that and in practical like you cannot tell your user to like call them and then just reload it's not really make it that way so to build a web application you need to make it really interactable but how to make it interactable so let's tie an experiment like I create the example common in here right now you don't need to type so just see through the my example first so this one is the example component and then we will put it here so example component will be really simple to just like have a click me button and then have you click see your time so if I keep clicking it I want to the number to be increasing so this is what I like for now is like the button element that have passing the on click so on click it will call every time that your your element got clicked and then inside this I will use that pass pass to the cow so cow where you should be increasing every time and but if I try here even if I click it's not really updated so let's try debug a little bit so yes so so you will see the console rock like so it's actually called a function but that it just you are not updated we can also print out the cow as well like the cow keep increasing just the UI is not updated so why why what is happened so you need to so this is actually the correct behavior of the desire of the react so how you need to understand how react rendering first so as I say right you're building your application from the root which is started up and then you build a binary component under under it and the rendering process when you call render it will render everything into the into your HTML into your page but in the time that some some component want to update some data let's say our footer want to update the data but if you only update on your JS site it's not really refracting to UI you need to tell react to relander the footer component and then that and it will make all the component under it able to relander and then the UI be updated so how to do it that's why we need a state so react have a API to use of the state call you state so you state will return your available which is a static for component okay so let's more on this so in our footer component right the props will be passing down from the parent with it app the property will be passing down from the parent only so for the footer component you cannot really modify the pop or any object there you just need to consume it and then use it but only way that you can individually have draw variable inside your component is you state so so what we need to do is we just turn the cons there into you state so this will create the state where you inside your component like just injected inside your component and then you you can call sets set state like set call to trigger relander from this and also update the data so let's me change it real quick so this one we will increase now the number is increased now how because previously we just call how past parts right now we change to set call and internally in the set call function it will do two things so first we'll update our how value and then we update the how are you here and then we'll relander like call this function again so with this is can make your UI updated since with the value here so every so I would say that any variable if you put it here it will not change until you put it inside the state and so this is the use state the API of use state is you passing the default variable so this one will be default by one which means the first time that your component is showing it will use this num if we use this value as I to how the first value here first value here so the first time that you lock out is we BCO and then if you call set call if you update it and then change to this so let's say we instead of pass by one we pass by two so it will also update it by two so is it understand so yeah so you cannot use the variable if you want to sing with the UI yes so let's code it a little bit so let's remove our let me remove my example component so because we will create the input element right to make people that you can type in the Pokemon name and then we will match with the Pokemon list letter so let's start with create the input element here and then passing the value into like something like where you first so if you like something like this your where your input element will have a value like as a default but you cannot update it even you're typing anything because this where you also not the the typing anything inside the input it's not really have a state inside you need to update the state that you passing to the the input okay to do that we just convert the value concept into our state by call you state of the hello and this really turn an array which the first element is a value and next element is a set value and then in the input they accept the attribute call on change so on change will call every time that that anything that you're typing in if you have like a event that sent to the JS site that okay somebody type in anything something and then to to get the value that people type in we call E dot target dot value and then we will call set value by that we can inspect what is return also but with this you can now typing in yeah so every time it will send the event call synthetic event and inside have a lot of details but you can go to the target now the target supposed to be a your element yeah so it's it will nested inside target dot value also you need to import it from here as well like import drag use state from the react to able to use the function okay okay so you all can type here if you update it is this okay okay cool let's continue so but right now what we want to do is here our list right if we type IV saw we want our IV saw to update it so technically this value the value that we type here we want to use inside our list component and with like somehow we need to check with the name that passing into the inside the list item and then showing something let's say let's let's start a little bit more like so so we will add we will start by adding the style into our list but so we will change the color of the text into red but this one we make every every our list item will be turned to late right but we want only the highlight one will be turned into late let's say the prop so we use the prop dot item dot name to compare like if it will equal IV saw it will be red and all that will be black so the idea is kind of like this right if the item dot names is equal IV saw or something that you type in it will be returned the late into color style but else it will return that so if you're not familiar with this it's a tinary so it will check for this if it if this condition is true it will return this value and if not it will return this so it's like a if else but it's just writing in one line okay so we just add the style here and this one cannot be only IV saw we want to be any value that we just type in into our text input so how to do it if you see the the list item is actually nested under the app this item is here under the app and also the the state value of our is in the header is in the header so there is a little bit of problem that because the value is inside the header how to how to make the list using this value okay so the problem is our footer or anything right want to make the least one want to have the data from the footer so is it any way that you can pass the data to sibling into the this tree so actually sadly there's no way to do that so only way to do that is you passing you instead of create the state here in the footer you move the state up into the app so into the parent and then both parent can passing both props both data into the props and also passing the function called set set where you so you can so right now your footer can be manipulated data as well so this is how you like you can see the the state is only passing down the way you only passing down to the tree it cannot pass up cannot pass left right so yeah this is a way that you can solve it so okay this one you need to change your code now by instead of having the value here in the header right now you can have this way right now you can have this way you we will copy I mean cut it in and paste inside the the app that jazz and then remember to import it import the use state okay so right now our value and state we just passing into the the header instead of header using their own state and inside our inside your header instead of just having the use state you have a prop in state and then prop dot value and then pop dot set state so this will create a similar thing okay just to recap you move the set state here from the header here so you move the set state that pvc have the set state here right move to here move to app yeah so after you move it inside the header you passing as a prop so now header will have a value dot and equal value and then set value set value here so this one is another change and the last one our header will use prop dot value instead of from this we will call prop dot value and prop dot set state yeah so this is a change that is far Okay, so if you're not finished, I will leave the screen here. So let's continue using our value. So the main reason that we move our value from the header into the app, right? Because we want our list to be able to use this value as well. So let's just start by passing the value into our list. And then, because the value now is a value that you type in, right? So in our list item that, so if you cannot finish this, you can add in this line up. The list li will have a style. So right now, color.propp.item.name is now compared to the ipso. So instead of that, we just compare to prop.value instead. And then inside the list item, we also need to pass the value into list item from the list. So we need to pass the value now first. Okay, let's try save. So I think it will never be anything that is highlight now because the prop.value here is not really have a data yet. Because when you use it, you didn't pass the item, the value into this guy. So you just need to pass it here using prop.value. So with this, it's supposed to work like this. So what we add, we add the value here, passing the value to this guy. And then again, in the list component, we passing this value into this item as well. And inside this item, now we add a style. So if the color item.name is match the prop.value, it will show it. And if not, it will show back. So just this line that added and also this. Any question? I'll let you guys try first. So inside the app, I just add the value here passing inside the list. Because where you already be here, then you just add this value equal value to pass the value inside list. And now inside list, we can use it. And now inside the list, we will passing the value down into our list item. And then list item can now have the value, the value that we use here. So if you forget to passing any value in, it will not showing the highlight after you type in. And now inside the list item, we will pass the value down into our list item. And now inside the list item, we will pass the value down into our list item. And now inside the list item, we will pass the value down into our list item. Okay, let's continue a little bit more on this. So right now our scenario is we passing the value call value from the app into like go in deep into now. Right now it's like our list item. So it's actually what you need to do and you need to remember to do is we need to write value equal pop dot value into our every level to able to use it in the in the reddish leaf level, right? But this is not really practical way, I mean, so if the leaf, if the tree is more longer than this, your component will like having this value every time you need to like passing down to children. So react also provide a way that you don't need to do that. So it's called context. So context is a way that you can share the data from your parent, like inside like a global way to share the data is inside the tree of the component. So let's say your parent have a prop a and then you shouldn't want to use a prop a. You just need to put it inside the context and you don't need to pass passing to the prop anymore. So we will do it in this case as well. So to do it, you will use the context API that provides from react. So you just call react dot create context and then it will be a value. So my context will be an object of something and to use it, you use my contact dot provider, put it as a tree. So this will like identify that your value is now inside the global scope of this. So under, so the every component under this can use your value now. And so, but to consume the, to get the value is you need to do a little bit more on how to use it instead of prop dot value, right? You just call use context that also export from react and the value will be inside your context. So this one is no need to write anymore because you already create here, but you need to call the use context and then get put the my context inside the use contact and then it will return your value here. So yeah, but let's go to the like live coding. It should be more understandable. So inside the app.js, we will create context called Pokemon context and we'll be a react dot create context. And so by default, it will be an like an empty array and this string after you created when you use it, you just wrap the way wrap your application by the context dot provider wrap like this and then inside here. So you just passing the value inside. So now your, your value from the set state will be put it inside the context and anyone is under your under your app, it can use this way, you know. So yeah, so because we set the set state here, right? So the default will be a hello, hello. So right now what we do added is create a Pokemon context and then Pokemon create another element called Pokemon context dot provider and then pass the value equal the value from the use state and again, don't forget to close the tag. Hopefully everyone can still just running this without any red screen because this one is have no effect without app right now because no one is using it. So inside our list, this file, we will use the context. So to do it, you need to call export of this and then here we will import it. Okay, again, we will create a new file called Pokemon context and then put this one into here. Inside the new file, right? We call Pokemon contact.js and we call export cons Pokemon context equal react dot create context. So instead of just using it right away inside the app.js, we need to import it from the file and typo on this. So you can import it like this as well because in our list, we want to use it as a consumer. So this object need to be accessed by app and list. But there is some problem about when you import thing like circular thing, it will not really able to resolve. So you just need to extract the value into a new file. This is a good way. Yeah. So you see from here that the app has import list from components of list and then inside of list, others need something for the context of list. Okay, so I so previously right, the Pokemon contact is create inside the app. But in our list, we want to use Pokemon contact as well. But the problem is the app.js now import from the list like component set list. We are not writing like the list to import something from the app.js. So this is like the app will import the list and now list will import the app. So this is a circular dependency which is create a table like something not intitialized. So the solution is we export the thing into a new file like what we do here like create a new file called Pokemon context and both of them import from that. Is it already to this step like everybody can be following this step already right? So next step we will use our value from the context. So inside the list.js, we will also import the Pokemon context from our file Pokemon.context and we will use the use context. So to use the value from context, you use the use contact that we import from react and then passing the context here into our use context. So the value here will be similar to the value inside the props already. So I lock out the value here and you will see the value here is matched together with this. So this is how to passing the data inside using context. So use contact just passing the contact from the create contact here. So the contact that you passing is the contact that you passing is from import from the Pokemon context after you create. Okay so it's not imported yet. Yes, it's all right. Yeah, I think after we finish this we break again. Can I take your mic? So I'm hearing a question. A lot of us are running into the use context is not defined issue. So what that happens? So if we do this, okay. So if we're doing this now, we're seeing use context is not defined. Because use context is an API from react. So there are two ways we retrieve use context. One is we can say react.useContext. And if we say this, what's my other issue? Okay and now we have the use contact as a method from react. Or alternatively when we import, we can say we're not only importing the default export by react. We're also importing another API called useContext. This way we're retrieving useContext from a deconstructed import. So now we have the import here. If you're running into the same problem, here is possibly why. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. This one should move to the size for them. It's the other one. It's the other one. So obviously you just duplicate this one. Okay, okay. So now it's okay. Just now we had a discussion about the context. Does it have to be value? Can it be anything? Yes. Can it be anything? Yes. You mean inside this? Yeah. This one, this name, or this name? Yes. Or this name needs to be value? Yes. Because if we use a bigger scale, we use step-by-step. Key value scale. Oh yeah. So we were trying to change it, give it a more meaningful memory. Yes, but it's cannot, right? Yes. Okay. So there is a question about the value here. Can I change to something else? Can it be maybe Pokemon or something? Actually it's no, because this one needs to be a value. Because the provider component consumes only the value property. Only the value that you're passing in can be changed. But this one cannot be changed. Okay. Because this one, we didn't write it. The react already write it for you. And it grade from the value attribute. Yes. But this one can be changed. Like you can be writing like a Pokemon here. Instead, this guy needs to change as well. So this is totally can be changed on the variable here. And here also we can change here as well. Okay. So let's say we change to Pokemon. But right now our comparison still compare with prop.value. So next step we will try to get rid of the prop.value that passing into list. So the first one we remove this guy from this. And also remove the value that passing into the list item here. And inside our list item, instead of use prop.value, we can use the Pokemon variable. Or previously it's of value, the variable name value. Okay. So just get rid of the value that passing from the props. Yeah. So basically we remove t part, the list, this one. And also this item and also the comparison here. Okay. Okay. Okay. Let's continue. Okay. So another, this one is kind of almost the last one already about react. So the last part will be about the life cycle. So right now you have understanding how your application flow, I guess. Now if you take a look at each component, they're going to be, we can divide them into three parts. The first time that your component is rendered on the screen is we will call it mouth. So why this one is important because react will know that okay your component is going to mouth in the first time. We will create the element, the real HTML element for you in the HTML side. And then after that, every time that like prop is updated, state is updated, it will only render, it will update it. It's not really remouting all the HTML. So it's just changing your value. And then after that, if your parent, like the parent of the component is decided to really like take your, just take you out, like not showing you anymore, we will call it unmouth. So this is all component life cycle, like it's like born and then get older and older and then suddenly after that you die. So yeah, but with this one, because you also, sometimes you also need to know something in the middle. Like you cannot only rely on the only already like before it updated. Sometimes we want to hook into the middle after it before between it updated. Like so we can compare between the previous data and the old data and then we react something. So with that, we can use another hooks is called use effect. So the example is, let's say we're going to set the document.title to be something. Every time we click on the button, it will create, keep setting the document.title. Okay. So this is another example. You don't need to add it up. Add it into your app yet. So the purpose of this, the first time that we call, we will call document.title and then zero and the first time. So this is happen with use effect. It's happen every time your component is re-lender. But it's not before the component lender. It's after. What does it mean? It's mean. So if you console lock here and console lock and then so A will not calling the same time as B. B will not call first. A will call first. So let's see this guy here. So you will see the A call first and then B call after that because use effect is like a callback for every time your component lender. Like after it return, after it already return, react already finished rendering. It will trigger the use effect function here. But why you need to do something here after it re-lender, right? Because usually you want to put really complex stuff after your UI already show it on the screen, right? If the UI show bank pay until your complex stuff already done and then it might be too late for user to see it. So usually you will render first and then after that, after your render finish, you do something. So in this case, we will set the document.title if I call that something. So it will show here. If you don't see the bottom here, it will show call zero. And every time that I click, it will increasing. Now six. Yeah, so this is a simple use case of use effect. So yeah, but more overuse effect is using in a lot of case. And what we will do right now is we will use it to fetch the Pokemon data. So to fetch it, we will use the fetch API by calling fetch and URL. And then it will return the promise. If you not really know about the promise, promise is like object that it will call the function then after it finish. So the promise can line a really long stuff like let's say one hour stuff. And then if it done, it will trigger the then and then call your function after that. And then why you need the promise? Because in the meantime, you can do something else, right? You don't need to wait for it to finish. Like loading the data is like take one second. You don't need to wait for it. You can just create a promise. And then if it already finished, it will trigger your function, the then function here. So this is how you fetching. But so we will create the screen on the left side here. If it's called out, you will see the Pikachu name and then the type of the Pikachu which is like thunder or something. Yeah. So again, we will use the Pokemon API to fetch the data. So I think in the example also do it already. The select Pokemon slash Detail. So if you change Detail to like something else, it will also return you the data, the whole detail of that Pokemon. And this one we will use for the types which we will just pay the type is right now. The Pikachu is electric. The order is like have other types from here. So this is what we will do. This is the example of the calling API. Okay. So let's try testing the fetch function first. So we will writing the fetch function inside the app.js. We will create a function called fetch Pokemon. And then the input of this function will be a name. So it will be a name of Pokemon. And we will call the fetch. So with this guy is quite tricky, but you don't need to import anything. It will already be there. So you just copy the URL from here, the Pokemon v2, and then Pokemon plus by the name. So with the fetch function, it will return a promise. So to get the value from it after it finish, we will just dot then. And then this function will trigger after it finish. And it will return the last one in the first argument. So yeah, last ones. Okay. And then we just try to call with simple Pokemon maybe did those first. So we did, it will execute right away. And after it done, it will console log it out here in the last one. But there is a bunch of detail here which we will not use. So to extract the data that you see here, there is another promise you need to call. It call, what you will do is the lesspond.json.then. And then we'll be a Pokemon. And then if we console log it out, it will be a detailed Pokemon now. Yeah, here. So this function is passing all the string into a javascript object. And then because it's a really complex computing stuff, that's why you need to return another promise for you. And to use it again, it's another then. Okay. And then if you console log it out, it will show the detail here. After you run it, sorry, to spawn this page, right? You right click on this and then click inspect. And then go to the console. It will come to this page. Okay. So is it empty? Then go to inspect. And then show the console. It will show here. After you refresh, you will see the object like this. Does it show when you write, does it make sense to show something? No. It's not showing anything yet. Okay. So before break, let's try to create another outside bar that is showing the Pokemon detail before break. Okay. So to writing it, just create another component. We will call it Pokemon component. Or maybe like Pokemon details also. Okay. Like Pokemon. And what we will show inside is name of the Pokemon. And then we will display all the type of the Pokemon types. So this is will be like the Pokemon we accept to think the name and the type as a props. And then we use the type to generate the UI from that. So we will enter our Pokemon here beside the list. And then the name. We are passing the Pokemon value inside. But this is not really complete yet. Because actually the type is not the data that we already have. We need to fetch right. But we already like writing the fetch function. We will copy this guy. And then use it here. And instead of we just fetch and then console log it out. We need to set inside the state of this component. So before setting, before able to use or set it, you need to create first. So just do it by create another new state value that it can be empty for now. Like empty object maybe now. And then this will be a Pokemon detail. Then set Pokemon detail. And inside this function, we will use the hook to able to fetch every time the name is changed. So this is our new line that we added in is a Pokemon component. Which will have a state called Pokemon detail. And we use the use effect to fetch. To trigger the fetch. And after the value is coming, we will call set Pokemon detail of the value that is passing from the API here. And this is new thing that you just passing this is called dependency. So it will trigger only when this guy change. So if the name is changed, we will fetch again. Just that. And here instead of using dot name directly because the first time right is not having any data. If you call Pokemon dot name directly, it will crash your app. So you need to check by check the value of the Pokemon to be not empty. And then you can call Pokemon dot name now. And same here as the Pokemon dot type. So verify a little bit. The double value. I think this guy is... Response you can see what it is. Can you log the response also? Yeah sure. It has only name. Oh I see. I think because it is object. Okay. Okay sorry for trouble. Okay so previously just some left friend that is not type dot type, it should be type dot type dot name. So it depend on the API less bond that we just need to go to the correct level of the API. So with this it should work. If you type the IV saw, it will show the IV saw here and then it will show the type of this Pokemon. And also highlight the list as well. Okay so actually after this we will break first. So you can catch up on this. And then after finish you can grab a coffee and some more food outside. Later shield. B15. Okay these will take a 15 minute break. Can be back at 5.35. Just one update. If you need to go to the washroom you need to go up to level 13. Because we close off level 10 just now. So help yourself to the coffee tea outside. Is there an explanation mark that you have lost? Let's say you have some value which is some string. And if you double explanation mark it will turn into a boolean. So right now it will return true. But let's say it will be zero. But after it will use the double explanation it will turn to false. Because the zero is equal to false. Or maybe some empty string is also false. Or now also false. But if it have a value like an object it will return true. It's not that. So it's zero on the empty string. It's quite like zero. It's like between the two Pokemon builds online. 1% and 1% Yeah 2% Okay so actually we run a little bit of time. Around time now. So this one is... So the proposal of next slide is also just create an infinite list. Like that I have the example. Okay but I think this one I also have a document writing inside our repo already. So you can take a look and then you can go through the step by step. So next one we will talk about like how to use the React Dev 2. So I think introducing this one make you more understanding about how it really work. So if you not really install it you can use my link inside my slide. Or also can search the React Dev Loppers 2 inside Google. The first one should be the home link that go into this home extension. And click add to home if you install it. So to use it you open the inspector mode. And then inside of... So when you start right you will have two more tabs. And if it not showing, usually it will show around here. So you can click on that place. And also it will show this kind of screen. And so we look like this. So this is instead of your need to go through how your home link is rendered and then debugging. So with this it will show how React already render your home link. So your app function have a dip. And then inside our dip have a header and then the list. And then there is a Pokemon. And then the list have a lot of list item. And in each list item have a li tag. And then inside have an image. So this is much more I think is easier to debugging. Because you can also see through the list item that can watch prop that passing into that. So let's say something is missing. Like your Pokemon doesn't show up. So you can see now that the prop is now hello. And the state is now. So if you start typing it like I saw. Now the prop should be I saw here. And then after it finish the fetching the state should be an object. And you see here like the what is the object that is inside that tag. By using the developer tools. So in case that you have some crash. You can also see to like okay because I'm refer to the wrong object or the object is somehow empty at that moment. So this is how you use the report to the first tag component. And it's also highlight like what is this showing this what is really the UI that matching this. And the next one is also really nice is called profiler. So this one will do a profiling on your application. Simply start by kick the profiler start profiling. And then you do some interaction like remove and then typing something. And kick here to stop the profiling. So this will show like a graph that which one is the rendering. Like how is really lender like this state as only lender the Pokemon. This one is the lender and also you can inspect like what is changed. Like here is like hook change or something change. So this is to use case of the developer tools. But most of the time is like the this page is really like really handy for you guys to to debugging. Like C2 the prop is already very good enough. So if you have some issue on this like why it's not showing you can also download this. And then you will see that okay this pop is now that's why it's not showing. Okay so this is the how are you using the profiler in the reactive tools. So this one the next thing is like asset and style. Because actually I would say this one is almost after you implement of this is almost complete of your application already. Like to make it look like to make this one turn to the pocket X that I showing is just putting more style into it. So how before you adding the style let's change the Pokemon the header here into an image. So let me find my slides. So I already have the image. So to use the image you just call import and then dot slash like actually it's just how you find the image like image dot SVG. And then import it and then use inside the image tag source passing it directly. So this one is not provided by the app but this one is provided by the query app that you're using. So you can import image directly and then put into the props here. And then if you show the tag. So this one is my logo that I using in my application. And next one is a styling. So to styling you usually just use CSS. You cannot really write if you refuse to writing CSS you not really able to create your app like that. So but the problem of the CSS is it's this global CSS like you're writing it anywhere. You just apply to whole page and it's have a chance that you can collide in the class name of the CSS. It can collide with somebody that writing something inside your page as well. So which is why there is a library called CSS module that turn the global nest of CSS into the localized one. And it's also why you can also use directly inside this the query app. So to use it you just import it right away like this like but the file need to be dot module dot CSS. So with this it will turn your let's say you're writing the dot screen and then back out straight right. It will the s that you import from it. It will be an object of and some like time formation of the name to some Pokemon dot screen dot some random string. So with this this can make so if you're using this it will always refer to your styles. It will not refer to anybody else. So this one we can just go through like how it works. So this is my compete level like how it really done. So you will see here that I import the Pokemon dot module dot CSS right. And our Pokemon dot module dot CSS is just writing the class here. And let's say we I want to apply the class name called container inside. So usually you just call the container as a class name right to apply the style into that object. So instead of that you just call s dot dot container instead. Because because as we return some normal some name name space plus your style. So with this is make sure that you can refer to your correct style like no one will be like have a same name as you. Okay so actually the main thing that I done is come from this CSS which very handy is just have a very nice 8 bit pixel for you. So yeah it's actually almost everything is already done like the button the mouse also change the also have a container as well. So you just go ahead and then go to the read me inside the lead me you see the link here. So you just copy the link here and then inside your application in the app dot CSS. I mean I know in the index of CSS you just import by using this like URL instead. Like with this it will import your CSS and apply your to your application directly. And after I think if you're adding this line you will see something change on your site now. And what I just need to do is like apply some fun and then apply the style of the next table to make it show see me use the to use the CSS that I just imported. Yeah so actually let me try run it. Okay so with this is just a CSS like to to draw this guy it totally a CSS like some of some box with some color and then have a border that is a pixel. So that is always CSS but the main main point is you be able to build the data and get the data here. Like if you click the charm in there it will set the state and then show here. So yeah so it's about time and if you guys have a time you can also put some effort to writing this page as well. It take me like two or three days to do this. Yeah so this is a challenge for you after this. And also and the last thing is how to like make everyone know your that you're building this right. So I so luckily we have the. So what you need to do is just let's say if you want to build up you just call npm dot build npm build or young build. It will generate your app from the because I already say like the the the language that you write is a JSX. It's cannot be run in the browser. You need to transform it first. So with calling the build it will turn from there and then save into somewhere. But with native file is make it easy. You just go to native file. Make sure that you have a git repository. You upload it into the git and you log in with the GitHub. It will show like you can create a new site with git call git. It will like have some authorization inside git and then it will pull all the label that you have. Let's say you go to take ladies and then bootcamp and then yeah. So this one you don't need to type any command that if I already detected for you. So you just click deploy the site. It will deploy the site to and then give you a URL. So this one also really easy to do. Like just go to the step that identify toad. So technically you have a site online after this. Hopefully. Thank you. Put it here. Thank you Nat. All of them. All these goals of it okay? Alright. So okay. So as usual I really appreciate if you would help us with a survey or so. That would help us in our future events. And if you are looking forward to any other topics or so. Next comment please. Alright. And also can I request a group photo? Yeah. This is our last three who can go shop now. Yeah. All in front? Okay. Everyone comes in front. I think. Yes. Everyone come to the front. You will do this backdrop.