**Using React Memo and Use Callback Hooks**

In this article, we will explore two powerful hooks in React: `useMemo` and `useCallback`. These hooks can help optimize performance by memoizing values and preventing unnecessary re-renders.

**Introduction to React Memo**

Let's say we have a function that calculates the most expensive shoe. This function is called every time we update the state value, which can be time-consuming. It would be nice if we could remember this value and only recalculate it when our data changes. This is where `useMemo` comes into play.

We need to create a variable in this case, so let's rename it to `mostExpensiveShoe`. We'll use the `useMemo` hook with a callback function that returns the result of calling the `calculateMostExpensiveShoe` function. The dependency array will contain only the `rawDuct`, which means the memoized value will be updated only when the `rawDuct` changes.

If we add the `mostExpensiveShoe` variable to our component, it will still display the same value even though we've changed the products. This is because React uses memoization to optimize performance by caching values that don't change. So, instead of recalculating the most expensive shoe every time, we store the result in memory and reuse it when the data changes.

**Use Callback Hook**

Another use case for `useCallback` is when we're fetching data from an API. Let's say we have a function called `getProductYear`, which fetches the year of product from an API endpoint. React warns us that we need to add this dependency to the `dependencyArray` in the `useEffect` hook, but if we don't, we'll create an infinite loop.

The reason for this is that `getProductYear` calls itself recursively, which can cause the component to re-render infinitely. To solve this issue, we can use the `useCallback` hook to memoize the `getProductYear` function and only recreate it when the URL changes.

We'll wrap our `useEffect` hook with a new function that returns the result of calling `getProductYear`. This way, React will only re-run this effect when the URL changes, preventing an infinite loop. By using `useCallback`, we've optimized performance by avoiding unnecessary recalculation and reducing the risk of infinite loops.

**Conclusion**

In conclusion, `useMemo` and `useCallback` are powerful hooks in React that can help optimize performance by memoizing values and preventing unnecessary re-renders. By understanding how to use these hooks effectively, developers can create more efficient and scalable applications that respond quickly to user interactions and data changes.

"WEBVTTKind: captionsLanguage: enHey, what's up, it's john from coding attic.And welcome to react tutorial video, wherewe're going to take a deep dive into awesomeworld of react, we're going to start fromthe very scratch. So think setup, installon general concepts, and slowly but surelymove towards more interesting and more complexreact topics, like react hooks, context API,and react router, just to name a few. So bythe end of this video, you're going to havea good grasp on how to use react for yournext project. As a side note, I'm currentlyworking on additional react projects video,where we'll put all of our tutorial knowledgeto good use by building bunch of cool appswith react. If you'd like to see some of theprojects we're going to build, just head onover to react hyphen, project dotnet, we'llfind that app and look for a video link indescription. And lastly, both videos are partof my react course, where we build even morecool and complex projects using react. Andif you're interested, you can check out thecourse at John's milgard.com. Alright, andwelcome to the course. And we're going tokick things off by quickly covering what inthe world is. And there's no better placeto start than the official docs for me, bythe way, are located at react js.org. Oncewe navigate there, we are greeted by thisone profound sentence. React is a JavaScriptlibrary for building user interfaces. That'sit My friends, not a PhD dissertation paper,just a short, concise one sentence explanation,while I'm a big fan are straight to the pointanswers. And the first one, by far sums upreact the best. Let me elaborate a bit onthat. So react was developed at Facebook in2011. And currently, it is by far the mostpopular years you heard correctly the mostpopular JavaScript library to build user interfaces.As I know, some of react competitors are Angularview, as well. If there's one thing that Iwould want you to take away from this video,is this one. When it comes to react, it'sall about components. You can think of componentsas independent chunks of user interfaces.components can be as small as one HTML element,or you can be a rebel, and jam your entireFacebook clone in one component. At the endof the day, a lot of it depends on your needsand wants. In reality, though, you probablywill avoid the one component route. Sinceit's somewhat defeats the purpose of usingreact in the first place. You see the benefitof the component is that you can build a bunchof independent, isolated, and most importantly,reusable user interfaces that you can runpiece it together, just like Lego blocks.And as a result, build even super complexapps without going insane. While your appcan have as many components as you'd like,it will always always have at least one calledroot component. We already glossed over ita bit. But just to reiterate the major benefitsof using components and essentially, react,develop your next app or phone, you can buildindependent pieces of user interfaces, meaningchanging logic, or layout in one combinedwill not break your OLAP once component isready to go, you can reuse it all throughoutEurope. But component code is still storedin one place. So if you ever need to makesome changes, you don't have to run aroundlike a headless chicken, simply locate thecomponent, apply the changes, and all theinstances will be automatically updated. Andof course, let's also not forget about speed.You see behind the scenes react is using somethingcalled Virtual DOM, where only the componentthat needs to be updated, is affected. Andwhat's really cool, it's done without re renderingthe whole app, which in turn, of course, increasesthe speed of your final product. And as aresult, the user experience as well. BeforeI let you go, I also want to show you somewhattypical example that everyone uses to showreact components in action. And that is noother than our beloved Twitter. So as we'relooking at the screen, and by the way, I cansee you getting distracted by my content wefocus people focus we We are here to learn.Where was I? Oh, yes, the components. Let'stake a look at the sidebar. And as I'm workingon it, I can see a bunch of words. Or youprobably notice that each link is pretty muchthe same structure, where there's some kindof icon as well as a text. So essentially,what we could do is set this up as one component.And what that means is, we'll just set upa structure, and everywhere where we wouldwant to use it, we will just need to passin the data. And by data, of course, I mean,the specific icon, parent is going to be render.And then of course, the text.As a result, what that also means that I canreuse that component, all throughout my application,however, I would like. But if I would wantto make some changes, for example, if I wouldwant to add something here, I can just changeit in one place, and then all the instanceswill be automatically updated. So that wouldbe a lynx example. And you can probably alreadyguess, the same, for example, would work witha post. Because when we're looking at thepost, what do we have, we have some kind ofpicture, we have the name, of course, we havethe text, we have all the retweet options,as well as likes the comments, but the onlything that is changing is the data. So theperson who is posting and how many likes,that sort of thing. So the point that I'mtrying to make is that as you're looking atthe application, you can see a bunch of placeswhere we can set up a react component, anduse all the awesome benefits the componentsprovide. Before we go any further, let's alsocover the main goals of the course. And Ihonestly there's only one or the other, thecourse out wants you to be comfortable withreact. Now what that means to me is that youcan do two things. First, you are aware ofexternal resources. And more importantly,you're comfortable with using them. When you'dwant to learn something new about react. Essentially,you know where to find useful info. And second,you are comfortable applying theory to practiceby building your own project using react.Now goals are nice. But what is my plan toget your answers simple. By building bunchof projects using react? You see the coursegoal is not to cover every smallest aspectof react ecosystem. Since it's impossible.A course that covers everything that thereis to know about react doesn't exist. Whilethe core API of react is actually quite small.Since it is by far the most popular frameworkout there, the ecosystem surrounding reactis as vast as you can imagine. What that meansis that essentially, there will be alwayssomething new to learn about react.That's why I would suggest adopting a studentmindset instead, where you're always opento expanding your react knowledge. In my experience,the best way to learn and get comfortablewith language or framework is by buildinga bunch of projects. So that's exactly whatwe'll do during this course, we'll start small,our first project will be somewhat silly,but slowly and surely, we will expand on ourknowledge. And by the end of the course, youwill be comfortable building your own complexreact apps, far as the core structure, we'regoing to start by setting up our dev environment.So think text error browser, or basic terminalcommands, and etc. Followed by extensive reacttutorial, during which we will build alreadysome small project to enforce that particularsubject matter that we're learning. And oncewe're done with the dorial, we'll simply putour heads down, roll up our sleeves and builda react project. like there's no tomorrow.How does that not the very end of the course.We'll also cover Redux and why it is usedwhen I'm fully aware that the first part thesetup part might seem tedious, boring, andmaybe even unnecessary. Please keep in mindthat it is extremely important for me thatall of us are on the same page. And don'tworry, we'll get to react in when it comesto course requirements. It would be extremelybeneficial. If you would be familiar withHTML, CSS, and most importantly, JavaScript.I can honestly say that the more JavaScript,especially iOS six, you know, the easier isgoing to be pick up react. Because at theend of the day, React is just JavaScript.So if you're familiar with things like spreadoperator are all functions, destructuring,etc, you'll be in good shape. Now, it's notthe end of the world if you're still gettingcomfortable with JavaScript. Just keep inmind that once in a while, you will have todo some extra studying, since it is my assumptionthat you are familiar with JavaScript topics.And while I will try to cover as much JavaScriptinfo as possible, please understand that atthe end of the day, this is a react course.Now, if you need to brush up on your JavaScriptknowledge, or if you'd like to find out moreabout specific JavaScript topic during thecourse, I would suggest utilizing my YouTubechannel, coding ionic, more specifically playlistcalled JavaScript nuggets,where we cover react specific JavaScript topics,I'm constantly adding new topics. So whileat the time of recording, there are only threevideos, by the time you'll be watching this,there will be more. So again, the channelthat you're looking for is coding out. Andmore specifically, the playlist name is aJavaScript nuggets. So the way it works, asI'm recording the course. And once I hit aspecific job topic, or example map, or uniquevalues, or dynamic object keys, I will createa separate video about that, just in caseyou'd want to find out more about the topic.When it comes to our dev environment, we willneed the following tools. No GS installedon our machine web browser, I would suggestGoogle Chrome. But technically it is optional.As long as you have a web browser, you'llbe good to go. Just remember that once ina while, your results might differ. Becausethe browser that you choose if it's differentbrowser other than Google Chrome, maybe Idon't know displays CSS a little bit differentlythan a text editor. Again, I would suggestVisual Studio code, but we all have our preferences.So no hard feelings, as well as react developertools which are not required, but will improveyour dev experience in the long run. And Iguess, let's go down the list. And first one,we have a node. Now in order to check whetheryou have node installed already on your machine,you know, thermal, you need to run a node,and then dash dash version. So you'll seewhere in order is installed. And if it's successful,it will also tell you what is the version.And then if you don't have it installed, thenit's probably gonna say something along thelines that he cannot find the command or somethinglike that. Where you're shooting for is atleast 5.2. or later, we will use a packagecalled create react app. And more specifically,we'll use NPM. install it. And that comeswith a version of 5.2 minimum. Of course,if you have a higher version, that is evenbetter. So in order to test that out, I'llnavigate right now to my terminal on massivelyzoom in just so you can see what is happening.We type here node dash dash version. So ofcourse, it's bits back then I have version12. Okay, so I'm good to go. Now, if you don'thave node installed, I would suggest navigatingto node j s.org. And of course, you can justget there by going to Google and typing node.For example. Here you can say node and ofcourse, the first link that's going to moveup is going to be node js.org. And they willright away detect which operating system you'reusing. So in my case, that is Mac, and thenI would shoot for long term support option.So click it over here. And you'll get yourselfnow Now I'm not going to install it sinceI already have it on my machine. And alsois just clicking bunch of checkboxes. Thenwe have Google Chrome. So again, if you don'tgo for Google Chrome, I'm on one of the firstlinks is going to be to a page where of courseyou can download chrome when we have VisualStudio code. Same deal. Just look for VisualStudio code is a awesome open source texteditor from Microsoft. That is just amazingas far as the development experience, onceyou go to their site which is called VisualStudio Yo yo.com, again, they will detectwhich operating system you're using, and youcan right away, get yourself a nice freshout of the oven copy of the Visual Studiocode, then we've got a react developer tools,then just look for them, one of the linksis going to be right away to the extensions.And then of course, in my case, I alreadyhave it. So I would need to remove it. Butin your case, if you don't have it installed,then of course, you'll have Add to Chrome.So you add an extension. And what you're lookingfor are the components and the profiler. Keepin mind that of course, if for example, youare at the page that doesn't use react, andof course, it's just gonna be gray, what I'mtalking about this little icon, notice thisreact developer tools, when essentially it'sgoing to be gray. However, if the site isusing react, and of course, you will be ableto see it. And then once you open up the console,so of course, you can either do it with ashortcut, which I believe was option command,and I, and there it is. And what you're lookingfor is this profiler, and components. Again,I'm not going to look at them right now, becauseit's not gonna make sense. But eventually,as we're progressing with the course, youwill see how react developer tools will makeyour life a little bit easier. As far as workingwith a react application. As far as my specifictext on our setup, meaning what extensionsI'm using, which ones I would suggest usingduring the course as well, as well as my settingsJSON. I'm not going to cover them too muchin this video, because essentially, I don'tsee the point. Once we start building theReact application, then one by one or I'llset up a separate video, where essentially,I'll show you all the expenses that I wouldsuggest getting, and also what settings, wewould need to set up in our Visual Studiocode in a text editor. Now, if you are impatient,and if you'd want to see all the extensionsthat I'm using, as well as my settings, youcan just navigate to my GitHub handle is johnhyphen smelter on the report in the journalreport is VS code setup. And here you'll findall the extensions that I'm using, as wellas small description, and also my settingsJSON. Now again, let me reiterate a littlebit later in the course, I will cover whichextensions are crucial for you to follow along,meaning which will make your life much easieras you're working with react, and also whatsettings you need to set up in your settingsJSON. But if you'd want to see them rightnow, everything that I'm using, even thoughsome extensions are not required for discourse,then again, navigate to a repo, which is johnhyphen, smil. And then VS code setup. on here,you'll find my settings JSON, as well as allthe extensions that I currently have in myVisual Studio code. Hopefully, everyone wassuccessful setting up the dev environment.And now we can move on to the next phase ofour setup. Normally, this would be the pointwhere we download and examine create reactto horror, there's something that I wouldlike to cover first, and that is no otherthan the scary terminal, some of its mostpopular and used commands. You see, even thoughthis is a react course, we will use commandline on NPM during the course we might aswell get some basics out of the way. Now ifyou're already comfortable with terminal andNPM which by the way we'll cover in next video.Feel free to skip these videos. If however,you are seeing the scary terminal for thefirst time. Hopefully you will not feel thatway after watching this video. Please keepin mind though, we will just cover the basics.So if you'd like to learn more, I would suggestutilizing endless YouTube videos and mediumblog posts about command line and its commands.First question coming out of your mouth isprobably along the lines oil waters terminal.Why would want to use it for your sake. Ifyou're watching this course it is safe toassume that you have successfully tackledthe graphical interface or at least the basics.The Goj what is going well it is this Noticethe icons were confined more commands alongthose lines. Now what are we can also do iscontrol our computer, not just using the GUI,the graphical interface, but also the commandline. And that's where the terminal comesdown. I fully understand that the first timeseeing this is scary, don't worry, it is notas bad as it looked like. The first commandthat I want to look at is B WD, which willshow us a full path name to a current directory.So where are we at as far as our machine inthe terminal, so we're just type B, WD. AndI can tell you right away that we will bein the road. By the way, you can notice thisby this little symbol. Okay, so now, where'smy road, it is Ford slash users. And thenFord slash my last name. So that is my rootdirectory. Now, if I want to see what directoriesI have in a folder, well, I just go by LS,and this is gonna spit back what directoriesI have, in my root directory, multiple mypoint, I'm going to navigate to my hard drive,man, I'm looking for two users. And I'm lookingfor my last name. And there it is. And nowyou can clearly see that I'm not making thisup. I'm in the road, right now in the Finder,as well, in my command line. Now, if I wouldwant to navigate to a specific folder, wewould need to type cd, and then whatever foldername. So in this case, if I would want tonavigate to a desktop, or just need to writethis top knot, now, of course we navigateto understand. And I can clearly see thathere as well. Now, if I would want to navigateone level up, basically back to a parent,I would need to go to CD, and then dot dot.Now of course, you can again, see that I'msitting in the room. So if we want to navigateback to the desktop, again, we will type cddesktop, or also remember that we have optionof using arrow key up or down where we canlook for previous commands. So if I'll justpress the arrow key up, notice this will giveme the last command, which of course, is navigatingback to the parent. However, if I press itone more time, this will spit back the CDdesktop. So of course, I can run the commandagain, by pressing return. And of course,I'm in a desktop. Now, once I'm in the desktop,if I run LS, you'll notice that technically,it doesn't return anything because of course,my desktop is empty. However, there's goingto be may be some cases once in a while, whereyou would want to also check for hidden folders.Most likely in our course that is going tohave to do with Git. And in that case, youcan run with LS,iPhone and a. So this will also show you hiddenfolders. Now that is a little bit out of thescope of the course. So don't worry aboutit too much. We're not going to use it thatoften. But once in a while, you maybe wouldwant to just double check whether there isa gift as far as your folder structure. Now,once that is done, why don't we create a newdirectory. And to do that we would need torun MK the RTR. so here we can clear the console.And by the way, for that we have command ofclear, so we can clear the console. And nowin the desktop, I'm going to make a new directory.And I'm just going to call this testing. SoI'm going to go with MK dir testing murders.Now of course, I have my testing folder. Nowin order to navigate to that directory, again,either I would need to run CD and man pursething. Or there's also another option whereI can just type cd event space, and just grabthis particular folder. So just drag and dropover here. And now notice how it right awaytells me that I would navigate to users thansmellier than desktop testing. So once I pressover here, notice how I'm nicely sitting inthe testing folder. And what else we have.We have city CD now that so that's going tonavigate again to a parent and clear in theconsole which already we have covered. Sonow let's set out how we can navigate outsideof course again, where we go with CD, Amandaagain, we're sitting in desktop. So thosewould be the basic commands on the terminal.And hopefully you don't feel as scared asyou did in the beginning of the video, whenwe install Node, we also automatically installNPM or node package manager. The reason whyit's so useful is because NPM allows us tosave time, automate our tasks and avoid reinventingthe wheel. We do that by installing packages,or dependencies. packages can be as simpleas utility functions, and as complex as fullblown frameworks. And everything else. Ofcourse, in between, keep in mind that thepackage we are going to use later, the Createreact app already does all the heavy liftingfor us under the hood. So this video is justto give you a general overview. And for themost part, you'll be just hitting NPM starton a keyboard for the remainder of the course,a command that will cover a bit later in thecourse, as far as general NPM commands, wehave NPM minute, where is going to createpackage JSON. So essentially, the manifestfile for our project, we're also will seea list of dependencies, then we can installpackage by running NPM, install a non packagename, and then we would need to run the dashstep. Now as far as does their save in thelatest versions of node, you already don'thave to run that meaning this would just saveit to a list of dependencies. Or like I said,in the latest versions of node, you don'thave to do that anymore. Now what I've noticed,though, that once in a while students askthe question, and they share the project.And then I can see that they have been usingolder version, and they have not been savingdependency. So in order for me to run theirproject, I still need to install those dependencies.So as a safeguard, I would suggest alwaysusing bash, bash, bash, save, just in case,I don't know, maybe your node version is outof date. Now that is going to install thatpackage locally. Meaning in the project runner,we also have the npm install, package name,dash global. Now that is going to installthe package globally. And we can act anywhere,or it comes with a gotcha where when you'redoing the global install, most likely you'llbe asked for permission. And of course, don'tworry, I'll show you that with our example.And lastly, we also have an option of installingpackage only while we're developing the flagwould be nice dash, save and then dash F.Now what would be the most common one, I don'tknow, maybe testing. So essentially, we onlyneed that package while we're developing,then of course, we're just using it. And thenonce we ship to production, we don't needthat package anymore. So remember that testingfolder that we created. So now let's try somethings out. What I'm going to do is firstcourse zoom in, in my terminal. And then ofcourse, I would want to navigate there. SoI think the fastest way will be just dragand drop. Now, of course, I'm in my testing.And remember, first would want to create thatmanifest Well, again, something that createreact app package we're going to use doesalready for us. So this is just to showcasethe general setup. And in order to get ourmanifest file, we'll just run NPM in it. Now,there's a bunch of questions there. So ifyou would want to meet that you can just gowith dash y, or in my case, I'm going to gowith NPM in it and create a question. So inthis case, what would be the package name,I'm going to call this app version. And asyou can see, I can skip them if I want to,since again, this is just to showcase howit's gonna look like. I'm just gonna skipthem by pressing Enter. And this shows whatI'm going to currently have in the packageJSON. So of course, I'm going to say yeah,that that looks okay. So so yes. And now ifI check out my testing, I'll have the packageJSON.So let me open my text editor here. I'll justdrag and drop testing, just so you can seethat of course, I have my package JSON. Andthere it is. So apt nine version description,what is going to be the entrance file, sothe main file, and I'm just curious, it isindex JS that is by default, of course, wedon't have the index js. And then we havescripts and author. Now scripts is an interestingone because with create react app, like Iwas saying, the script that you'll use mostis going to be NPM start. So essentially,these are just commands that you can run Nowlet me showcase how we would install a package.And we can do it directly from the text editor,or we can do it from the terminal, pleasekeep in mind that as long as we're sittingin the same folder, it doesn't matter. Andthat's one of the reasons why I like VisualStudio code. It comes, it comes with integratedterminal. Now how we can access integratedterminal in Visual Studio code, we go withcontrol until then, and notice here all theway in the bottom, I have the terminal. Andwhat's really cool to notice out right away,gonna be in the folder. So it's not like ourspecifically need to navigate there, justlike I would do in the terminal. In this case,when I'm opening up the integrated terminal,from the Visual Studio code, I'm right awayat my project. So I'm in the first thing.Now, of course, I would want to install firstdependency. And I'll just randomly installbootstrap. So we'll go with NPM, install,and then whatever is the package name, soI know that it is bootstrap. And then likeI said, just in case, I'll run dash dash save.And what you'll notice is that of course,we're installing dependencies. And the momentI do it, notice here how I have early property.and the value right now is bootstrap. So nowI installed this dependency. And of course,I can use it locally. Now what you'll noticeis that we have node modules, this is goingto be a folder, where we'll have a list ofour dependencies. Now at the moment we havebootstrap. But then again, once we start usingcreate react app, you will see that of course,since it is a bigger package, it uses moreand more dependencies. So our node modulesfolder is going to be way bigger. Now, asa side note, when you're sharing this, forexample, when you're adding this to a GitHub,your folder, you usually just add packageJSON. So essentially, you wouldn't share nomodules, because usually, that is a massive,massive folder. So much more easier way isjust adding everything forget, but not thenode modules. So essentially just a packageJSON. And then once you clone or fork, ordownload the folder, what you can do is justrun npm install, which installs all dependencies.Don't Don't worry, of course, we'll coverthat a little bit later in the course, becausethere are some projects that are already setup for you. So the only thing you will needto do is just follow the link to the repo,get it. And then once you get the link, meaningonce you clone or fork or download, then youjust need to run npm install. So this wouldbe for the local package. Essentially, onceI've installed bootstrap, now I can startusing it. However, remember, I also said thatwe can use global packages correct. Now, Ican install global package from the integratedterminal. Or I can do it again from the terminal,that's up to you. The difference is that ifyou install package globally, you can useit anywhere in your machine, meaning you canuse it on the desktop, you can use it in theproject, or whatever. Now again, the gotchawith a global install is that it is goingto be asking for permissions. So in this case,you know what I'm going to go to terminaljust to showcase that, for example, I wouldbe installing a Gatsby CLR. From the remember,this was a root folder, and the name was npminstall. And then I go with Gatsby CLR. Andthen I need to go with dash G. Again, youdon't need to run this command. This is justto showcase that if you won't have permissions,which at the moment I don't, since I'm notrunning sudo, then of course, I'm going toget a big fat. And there it is, of course,like I was saying we get a bunch of errors.So again, in order to omit that, we wouldneed to add sudo. So I could go back to myprevious command. And I would just add sudohere. And then once you're on of course it'sgoing to ask for your password. So you wouldneed to add your password. And then once youdo course you just press enter, and then theinstall is going to be successful. So that'sthe general overview of NPM. How we wouldinstall locally and how we're set up globally.Again, when it comes to create react app,it does all the heavy lifting already forus under the hood. So the only thing we'llreally need to care about is just checkingout the scripts. So essentially the scriptcommands that we have. So now we will knowhow to set up the dev server and also wantsto know While Of course, we will install somepackage locally to our project, whether thatis bootstrap whether that is react icons orsomething along those lines. There are manyways how to set up react application. By farthe easiest and fastest would be using createreact app, which is built by Facebook developers.And it allows us to just focus on buildingour apps, instead of spending our precioustime on tinkering or a configuration and buildthose. If you're interested in finding outmore about the package, just type the namein search engine, and look for the link inthe repo. I would like to re emphasize though,technically, you don't need to use createreact app to work with react, you can buildthe whole setup yourself. But trust me whenI say that, in the long run, create reactapp will save you a bunch of time, as wellas some sanity. Because while tinkering withWebpack sounds a lot of fun in the beginning.In reality, it can get nutty, pretty, prettyfast. Under the hood, create react app usesBabel, and Webpack. And while we're stillon a subject, let me just quickly cover themas well. So a Babel is a JavaScript transpilerthat converts the newest JavaScript into thegood old JavaScript. So we're going to useall the newest features of the JavaScriptlanguage. So think things like print operator,destructuring, and all the other goodies thatcome with air six. on behind the scenes, Babelwill turn into ears five, which in turn, willmake sure that our app runs smoothly in theolder browsers as well. So essentially, wecan have our cake and eat it too. Well, webpack does a lot of other things as well. EssentiallyWebpack works as a module bundler, the mainfeatures of Webpack would be bundling ourresources, watching for changes, running Babeltranspiler. In order to bootstrap a freshinstance of react app, they suggest usingan bx. So essentially, we won't need to installtheir COI tool on our machine, which is asetup they had before. And as a side note,that's why our NPM version needs to be atleast five point to change we do want to useand be thorough, while we're still on subject,their previous setup was that we had to installthe COI to the Create react app global arenow they switch to NPM. And they're also suggestingthat if you have already installed the Createreact globally, so for example, maybe youwere watching some other tutorial and youalready installed create react app globally,very suggest that you are installed. So youneed to run this command the npm install gcreate react app to uninstall the CLR. Becausethat way, it ensures that NPM uses alwaysthe latest version. Now I already did that.So I'm good to go. We're only looking forthis command. Now you can grab the whole thing.That just means that your app will be calledmy app. In my case, I'll just copy and PXcreate react app. So I'm going to navigateback. And by the way, if you want to checkwhat is your NPM version, same as with node,we just run NPM and there's dash version.And of course, I can see that I have six point12. Now at this point, I would want to navigateto a desktop, make sure you copy and pastemy command. And once I have command in place,I just need to come up with a name of my folder,and markers. I'm going to go with the tutorial.And you'll see how the Create react app startsbootstrapping your react application. Nowit does take a little bit of time. So I willstop the video. And I'll resume it once allthe dependencies are in place. And once createreact app is done, installing dependenciesand essentially setting up a ready to go reactapplication. We can see in the terminal. Therewe have quite a few commands that we can use.Now again, as we're progressing with tutorial,don't worry, we will cover other ones as well.But for the time being. The one that we reallyneed is the NPM start, which starts the developmentserver now Let me tell you right away, thatthere are two places where you can run thecommands. So essentially, start up the devserver, or build the production ready application,or, for example, install the dependency andan extra dependency, for example, React icon.And these two places are following where Ican run all my commands. In a terminal. However,I just need to make sure that of course, I'mlocated in my folder. So for example, in thiscase, I would need to navigate to tutorial.And then I can run, for example command ofMPM start, the other place is going to beour text error. Now, I'm going to run my commandsin text editor in the integrated terminal.The reason why I'm showing RBIs is once ina while, some students who use Windows havecomplained that unfortunately, when they runtheir commands in the integrated terminalin Visual Studio code, they're getting someissues. So just keep in mind, you don't haveto run your commands in integrated terminal.Now, of course, I will do that throughoutthe course, because I'm not having any issues.Once I do that. However, if you do, just rememberthat you can always set them up in your terminalas well. So in my case, I'm going to dragand drop my application. And then I'll rightaway, set up side by side a browser, becauseof that, just how I prefer while I'm developing.So this is going to be a fresh instance ofthe browser. And this is going to be our project.Now, don't worry, in the next video, we'lltake a closer look on what is our folder structure,what essentially we can find in the freshinstance of create react app. However, fornow, I would just want to spin up my bearserver. So like I said, I will open up theintegrated terminal with Ctrl tilde. And thenwe run NPM.start and run localhost 3000, we're goingto get a brand new instance of our application,essentially, we'll see what create react appcreated for us. Now, you see that we havesome logo, we have some text. And like I said,In the next video, we'll take a closer lookat the folder structure. But for the timebeing, I would just want to showcase thatthe way that their server works is each andevery time we'll make some change, if thereis no error will automatically get the latestversion of our app right away in the browser.So for example, if I change the text in theapp, and again, you don't have to do that.But I'll change the text from the paragraphto a Hello World. So whatever I have overhere, I'll just change to hello world. Andyou'll see the moment I save i right away,get the latest version of my app in a browser.So create react app does this cool thing ofhot reloading, where essentially every timewe'll make some changes, unless we have somebugs, meaning some errors than it right away,restarts the application for us. And beforewe go any further, let me just give you abrief overview of the folder structure increate react app. And I must warn you thatthroughout the video out probably you menzoom out quite a few times. So up on the top,we have a node modules. Of course, this iswhere we have all our dependencies. So ifyou remember previously, when we installedbootstrap, we essentially had only one folder.Now, of course, since the dependencies thatour project has have their own dependencies,while our node modules folder, of course isway, way bigger. And of course, this is whywhen we'll be setting up our source control,we will ignore this folder. Now before wego any further, I just want to show you acool thing, how the package JSON works togetherwith node modules. Please keep in mind thatis not unique to create react app. But I thinkit's going to be a very useful info. So forexample, if I navigate to package JSON, wealready know that of course, this is goingto be our manifest file. And in here, as youcan see, these are the dependencies that weare using in our project. And then of course,in order to start up our application, we willneed to run NPM start. Now what if I deletethe node modules? What if I say you know what,I don't need this particular folder. Okay,I've deleted now in order to stop the devserver And what you're looking for is control.And see, that is going to stop the desert.Now, of course, once I refresh, notice, I'mgoing to get a big factor. Now I'll try torun NPM start. But of course, I should geta error. Why? Well, because I don't have mydependencies anymore. So if I run NPM, start,I will, of course, get my big fat error. Now,do you think everything is lost? And of course,the answer is no more we would need to dois run npm install your list, of course, we'lljust check that in the package JSON, we havea list of our dependencies, and it will justinstall for us. And the moment we run npminstall, this will install all our dependencies.And again, we're good to go. And this is exactlywhat I was saying in previous videos, whereonce we get our project from the GitHub, whetherwe clone it, whether we fork it, whether weare downloading, well, of course, we justneed to run npm install, because list of ourdependencies are going to be there. So that'swhy of course, we don't need to share ourproject, meaning we don't need to share themassive node modules folder. So in this case,what we can do is just run NPM start, andeverything will run exactly like we expect.Because of course, now of course, we installedall our dependencies back. Now after that,we have the public folder, where we'll findindex HTML. Now, this is the index HTML filethat is displayed over here. So I can tellright away that all of our work will do ina source. But there are some few useful thingsthat we can do in the index. html, for example,we could change the title correct. So at themoment, I have react app, but I could go withreact tutorial, and don't be scared of thisfile is just like a regular HTML file thatwe have worked already before. And if you'relooking at the syntax, it also resembles everythingthat we have seen already in the HTML files.Now what other useful things that we can doin the index HTML? Well, we could add Googlefonts, because like I just said, The syntaxwould be exactly the same, like we have beenusing already in the indexes journal, or thefont, awesome icons, or things of that nature.And then, more importantly, we have all here,this div with an ID of a rope. And I knowit sounds mind boggling at the moment. Butthis is where our whole JavaScript applicationeventually is going to live. I know soundsreally mind boggling at the moment. But don'tworry, of course, I will swing back to theroad more. And we cover some basics of theReact setup. So that is going to be indexHTML in our public, then we have a folderthat we currently don't see. And that is thebuild one. Remember, in the package JSON,we have the command of start. So that, ofcourse, starts the dev servers. Now let mestop it. We also have a built unless commandessentially sets up a production already builtwith mirror on it. And then of course, I'llshow you. So NPM, run build, shall we runthis command. And then of course, we willsee the build folder as well. Now it's goingto be very hard to tell anything in that folder,meaning if I'll open up index HTML, you'llnotice that everything has been nicely minified.And essentially, what you can do with thisfolder is just static assets. So for example,on nullify, you can just use for drag anddrop option. natla. Phi is, of course, thehosting provider that we will use throughoutthis tutorial. But of course, you can do itin any other place where you can just grabthe static assets, that should do it for thebuild folder. Up next we have the source folder,where we will do most of our work. And that'swhy we won't cover it in detail in this video.As far as the files, we have the app CSS,where eventually there's going to be a CSSfor our application. We have app j s, whereeventually all our components will meet. However,keep in mind that the name is optional. Youcan call this shake and break it doesn't reallymatter is just the convention is to call thisapp j s. And we have the file for testingwhich we don't care about. We have index CSS,and of course in here again, we have moreCSS. For our application, we have index js where we will start working starting fromThe next video, although technically in thenext video, we will just wipe out all theboilerplate. So I guess more properly wouldbe say in the video after that, we'll startworking in the index js. And even though thereare a lot of things already here, most importantly,what I would want you to notice is that weare targeting that route there. Remember,I showed you in the index HTML, I said that,of course, this is where all our applicationis going to live. So essentially, we haveindex j s, we're importing the app, show app,of course, he is going to be a file whereall our components eventually will meet. Andwe'll place our app in the root in the devwith an ID of root. That's why I said that,even though it looks a little bit mind boggling.Put all our application will live in thatone div with an ID, of course, then we havea logo, self explanatory, that is the logothat we see right now. And then of course,the service worker, as well as setup test,which we won't cover in this particular course,while we're still on a subject we have getignored. And like I said, this is a file thatjust specifies which files will be ignoredby our source control. And of course, up onthe top, you can see the node modules, whichlike I mentioned previously, will be ignored,because there's no point of adding them aswell as the build. So build will also be ignored.Because either you'll do your own drag anddrop. That's one of the options that you cando as far as your production build. Or you'lluse some kind of continuous deployment, whereessentially the provider, the hosting provider,does the build process for you. And then ofcourse, at the end, like I said, there's apackage JSON, where we have the manifest ofour project. Most importantly, we care aboutthe dependencies, as well as the commandsthat we can run, start on build, all the wayat the bottom, we have README, which is amarkdown file that just contains informationabout our project. That should do it for thefolder structure. next video, we'll cleanup some of the boilerplate. And then finally,we'll start working on our first reactcomponent. Well create react app is a awesometool. One of the issues that I have, especiallyas we just start exploring the React world,is the fact that there's bunch of worldportsince in my opinion, it will help us the most,it will start everything from scratch, I wouldwant to do something barbaric, and modestand delete pretty much all the files in thesource, apart from index js. So I would wantyou to select app CSS, j s, also the app doesj s, the index, CSS logo, SVG, ServiceWorker,and setup test. So pretty much all the filesapart from index j. s, I would want you todelete them. Yes, we would want to removeall these files. So at the moment, we justhave the index js, index j s, I also wouldwant to wipe it clean. So just delete allthe comments that we currently have in theindex j s. Now, of course, when you run NPM,start, don't be surprised that there willbe a big fat error. Don't worry, once we createour first component, then of course, thiserror will be fixed. But for the time being,we just want to remove all this unnecessaryboilerplate that we have in a source folder.So that should be a start, where we have aclean screen. And now of course, we can createour first react component. Awesome. Once wehave removed all the boilerplate, let's kickthings into gear and start our react landadventure. And the first thing I want to dois to create our first component. Normally,in order to do that, we will need only twothings a import from react dependency anda function. Or keep in mind that since indexjs is our JavaScript entry point, will needto add some additional code. But normally,it's just react as a function.So let's start working on that. Now I'll togglemy sidebar just to have a little bit morereal estate. And I'm doing that we'll usea command of command and B. Notice here nowI'm toggling the sidebar in Visual Studiocode. And like I said, we would need to importreact from our react dependency. Now pleasekeep in mind About the code that I'm writing,and I'm starting with the import, and I'mlooking for react and learn from react. Sothis code is not react specific. Essentially,this is something called year six modules,where essentially, we can get piece of functionalityinto our file. And if you have been takingmy adjust, of course, of course, you're alreadyfamiliar. However, if you haven't, don't worry.Later in the course, we'll spend an entirevideo on taking a look at the syntax and whatwill be the purpose of using e6 modules. Justkeep in mind, this is just JavaScript, thisis nothing specific to react. Now, since reactis our main dependency for a project, I don'tneed to go with a specific path. But later,you'll see that when we're setting up ourown files, you'll have to specifically say,well, which file are you looking for? Again,we don't have our files. So normally, if it'sjust a dependency virus for the whole project,meaning it is in the node modules, then yousimply go with whatever is the name, so I'mimporting react from react. And now I wouldwant to set up my function, because I wouldwant to create my component. Now, there isa gotcha, meaning, I can create whatever functionI want, whether it is a URL function, or whetherthat is going to be good old function witha function keyword. However, as far as thename for react to know that this functionis special, and this function is a component,you must capitalize the name. So again, wecan create a function however, we would likefunction keyword or a function. Throughoutthe course, I will switch just so you cansee that of course, it will work regardless.But what we need to do in both cases, regardlesswhich option you choose, is to capitalizethe name. So for example, if I'm creatinga component by the name of greeting, I muststart with a capital G. And I'm going to gowith name when we have the parameters, whicheventually we'll use, but for the time being,we'll just leave them empty. So we go withparentheses. And then we have curly braces.So as you can see traditional JavaScript syntax,we just create a function. Now one gotchawas the fact that we needed to capitalizethe first letter, so that way, JavaScriptknows, or I'm sorry, React knows that thisis special. So this is a component. And thenfrom react component, we would want to returnHTML. Now, technically, it is not called HTML,or you'll see that in a lot of blog postsand videos and all that. Technically, it iscalled JSX. And don't worry, we'll cover JSXin more detail. For now, we just want to havesomething on the screen. So from this function,we must, must must must return again, I willcall this HTML and you'll see that as HTML,a bunch of places will keep in mind that itis officially called JSX. So we go with ourreturn. And then we simply come up with aheading for. So that's the HTML that willbe eventually displayed on screen. So I gowith my heading four on here. All right, thisis john. This is my first component. Awesome.Now, once I've created, as you can see, eventhough I saved or nothing is happening, butthere's no reason to worry, because remember,I said index j s is a JavaScript entry point.Which means that, yes, normally, this is theonly thing you'll need to set up the component,import, as well as the function which essentiallyis your component. However, since index jsis an entry point, we'll need to add someadditional code.And what we're trying to do, we're tryingto add less functionality at the moment orwhatever functionality you have into our indexHTML. Remember, I said there was a div withan ID of root. So now what I would want istake whatever functionality I have, whichin my case, is just this one component, andsomehow somewhere injected into my div withan ID of road. Now, how do I do that? Well,I'm going to go with import than react DOM.And that is coming from other dependency.So there are multiple dependencies. You canclearly see them in package JSON. And oneof the other dependencies was react DOM. Sowe import list from react DOM, and then reactDom has the render method. So we go with reactDom Then dot, and then we type here render.Now render method is looking for two things,it is looking for what we're going to render,which, of course, in our case, is going tobe greeting. And the second thing well, wherewe would want to render it. And of course,that's why I showed you the now First, let'spass the greeting. So I'm going to go herewith a greeting. And I'll close it out. AndI'll talk about why we will need to closethe components as well in a second. And thesecond thing, sir, we add comma, and thenwe go with document, get element by ID. Andnow I'm looking for that route. And the momentI save it, if everything is correct, I shouldsee. Now let me double check. Of course, whathappens right now, my dev server is not running.So of course, that's why I cannot see anything.So go with NPM start, I'll spin up my devserver.Now on the screen, I should see my headingfour. And the text will be this is john. Andthis is my first component. And of course,there it is. Now it's kind of small. So letme zoom in. And I can clearly see that thisis john. And this is my first component. Nowthe gotcha about the closing tags in reactis simple. More, even though your HTML elementmight not have a closing tag, as example,that could be for example, image, becauseyou know that for the image, you don't haveclosing tags, you still need to self closeit. So what I'm trying to say, in this greeting,I cannot pass it like this. So I'm going toget a error. So in order to avoid utter, either,I would need to set up two tags like so whereI have the greeting, and then I'm closingout the greeting component as well. And onceI save it, notice how everything works. Orif you don't want this empty closing tag,or, for example, in the image tag, you alreadydon't have that closing tag, then you'd stillneed to add this closing tag inside the openingbrackets. So that's something you need tokeep in mind. Because with html5, of course,we can do that willy nilly. For the image,we can include it, we can omit it, it's upto us. But in react, you must must, must mustmust have the self closing tag, if there isno closing tag. Let's go over the setup onemore time, where if we would want to createa component, we need to import react fromreact, we need to set up a function, thatfunction will be component. So this is ourcomponent, how in order for react to knowthat it is going to be a component, you needto set this up as a capital Kessler. So that'show react knows all right. So this is notjust the regular function, this is going tobe my component. And then from the component,we are returning HTML, which officially iscalled JSX. Because, of course, there's somenice goodies that we can do, it's not justgoing to be a simple HTML. And that sincethis is a entry point, show only in this case,and essentially, I can tell you right awaythat, in most cases is just going to be inone place in your application. So you onlyhave to do it once. And by the way, if you'reusing create react app, you won't even haveto do that. But normally, you do that in oneplace where you inject your JavaScript intothe index HTML. And we do that by importingreact DOM. And then we have a render function.And then in that function, we pass in twothings, we pass in whatever we're going torender, and then where we're going to render.And then since Of course, in the index HTML,we already have the div with an ID of root.That's where we're targeting that div. Andnow of course, we have our first componentsuccessfully displayed on a screen.Awesome. Before we continue exploring react,now would be a great time for me to show youwhich extensions and which settings JSON setupis going to be really helpful throughout thecourse. So first, let me show you the extensionthat will help us to format the code. As Ikeep on scrolling notice here I have the extensionby the name of prettier code former. Now ofcourse, in my case, I already have installedit, but if you don't have it, you will needto install and then once you install, youcan navigate to a settings. So this is goingto be a GUI for sending so graphics Want tofish. And also later we'll take a look atthe JSON file. But for the time being, justcheck for the prettier or you know what? No,you can just go for format. And then onceyou look for the format and a graphical interface,you'll find format on page as well as formaton save. So I would suggest checking bothof these boxes. And then as a result, as you'retyping, premier will format the code for you.Now, what am I talking about, for example,if I just keep on adding spaces in between,basically, I just make it a big fat mess.The moment I say it, notice how prayer rightaway nicely format the code for me. So thatwill be the first thing. Now the second thingthat I would want to show you is the map.So you're probably aware that when we workwith HTML, and CSS, we have the option ofusing Emmet, which essentially just speedsup our workflow. And of course, in the VisualStudio code that is built in how when youwork with react as far as JSX, it won't workright out of the box. Now one of my firstof all talking about, for example, if I wanta heading for, or I don't know, the div withsome kind of IDs and classes, which will laterI don't have to start with opening tag, andthen type heading four, or article or whateverHTML element, I can just go with her in for.And right away, notice how Emma gives me thesuggestion. Again, we can go the same routewith article, or we can go with section orwhatever. Notice how it right away createsfor me. Now, of course, it's going to be waymore beneficial once we start adding classes.But there are some gotchas about classes inJSX. That's why I'm not going to cover themright now. But essentially, in order to havethese suggestions, so essentially, in orderfor you to have this option, so you don'thave to type out everything from scratch,you need to go to your settings. And onceyou navigate there, the property you're lookingfor is this Emmet. Errors include languages,and then you'd want to set up JavaScript,and then JavaScript Korea. So that's the codeyou'll need. Again, if you just want to copyand paste the code, I would suggest goingto a GitHub. Again, my handle is going tobe john hyphen smelter. And then you're lookingfor VS code setup. Shown here, you'll findsettings JSON. And then of course, this isthe property that you're looking for. So ifyou set this up as raw, you can right away,just copy and paste of this particular value.So that will enable me in your JSX. As wellas that not notice, this is going to be formaton paste and format on Save. You can alsoadd them manually, like show meaning in thesettings JSON, you don't have to do that ina GUI. And then I have some particular thingsfor the printer. For example, here, I setup only the single quotes and my JSX. Butthat is a row. And that is really up to you,whether that is your preference as far asthe single quotesor double quotes. However, using Emmet willdefinitely speed up your workflow when you'reworking in JSX, as well. And lastly, I havethis awesome, awesome, awesome extension bythe name of yours seven react Redux graphqL React Native snippets. Now why this particularextension is so cool, because it saves uson boilerplate. So for the time being, letme just go back to whatever I had. Sure Idon't have some kind of error. So let me saveit here. Let's just create another testingfile in source. So in source, let's createa new file. And I'll call this testing. Now,don't worry, we won't use it. But just toshowcase how the extension is going to work.For example, if I want to create this newreact component, I don't have to type importreact and then set up the component. I cansimply type my snippet where if I go withR, A, F, C and E, right away, we'll createit as a R function, and it's ready to go.So notice how it right away imported the Reactright away set up the component and you rightaway have the return as well. Now, don't beconfused by the fact that in this case, itis set up with a lowercase The only reasonfor that is because we're exporting somethingthat we'll cover later. And then once we import,then we will still need to use it with a application.Okay, sure, it's not like I was just makingthis up where this needs to be uppercase,you can clearly test it out. If you'll gowith greeting and greeting, you'll see thatthere is an R. So essentially, you don't seeanything on the screen. Because of course,you must, must, must must, must have thiscomponent with a capital case, again, in thiscase, a little bit different because we'reexporting. We're not at that point yet. Sowe'll cover that later. But this extensionjust gives you a awesome setup, where youdon't have to keep on typing. There's boilerplate.Now, of course, the arrow function is notthe only component that you can create, youcan create components with regular functions,you can create them with classes, which isthe older syntax. And if you want to see whatkind of options you have for the snippets,just go for the extension, keep on scrolling,and notice, you can use imp for imports, forexample, keep on scrolling, keep on scrolling,these are all the options that you have here.And I think the irregular function was ourFC. So this is going to be 40 class components,we're going to keep on scrolling. And eventuallywe should see the regular function component,Americas. So RFC is going to be just a reactcomponent, but with a traditional syntax.So if I go back, I can right away, deleteeverything, and instead of our a monotype,our FC, and then again, our right away export.So export, and notice how we create the samecomponent, or in this case, it is using regularfunction syntax. So these are the things thatI would suggest adding to your project asfar as the extensions, as well as the settingsJSON, because they will improve your workflowtremendously. Now you know what, by the endof this video, I can just delete the customj s, we won't need it, as well as close myextension. And now of course, we can go backto react. Now the one thing, of course, isthe fact that I will need to change this backto a greeting. Because remember, when we'resetting up a react component, when we wantto render it, it must be capitalized, beautifuljob, once we're back from the useful extensionsVidor, now out want to make a plunge intoour component. So essentially, we know wewill cover imports a little bit later, weknow that as far as the render, it is onlyin one place, essentially, where we injectour JavaScript. So now, of course, let's talkabout this sucker, especially the officialname is going to be stateless functional component.Now, they're also called dumb components.Because at the moment, it doesn't have somethingcalled state, something that we'll cover later.As far as the rules. And the biggest one wouldbe that we always always need to return something.For example, if our work,and if I'll delete, you'll see that there'sa big factor where it says nothing was returnedfrom the render. Sure, you always, alwaysmust return something, even if that somethingis an empty HTML element. Of course, you cansave it. And of course, you can see that atleast, now we don't have the URL. Now, I alsowant to talk about this j. s. x. because technically,you don't have to type here this HTML, thisHTML is to help you. Okay, I know it soundsweird, because for a lot of people probablyseeing that we're returning just HTML mightseem a little bit foreign. But just keep inmind that essentially, under the hood, we'restill calling functions. Now, don't believeme? Why don't we do this? Why don't we setup here Hello, world.I'll create another component with the samename and everything. And I'll set it up usingthe function calls, just so you can see thatunder the hood, when we type this headingfour, we're still making those function calls.Not since we cannot have two components withthe same exact name, and I'm too lazy to comeup with new component and then treasured overhere. I'll just come under sell. And let'sset up our component one more time. So inhere we go with function. And you know what,why don't we do in this case, as IRR function,just so you can see that it's going to workthe same way. So we're going to go here witha greeting. So that is going to be my arrowfunction. And then instead of returning HTML,which is to help us to have a little bit easiersyntax, what we could do is go with return.And we're going to go with react, Van createelement, where is the function, and this functionis looking for three things, what elementwe would want to return, that's number one,then props object, which we haven't covered.So don't worry, we'll just pass in the emptyobject. And then what is going to be the children.So what is going to be rendered inside thatelement? Now as far as the element, I thinkI'm going to go with heading one. And, likeI said, props object haven't covered propsyet. So let's just pass an empty object. Andthen last thing is going to be the children.So in here, I'm going to go with hello world.And then once you save, notice, everythingworks correctly. So like I said, we can usethe arrow function that still works, we arereturning heading one, and then we're usinghello world. Now one thing that when you'repassing the element here, you need to passit in the quotation marks. So when we're workingwith components, and of course, we don't haveto do that. But then if we're passing it intothe function, we must set it up as quotationmarks, because then react knows that, well,this is going to be HTML. And then this isgoing to be the content in our element. Beautiful.Now the thing is, it's not as easy as it seems.Because at the moment, you might be well,this is extremely foreign. I rather use thisfunction setup. Okay. Now, let me commentthis one out for now. And let me show youwhat happens if we have some more elements.Because normally, probably, you'll have morethan just one hang for. And what's reallycool about JSX, I mean, we can definitelydo it. So I can go with div. And then withinthis div, I'm going to create a new one, wehave a Hello World. So of course, I can seethat it works. Now at the moment, of course,there's a div. So technically, it is hardto see. But I can tell you right away thatit does exist. But the gotcha here is, howwould I do that here with create element?So yes, this video might be a little bit annoying,where, again, I'll come on the top. And thenwe'll take a look at how we can do that usingthe function. Well, everything worked reallysmoothly, when we just had a heading one correct.Everything worked out of the box. But nowwe need to understand that where we pass inthe children, we will need to invoke createelement one more time. How is that going tolook like? Well, we would go with react, becausethat is our import, then we go with createelement, then again, what element we wouldwant to set up. So in my case, that is goingto be heading one than props object, again,empty object for now. And then eventually,what is going to be a text Well, I'm goingto go with HelloWorld. So you can probablyalready see, I'm sorry, not this was headingone, it should have been a dip, my apologies.And now you can see that it can get messyreally, really fast. Because again, we'rejust talking about right now a div that hasthe heading one. Well, that's it. But keepin mind that, of course, your normal structurefor the component is going to be way moreMessier. That's why I'll leave this for yourreference. So you know what is happening underthe hood. Just keep in mind that the reasonwhy you have this HTML syntax is so it iseasier for you to set up your return in yourcomponent. Because I don't know about you.But even though it might look a little bitforeign, we're returning straight up HTMLfrom the function. At the end of the day,what we're setting up looks way more readablethan starting with these endless, endlessfunction calls. Beautiful and previous videowe covered as far as the return from the componentis a j. s x. And in this video, I would liketo continue because in a previous video, welearned that it is kind of like HTML, butnot really. So there are some specific roles.So mine is we'll cover them right now. I willstart with a first one where we always alwaysneed to return a single element. Now whatdo I mean by that? Well, inside the elementof what we're returning You can get extremely,extremely creative. Like I said, you're gonnareturn the whole website. For example, I couldarrive and three, hello, people in here. Andafter that in three I'm going to go with onour list, and then list item. And then here,let's place a link. Now just add hashtag,so it's not gonna go anywhere. And then we'llwrite another hello world. So I can save it.And I can clearly see that there are no issues.Everything is working like beaches. Now theone thing we cannot do is notice where wehave this div, I cannot add adjacent element.Now that could be any element. But of course,just because it's going to be simpler, I'lljust place a div. Notice even before I save,you'll have this red squiggly line. Well,that just means that something in your projectwent bananas. So if you save notice, you'llget a error, where it says adjacent JSX elementsmust be wrapped in the enclosing tag. Didyou want a JSX fragment? Now I'll talk aboutJSX fragment in a second. Just keep in mindthat we always need to return a single moment.Now what would be the solution? In this case?Well, I could wrap everything here in a div.Correct. So I'll place my parent live. Andonce we save, we're not going to get any error.Now please keep in mind One thing, though,that at the end of the day, we're still renderingthe HTML, HTML, we have something called semantics,where if we just return everything as div,div, div, div div. So essentially, we're justcreating a div show, that is not the bestpractice. So first, I would encourage youto follow the semantics. For example, if versussomething as a section, then we return sectioninstead of a div. For example, if this wouldbe an article, we return the article. Now,of course, keep in mind doesn't mean thatinstead of the list item, you're going toreturn the article, just as a common sense,don't place everything as definitive. Now,there's no rule against it. But a better practiceis to follow the HTML semantics. And one morething, remember this little error how it saidthe fragment. Now, I'm going to skip aheada little bit. But for example, if I wouldhave the situation, by the way, let me goback to these directives. If I wouldn't wantto wrap everything div, since now, where I'mcreating diff Su. In react, we also have somethingcalled react fragment. How does that looklike? Well, instead of enclosing everythingin a div, I'm going to enclose this into areact fragment. So I'm going to go with dot,and then we're typing fragments. And you'llnotice that this will create a div in yourHTML. So in your final application, but also,you'll have no error. And shortcut essentially,would be just typing the angle brackets, andthe closing once again, we're skipping a littlebit of head. Don't worry, we will talk aboutfragments a little bit later on. But justkeep in mind that either you have an optionof using proper HTML semantics, or you canuse a fragment numbers case, I'm going toremove the div that was causing the problems.And I'll remove the fragments as well. OnceI said, everything works nicely when we needto talk about the attributes in the HTML.Because again, we're returning JSX. And forexample, when we work with JavaScript, wecan have these inline event listeners, forexample, I could type here onClick. Now pleasekeep in mind, I'm adding just a div. Normally,probably you would add this to a button. Butthat doesn't change the setup, where essentiallyin react, you're not going to write like this,you're not going to say on click, notice howsince this is JavaScript, we must capitalizeit. So what I'm saying here is on click, now,I'm not going to talk about the events rightnow, I'm just telling you that each numericattribute that will need a capitalization,you must add it otherwise there's going tobe an error. So the same will work with aclass where with your six class is alreadya keyword, because we know that we can createclasses. So on a dev, if we have the attributeof class in JSX, we cannot write class. Sothis will spit back error. Okay. Now of course,the error at the moment is the fact We cannotsee anything. But in general, you must useclass name. So that is the proper name. Nowwe'll talk about CSS a little bit later. Justremember, every time we talk about HTML attributes,if you need to use the camel case, you haveto do that. Otherwise, it won't work. Andthen also remember how I talked about howwe need to close out the elements, even theones that don't have the closing tag, andeven the ones that in html5, you can writewithout the closing tag, well, in react, that'snot going to fly. So for example, around afterthe list item, I'm going to go with image.And notice how the image right away createsfor me with a closing tag, and if all images,and if I save, again, I'm going to get error.And it clearly tells me expected correspondingJSX closing tag 40. img. Once I add, of course,everything is going to work beautifully. OnceI save, there is there's no more. So the samewill work for input, for example, and go withinput text. Again, if I omit this closingtag, again, I'm going to have the error. Andthe last thing that I would want to mentionin this video are these parentheses, becauseas you start working with JSX, you'll noticethat once in a while, they will be added bythe premier. And once in a while prayer willjust omit them. So what are the rules. Now,technically, you don't have to use the parentheses,but I can tell you right away that your lifewill be a little bit easier if you do. Solet me show you what I mean. For example,here I have the return, I'm just going togo with anyone and I'm going to say helloworld, life is awesome. However, if for example,you will move your whole thing over here,notice how this one got grayed out. And essentiallynow once you say it, you will have this someicon. So technically, you can omit the parentheses,but then you always always need to make surethat your opening tag is in the same lineas your turn. Otherwise, it will have thatsame icon. And then you will get this error.So this just saves you from running aroundlike a headless chicken and looking for theerror where the error does not exist. However,if you add those parentheses, it will be fixedright away for you. Again, prettier, a lotof times we'll just add them, or we'll removethem. So don't stress about that. But I'mjust telling you the rule that if you havethese parentheses, then you don't have toworry about placing this div, meaning theopening tag in the same line here, I can simplymove to the next line. Again, I can go aheadand go on and then hello world. And you'llsee that there are no issues. Okay, that'ssomething that I want you to keep in mind.Again, we must, must must, must always returna single element.It is beneficial if we pay attention to aHTML semantics or we can simply use the Reactfragment. Then as far as the attributes, weare using the camel case, because at the endof the day, this is JavaScript when the classis already keyword. So we must use a glassnow. We'll talk about the CSS in detail alittle bit later on, as well as we would wantto close up every single element, even theones that are not technically required byhtml5. And then lastly, it is beneficial touse these parentheses because you just don'tneed to worry about setting up your openingtag in the same line as the return. Not bad.Not bad. We covered JSX rules. So now let'stalk about whether we can unmask components.And the short answer is yes. Also, let's takea look at the reactors. Remember when we installthem, I said probably won't make much sense.But now it will. Since now, we have alreadya general understanding how the componentswork. First, let's start by creating the mastercomponent structure. Like I said before, ifyou want, you can place your whole app inone component. However, it's somewhat defeatsthe purpose of why you would want to use reactin the first place. Because the idea is thatyou can split up your application in niceseparate chunks of functionality. Now in ourcase, of course, we're just setting up simpleHTML. So now I'm going to look as you useful.But in general, it's going to give us a goodidea how, and why we want to do that, forexample, I have to do, I'm going to have aHeading Two, with a text of john doe, johndoe, a man, I'm going to have a paragraphwith the text of this is my message. And nowlet's think about it. So I have the greetingcomponent, I have the heading two and I havethe paragraph, I want to set up two separatecomponents, one that just deals with headingto the other one that just deals with a paragraph.And just to spice things up, I'm going touse arrow functions. And in one case, I'mgoing to use implicit return. And the othercase, it's going to be a explicit return,just so we can see that it is going to workregardless. In this case, I'm going to gowith cons. Now we do need to come up witha name. So I'm going to go with a person.And this is going to be my implicit return.So for those of you who are familiar withour functions, course, I can add here curlybraces. So of course, then I will need toset up explicit return, which we'll do inthe next component, or can simply say that,whatever I'll type, well, that is what I'mgoing to be returning. So in this case, whatI would like to return, well, I would wantto return john doe, right. So either you canwrite it from scratch, or in this case, I'lljust copy and paste. And now of course, onceI render, well, I only have this is my message,because now this value is in the person. Sohow can I render whatever I'm returning fromthis component more simple. In the greeting,instead of HTML element, I'm going to go withmy react component, what is the name of thecomponent that is person. Again, remember,we do need to self close it on the monitor,save it, I have Jonathan. So of course, nowwe can put two and two together, that I cando the same thing with the paragraph. Again,the only difference is going to be that Iwould want to set up explicit return, justso we can see the difference. So let's callthis message. And again, we have our function.And in here, we'll just write return. Andthen what I would like to return course, theparagraph, so grab the paragraph, and thisis what we were returning from our messagefunction. Now, of course, let's just set upa message right after the person. So onceI save, I have both of them. But notice howwe're nicely splitting up our applicationinto separate chunks. And that is really,really cool because we can use them later,Lego blocks to build our application. Andas a side note, this is a somewhat traditionalway of how to set up a react application,where of course, we'll use the exports andimports and everything of that nature. However,we will set up this one component. In mostcases, the general convention is calling thisapp, then in that app, we're going to be either1234 or 55,000 components that will meet,please keep in mind that you can have morecomponents in those specific components. Sofor example, in the person, I could rendereven more components, or there's going tobe this app where your components will meet.And then you will import into an address thatparticular component again, shake and bakeapp or whatever you have decided to name it.And then you will render it. So this is goingto be pretty typical setup. So that's howwe can nest components inside other reactcomponents. And now let's also take a lookat the React developer tools. So I'm goingto make my right screen bigger on my openup my developer tools. And we're looking forthe components. So of course, we installedalready react developer tools, that is outof the way. And then we're looking for thecomponent. And now you'll notice somethinginteresting, where this is going to be ourroot component. So at the moment, we callthis greeting. And then of course, insidethe greeting, I have a person and the message.Again, we haven't covered props. So none ofthat makes sense. Or we can clearly see thatthis is going to be our component structure.And as our apps and examples are going toget more complicated course we will stillbe able to see what in a world we're actuallyrendering amazing work so far, and I thinkwe'll We have acquired enough knowledge tocreate a simple Amazon best selling book list.Now, what am I talking about? If we navigateto search engine, just type Amazon best sellingbooks now the word Margaret asked you to buyanything, but we will try to recreate at leastsome parts of it using react. Now you canpick any book you would like. But I'm gonnago with this one. Because this one is by farthe most favorite book of my daughter andI have probably read this, I don't know, Iwant to say 1000 times. But I don't thinkthat even close to a real number. So here,what are we looking for, we're going to goback to our application, we'll just give ita more meaningful name. Keep in mind, youcan call this greeting port, I'm going togo with a book list,let's say book list internationally, therewill be a list of books, then we're goingto go with book list as well. And then I'lldo a little bit of spring cleaning, wherefor the time being, I'll say that it is goingto be a section on here, let's write thisis a book list. Now of course, there's nothingthere right now. Where we have the personand message, well, eventually, it's goingto be two different components. So I'll justremove them. And once we say that, of course,we have this, this is a book. So now of course,I would want to create four components. Nowplease keep in mind, technically, I couldjust set up one where I have the book. Andthe book, I could have the image are goingto have title, as well as the author. NowI'll purposely put this up into three components,meaning there's going to be book component,and then in there, there is going to be threeseparate components, one for image, one fortitle, and one for author, just to showcasehow we would mask those components even more.And then later, we will refactor it back toone book. And this is just to showcase thatit is up to you how you want to structureyour application. If you want to create everythingas a component, you can definitely do it.Or you can just place everything in one bookcomponent. So where we have the book list,right after that, I am going to create anothercomponent. Now in this case, though, I'm goingto use our function. Again, you can use regularfunction if you want. But I'm going to gowith our function, we have our parameters,we have implicit return. And then as far asreturn out, want to return the article, anotherHTML element in there are going to be threeseparate components. For time being, I'lljust say this is a book. Okay, we save that.And then where we have book list, now whatwe could do is just get rid of this generictext and say that I'm looking for the book.So once I save it, I have this is a book.Now what's really, really, really, reallycool about react is that I can add multipleinstances of that book. So if I start justcopying, pasting the same instance of thebook, notice how here, I'm getting these valuesas well. So what that means is that the momentI'll change something in my book, but of course,it will affect all the instances that I have.So here, I'll say this is a book of churchesaround to this is a car. Now, of course, it'snot gonna make sense. But you'll see rightaway that all my instances in here are changed,which is really, really, really cool. Andof course, I'm gonna have 5000 of them, Icould one of them, or now, three of them,or whatever. And then later, we'll take alook at how we can render with a differentinput, because we need to understand thatof course, at the moment, we'll just hardcode this one value, but it's already reallycool that we can multiply it on the fly, andthen change it in one place. Because notice,it's not like I had to hop from one placeto another one. To change this text. I justset up the components are copied, how manytimes I want. And then once I change somethingin here, that's it, all the instances willbe affected. Now, I will go back to my onesingle book. And like I said, it's gonna bea little bit of overkill right now. But I'llset up three separate components. So hereI'll call this image or just try and pushit return because why not? So we'll returna wrench and in To get that image, just clickon it, and you're looking for the copy imageaddress, that's the one you need, and thenplace it here in source. Now as far as thealternative, I'm not going to worry aboutit. And then where we have the book, insteadof this is a car, which totally doesn't makesense. Now I'm just looking for this image.So like I said, even though this is a component,I can match even more components. So I havea book, that is the render in a book list.However, in the book, there is going to bethree separate components, let's say witha murders. Now, of course, I have my image.Now, what's next? Well, now what I would wantis to grab a title, as well as the author.And again, it's going to be a little bit ofoverkill, but we'll create two more components.So let's call this author course, we willneed to set up our return. Again, you wantimplicit, you can set up implicit, if youwant explicit, you can set up explicit, Ithink I'm going to go with implicit, whereI'm going to go with heading one, by the way,I need to have this fat arrow function. Asfar as the value let's just already not, didn'tcopy. So let me grab this one. By the way,I think I was going for the author, my apologies,I think I'm gonna have to rename this, it'snot going to be your author is going to bea title, my bad. So there's my title. Andthen right after this image, I would wantto add my title. So that's, of course, mytitle component. And there it is, now I havemy coupon. And lastly, of course, let's alsothe author, show, we're going to go with consand then author, again, implicit, explicit,whatever, you can set up a traditional functionif you want, and then we're looking for thisvalue. So let me figure out how I can copythat work. So I don't know I'm going to closethis and heading for copy and paste. And thenof course, I'll do the same thing over here,where we're going to go with an author. Nowonce we set this up, notice, I have my bookcomponent. In that book component, I havethree separate components, one for the image,one for the title, and one for the author,I'm on where I render my book, he found crazyknowledge. Now, of course, we have these multipleinstances. And we already saw the moment,I'll change something around here, it willaffect all the instances where I render mybook. And my opinion, it's really, reallyawesome, because as you can see, we can nicelyutilize our component structure where we canhave as many instances as we would want, butwe control them in only one plus. And themoment we add those changes, all the instanceswill be affected. Nice work, we've got ourlist. Now granted, there's a bunch of hardcoded values. But of course, we'll fix thata little bit later. Now I'd want to focuson the presentation because it looks somewhatokay. But at the end of the day, it couldlook a little bit less hideous. So essentially,I would want to set up some kind of grid layoutwith some columns, and maybe a better coloringas well. And in the process, we'll take alook at how we can add CSS to our react project.Now, I also would like to mention that thisis going to be the only video where we willtype out the CSS remaining of the course,since it is a react course at the end of theday, all the CSS is already prepared, whetherthat is going to be the examples or projector whatever. Or in this case, in this video.Yes, we will type out CSS properties. Now,if you're not too familiar with CSS, don'tworry, just type them along and we will bein good shape. So we've got our project now,here find navigate to a new tab. And by theway, I think I failed to mention that if you'dwant to see your project, you'd need to navigateto a localhost 3000. So essentially, whenthe dev server spins up the server, the portis localhost. And then 3000. That's the onethat you're looking for. If I open this up,of course, this is what I see. I see a listof books and like I said, Our just want totake a look at how we can add CSS. So we havesome minimal grid layout with some columnsand maybe a little bit different styling aswell. And if I take a look at my project,yeah, of course I have the React tools andthat is very useful. But of course, I canalso inspect the elements correct. And whatI see here is the root. Like I said, thisis where we Polish our app. And then we havea section, since that is my tag, and thenI have the article. And this also underscoresthe point about those divs. It's not likethey will disappear, the more lives you willplace over here, the more harder it's goingto be, of course, for you to navigate aroundyour project, because you will have div div,div, div, div, div div. So again, I'm returningto that point, but I think it's quite important.And of course, as you can see, as I'm hoveringaround, these are my items. So we could puttwo and two together, we have the HTML. Nowhow do we usually add CSS, we create somekind of CSS file correct. So let's navigateback to our project.We're looking for my source. And we'll createa new file. We can call it whatever we want.But, of course, convention is that if thisis the file for images, and I might as wellcall it index c, s s. So once I created thisfile, let me just add some general styling.And then of course, we will need to figureout how we can attach it because I can tellyou right away whatever changes we'll writeright now won't affect our project. Becausewe haven't connected to now what I would wantis to set up basic reset, where we've gota margin zero, than padding zero, paddingzero, was up a box sizing to be a border boxbox sizing to be border box. And then let'salso target the body with some backgroundand the color. So we're looking for the body,then font family, and here, I'll go for asystem font. So let's try to get the systemfont. And also let's add a little bit of graybackground. So we go with background. Andthen we're looking for hashtag, f one, f fivef eight, macho. And then lastly, I would wantto add a color for all my text hashtag tutu tu, tu herbertson. Beautiful. Now onceI've got this, of course, how do we connectit? Well, the same how we were importing ourcode, meaning functionality from the dependencies,we also need to import our CSS. Now, the gotchahere is following, where if it's going tobe a JavaScript file that we haven't covered,of course, we'll cover that a little bit later,then we don't need to add the extension. However,if it is a CSS, you need to provide a fullpath. So if I'm going for CSS, I'm still going40 import, then I need to use the relativepath, because this is not my projects dependencyanymore. So here I'm looking for specificfile. So I go with a dot and then forwardslash. Now what that means, or that meansthat the file is in the same folder. If it'sgoing to be one level up, then we're goingto go with two dots. And of course, we'lltake a look at that example, a little bitlater. For now, this is a relative path, there'sjust says that this file is in the same folder,so dot and then forward slash. And like Isaid, either that would be a JavaScript filewould simply would write a file name. So filename lecture. However, if this is a CSS file,then we need to go with index, and then dotand then CSS. So full extension. Now also,of course, with JavaScript file, we'll probablyimport something from there. In here, we'rejust grabbing everything. So I'll save. Andwe should notice some changes. And of course,we do. Now see how the margin is not thereanymore, the padding, also the backgroundchanged a little bit. And overall, it looksa little bit more presentable. So that's anawesome start, we know that we can start targetingthe elements. And of course, since I knowthat I have these heading ones, I could simplysay something like that color, and then ared and beautiful. And now all my headingones, of course are going to be red. Now that'sa little bit drastic. So now let's take alook at how we can work with glasses. So indexjs, remember I said class, we cannot use.So if I go with section, and then say here,simply class, and I don't know, I'll writethis as a book list. You'll notice and I'mgonna go to a bigger browser window is goingto be easier to see. If we take a look atthe console. We have warning invalid Dom propertyclass. Did you mean class name? Sure. We alwaysalways need to use a class name.So we go back, we fix it. And now we havea book list. Again, please don't worry aboutthe CSS. This is The only time we have towrite CSS, but essentially owD, one, set itup as a grid, once we get to, I don't know768. So now of course, I added my class tomy section, the book list, just like I wouldin a normal index HTML, CSS project. Online,of course, I need to target it in CSS. Correct.So we go with booklists, I'll add a littlebit of width. So 90 view with van, we're goingto add max width to be 1170 pixels, we'regoing to add a little bit of margin top bottomfive are yams, but I would like to place itin the center. So we'll also add auto, andwe will set it right away as grid. And I'lladd some gap in between, so say gap to REM.So that just means that for my rows and forthe columns will have to REM as far as thegap. Okay, looks already a little bit better.And now let's set up quickly that three columnlayout once we get to 768, so we're goingto go with media screen. And, and in herewe're looking for men with men with and thatwill be equal to 768 pixels. Awesome. I'mlooking for my booklist again. So that's theclass that of course, added to a section.And I'm looking for grid, template columns.And we're gonna go with repeat, and threeon one fraction. So essentially, once we navigateto a bigger screen Veritas, we have our threecolumn layout. And of course, let's add alittle bit more styling here for the bookitself. Now, what is a book? My book was thatarticle correct? Again, let me go back here,my road. In the road, I have my list. Andthen I have all these items. Now, of course,I'll need to add a class on the article. SoI can target them when we navigate to images.Now where I would need to add this class,you added here where I'm rendering the book,or where I'm setting up the book. Of course,the answer is where I'm setting up the book.So we go with article, class name, and thatwill be equal to a book. So now in the indexCSS, right after our media query, we go withbook, our different background. So we're gonnago with hashtag fff, so white border radius,I don't know, I'm gonna go with the one REM,and that should do it. And then also, I'mgoing to add a little bit of padding. So we'regonna go with padding to be one REM,to RPMs, like so. So that's our padding. Andthen of course, I could also target the headingone. Now, the reason why I'm showing you theheading one is not because I really want towork on the CSS. It is because in the nextvideo, we'll take a look at another way howwe can do styling in react. So let's justtarget in this time, heading one. Now, again,I can target all the heading ones if I want,but a little bit more precise would be goingfor the book, and then heading one. And thenI'll just say margin, top to be equal to 0.5.REM. And that's it. Now, of course, we addthe margin. So that probably is the most straightforwardway how to add CSS. However, of course, keepin mind that this works nicely. If you havesomewhat of a small project, the bigger theproject gets, then of course, you need tostart spinning your wheels. Because stillsame issues apply as far as, for example,name collisions, or you cannot reuse the samename, essentially the same rules as with CSS.So that's usually when, for example, solutionslike CSS in j s come into play. And yes, wewill cover that a little bit later since Iwill use that solution throughout the course,because that's just easier for me to add allthe CSS that we'll use. But this is definitelyone of the options where we create a indexCSS or app CSS, whatever CSS file you wouldwant. And then in there, we add our classes,we add our roles. And then of course, theonly thing we need to do is include that filein our index JS or abjures or whatever. Andonce you're included, then of course, if you'reout these classes, if you have those styles,they will right away affect your project,just like in a normal HTML CSS project, whileadding your CSS from the CSS file is definitelyan option. We also can do it directly in theJ s x now For my example, I will pick my headingfor, just please keep in mind the same ruleswould apply for heading one, or image or article,or whatever HTML element we are placing. Nowof course, I'm doing air quotes right nowaround the HTML element, then of course, itis a JSX. And the way we do that, we needto add a style attribute on that particularelement. So I'm going to look for my headingfor, and I'll type here style. Now in thefollowing videos, we will take a look at whatit actually means as far as the JavaScript.But for now, just remember that if you wouldwant to access JavaScript world, in the JSX,you would need to set up your curly braces.Now, why am I setting up these curly braces?Well, because in order to set up a valuesfor the style, the gotcha is that you needto have a JavaScript object, meaning object,and then all the properties are going to beas a JavaScript powers, like you would havein the object. And you'll see what exactlythat means in a second. Now, why am I tellingyou all this is because once I'm in the JavaScriptworld, here with these curly braces, of course,in order to create an object, I would needto set up another pair of curly braces. Anda lot of times for students, this is confusing,where they think that this is somehow a specialsyntax. In fact, it's not, it only means thatif I set up here, these curly braces, I'mback in just one. So for example, I can typewhatever I would want, as far as JavaScript.Now, of course, that whatever in this caseis just an object. Okay. That's why we havethese double curly braces. So for the firstones, we go back to JavaScript world. Andof course, we will cover the other thingsthat we can do as far as JavaScript in thefollowing videos. But for now, we only wantthe object. So that's why we have anotherset of curly braces. So what we could do is,of course, set up the style. And like I said,this is JavaScript. Now what that means is,you cannot write properties like this, becauseyou're setting up a JavaScript object, howthat would look like, well, for example, ifI go with color, it's somewhat straightforward,where Nat is my property, notice, I don'tneed to capitalize it or nothing like that.However, as far as my value, I cannot simplygo with one REM. Notice, it spits back error,because in JavaScript, of course, we haveproperties and then values. So in this case,all your values must be in quotation marks.So in here, if I go with hashtag, and then617. And then I'm going to go D nine, eight,of course, I'll change the color of my headingfour, then I would want to go with font size.And this is the case where I will have tocapitalize because again, I cannot write fontand then hyphen size. Now I have to go withfont size. And again, the same thing, valuesmust be in quotation marks. So we go withzero point 75 ariados. So a little bit smaller.And then also, let's add a margin to the top.So we're gonna go with margin, and then grand,we'll set it up to be zero point 25. REM.So once we save it, notice how we nicely applyboth styles. Now, one thing we need to keepin mind, though, that when we add the stylesare this way, so directly in the JSX. Thisis set up as inline. So what that means isthat of course, we know that when we set upsomething inline, and notice this is whatI'm talking about. Then, of course, if I'mtargeting the same element from the CSS frommy index, CSS in this example, of course,rules, whatever I'm applying are not goingto be added. Why? Well, because inline CSSis more powerful than the one that's comingfrom the CSS. For example, if I would go hereand say book, a man, what I was using, I thinkheading four. If I'll try to change the color,so color to red, you'll see that that is notpossible.That's not going to work. However, if it'sa property that of course I haven't added,like for example, letter spacing, and I'llset it equal to five pixels, when of courseit will be applied. So what I'm trying tosay is that Be careful when you start addingthe CSS here in the JSX. This will right awaygo in line and once it goes in line, it isstronger than the CSS that you're adding fromYour specific CSS file. Now, why am I tellingyou that because of course later, as you'reprogressing with react, you will start usingsome libraries. And a lot of times in thoselibraries, there are some properties thatare already added this way. So when you'retargeting from CSS, it looks like you're notapplying those properties. But always, alwaysdouble check whether the library that you'reusing hasn't already added those styles inline. And then of course, you just need tofigure out how you can override them. Okay,so that would be another way we can CSS inreact. And that also underscores Another pointthat I would want to make. One thing aboutreact is, there's always multiple ways, oryou can do the same thing. So my job is toshow you what other options and then yourjob is to decide which route I'm going totake. And I would suggest a judging that onyour experience, and on your project, noton whatever the influencer is saying on Twitter,because at the end of that you are going tobe one working on a project. So my preference,of course, is at least setting up in the CSS.Now in general, my preference, of course,is using CSS engineers. But that is my preference.That doesn't mean that it is some kind ofrule. No, it is just my preference, becauseI find it easier to work in the CSS, and thenjust add classes. If you prefer this typeof way. There's nothing stopping you fromapplying your styles of this way. Not badand bad. We now know how we can add CSS toour rear project. But in a previous video,I mentioned that you in order to access JavaScriptworld in the JSX, we need to add these curlybraces. So let me expand on that. So essentially,we're going to take a look at the other optionswe have as far as adding JavaScript directlyin our JSX. Now before we do anything, though,I would want to do a little bit of springcleanup, just because I'm looking at the file,and I think it's getting quite busy. Now atthis point, I will switch from these threeseparate components to one component, bookcomponent, and all my return in there. Again,that is up to you. If you want to keep everythinga separate component, you can definitely doit. My goal was to showcase that no one isstopping you. But in general, my preferenceis not to go too crazy. As far as splittingup certain here, the only thing that I wouldwant is Where have all the returns. So I'lljust place them here. So for example, in thisbook article, I'm gonna have the image, I'mgonna have my heading one. And also a littlebit more things in here. Now, in here, ofcourse, I placed it side by side. So rightaway have the error. And then as far as thestyling, that's not usually my preference.So I'll just remove it altogether. So ourmore style, please keep in mind, you alwayshave a reference to the files we have beenworking on. So here are right off 30 hangingfor more heading one, I'll place my headingfor our move my components that I have, willsave. And then of course, I'm going to goback to the CSS that are added in the previousvideo shown here, of course, we just needto change it, where if I remember correctly,the color that I had was hashtag. So let'sgo back hashtag, and 617. And then D Nine,eight Vann letter spacing, I'm not going toadd that on, by the way, muster up here, soit's not f it is six. Um, what else font size,I guess was different, right? So font size,we're looking for zero point 75 volumes, andalso add a little bit of margin to the topmargin top, and we go with zero point 25 volumes.That's it. Now, of course, we set everythingup correctly. So back in the images. Now let'stake a look at what else can we do as faras the JavaScript, because in a previous video,we had a look of how we can add a CSS. Butof course, we can do way more than that again.In order to go back to a JavaScript world.What do we need to do is to have curly braces.So now I would want to replace this headingone with some kind of variable value. NowI'm going to start here where I'm gonna sayconst and TitleNine is going to be equal to whatever textI have. So I love you to the moon and back.Of course, I'll set this up as a string, shellcopy and paste. And in here, once I go backto the JavaScript world, how do I access thevariables in JavaScript? Now simply, I justwrite a title, correct, because that is thename of my variable. So now, of course, I'mnot hard coding this anymore. Because in here,this is sitting in a variable. And if I'lljust start adding SS here, of course, youcan see that this value, also right away changes.And if you want, of course, we can keep thisoutside as well. Now are you always goingto keep the variables inside the functionor outside? Well, that depends, a lot of timesyou'll be getting this as props, somethingwe haven't covered yet, show, it really depends,I'm just showing you the options where youcan store those variables for this particularexample. And if I would want to have the author,I'm going to create another one. So there'sgoing to be a variable outside this time,just so you can see that it will still work.So let me grab this value. And then of course,I'm going to have my author,or XL. Now wonderful about setting up JavaScripthere in the JSX, that it must return a valueshow, it has to be an expression, it cannotbe a statement shown here. Let's create aparagraph. Let's just test that out. So wehave here a JavaScript, but I'm going to writea statement. So I'll say let x is equal tosix. Now the moment I'll save it, I will havea big fat error, where it's going to pointto a lot. So essentially, we always need topass something here that returns the value.So now let me comment this out. By the way,the way we comment out in JSX, we have curlybrace, and then we have forward slash, andthen the star. Now, I'm using the shortcut,which is command and then forward slash. Butif you want to check it out how to actuallydo that as far as your setup, then look forthe Edit. And then you're looking for thistoggle line comment. And as you can see, inmy case, it is a command and then port slash,that's the shortcut that I'm using. Also,as a side note, if you want to check out allthe shortcuts that you have, and the reasonwhy I'm showing that because not everyoneuses Mac. So of course, some are a littlebit different for the windows, just go toVisual Studio Code near will open up in anew window. And by the way, I'll open up alsoright away a new browser window. And thenonce you open up before you drag and dropanything, just look for printable keyboardcheat sheet. And this is where you'll findfor your operating system. Now I'm not sayingthat you need to sit for one month and memorizethem. But for example, if you'll learn onekeyboard shortcut today, trust me it willoverall improve your workflow tremendously.So that is a quick side note. And now of course,we're heading back to our project. So that'show we're coming out, we cannot have herea statement. But if we'll set up a expression,everything will work. Now, if I'll try todo the same thing, for example, with a paragraph,and in here, I'll pass six plus six. Now,of course, I'm returning a value. And as aresult, I'm going to have this 12. So that'show we can work with JavaScript in the JSX.So we set up here, curly braces, that meanswe're going back to a JavaScript plan. AndLand Of course, as long as we're setting upexpression, we're good to go. Now, of course,we can do tons of cool things in here. Forexample, I have the author. Now, what is theproperty, or I'm sorry, what is the methodthat we can use on a string, we can go to,for example, uppercase correct, I could justinvoke it. And I'll see that my value rightaway is invoked. So these are just a few thingsthat we can do. Now that we know that we canset up JavaScript in our JSX. Essentially,you can see that we right away make our JSXway more dynamic. That just means that wedon't have to hard code everything. amazingjob. Now that we know that we can access JavaScriptin our JSX course let's take a look at theprops. Wire would want to props. Well, eventhough I could set these ones up as variables,I can pass them when I'll copy and paste Thebook essentially went on have multiple instancesof the book, at the end of the day, they willstill display the same result. So now I'dwant to take a look at how we can change thesevalues here, depending on whatever we arepassing in. Now I'll start by moving all myvariables, right after the CSS. So I'll sayhere, set up bars. And then I'll do the samething for the title. So I'll push it overhere. And you know what, I'll do the exactsame thing with an image. So call this const.And an IMG. And that will be equal to whatevervalue I have or here, now right away copy,a string is going to be easier copy and paste,I have author, title image. And now of course,where I have the source. Again, I go backto JavaScript land. And what is the variablename, that is I am G. So once I sell it, nothingbreaks, which is beautiful. When our removesome of the stuff that we added in last video,I don't think it is necessary over here.Let's remove both of these things as well.So now we go back to our standard setup. Soonce this is done, well, how we can pass somethingunique over here, because like I said, orcopy and paste. Yeah, it works really well,we get the same instance. And everything isbeautiful. But the values don't change. Now,book is a function. Correct? Now, what dowe know about functions in JavaScript? wellknow that there are parameters or arguments.So if I would have simple function, if I setup some kind of parameter, for example, name,and then if I pass it in, and of course, Ican use it in my function. So can we do thesame thing in react? Now, let's say, and youcan probably already guess that. I'm suggestingthat that most likely, we'll be able to dothat. Otherwise? I mean, I wouldn't be kindof mean, wouldn't it? Okay, so I have my bookcomponent, which is a function. Now wheredo we write usually parameters? It is righthere. Correct. So let's write a parametername. Now, all right, this is a prop, becausethat is a general convention. It just standsshort. For properties, we usually pass in.However, you can call this shake,and bake,and bake, or whatever you would want. Okay,just keep that in mind. And of course, we'lltake a look at the example a little bit laterwhere we call the shake and bake. So we'vegot our props. Now, of course, I want to consolelogin, because I want to see, well, what isthis value here? What is this props, and Ican console log in two places, I can do itabove the return. And I can just say props,just make sure that the name is exactly thesame. So if you're trying to test it out thatyou can call this whatever you would want.So if you wrote here, bananas, don't consolelog props, console log bananas. And also Ican do the same thing here. Correct. Becauseremember, in the JSX, we could console log,meaning we can go back to just bland certainhere. All right, perhaps, as well. And we'llnotice something interesting, where if I inspectin my console, I have object object object.Okay, what's happening here? Well, there isan object. Now the cool thing now is that,of course, I can access that object. But obviously,the next question is, how can I pass somethingin here, I do have the object. That's whyyou can see that we can name it whatever rude.One can be banana, she can be shaken, bake,whatever. At the end of the day, it's alwaysgoing to be an object, our convention is usingprops. So unless you want to be a real rebel,I would suggest sticking to that convention.And you're not I think there's too many consolelogs at this point. But beautifully, we cansee that it is an object. Now. Well, in orderto pass the sin, we need to go back to wherewe are rendering the book, not where we'resetting up your access, or where we renderthe book. This is where we need to pass it.And the way we pass it, we have a prop name,and then whatever value. So if I'm going togo here with a random problem of a job, andif I set this up as a value of developer,you'll notice that now when we go consolelog, we have job. And then we have developer.So that's it. Awesome. Now, of course, wecan access those values. Now a few thingsthat we can notice here. For the second book,I'm still console logging the props. However,I didn't pass anything correct. In here, coursewe have the job with the value, how in here,or just have the empty object? That's whythe second console log essentially is justan empty object because I didn't pass him.Can we pass something in? Yeah, I can saytitle. And I'll call this random battle. Ram,can we pass for example, a number? Yeah, Icould go with number, where price or whatever.And I can just say simply over here, the valuewill be equal to something. Again, I go backto JavaScript, because again, this is stillJSX. For the time being, I'll just pass in22. So now notice, for the first one, I havejob, and developer, that is the property andthe value in my object. Horror, for the secondone, I have a title property, the value israndom title. And here are passed in a numberproperty with a value of 23. So what I'm tryingto say, as far as the value, same as withJavaScript, we can pass the values here inprops. Now the next question, of course, isnow how we can access them. There's multipleways that we can do that. That's why we'llsplit this up in multiple videos, but themost basic one would be using the same namethat you used over here. So again, if I go,shake, and bake, I'll still be able to doit. Keep that in mind, but you use the samename. And now of course, we are just accessingthose properties, just like in regular react.Now, I did not pass my correct values as faras author, title and image. So for the timebeing, I'll just create two paragraphs willshow you how I can access those values. Soin here, I'll say that I'm looking for propsand a job. And then we'll see two things,we'll see that for the first value, we dohave developer. So that is correct. But thenfor the second one, we have nothing. Now whyis that happening? Well, because I did notpass the prop by the name of job for the secondone. So that is what is going to happen whenthe prop is not there. So if the prop is notthere, it just won't be displayed.However, in this case, I have the title forthe second one right here, copy and paste.Again, I'm looking for props and then battle.So now of course, this will be displayed onthe second one, but not on the first one.So hopefully this makes sense where when you'resetting up a list, of course, you need tomake sure that the props that you're passingactually match to whatever you're lookingin the component. Correct. So if for example,in the component, I'm looking for job, andmake sure that all your instances have thatjob, because if that value won't be there,well, you just want displayed on the lastone, let's go with paragraph here. And again,we'll look for props. And then what was theproperty that I was looking for, not as ofcourse, the number, of course, I'm passingin the number of murders, right, so we canstart making these values more dynamic, asyou can see, because we're accessing the props.And, of course, when we're rendering the book,we pass it in again, we have proper name,and then the value. And now as I'm lookingat my values over here, calm, we set thisup as two separate objects, where essentiallywhat I could do is for the first book, passthe property values from the first object,where of course, I'm going to have my image,my author and title. And then of course, wewill do the same thing for a different book.Now let me look for a short name. I thinkI'm going to use this one, because I justdon't want to copy too long of a name. Solet's do that. Let's refactor these threevalues into a object and let's call this firstbook. So const first book, that will be equalto our object. And then again, we have a bunchof properties. I'll start with an image andI'll just take these values. So cut it out,copy Based on what else we have course wehave the title. So we're going to go withtitle property. Man, what is the value itis this one over here we have the last oneof the author. So we'll go with author, andalso this equal to whatever value I had.And now, of course, I would want to accessthem. Now keep in mind, we could have accessthis as a straight up variables, like I justhad them before. The only difference rightnow is going to be that of course, I'll setup proper props. So in here, let's start withIMG. So that's my IMG prop. And that willbe equal to first book, because that, of course,is my object name. And then property valueis IMG, a man where I'm accessing the propsright now, I'm not going to be looking forjob title number, since I will remove themhowever, for the image. And we're going togo for props. And then I'm looking for theI am G. Now of course, again, I'm grabbingwhatever I have, in the first book, I wouldneed to do the same thing for the title. Soagain, the proper name is title. Again, we'regoing back to a JavaScript land. And in hereon maxon, first book, I'm not I'm lookingfor the title. So I'll say first book on landtitle. Again, let me emphasize something whereit doesn't have to be an object, we couldhave just access the properties. But sinceI would want to set up two of them to objectsince I would want to have two different values.That's why of course, I set it up as a object.And last one was the author. Again, we havethe proper name, which is an author, and thenwe look in the first book, and then the propertywe're looking for is the author. So now ofcourse, I can remove these ones, they werejust for testing purposes, and then just replacewhere I have the props, more preferred title,where I have the author, I'm looking for theauthor. Now the problem right now is goingto be that Yeah, the first one is displayednicely. However, for the second one, notice,I'm just passing in some random values. Solike I was saying, Yeah, we can pass whateverprops you would want. But keep in mind thatif in the component, you're not looking forthem, Well, nothing is gonna happen. You canpass all day long, but nothing is going tobe around. However, if the component is lookingfor specific prop and you're not passing,notice, I cannot see the image. So what wewould need to do, well, eventually, we'llset up a list and we'll iterate over the list.Now all that is coming up. But for the timebeing, what I would want is just copy andpaste. And we'll write a second book. Nowwhy am I setting up a second book becausenow of course, I would want change of thosevalues, shown here, I'm going to go for copyimage address, and we'll replace it. We'regoing to copy and paste. So this is goingto be different image, then, of course, Iwould want also get my name. So let me see.Now, of course this navigates here. So I guessI can just copy and paste from here, or so.So let's navigate back, we're gonna go witha different value here. And of course, I alsowould want to get a author. So let me somehowcopy and paste, comprehend, praise the author.And there it is, now we have this value. Sowhat we need to do right now for the secondbook, is pass these values as well. But remember,of course, now I'm looking for the secondobject. Now I could technically look for thefirst one. But it somewhat doesn't make sense,since I wouldn't want to be that. So I'm goingto go with IMG. That will be equal to a secondbook. And then again, I'm looking for IMGproperty. Then the same goes for title whenI'm looking for title. And then I'm lookingfor second book under Title. And the lastone, of course, you can probably already guesswe have the author. And then we're lookingfor second book, the author. And once I passin these values, noticeI have my first instance. All that is beautiful.And I have a second instance where I'm gettingthose unique values. So we can already seeon nicely, we can start creating these listswhere Yes, they all will be displayed thesame way. Because we made sure that when we'resetting up our component power, because wehave something called props, we can startpassing in unique values, where we have propname, and either we can hard code here, MikeWe did in the beginning with a string, eitherwe can set up a variable, or we can set upobjects or arrays or whatever, and then passit as a value here as well, since when weset up curly braces, we're going back to aJavaScript land, couple of roles, we can callit whatever we want. But convention is callingit prompts. One way how to access it is justby looking in the object that we're getting.So we'll go with the props, and then whatevername of the prop. And the last thing is thatif you pass in some Prop, that you're notlooking in a component, nothing will happen.But if the component is looking for the propthat you're not passing in, essentially, you'lljust have the empty space, Sharon's componentis going to be looking for the prop. But thevalue will be undefined. mostly done. Whilewe're still on the subject of the prompts.I also would want to show you two alternativeways how you can access them. And they allhave to do with the way we destructure propertiesfrom the objects in JavaScript. So if youneed to study up on that, please do so. Becauseagain, this has nothing to do with react,it is just a JavaScript. Where if fine nowwas that I have this props object. And ifI don't want to repeat myself, where I goprops dot props, dot props dot, I could justthe structure of the properties, where I cango with cons or what. So in my case, I'm goingto go with cons. And then I'm just going tosignal which properties out one. Now keepin mind, though, that of course, I still needaccess, the same thing that I'm setting upas a perhaps, in my parameters. So these namesneed to match. Otherwise, it's not going towork. I'm not, I'm just going to say yeah,I would like to access image, I would likeaccess title, as well as the author. So Igo with IMG, then the title, and then comma,the author. And once I have access to eachand every property in my props object. NowI'm going to select multiple cursors. AndI do that by pressing option, and mouse. Andthen of course, I will remove the props, Idon't need them anymore. And as you can seeright now, on accident each and every property,and everything is still render. So that'sone of the options we can do on Also, if you'refamiliar with structuring, you also know thatyou can do directly where you're setting upthe function parameters. So here's what I'msaying right now. I'm saying yes, I will geta object, I know that my props, of course,is going to be an object. And I will destructuredhere in the parameters instead. So I don'teven need to set it up equal to props. Becausenow I'm just saying, Yeah, there will be aprops object, and this props object is goingto have these properties in there. so we cansimply say, IMG, and title and the author.Now please keep in mind that both of themare exactly the same. So the result is exactlythe same. These are just the syntaxes thatyou'll see around where some people preferdoing destructuring.Here, where did you set it equal to an object,or you can do it directly, where you're settingup parameters. Again, if you need to jog yourmemory, please check object destructuringin JavaScript, because this is not react Pacificcentrally, this is JavaScript. And if youare familiar with object destructuring, you'reknow that of course, we can destructure evenmore nested structures. In here, I'm not goingto create a more complicated example justto showcase that. But I will just want tolet you know that if you are familiar withthat, that yes, the same rules would applymore. For example, if in the author, I wouldhave more properties, essentially, if theauthor would be an object, I'll just placea colon, and then I'll keep on structuring.And yes, we will do that in some of the laterprojects. But for now, just remember thatif you don't want to shut up props objectin your parameter, and then access each propertyby typing the props, and then dot and props,and that you can either destructure them insidethe function body, where you just look forspecific properties that are in the objectand markers, IMG, title and author, or wecan simply destructure the props object inthe function parameters. And while we're stillon the topic of props, I also would like totalk about the special prop called children.So this is going to be the case where pleasedon't name this mama juice. Okay, this isnot the case where, as usual, I say, yeah,you can name it whatever you'd want chicken,bake uncle Bobby or whatever. In this case,the name has to match exactly. Now, what amI talking about? You see, the children propis everything that we render in between theopening and closing tag off the component.So for example, for the first or second book,you can pick whichever you would like, I wouldlike to add the description. But again, thegotcha over here is that only one of themwill have that description, not all cars,evil would want all of them, of course, wejust need to add that property in the objectthat I'm looking for the Prop, I set the value,and I'm good to go. Now, this is going tobe the case where only one of them will havethat description. So I'm going to go withthe first one. But as always, you can pickwhichever you would like. So of course, first,I would need to change this around where I'mnot going to be self closing, because childrenprop will be here, in between my dogs. AndI'm just going to go with a paragraph on I'mgoing to use a lorem ipsum. So in Visual Studiocode, you just need to type Lorem. And howmany words you would like sir Marcos, I'mgoing to go with 20. Now the moment or runit, notice how nothing changes, I don't seeany difference. So the paragraph is only forthe first one. But there's no difference onwhat is rendered, show how I can access whateverI place in between. And keep in mind, again,you can place here, the whole project doesn'tmatter. In my case, I just placed one paragraphwith 20 words, but you can place your buttonsyou can place your forms, whatever you wouldlike place to in between the opening and closingback. Now the better question right now is,how can I access this. And the thing is, Ialready destructured the props object, whereI said that I'm looking for the prop propand the author prop. Now the children propis on the props object, I can tell you rightaway that it is there. So what I could dois just write comma, and then children nowDon't worry, I will refactor a little bitlater. So essentially, that way, you can definitelysee it. But for now, just look for children.And the name again here is important. Whatyou'll notice that since again, we can accessJavaScript can just place children whereverI would like. So once I run it, notice. Nowof course, everything is displayed correctly,because this is my paragraph. Now as far aswhere you would want to render, it's reallyup to you where if I'll move this up, notice.Now of course, it's going to be above theauthor, if I'll move this above the title,and of course, it's going to be about thetitle. Again, the name is very special, erasechildren. And in this case, I destructuredright here in function parameters. And thenof course you also accept, so we use the curlybraces, we go back to JavaScript, and thenwe access the same name. And then whereverI'm going to close this in the component,it will be rendered, meaning we'll place itin between the opening and a closing tag.And then where we set up the component, wecan render it anywhere. And where we wouldwant now mark is of course, I'm going to dothis in the bottom. So now let me rewritewhere I'm not going to destructure everythingand function parameters. Essentially, I'llgo back to props. So I'm going to go backhere to the props. I will comment this out.So I'm still accessing these values. And ofcourse, now I would need to go with props,and then dot children. Now the reason whyI refactor it a little bit, because I clearlywant to show you that of course the propswill be there. So if we go back, and if weinspect, take a look at the console. Noticeagain, I have two objects. So my props object.However, for the second one, eat has thischildren prop. That's why I said the nameis special, or I'm sorry, for the first one.For the first one, we have children. And thesecond one doesn't have that. So of course,that's why the second one doesn't displaywe children. The first one goes. Now CSS specificthing. For example, if you don't like thisCSS Grid, meaning that both cards right noware extended, you can simply go back to indexCSS. Where, where you're setting up the grid,you can say on line items. And we can justsay start on what you'll notice right nowthat only the one that has the children, meaningthe paragraph that I want is extended. Sothat's up to you. If you like this type ofseriousness matter where each card has itsown height, you can keep it. If you don'twant, of course, don't add it. So for example,if I comment this out, and of course, noticehow both of them are extended. Now, I willadd a little bit of CSS where I'm going tosay book, and we'll just say margin top, we'regonna go with, I don't know, porn, firearms,something like that. Not much in there. Andnow, of course, we know how we can work witha children prop in react, where again, isgoing to be content in between the openingand closing tag, when the name is special,you need to go with children. So either youdestructured here, function parameters, oryou still keep the name, and then you destructthe rest of the properties. By the way, pleasekeep in mind can still do it here as well,or say, children. And then of course, whenI access, I also need to access children.I can also do it this way as well. Nice, we'redone. And once we're experts on props. Nowlet's focus on our data. Because at the momentnotice, we have first book we have a secondbook on life is great. But we are somewhatrepeating ourselves on we were on creatingsame component, when I pass in the van, forexample, I will be setting up some children.And we can already imagine that if we havelist, like they have an Amazon, it would besomewhat tiresome to keep on repeating thesame stuff. So each and every time we wouldneed to create a object, then each and everytime, we also would need to set up a componentand then notice how our file is getting biggerand bigger. So if I have 100 books like this,it is not very practical. So how we can changethat around is we could set this up as anarray. So we would still have objects, butthey will be in the array. And then we coulditerate over that array. And for each andevery item, display that book. So that way,we don't have to repeat ourselves. And yes,again, we will refactor the application. Nowlet me just quickly mentioned the reason whywe keep on refactoring because, of course,we're starting with the most basic example.And we're slowly building up on that, as we'rebuilding up, yes, we will delete some stuff.Yes, we will refactor some stuff. for youguys. That's the only way we can do that.So our remove my children are time being,we really don't care about the children run.Well, of course, we're dealing with children,we're also will remove them. Now, of course,you can keep them you want. But since we'renot passing anything, doesn't really makemuch sense. I'll also remove averse childrenas well. And I guess let's start with ourlist. So first, we're have the first bookand second book, I can just simply removeboth variables. So these will become objects.Now what do we need to do here is simply setup array, and I'll call this books. So constis equal to a box. And then of course, let'senclose both of our objects. And of course,from here, it's not going to be a semicolonanymore, it is going to be a comma. Same thingover here, let's remove that semicolon. Now,of course, we get bunch of errors. Why? Becausethere is no variable anymore. First Book andsecond book. And I think it's actually goingto be quite easier. If we just remove theboth books as well. For the time being. Don'tworry, later, of course, we will add it. Sowhat I would want to showcase First, wellfirst I want to showcase thatyes, of course we can access this books. Alright.So in the book list, I'm going to go backto JavaScript, so I will shut up my curlybraces, and I'll just type books. Now lifeis great. But it says over here that objectsare not valid as react child. Okay, what ishappening over here? Well, we have the arraybut each and every item in that array is anobject. And react will complain that Listen,I cannot render the object. Okay, so let'sstart out with just an array of strings. Soin here, I'm going to go with const. And thenames. I'll pass in the uragan. So john, man,Peter, on also, let's set up, Susan. So threenames analysis that Oh, and by the way, thereason why I showed you this error, becauseonce in a while you will hit this error, whenessentially, you'll set up a map method thatwe'll cover a little bit later. So once youhit this error, just try to remember thatyou're not accessing the proper values. Becauseif you have this error of the child whereit is an object, that just means that youeither haven't structured properly, or you'renot acting properly. And now let's start outwith those strange. So now I'm going to goback to names, and life is awesome. I am displayingMirek correctly in react. Now the gotcha here,of course, is that I'm not wrapping thosenames in anything, right now how we can wrapour JavaScript powers in the HTML. And ofcourse, in JavaScript, we do that with a mapmethod. So I can write it here, where I'maccessing the JavaScript plan, or I can setup a new variable that is up to me. So I'lltry it with a new variable here. And thenwhen we work with those books, and of course,I'll do it right here in the React meaningin the JSX. So let's call this new name. Soconst, new names, and that is equal to A names.And of course, I'm iterating over this arrayusing a map method. And now what I would wantis to wrap each and every name in a headingone, because at the moment, yeah, it's nice,I can see my list of names. But it's alsosomewhat meaningless, because it is not displayednicely. So I already know that with map method,a magazine, each and every name. Now, if youwant to access that, of course, you can justset up a parameter. So I'm going to say herename. And then for time being if you wantto console log it, sure console, log the name.And this is also something that will do alot in the course is we will console log it.Now also console log new name, just so wecan see the result. And once we take a lookat the console, I can see it each and everytime. I'm logging a name. Alright, so my nameis john Peter, and tourism, but my valuescome back as undefined. And the reason forthat because I'm not returning anything. Sookay, we have the names, and I can accesseach and every name. Why don't we wrap thisin the HTML, meaning, instead of just displayingwhat items I have in my array, now, I'd wantto display each and every item wrapped ina heading one, and the only thing I wouldneed to do is go with return, then I'll setup my header one, and then I'll pass in thename shown here. Of course, if I want to accessthat particular variable, I will need to gowith a name, Mark. So that's how I'm actingright now. So I'm mapping over, and I'm saying,Yeah, get me the heading one. And then I'mgoing back to a JavaScript. Remember, thatwas the setup, where essentially, we weresetting up the name. Now, of course, if Icheck it out my value, then this will be alreadydifferent than I had before. Before that Ihad undefined. Now, essentially, you can seethat I'm getting something interesting. Nowthat's something interesting is my headingone. Now what I'm trying to say over hereis, by the way, you know what, I want to renamethis to new names. So if we will go back,and it will say, new names. You'll see thatnow I have john Peter and Susan, don't worryabout this warning, we will fix it. But themore important part is here, that yes, inreact we can, right away, render that array,our value array, of course, cannot be objects.So if you're going to have objects, you willhave some problems and errors and our if it'sjust a simple string. Yes, of course, youcan render our is going to make way more senseif we will wrap those values in somethingmore meaningful and mysterious. Of course,that is heading one. But in the next video,we'll take a look at how we can iterate overthe array as the object, and instead of justadding one, now I would want to return a componentfor each and every item, not a heading oneor Heading Two, or whatever, but the actualcomponent. Alright, and once we have covereda simple example, Now, of course, let's iterateover our books array, access each and everyitem, which is a object. So start by removingthe suckers starting from line 2224, I'm alsonot going to be looking for the names. Andwe're going to go right for the books. Solike I said, we can shut up separately variable,and then render it here. Or we can iterateover it in the JSX. Because remember, thatmap will return a new array. Sure, now I gowith a map method. And then I would want toaccess each and every item in my callbackfunction correct. And I'll name my parameterbook. Just keep in mind that whatever youname, this primer, will just point to eachand every object in our iteration. And forthe time being, I'll just return a low, becauseI would just want to see how everything isgoing to work. So once I returned us, hello,notice not acceptable. So that one is grayedout. But I have two routers. Now, why do Ihave two routers, because I have two itemsin the array. So as I'm iterating with map,I will always return the amount of items thatI have in the original, right. So if I wouldhave 2000. Since I'm just returning a lowfrom this function, I'll have 2000. So nowof course, if I really want to test that out,I can say well show me that book. And thatbookshould be this object, it should be the firstobject, second object, okay. And we alreadyknow that, of course, I can either accessthose properties, using dot certain, say,book, dot, author, book, dot image, or whatever.Or, of course, I can use destructuring. Andhere, I'm going to say const. And then whatproperties I'm looking for the same ones,IMG, event title, and the author. Now thatis coming from the book. Now, I'm not goingto console log them anymore. I'm just wantto showcase that here, I can return whateverI would want. So if I really wanted to, Icould say that there's going to be a div.Now I'm not going to add an image, but allthe other ones where I'll say, heading three,for example, with a title. And then headingsix is going to be with an author. So let'sadd those two values. And now of course, Ihave the name, as well as the author. So Ihave these two routers, like I said, I canreturn whatever I would want from this mapmethod. And of course, that will be displayed.The key, of course, was that we could notrender the object. That's why specifically,we need to look for those properties. Okay,good. Now what? Well, if we put two and twotogether, I already have the book. Correct?I already have the component. So in here,if I can return whatever I want, why don'twe return a book? So what we would need todo is just change around the div to a book.And now in a book, of course, the biggestquestion is, how do we pass in the props?Well, I could add them one by one. I couldsay IMG is equal to mg titles equals a title.That is doable, because Please keep in mindthat in a props, I already destructured them.Correct. I heard the structure, IMG, titleand author. However, there are two other wayshow I can do that. So in this video, I'llshow you the first one. And then in next video,I'll show you how we can use a spread operatorinstead. So instead of passing all of themhere, one by one, I could simply say, allright, you know, there's going to be a bookprop. And that book prop will be equal toa book that I'm passing in. So remember, wewere looking for what we were looking forthe object here, correct, sir instead of destructuring,one by one, IMG, title and author are goingto say I'm going to be passing this objectas a prop Nothing stops me whatever the problemis going to be that we will get an error here.Why? Because now props is not simply a objectwith IMG title and author is going to be aobject with a book object. So let's see, we'regoing to go with props. And like I said, there'sgoing to be no values here, because we'renot accessing the title. But notice how propsnow has the property that is the value. Andthen in that object, I see that I have myproperties. So what do we need to do here?Well, simply, we would just need to set upprops, and then the property that I'm lookingfor, what is the property, that is, of course,a book. So once I do that, now, I only havethis warning about the child, which we willfix in the next video. However, let's seethe cool thing, where now I'm iterating overmy array, and for each and every object, I'mreturning that book. And what that means is,for example, I can go and find another book.So for example, this one, I'm going to goand I'm going to set up a copy image address.And here was just make another object. Socopy and paste for the image value. That is,of course, going to be equal to my new bookran, of course, we'll alsoget the author work show. And I would wantto do the same thing with a title as well.So copy that value. And of course, I'll passit in the title. So now if we navigate toa bigger screen, check it out. Whatever itemswe will have in array. Now, of course, weare displaying them. And for each and everyitem that we have, we're using that book component,and we set up the map method. Now we don'tneed to manually keep on adding this bookcomponent each and every time. And we don'tneed to manually keep on adding IMG, titleand author. But what we could do instead isjust grab our book, meaning our parameter,which will point always back to that itemin the array, which in our case, is the object.And then of course, where we have the props,we are just destructuring our in this case,we're not destructuring, the props, we'redestructuring, the book property. So in thiscase, of course, I can just remove this bookaltogether, correct. And now of course, Ican see in my console that I have three items.Why? Well, because now I have three itemsin the array. So I guess I can remove thisconsole log as well. Now we just need to fixthis a little warning about the fact thateach child must have a unique key prop. Excellentjob, we have our list, the only nagging thingis the fact that we have this warning aboutthat unique key prop. What is happening hereon how we can fix it. You see later, as we'reprogressing with react course, what we wouldwant to do with lists is, for example, toremove some items or maybe add the items.And react wants to keep a track of what we'readding, what removing. So react is alwaysin the loop. Now in order to do that, we wouldneed to set up a special key prop for eachand every item that we're returning. So essentiallyeach and every time you have a list in react,you need to add a key prop with a unique value.Now I can tell right away that in most cases,we'll be hitting up the API anyway. So there'salways some kind of unique value, whetheror not to support a product, whether thatis for the user, or whatever. However, inthis case, since we are the ones who are settingup this items, well, of course, I'll needto add that. So in here, we just need to gowith ID, and then whatever value you'd want,as long as it is unique. So in my case, I'mjust going to go with ID one, an ID of two,and then Id of three as well. So copy andpaste an ID of three. So now of course you'llnotice that we have the error because we'renot passing it. Now how I can access that,well, I could destructured if I had one, correcther in this case, I think it's just goingto be simple where I go with book and thenID. Now I don't need to deal with that key,anything in the actual book. But now you'llnotice that react is not going to complainanymore, where now everything is fine. Aslong as you pass this special prop. Again,this is not chicken back. This has to be akey and unique value. Now one thing you willnotice once in a whilewhere people are adding index because in themap you can access index, yes, you can technicallydo that, in this case, there's going to beno problem, you can, however, it's going tobe a problem. If you're actually doing somethingwith a list. Here, my suggestion would befalling, where, if you know that your listwill never pretty much change here, you won'tbe removing the items, or adding them dynamically,you can technically love the slide and usethe next hour areas a better setup, if youwould always definitely use something unique,because keep in mind that indexes change asyour array is changing, how are the ID, sothat unique property won't change. Alright.And the last thing that I would want to talkabout in this video is another way how wecan pass in those props. So one of the wayswas setting up this book as an object Prop,where I have the book Prop, and then I'm passingin, of course, this book object. However,there's also a case where we can use a spreadoperator, again, my job is to show you multiplesyntaxes, multiple ways how you can solveit, it is up to you whichever way you prefer,if you don't like the spread operator setup,you don't have to use it however, it is myfavorites. I will use it some more often throughoutthe course. So what am I doing over here,instead of passing this as a object? WhatI'm saying is that, I would want to spreadout all the properties. So in year six, wehave spirit operator, where I just go withdot, dot dump on whatever is the name of theobject. So now what happens when I'm passingin, I'm not passing anymore this book propertyas a object, what I'm passing this in a separateproperties. And in that way, I don't needto use an a more of a book property altogether,what I can just say is that I would like tospread outall the properties here that are coming fromthe book on my property. So what that means,again, we go back to our previous setup, whereeither I'm looking for the props, if I'm destructuringover here, or keep in mind, I can also doit in function parameters as well. So yes,again, some refactoring, some different wayhow to solve that. I know it's annoying forsome people. But in general, it is a goodpractice to understand that there's multipleways how to solve it. And again, it's up toyou to decide whichever method you prefer.So again, if we will console log props, rightnow, you'll see that we are back to that setup,where props is an object. So not anymore,this book object that we're passing in, we'respraying out all the properties that we havein the book. So once it's back to being anobject, and of course, I can access theseproperties one by one, either here, or ofcourse, we can come this out. And yes, we'llrefactor it one more time where we say, IMG,title, and the author. Again, both of themdo exactly the same thing. So the result willbe exactly the same. But you will see thistype of syntax in other people's code. Soit's very useful to understand what is happening.So instead of passing a book as an object,and then accessing those properties, one byone, I can say how many properties I havedoesn't matter, just spread them out as props.And then of course, I can access them. Now,of course, the names need to match up or Icall this IMG. And, of course, when you'retrying to access them, when you're destructuringthem, that also you will need to have thesame name. My bad, not bad. We now know howwe can run the list of objects, and nicelywrap it into our component. But the next thingthat I want to talk about is of course, events.Everything is nice. We have our list. Of course,what makes applications so appealing is thefact that we can start responding to userevents, essentially, when user clicks thebutton or hovers over the card, or whatever.Now the problem is that we haven't coveredyet the state. So in our examples, we'll justdeal with console logs when maybe throw insome alert. Essentially, this is just to giveyou a general idea. When we cover state. Thenof course our examples are going to becomemore interesting because We will add someitems, we'll remove some items, we'll togglesome info, and all that good stuff. So thisis just to give you a general overview howthe event will work in react. Now, as a sidenote, if you'd like to see all the rents,because in our examples, we'll just take alook at the two hours just googling reactevents, and then look for this link, the syntheticevent. And then if you keep on scrolling,notice in react docs, you'll find all thepossible events that react supports. Again,in our example, we'll just take a look attwo, one on hover, and the second one on Eclipse.So I'll navigate back to our project. Andwe'll work in the book component, what dowe need in order to set up a vent in react?Now, first of all, we'll need to add the attribute.So right here attribute, and the second oneis the event handler. Now, the one thing thatis different from the JavaScript is that sincewe're setting this up in line, again, we needto make sure that we're using the camera crash.So instead of on click, lowercase, like youwould normally write as far as inline JavaScript.In this case, we need to set this up witha camel case, which would meana man, like I said, in our video, we'll takea look at the on click event. And the secondone will be on mouse over. But I just showedyou where you can find rest of the eventsas well. Now, we set it up. First, I'm goingto create a button. Now, technically, youdon't have to create button for the on click,course you can catch it 204 and one throughthe whole article if you want. But just tobe more correct, I'm going to add a button.So out here type, say that it will be a button.And then like I said, in order to set up aevent, we would need to have the entrepreneur.And since I would want to listen for clickerruns are simply we'll go with arm CT. Andlike I just mentioned, we will need to setthis up as a camel case. So on click, andthen we need to have our handler. Now, I'llset up multiple examples because we have multipleoptions, just so you can see whichever makesmore sense to you. So we can set it up asa reference. Or we can set it up as a inlinefunction, how we would set that up as a referenceWell, in here, I could come up with a function.So it's a click, ler. Man, of course, we arehaving our function, man, we just need topass it in as a reference. So we have clickhandler, and then we pass it here on click.So our click handler. Now what I would wantto do over here, well, I could just go simplywith our hello world. And you'll see thatfirst we'll have the button. But of course,I skipped the name. So let me write here,reference example, manual, so that I havemy button. Where is the reference example.And the moment you click it, you have theHello World. Beautiful. So we know how wecan respond to the first event, the clickevent. So this is going to be a referenceexample. But like I just said, we also havean option of setting this up as a inline function.Now what that means is that I could simplyplace my function here, instead of settingthis up as a reference, how's that gonna looklike? Well, in this case, I think I'm gonnago with heading one, just so we can spicethings up. Just please keep in mind, of course,as far as accessibility, that is not the bestcase scenario. But let's just go with that.So we'll have on click that and like I said,click will become my inline function. Andin here, I'll simply say that I would liketo console log, and I just want to showcasebut of course, within this function, I canaccess my variables, my props. For time being,I'll just go with a title. So once we clickon a title, in a console will should alsosee the title. So let's say I'm going to gowith console. Once I click on a title, notice,now I'm getting that specific title that isdisplayed here for each and every book. Ofcourse, title is unique. And then once weclick on the title, but of course we can seeit in a console log. Please keep in mind thatboth of them are doing the same thing rightnow. Great. In one case, we have the inlinefunction that has the functionality. In thesecond case, we Have the reference. So nowwe're referencing the function. And again,we have some kind of functionality. So youcan choose whichever option makes sense toyou. Now, the gotcha is going to be when wewould want to pass some kind of value. Sothis is going to be later on where, for example,we would want to delete the item for the list,we will need to pass the actual ID, so weknow which item to delete. So again, in thiscase, we won't delete the item from the listour, we'll take a look at what happens ifwe're passing in that item, because this isgoing to be a gotcha. So in here, I'll setup another button. Also, again, type is equalto a button will have a on click for timebeing, we'll just leave it empty, and alsomore complex. Example. Alright, good. So whatif I would have a function, and I'll callthis const and complex example. Again, we'resetting up our function in this function,I will get the author, I can get the ID, Ican get the title, I can even get the imageif I want to. But let's just imagine thatI would want to console log, this author,each and every time when I click it. Okay.Now, what's important, though, that this willbe passed dynamically. It's not like in herewhere I have a console log, and then I'm justaccessing the file, we need to imagine thatin this function in a complex example, I'mlooking for as an argument, so say, here,I will pass in the author. Now, you'll noticethat if I just run my complex example, ifI pass in the author, well, yeah, technicallyit will work. But it will work, the momentI render my application. So the moment I render,nourish, I run all three of them. So I haveall three orders over here. So why do youthink is that happening? Well, because here,notice, I invoke this function, I invoke it,the moment I run my application. And thatis not what I'm looking for. Of course, whatI would want is run it only once I click it.So here's the thing, if you have this kindof situation, where you must pass the argumentinto the function, you will have to firstset up a arrow function. So here, we'll startwith an N line. And then we can either setup the curly braces if we want, that's definitelyan option. Or we can simply say, you knowwhat, once I click run out want to run thefunction. Again, that is going to be the case,if you must pass this into as an argument.And again, this is going to be for more complexscenarios, where we'll start passing data,for example, to the database, or we'll beremoving items. Again, this is not going tobe just with simple console logs. Of course,at the moment, you can just simply argue,well, I would write it as an inline function,there's going to be cases where you cannotdo that. That's why, of course, I'm showingyou this. So now of course, what happens onceI click on More complex example, only thenI arrived, because we need to understand thatonce we start up the application, we run ourfunction or function. And then of course,we return the complex example. And only then,once we're clicking, then we invoke our complexexample. Also, I would like to mention thatin all the functions in all our event handlers,we can access the event object. In this case,I'll just show you with one with a click handler,just please understand, of course, you canaccess in all of them, where essentially,we have our event object. And we can do thingswe can console log event. And we can also,for example, go for event target, that's probablygoing to be the most useful scenario becausenormally you'll use this we inputs a lot,where we'll be looking for the name, we'llbe looking for the value, and all that goodstuff for the button, we'll just take a lookat what we're working on. So remember, thatwas the first one. So once I click, noticeI have my alert here that is beautiful. Andthen I have my whole big event. So of coursewe can find blotch of useful info here. Butalso, I have what I'm clicking on. So thatis my target. This is something that we willuse quite often, especially once we startworking with the input. And the second eventI would want to take a look at is on mouseover, which essentially occurs when the mousepointer is moved on to a element. So I canset this up anywhere I would like but I thinkI'm gonna go with an article just to makeit interesting. So first I'm ordering formy attribute for mouse over. And then again,we have the handler. Now in this case, I'llpass this as inline. However, instead of justimplicitly return like we had before. Now,of course, notice I'm setting up the curlybraces. And again, I will do some kind offunctionality over here. This is just theshowcase that regardless whether you go withimplicit return, or you're setting up thecurly braces, it will work. So we have ourmouse over beautiful. And we're going to gowith some kind of function.I don't know, I'm just gonna go with consolelog. And I would like to console log, I guesswe have been console logging the author, whydon't we console log the battle, because I'mstill access that specific title for eachand every component. So now what happens asI hover over a moment, my mouse moves on tothe element. Now, of course, I'm console loggingthe title of the book for each and every timeI do that, notice how I increase the amountin the console. So if I'll move my mouse onto a different arm, but of course, I willconsole log, that particular title. So that'show we can work with events. So essentially,those are the basics of how we can listenfor events in react. Alright, once we're successfullydone, we'll get to react basics. But beforewe move on to more interesting and advancedreact topics, I would like to cover importand export statement. Now, let me tell youright away that imports and exports are notreact specific. In fact, they are your sixmodules. So think JavaScript. And the reasonwhy I would want to cover them now is becausewe will rely heavily on them throughout theremaining of the course, as well as the project.And essentially Yes, six modules or abilityto import and export our code allows us tosplit up our app into small chunks, whichof course makes it easier to manage it. Ingeneral, there are two flavors named and defaultexports. And even though there are a few morevariations for both of them, for now, we'lljust cover the most straightforward setup.So as we're looking at our app, everythingis beautiful. But don't you think that ourindex js is getting quite big. And we needto keep in mind at the moment, we literallyhave only three cards with some books. Ofcourse, normally, you have way more functionalitythan that. So wouldn't make sense to startsplitting up our functionality into separatefiles. Because that way, of course, we canmanage it way easier. So here's what I'm talkingabout, I'm going to open up the sidebar, inthe source, I would like to create two newfiles. So one is going to be called books.js, this is where I would want to store mybooks. And the other one is going to be bookjs. And this is of course, where I would wantto store my component. So my book component,let's create this file, so a new file. Andthen I'm going for books, j s, this is whereI'll store my data. And then I'll have anotherone new file. And then I'm looking for thisbook, man, j s. Now what I would want to doright now is head back to index j s, and grabmy books. Alright, so let's keep on scrolling.And just got it out. And then of course, wenavigate to books, just copy and paste. Noweverything is beautiful. But of course inthe index js, where we have the book list,of course, we are not anymore accessing thebooks. So how we can fix that, well, in thebox j s, we would need to go for the namedexport. Again, there are two flavors, andyou can use them however you like. Meaningwe could have set this up as default exportas well. But I'm going to show you the namedexport movie as a box. And then with a book.So with the component, I will show you thedefault export. So we go here we use export.So that is a key word. And then of coursewe go with let or const and then whateverwe would want to export. So that's going tobe most straightforward setup. Like I said,there are a few flavors. So essentially, thereare a few other ways how we can write thesame thing. Again, the idea won't change,we're still exporting this box array. Butthere are a few more variations how we cando that. But for now we'll just stick withthe most straightforward one, where we gowith export and whatever we would want toexport. So now of course in the index JS WhatI want is to import and similarly like weimported the index CSS. Now of course I'mlooking for that particular right, now it'sgoing to be a little bit different where I'mgoing for the import statement. Then sinceit is a named import, or named export, I wouldneed to go with curly braces. And then thename for the named export needs to match exactly.So if this is Bugs Bunny, make sure that inthe index js, you're also targeting the samename. So in my case, I need to go for books.So go for books, and that is coming from.And now we go with relative path. So noticesomething interesting. We're not importingfrom the package, like we did with react,which of course, was coming for our node module.And like I mentioned back then, since it isnot coming from the node modules, now we needto set up a path. So in this case, since itwas coming from node modules, we didn't care,we just said, Hey, get me this one from thispackage. However, in this case, we need tohave a relative path. But since the box isin the same folder, I just go with that, thenforward slash, and then I'm looking forwardto file and I go here with books. Now, sinceit is a js file, we don't need to have theextension. Previously, remember, when we workwith CSS, we needed to have the CSS extension.with JavaScript, we don't have to do that.So if it is a JavaScript file, excellent.We just keep on moving on. So now we saveit. Okay, beautiful. And notice how our appstill works. So everything works as expected.Now, of course, like I said, he file, forexample, set this up as data. And I'll saveit notice, it will say, well, books is notdefined. So now of course, since I named thisdata, also where I'm using it, of course,I would need to rename it as the however,it says import error data is not exportedfrom books. So if you're changing somethingaround, like I said, this is a named export.So for example, you need to access exactlythe same name. So in here a maximum data however,React is complaining here, listen, you'renotexporting data. So if that is the case, ofcourse, we can just change it. So that isup to you. This is just to showcase that,of course, names need to match exactly. Soonce we have this particular setup, everythingis beautiful. And now let's focus on the defaultone. Now before we set up our components,let me just show you the extension, like Imentioned previously, where we have the reacts,numbered. So for example, if we create thiscomponent in if I go with a snippet of oura FZE, are right away have my component. Andthis is going to be the case where it willalways match the name of that particular file.So in this case, notice it is named book js. So that's why right away my component isbook chairs. And again, there are multipleflavors. But this is the most basic one, wherewe import react from react, of course, weneed to do that, since we're setting up thecomponent. And as far as default export, wego with export. But then we have this default,and then whatever we would want export asdefault. Now surely the differences betweenthe two in a second, but just keep in mindthat of course, again, these names need tomatch. So if you're setting up your function,your component, name and book, if you wantto export as default, of course, you wouldneed to use the same name. And also keep inmind that you can have only one, only onedefault export per file, meaning you can setup more named exports from this particularfile from book js. But as far as default,you can have only one. Now what I would wantin this book JS component, once had back tomeasures. And then of course, this is my component,correct. So what I could do is just keep onscrolling, keep on scrolling, crowded out.And we can just remove the empty functionthat we currently have in the book, component,and then copy and paste. And now of course,everything works awesome. So everything isdisplayed exactly like we wanted. And nowin the index, again, we would need to importshow the difference between named and defaultexports is the fact that now I can name it,whatever I want. Shown here. If I go withimport, if I'll call this book, and then froman angle again, we're looking for relativepath. We're looking for book js, everythingwill work as expected. So now when we savenotice here is running like nothing happened.Okay? So once all that is running, now, onceeverything is in place, then of course, wecan just take a look what happens. If, forexample, I change this name. So I have importbook from the book. Like I said, this is adefault export. So what that means is, I don'tneed to look for a specific name. So if I'llchange this around, and if I'll call thisspecific book, then of course, the only thingI need to do is change where I call it. Sonotice here I have my book. So if I'll justcall this specific book, you'll notice thateverything will still work. So even thoughI renamed it and from the book jers. On exportingthe book, everything works as expected, becauseit is a default export. And I can rename ithowever I would want. So in here, I renamedit to a specific book that is coming fromthe book js file. And then of course, theonly thing I need to do is just remember,what is the name I gave. So if this was specificbook, of course, I need access to the samename. And then let me just show you the relativepath from a different folder. Because oncein a while, of course, we will use that throughoutthe course, where I'm just going to createa new folder. I'll say, testing here. Andwithin this folder, let's just come up witha file of testing a j s, and let's exportas default, and also export. Let and we'llcall this hello world.So greeting greeting. And that is going tobe hello world. Cheryl in any of the filesnow, we can exporters' our Of course, relativepath will change because now we need to goone level up into testing. And then look forthis testing j s file. Again, it's not goingto do anything however, I just want to showcasein the index j s, where if I go with import,remember the name was greeting. And we'reexport it as a named import. So we go herewith a greeting. And that is coming from.So now we're looking into the testing testingfolder. And then we're looking for the testingfile. So testing js. And now of course anywherewhere I would want I can just for exampleconsole login. So I go with console, log andthen greeting. And of course, once I openthis up, I will notice that in my console,I should have the hello world. And of courseI do notice the line 12 is hello world. Soeverything works as expected. Like I said,it is not a react thing. It is iOS six modules.Man. If you have covered iOS six module beforeyou are in good shape. However, we will heavilyrely on this functionality, because it willjust allow us to set up our applications ina more manageable way. We're notice now Ihave my index JS in the index js, I only havethe book list. So that is my component. Andthen I'm getting the specific pieces of datawhere all the books, whether that is specificcomponent, or whether that is some other functionality,in this case HelloWorld. And as you can see,it is much more easier to manage arap wherewe split up our data into multiple files.So those are the basics, how we can use import,export statements in create react app. Andthe last thing that I would want to coverin react and basic section is how we can hostour application on the internet. So how wecan move the sucker from localhost 3000 tosome kind of URL that we can share with ourfriends or family or anyone that would beinterested in our project. Because of course,it is kind of hard to do with our localhost3000 correct. Now, there are many hostingproviders out there. But for this specificone, I picked netlify because it is very easyto set up and you will have your applicationonline in no time. Now you can sign up forfree, so they will not ask for your creditcard. So keep that in mind. You're in goodshape. Online. Once you sign up for account.Of course you'll have ability to log in, whichis exactly what I'm allowed to do. And thenonce you log in, if you keep on scrolling,keep on scrolling, you have this option ofjust drag and drop. Now Later, we'll takea look at the continuous deployment optionthat is through the gate. However, in thiscase, we'll just cover the simple drag anddrop essentially These are just the projectthat I'm already hosting, on nullify. So ifyou just sign up for an account, of course,this part will be empty. So if you'll go withcontinuous deployment with git, which we'lldo later, then you'll use this option newsite from GitHub, or in our case, like I said,we'll keep on scrolling. And we're lookingfor this one to deploy in your site, withoutconnecting to get drag and drop your sitefolder here. Now, before we can do anything,remember, we have this option of NPM, runbuild. So that sets up our production build.So instead of running NPM, start, which spinsup the dev server, now we need to go withNPM. Run, build. And once we run this command,of course, our production build, the one thatwe can host online, is being created. Andonce it's done, it's going to be availablein the build folder. So that's the folderthat we willdrag and drop in. And of course, once it'sdone, notice, it says that everything is goodto go, the bill folder is already to be deployed.Now we either can run serve, and that willjust show what do we have locally. But ofcourse, that's not the option we're lookingfor, I would want to see how it's going tolook online using natla phi. So of course,in this case, what I'm doing here, by theway, let me close my bunch of windows on whatI would want is, of course, everything issaved up over here. And what I would wantis to open this sucker up, I have my build,and I'm looking for this build folder. LikeI said, we'll just drag and drop. So grabthe build folder, and just drag and drop overhere that I know maximize my window again,it's gonna give you this interesting name.And at the end, you'll notice this netlifythat now of course, eventually, you can havea custom name. So if you have or even domain,you can connect to nullify. But for our purposes,we'll just use this option, where essentiallythere's going to be this netlify dot app.So we're looking for Site Settings. If we'reon version nine, we go for change site name,and then you can come up with whatever nameyou would want. So I'm going to go with reacttutorial, or basics, tutorial, basics, tutorial,and then 2020. That's the name I chose. Ofcourse, if you'll go with some type of namethat is already used, of course, it's notgoing to be available. So it will complain.But in my case, I think I'm going to be goodto go. So of course, that is my site. So nowwhat I would want is either go to overview,and then just click on this URL. And you'llnotice that this is our project. And now itis successfully running online, where youcan share it with your friends and your family.Essentially, all the projects that you create,you can host it with notify within a matterof seconds. Again, you'd sign up for a freeaccount. And I'm gonna ask you for your creditcard. And what you could do is just use thedrag and drop option where you run NPM, runbuild first, then drag and drop. And thenof course, you have your Project Online withina matter of seconds. Nicely done. Hopefullywe're familiar with react basics. And I thinkthis is a perfect time to dive into more interestingand more complex react topics. Now, when itcomes to advanced react, a lot of our attentionwill be spent on something called hooks. Andby the way, you can see that by just lookingat the names of our upcoming topics, if ithas the name use in it. So use state use effect.And along those lines, that just means thatit is certain react hook, we will talk about.So why hooks, you see if all we have is acomponent with some static data, or a componentwith a list, life is great. But once we wantto make our components dynamic, and more complex,and of course, as a result, also our app,we will need to use react hooks, which arefunctions react provides to help us to completevarious tasks. For example, adding removingthe items from the list, toggling the modaland fetching the data, just to name a few.There are quite a few hooks out there, butI can honestly say that if you understandonly two of them, use state and use effect,you will be already an extremely good shape.That's why we'll cover them first of the mostnumber of examples on them. And we'll keepon using them, even if the main topic of thelecture will be some other hook, or differentsubjects. As we'll be approaching the endof the section, you might find some repetition.But it was done on purpose only because Idefinitely would want you to be familiar withthose two hooks. So you state and use effect.And my experience when it comes to learning,important stuff is well worth repeating. Now,even though react hooks will be the main focusof this upcoming section, we will cover otheruseful topics as well, like conditional renderingforms in react, prop drilling context API,as well as react router, all included. Soby the end of the section, you can easilybuild cool and complex react apps. In orderto follow along with the upcoming part ofthe video, you'll need a starter project,I provide a link at john smith.com. So bravelynavigate to John's milk without calm, andthen look for the videos page. And in thevideos page, of course, we are looking forreact. So click on that page. And, of course,at this point, I haven't uploaded the video.So that's why for me, I can see the JavaScriptbut by the time you'll be watching this, ofcourse, there's going to be a big massivereact logo. And then you're looking for thissource code link, click on that. This is goingto direct you to my GitHub, more specificallyreact advanced 2020 repo. And once you getthere, you're in good shape. Once we havea good idea of what we're going to cover nexthour want to start by getting the starterproject. So just follow the link of that Iprovided. You can either download zip forkor clone. And I think I'm going to go withclone option, I'm going to navigate back tomy desktop. I'll zoom in just so you can see.So of course I'm in Terminal now navigatingto a desktop, and I'm gonna run git clone.And of course, now I have my repo run, I'llopen up the Visual Studio code, drag and drop.Now my preference is right away, set it sideby side with a browser. But of course, thatis up to you. I'll also have one bigger browserwindow open as well. So in this case, I'mgoing to go with new window and offset sideby side with my texts that are sure I'll havebrowser on a small screen, of course, andalso, the big one, as well run in the VisualStudio code, first we will need to do is installthe dependencies. So we're going to go herewith NPM and install amount. All right awareon the command of NPM start, which obviously,we'll spin up the dev server on localhost3000. And once the dependencies have beeninstalled, also, once the dev server is running,run, I'll just open up localhost 3000, smallscreen, as well as the big one. So let meopen up one more browser window. So this isgoing to be a big browser window, of course.And at the moment, of course, there's goingto be nothing there on localhost 3000, becausetheir server is not running yet. And oncethe dev server is up and running, you shouldsee your screen advanced react. And same thingshould be on a small browser window. Again,the URL is localhost 3000. And then at thispoint, I think I'm going to close the integratedterminal. And I'll start by giving you a overviewof our project, just so we all are on thesame page. As far as the store, a lot of thingsshould look very familiar, since I use thesame create react app boilerplate we usedin the previous section. So remember, previously,when we run, create react app, online, wecreated our first project. Well, essentially,I did the same thing. But of course, I removedand added some files in this case. Now whenit comes to upcoming lectures in order notto waste your time, I already prepared allthe necessary boilerplate. So we just needto focus on functionality. And the same goesfor styles, even though we are not going touse that much CSS. Since at the end of theday, it is still tutorial, I did prepare onCSS for you though, you just need to includeclasses and you'll be good to go. I also providedthe complete source code so that way you canright away compare it with your results soyou don't have to run around and see wherethere are you right away can look in the finalfolder and you'll be in good shape now Asfar as the files and folders, like I said,a lot of things should be very familiar, wherewe have the public. And of course, we havethe source. Now we will do all our work inthe source folder. Now the difference, rememberin the previous section, we worked in theimage. Now, in this case, what happens witha boilerplate, they right away set up indexj s, as a place where they import app component.And then remember that document get elementby ID, where essentially, we are placing allour functionality into that route there. Whilethey're doing that by just placing thatapp component. And I just left it the wayit is. Because that way, once you start abrand new application, we have create reactapp, you're not going to be confused. Justremember, it is the same thing. Previously,we just set up our components in the indexj s. In this case, what they're doing is theycreate everything in the app address, meaningall the components meet in the app js file,run the export as default. Remember, by theend of the tutorial, we talked about exportingand importing, in the image j s, very importapp up and just place it over here. Now asfar as this reacts, Rick, no, don't worryabout it. This is just for create react apppurposes. Now in the objects, if you justwant to simply test that out, we can changeon return. And we can say here Heading Two,and let's say advanced, advanced react tutorial.And like I said, the idea is exactly the same.All we had in the previous section. The difference,of course, previously, we placed our componentsright here next to the render method. In thiscase, they have this app. So the root componentwhere all of our components were made, andthen they just run through it. Now when itcomes to CSS, like I said, I already preparedeven though there's not that much CSS alreadyprepared a little bit of global styling, somefonts and all that good stuff. So if you'reinterested, of course, be my guest, you cancome here and check it out what kind of stylingare added. Now the most important thing isthe tutorial folder. So in dorial folder,you'll see a bunch of folders, starting withone on non hyphen use, sir, what that meansis that it's going to be our first topic.And then for each topic, we will have twofolders, we'll have the setup folder. So thisis where we'll do all of our work. Like Isaid, I also provided right away a completesource code. So that way, if you don't getthe result that you're looking for more thanjust right away, navigate to a final folder,look for the same exact file we're workingon. You'll get your answer. Now in the nextvideo, I'll show you how we'll be doing importingand how you can right away, check out thefinal. The one thing that I would want tomention, though, is that I saved up on theboilerplate, where you will notice that inall the setup files, right away have the component.Now I'm also right away exporting as default.And I'll talk about it in more detail in thenext video. But the idea is that we don'tneed to create each and every time the fileand the component and all that annoying stuff.Instead, everything is already right awayprepared for you, then you'll just have toimport that particular file in the app js.And then just follow along and do all of yourwork in this file. So that way we can focuson functionality instead of unnecessary boilerplate.And that is the brief overview on start application.And I think we're ready to kick things intogear. And finally, learn some advanced react.Nice. And once we're familiar with a setupcourse, of course, we'll start by lookingat the use state hook. Since like I just mentioned,the use that as well as users are going tobe most used hooks. However, before we doanything, let me just showcase why we wouldwant to use use state in the first place.Now this is going to be a basic example. Pleaseunderstand that course, you state can do wayway more than that. But I think it's goingto give you a good idea why using use statehook is necessary as our applications getbigger and more complicated. So the file thatwe're looking For years going to be locatedin tutorial folder, a man we're looking forUS state. And then we have the final one.So that is going to be our complete code.And then we have the setup one. So this iswhere we'll do our work on the file we'relooking for is this error example, j s. Now,first, what I would want in the app j. s,though, is set up the container.Now, why do I want to have a container, becauseit's just gonna have a little bit of styling.If you navigate to index CSS, you'll noticethe container class, I just added a littlebit of styling. So I'll add that containerfor all my examples. Just please keep in mind,it doesn't affect the functionality, it justaffects how the examples are going to looklike. So if I navigate back to jazz, I'm goingto wrap all my examples into this container.So what I would want right now is where wehave the return, we're just going to go withdev within us there for the time being justto showcase that nothing will change our placethe setting to so let me move up the syringehere. Now, of course, I need to set up a properreturn, and all that I don't want. So I donotice, like I said, equal just this classname of container, we'll get a little bitof styling. So essentially, I'll place allour examples in that container. So that way,it's just going to look a little bit better.And then in order to work with our files,we're looking for this error example, chairs.Now all of them have been set up as default.So we can name them whatever we would want.Now in my case, I named them explicitly whatwe're covering in that particular video. Forexample, if this is our example, I went withexplicit name. Now, of course, if you want,you can shorten this up in the objects. Thatis up to you. And Marcus, I'll call all ofthem setup, meaning as we move from lectureto lecture, I'll keep this name off setup.And the only thing that will change is thefile where I'm getting the component. So inthis case, of course, I'm looking into theOreo folder, when I'm navigating to use state.And then I'm looking forward to setup. LikeI said, I'm, I'm looking for the error example.So that's the component I would want to workin. That's why I'm importing into address.And then I'll just place it in the container.So I have my setup. And I'm good to go.So what you should see on the screen is thistext of use state, or example, if you seethat VAT is awesome, because that is the filethat we will work in. Now if that is not thetext that you see, then of course, make surethat your import errors correct. Like I justmentioned already 30,000 times, if you wantto see complete code, you're looking in thesame folder in the US state however, you'relooking for the final folder, an error, exampleaddress. So the filenames will be exactlythe same. The difference, of course, is thatin here, you can see the complete code. Sofor example, in the app j s, if you'd wantto see the complete code, what you could dois simply go with import, again, whatevername because it is default. So in my case,I'll call this final from online. Again, we'relooking forward to dorial, then I'm lookingfor US state, and I'm looking for final, andthen our example. So right below the setup,I'm going to go with my final, and you'llsee the complete code. Okay, so this is whatwe will build in this project. Now the reasonwhy I'm showing you that because that is goingto be our setup for the remainder of the advancedtutorial videos, where essentially, you'llhave one setup file, and then the final one,where you can see the complete code. So ifyou ever want to run more, I have built thatof course, just import the final. So thatis going to be coming from the final folder.But the files that we're going to be workingare going to be coming from the setup. Sohopefully this is clear. So I can remove myfinal. And finally we can start working inour file in the urges. So let me navigatethere, the error example now of course, noticethis is the complete one. Now that's not theone that I want. I want our example just whereadjust have the use state or example. Andwhat I would want to build over here. Well,I would just want to set up some kind of logicwhere once we press on button, we would changethe name. So what am I talking about? Well,here, I could go with let title. So some kindof variable, I'll call this random barrel.And then where are my JSX, I would want tohave some kind of return. So in this case,what I'm going to do is use the React fragment.Again, I just don't want to create this divsoup. So I'm going to go with react dot andthen fragment. And then when this fragment,let's go with Heading Two, and I'll look formy title. Remember, in JSX, we needed to usethe curly braces in order to access the variable.And of course, once I do, I have my randomtitle, beautiful. Life is great. But whatif I were to add a button, so I'm going togo here with button, type of button, as wellas add a class name. Now this class is comingfrom my index CSS. Again, if you want, youcan check it over here. And it just adds alittle bit of styling. And the class we'relooking for is btn. And let's set up a onclick handler. And of course, we'll have toset up a function. So call this handle clickfunction within the button, I don't know what'scalled this change title. Let's say right,now, there's going to be an error becauseof course, we haven't created a handle quick.So let's do that. So const handle, click Movadois my function. Beautiful. Now what I wouldwant is to change this title from random peopleto something else, my first legitimacy witha weakened x as the title. Of course, I'llopen up my console. Let's see, what do wehave in a console? Once I click Change, that'll,of course, I can access the random title.However, the idea was that once I click, Iwould want to change it to something else,I would want to change it to Hello people.So let's try whether we can do that. I'm goingto go here with that alland learn Hello, people. Now my question toyou is, once we click the button, the handleclick, do you think the random title willbe updated? In my component? Again, the questionis, once we click the button, notice, I'mchanging the title. So do you think we willchange also the value that we have in theJSX? Well, let's try it out. We have randomtitle, or click on Change title, and nothinghappens. And what's even more interestingthat technically, you can see in a consolethat we change this value, correct. Becausein here it is title and it is random title.And of course we change it to help peoplenow once we console log, it is Hello people.Now the problem is that we are not re renderingthe component. So we change the value. Andwe're not re rendering the component. That'sthe reason why we cannot see any changes.Now the second thing is that we have no wayto preserve this value in between the rendersas well. So essentially, we would want twothings, we would want to keep the value betweenthe renders. But also we would want to triggerthat rerender versus where the use state hookcomes into play, where it will allow us todo just that. Again, very basic example. Ofcourse, you can use use state for more onthat. But this clearly shows us why we wouldwant to use the use state in the first place.Alright, and once we have covered why wouldwant to use US state. Now of course, let'slearn the basics about the use state. Andhere's what we're going to build me just quicklyshow you we're going to go with import. Again,I'll call this final from online, we're lookingforward tutorial folder. When you state final,online use state basics. Now since I namedthe final Of course, right after the setup,I can just go with final, close that out.This is going to be our component, we haverandom title. And then notice how once westart using your state, not only we can changethe value and trigger a rerender, but we canalso preserve the value in between the renders.Again, this is just to showcase that you canalways take a look at what we're going tobuild but of course the file that we're lookingfor is a bit different. Again, I will stillcall this setup because it's just easy However,I'll change the path where I'm looking fora setup folder. Van. Instead of folder, I'mlooking for US state basics component, orfile. And of course, you should see on thescreen use state basic example. And let meopen up the sidebar, I'm going to navigateover. And essentially use state is a function.It is a function that is coming from rearhowever, notice that it is a named import.So unlike react, this is a named one. So wemust, must, must must, must have the curlybraces. And the name needs to be exact, wherewe go with us state. Now just to prove thatuse there is a function, we simply consolelog, and we write us state. And you can clearlysee that it is a function beautiful. So oncethat is clear, once we know that you stateis a function. Now let's see what this functionreturns. Because that is very, very important.Shown here, I'll just invoke it. And you'llnotice something interesting, where it returnsan array. And first thing is going to be undefined.And essentially, this is going to be the statevalue that we're going to use. And the secondone is a function. Now this function willcontrol this value. Now you're probably wondering,okay, well why this is undefined? Well, becausewhen we invoke use state, we need to passin default value. Now keep in mind, this valuecan be a string, it could be a number canbe an array, it can be an object can be Boolean,whatever JavaScript value you'd want. So forexample, if I'll pass here, HelloWorld, whatyou'll see that our value now is a string.So that is my default value. And then again,we have this function.Andfrom this point, we have multiple ways howwe can access that. Just keep in mind, ifuse state returns an array, of course, wecan assign it to a variable, correct. So inhere, I could go with const, and then valueis equal to my use state again, we will needto pass in some kind of default value. Sofor now, I'll just passing number, just soyou can see that of course, we can pass ina number as well. And then in order to accessthe first item in the array, we would go withsquare brackets, and then the zero. Now letme copy and paste in here, I'll set up myfunction, since that is going to be the secondthing that I'm looking for. So I'm going tobe looking for the handler. And of course,I'll change this value as well, we're nowI'm looking for my function for the seconditem from my array. If we'll console log,if we go for example, we have a value andhandler, you'll notice that the value willbe one. And the second value will be thatfunction. The function of that controls thisnovel understand that the moment it mightbe a little bit confusing, don't worry, justremember to this handler will be the functionthat controls the value that we have in ourstate. So in this case, of course, this isone. In our first example, this was HelloWorld.Now all of this is beautiful. But what I wouldwant is to select all of these and then justcomment them out, just so you can say forreference. If you remember, we had array destructuring.Now what that allows us to do is set up everythingin one line, where I'm going to go with cons,and then I would need to come up with a namefor my state value. So this name could beanything, I will name this text, just keepin mind, you can name this Bobby, you canname this apple, banana, whatever you wouldwant. So I'll name my first value, text. Sothat of course will be my state value. Andthe second thing is my function. So now ofcourse I need to name that function. Now acommon convention is using set wherever youname your variable. So if you've named yourstate value, for example, text, then you goset text. If you'd set this up as Apple, yougo to Apple, and then set apple. Now again,this is a convention, you can name this tacoand burrito, it doesn't matter. And then fordestruction rules, you need to set it equalto your array. Now of course our array iscoming from usAlright, then we need to invoke it. And thenwe need to pass in whatever, again is goingto be our default value. Now what is goingto be our default value? Well, there willbe that random battle. And once we have thissetup, now let's try it out in our return.Again, we'll have our JSX. Of course, again,I'll go with react fragment, just so we cankeep on practicing. And then in here, let'suse the heading one instead. And I'll lookfor my text. So that is my state value. Andjust to showcase that we can place whateverwe would want, or here, I can just changeit around to a one or 10 or 109, somethinglike that. And then of course, this valuewill be displayed. Just keep that in mindthat whatever value you'd want as defaulton, you can set it up with a rather than array,whether that is an object, string number,Boolean, whatever. And of course, once I havethese two things, now we will need to comeup with the button correct, or the buttonthat can change this value. Because we sawpreviously how we were not able to give up,reverse, let's come up with that button.In here, I'll add a class name, we'll saybtn. Just so we have a little bit of styling,and we'll do the same way how we'll have aunclick. And we'll pass in handle.Click now within the button. Alright, changearrow, Mark show. And again, there's goingto be an error where handle click is not defined.Now, of course, let's set it up, we're goingto go with handle clickon probably add const over here, and thenwe'll pass in our function.In this function, now we'll finally use thisset text. Word works, we have multiple wayshow we can do that, how we can pass the newvalue. And a little bit later on, we'll lookat the functional example. But for the timebeing, let me just go with text. And thenwhatever we'll pass it in here, now will beour new route. So for example, if I want tochange this around to a Hello World, I justneed to pass in that string, where if I'llsay hello world. Now what you'll notice thatonce we click on Change title,of course, we invoke the handle click, andthen in click, we have our set text function.So the function that we're getting back fromthe use state, we get back that function,and then each and every time we invoke thisfunction, we can change this value. So thereit is, once I click notice, now nicely, Isee my hello world. Now of course, since Idon't have any more logic, than every time,we'll click after that is just going to bethis HelloWorld. But at least we already madegood progress, correct, because previously,we were not able to do that. Now, of coursewe are where once we click on a button, wechange this, again, we can refresh, we haverandom title. And once we click that, of course,it is going to be a Hello World. Now justto showcase that we can set it up as always,to whatever we would want, just like withthe default one. If I'll go to 109, you willsee that I have ramped idle mode when I clickthe button, of course I have 109. All right.Hopefully that is clear. And now let me justset up a little bit of if and else statements,where essentially, depending on whatever valueI already have, I'm going to set my new valueusing set x. And the way I can do that isI can say if and then I'll check what is thevalue for the text. If it is random, and Pyro,then of course, I would want to invoke settext. And I would want to set it equal toa Hello World. However, if that is not thecase, essentially, if it is already HelloWorldwell, then I will just set it back to a randomone. So go set text, plan, random, and thentitle. So now you'll notice that we'll havethis toggling functionality, where I'm changingthe title. Now of course it is going to changeto hello world beautiful. We trigger rerenderand then of course again once we click wehave random title, awesome. This is how wecan use the use that again it is a functionthat we get from react. Once we invoke thefunction, we would need to pass in defaultvalue, whatever route one as far as string,number, Boolean or object or array.And then from this function, once we invokeit, we get an array with two values, we usearray destructuring, because it is just faster.However, we can also do this manually,where we get that particular value, and thefunction of that controls that value. Andeach and every time we'll invoke this function,whatever value we'll pass in, now will bethat new state value. And of course, in orderto access it, just like with normal variables,we just go with whatever name we passed here.Again, please keep in mind, you can name thesethings however you'd want. But a common practiceis using set, and then whatever name of thevalue that you already set it up. And thenof course, each and every time we click thebutton, notice how we invoke our set text.And we keep on changing this state value.Beautiful. And those are the basics of usestate hook in react. And before we cover morecomplicated use state examples, let me justcover some things that relate to all hooks.So this will also relate to all the otherhooks we'll learn later. First, we need toremember as far as hooks, vary, we'll startwith this use, whether that is use effect,you state, use callback, use memo, or whatever.So you always see this use not also appliesto whatever hooks we'll create ourselves lateron, we must use this use in the beginning,run the components where we invoke those hooksmust be the application. So let me show youthe example. If for example, I'll change thisto a state basics.This is going to be with lowercase, we willsee a big fat error here in order to use hook,whether it is your state use effect, or whateverthe component needs to be obligation. Thatis a small gotcha. But a small gotcha, thatcan catch up with you in very random times.Now, also, the hook needs to be in the functionor component body. For example, if you'removing this outside, it's not going to workagain, there's going to be a big fat error,because you need to invoke the hook, again,with our errors use state or whichever hookyou'd want, it needs to be invoked in thefunction body. And the last thing is somethingthat we'll take a look at later. And thatis that we cannot call the hook conditionally.And I'll show you that would use the factbecause it's just going to make a little bitmore sense. Now keep in mind, I'm not talkingabout the function that we're getting backfrom the phone. Because of course, in thiscase, yes, we're calling this conditionallywhere I'm checking the state value. And whenI'm saying all right, so if the state valueis equal to a random data, then I'll invokemy handler function. Keep in mind, I'm nottalking about this function. Yes, this functionyou can call conditionally. However, whatI'm talking about is the fact that I cannotjust say, EFF, man, some kind of hook insideof that is not going to work. And it's goingto be easier for me to share with us the factbecause there's going to be a proper example.Again, this applies to all the custom hooks,we're going to create ourselves, as well asall the hooks that you can use from react,whether that use the fact use callback, youstate or all the other hooks. So that wasone. Now let's take a look at a more interestingexample, where our default value or statevalue will be an array. And essentially, we'llbe able to add the items will be able to removethe items, as well as clear the state valueback to an empty array.In order to see what we're going to create.I'm going to change of course, my file, soI'll use a different path right now. I'llgo for setup, then I'm looking for US stateand then array. And what you should see ina browser is used state array, an example.Now let's navigate in there to that particularfile. So what we're looking for is use statearray address and again, it is located inthe setup. Now in this case, though, I'llchange this around and instead of importingas a named export, I can show you that wealso have another option, where again, ourneed to come up with those two values. Ourour we'll call themSo in my case, it is going to be people. Sothat is going to be my array. And then thefunction will be called serve people. So thesetwo things I need regardless, online in orderto invoke use state, instead of importing,which is always an option, we can also dosomething like this is where we go with react,and then usestate. And like I said, this is where we passin that default route. So for example, asfar as the row, we could go with empty array.So these are two ways how we can set up eitheryour import, or you go with react dot, andthen you state, please keep in mind, bothof them do exactly the same thing. And thatreally depends on your preference. In my case,if I know that, I will use it just once, mostof the time, I'm just lazy and I go with react,and then you state how if I know that I onlywalk it quite a few times in my component,then of course, I just go with import, andthen use use state or whichever hook nameI pick,that just saves me a little bit of typing.Again, that is up to you. So for the timebeing, we just have the empty array, whichis somewhat okay. But we remember that wecan pass whatever we want. Now, if you'lltake a look at the source folder, you'll finddata j s. Now in the data address, we havean array. And I named this data. And thenin here we have an array of objects, wherewe have the ID remember, we needed to do that,if we're rendering the list, there has tobe some kind of unique ID. And then we justhave the name, and then value. So john, Peter,Susan, an honor. So what I would want to doright now and use theta Ray, I already importedthe data. So notice the path, I'm lookingforward data. And then I need to go quitea few levels up, and then look for that there.So I leave one folder second, and third. Andthen eventually, I hit the source. And thisis where I'm looking for today. Again, thisis going to be a relative path. So now whatI want is to pass in that data array as mydefault value. All right, awesome. And thenof course, let's work on our return. Now Icould go with react dot fragment, or a member,there is a shortcut, where if I go with myangle brackets, now essentially, I'm creatingmy fragment, and I don't have that diff soup.So now what I would want is to iterate overmy array. So I go with people, then again,we'll use the map method. And then on eachand every person, I would want to return somethingmore meaningful.First, I guess we can just return a Hello.And then we can just double check whethereverything works. Because of course that isvery, very important. If I don't have accessto each and every person, essentially, ifI don't have access to the object, well, kindof doesn't make sense. Correct. So if we consolelog, beautifully, what I could see is johnPeter, Susan.And then I have four hellos. So now of course,let's do something a bit more meaningful,where what I would want right now is to destructure,these two things, the ID. And then I'm alsolooking for the name. Now that is coming fromthe person. And then I would want to returna div. Now remember, when we render a list,we need to have this key prop. And we needto pass in that unique value. Now add a littlebit of styling here, where I'm going to sayitem, again, that has nothing to do with functionalityis just for the styling. Let's set up a headingfour with a value of name, just so we cansee the name. And then eventually, we willset up our button. So awesome. Notice, I havemy list. Again, I used use state hook whenI provided some default value, which in mycase was no way. I could have added the emptyarray. But in my case, I already preparedan array in data JS array, it is a array ofobjects, then, of course I invoked it. Andthen I'm getting two things. I'm getting whateverdefault value I have. So that is my statevalue. And then I have the function that controlsit. Okay, good. And then of course, just likewith any other variable, I can just accessit. And then I'm iterating over like we havecovered already before, where we're iteratingover. And then we display for each and everyitem. There's dev online, we're just destructuringID.But of course, now let's make it a bit moreinteresting. What if ourWant to come up with a button that just deleteall the items. So right next to the people,I'll set up my button. I'll add here a classname, or btn. And we'll set up our on click.Now, if you want, you can set up here, a functionreference, unless is something that we'lldo later once, we would want to remove a specificitem. But for now, I just want to showcasethat, of course, you can invoke this functiondirectly in here, where we're setting up theonClick. But the gotcha is going to be inthis case, since we need to pass in the value,we'll have to set up a arrow function as well.Remember, that was one of the cases that Ishowcased before. So in this case, let mewrite clear items. So that is the text inmy button. And let me showcase that. If wego set people, of course, we would need topass in that new value, correct. And if Iwant to set it up to an empty array, thatjust means that I will clear out all youritems. Now the problem is going to be thatwe right away, invoke it. And that's not whatwe're looking for. So what we would want isonly to invoke it, once we click on it. Andremember, the solution was to set up our arrowfunction first. So once we do that, then we'llhave our button. And now what this buttonis doing? Well, it is calling a set peoplefunction. And remember, the only thing weneed to do is to pass in that new value. Sowhat is the new value in this case? Well,since I would want to clear all the items,I just pass in the empty array. Correct. Now,let's see. And of course, everything works.So now we remove all the items. Again, thatis something you need to remember where Yes,you can call directly this function, you canset up a handler, like we did previously.And like we will do here, where we would wantto remove a single item. Yeah, that is definitelyan option. We could have used the referenceinstead. But just keep in mind that yes, youalways can also use the inline function, whereyou just need to set up a arrow function,and then call whatever function you have anew state, that is always also your option.And now of course, let's work on removingthat individually. So in this case, I wouldwant to first create a button I guess, rightnext to a heading for let's go with button.Again, we'll have on a click. And in thiscase, I will shut up a function reference.So here, let's set up a curly braces. Andwe'll have again our function, because wewill invoke our reference here. So say removeitem. And now we want to pass in the ID. Andthen I'll say, Ram whatsoever. And at themoment it complains, well, you haven't createdthis remove item. So now of course we needto work on our function, where we say removeitem. And then this remove item is going tobe looking for the ID. Because of course,for each and every item, I can grab that ID.And then notice how we set up the arrow function.And we right away invoke the Remove item withthat specific ID. So essentially what happens,this doesn't run each and every time we rendera wrap. In fact, it runs only when we clickon a button. And this is going to be thatuse case that I talked about before when wetalked about the events where you must havethis arrow function each and every time youare invoking this function, you must havethe arrow function, because you would wantthis to run only when you click on a button.And in this case, you have no other options,since you are passing some kind of argumentsyou are invoking. So that's why you alwaysneed to return it from the arrow function.So we have our remove item, remove item isalways going to be looking for the ID. Andnow let's set up the functionality. So inthe Remove item, what I would want is to filterout the array. So all the items that don'thave the matching ID, I would want to leavethem in unless you're the one that has thematching ID. That one of course would wantto remove. Now I can say set people and thenset up the functionality right here in theparentheses is always an option. But as faras tutorials and projects, I always like tobe a bit more explicit where I'm going tocreate new variable. So for example, let newpeople amount is going to be equal to myPeople's state value. So my original Ray,Van filter, so now I'm filtering. And thenfor each and every person that I have ourjust want to remove the one that has the matchingID. So if I go here with person ID, rememberI'm filtering out the array correct. And theneach and every object is there. And when I'msaying, Hey, listen, if the person ID matchesthe ID that I'm passing, and then of course,remove it on the way I can do that. I cansay, motion point,equals to an ID. So essentially, the logicis following, where we pass in the ID, thenwe filter out our array. And all the itemswhose IDs are not passing to wherever we'repassing in, those ones are returned in newpeople. Now, if you want, you can console,log it, but in my case, I'll pass in the,the search people. So I have my function.And like I said, I can pass in whatever Iwant. So of course, this is that new arraythat we're getting back. And I'm just passingin into the set people. And what you'll noticeright now that we have our buttons, and themoment I click, I removed that specific item.Then I click on john, I removed john Peter.And of course, once I refresh, I have allmy items back. Now if I want to remove allthe list, or I can do it also as well, fewtakeaways, we can set up this logic righthere, where we're passing in the new value,because remember, with filter, we are gettinga new array anyway at the end of the day.So in my case, I just like to go a bit moreexplicit, where I'm creating a new variable,and only then I pass it in to the people.And the second one is going to be pretty commonGracia where since we have either functionreference in here, or we would want to invoke,of course, the function that we're gettingback from the use state, since in both cases,we're passing in the argument, we're alsoinvoking. And that's why we always need toset up the arrow function, otherwise it willrun right away. So essentially, when we runthe wrap on, it will invoke it. And then inthat case, we are not running at one we'reclicking on a function, we are running atthe moment our app runs. And that's not whatwe're looking for. But those would be thebasics how we can use use state hook withan array. Not bad, not bad. Once we have coveredhow we can use use state with array, I thinkit also makes sense, if we take a look athow we can use with an object, because thereis a gotcha. So again, we're looking for toset a folder, and then we're looking for USstate object. And once we save, we shouldsee the US state object example. Now of course,we just need to now get to that particularfile, which is in the setup, again,use state object andof course, I would want to use my hook. Solet's go with two values, I'm going to gowith person, and then set person, and thatis going to be equal to my use state. Andthen I'll pass in that object directly. Again,that is something that I would want you tokeep in mind where you can pass in the variable,like we just did with an array, or we canpass in directly. So in this case, I'll passin the object, where is it going to be name,now that name will be pure, an age will be24. So let's do that. And then lastly, we'llhave some kind of message message. I'll setthis up as a string. so beautifully, I havemy object. So let's call this urandom.message. So once we save, course, we are ingood shape. And if we want to console logthe person, of course, we'll be able to seeour object much. Not that at all. Now, thething is, what happens if we change this value?And what gotcha should we be looking for?Because with IRA, it was somewhat straightforward.We're in one case, we just wiped out all thedata when we set it back to an empty array.And the second thing, we have the functionof that was just returning a new array. Nowthis is going to be a little bit different,because we'll have some values that we wouldwant to preserve. And what may Shockers, whatam I talking about? I'll start with my returnwhere I'll set it back to a fragment onlineand here. Let's type few heading threes. Sofirst, we'll look for person name, personalname and notice sayHere's an object, of course, I have my value,I'm accessing my state value. And then I'mjust looking for the property. Now I willcopy and paste. And I'll just change theseones around, where of course, we'll have agehere, we'll have also a message. And let'ssave. And there it is Peter 24, around messenger.And eventually, I would want to have a buttonthat changes the message, again button viaa class name for the styling. So btn, a manon click.In here, let's call the change message, changemessage, a function that we haven't createdyet. So in button, let's write change message.And let's come up with that function, shownhere. const, change message providers my function,I'm not looking for any arguments in thiscase, but I would want to invoke my set person.Now what you'll notice, though, that, forexample, if I want to change the message toa HelloWorld, the problem is going to be thatwhen we invoke this function, essentially,we wipe out all the routers. Remember, I toldyou, when we set up the value, the state value,it can be anything that you want. So eventhough in the beginning, we went with an object,if we invoke the function that changes thestate value, and we pass in the string, thiswill be a string. So originally, we had anobject, we're treating, like an object willgo person name, person age, and the messagehere, I just wipe out the data. And then Isay, you know what, it is going to be a Hello.Now you could make an argument. Alright, butwhat if we would set this up as an object,I'll pass in the property of message. So inthis case, I'll say message is equal to helloworld. And technically you are correct, wherenow we will change only the message. But again,rest of the data gets wiped out. So what isthe solution? Well, solution is using a spreadoperator, where if you remember what's proper,with first copy the values, and then we comeup with whichever value would want to override.So how we would fix this in this scenario,I would go data dot, unknown person, and thencomma, and then I'm just gonna say, you knowwhat, leave these two values the name andage, as they are at overwrite only the message.So this is the gotcha. For example, if you'reusing the object, then you need to make surethat you always, always use the spirit operator.Or there's also some other older setup, whereessentially, you copy the old values fromthe state value. And then you just decidewhich one you'd want to choose. In this case,we want to change the hello world. So of course,once we click, notice how we also change onlythe message. All right, routers clear. Butas you're looking at our setup, you're probablywondering, okay, but why do we have to evenbother with an object in the first place?Can we set up three separate state values?And whichever we want to change? Of course,we would use that little method. Well, let'stry it out. But I can right away, spare youthe cliffhanger. So but yeah, but visually,what you can do, sir, near I'm going to goname, online shirt name. So I'm going to besomewhat original, where I'm not going togo with a wild name for my handler function.And, again, I'm looking for the same thing,theater, man, I'll just copy and paste andwe'll change these of ours around where nowwe have age, man we're looking for set ageon the value will be 24. On the last one,of course, is going to be a message. So we'regoing message set message there is going tobe more function amount as far as the originalvalue, what we passed in here, we said randommessage. Now, of course, in this case, weare not dealing with objects anymore. So wehave these state values. So one by one, ofcourse, we will need to access them. So nowI'm looking for name, and I'm looking fora person. And lastly, I'm looking forwarda message. When we talk about this changemessage. Well, we can either right away callset message here on click. So remember thatof course, we'll have to set up the inlinebecause we're passing in the argument. Orsince we already have the handler, I can simplypass here and saymessage, we would want to change it, of course,to a Hello World. So once we set that up,notice once you click course, I have my value.So essentially what I'm trying to say thatthere is no rule that prevents you from showingup as many state values as you'd want. Soinstead of going for one giant object, youcan set up multiple smaller state values,where you have just a single value, and thena function that controls our, if you do decidegoing with an object, there's going to besome use cases where object might make a littlebit more sense. But always, always, alwaysremember that you need to make sure that youpreserve these old values.A nifty way of doing that is using a spreadoperator, where essentially, we copy the propertiesfrom the previous object. And then we'll justchoose whichever we would want to override.And of course, in this case, it was a message.So we went from random message to a HelloWorld, our Yes, there is an alternative, whereyou can set up as many state values as you'dwant, just by calling your state your statepassing in default value. And then you havethat single state value, as well as the handlerfunction for that set value. Not bad, notbad. I think we're progressing nicely withour use state examples. In our last example,I want to showcase how we can work with numbers.And not only how we can work with numbers,but how we can set up a functional updatefor the all this time, we have been usingthe value update. Now what that means is wherewe have this function, the subtext or whateverset function we get back from you state, wejust call the function, and then we pass inthat new value map essentially sets our stateequal to that new realm. However, there'salso a method of passing in the function.In the following videos, I'll show you whythat is important. But first, I would wantyou to head back to objects. And then importagain, component, you can call it whateveryou'd want from your state event setup folder.And then the file name is US state counter.Essentially, that is going to be our lastfile, how our split this up in multiple videos,because I want you to get a better understandingof what we're doing. So once you import thisfile, via just navigate there, and you shouldsee on a screen use that counter example.And you can probably already guess that weare going to create a counter with not justa simple counter, we'll have one with straightup ladders. And the second one, we'll usea V function. Now we'll start with our turnfirst, though, where it's not going to bean interior. Again, we're gonna go for a fragment,so we don't need to overpopulate everything,we have divs a man, once we have our fragment,then I would want to go with a section. Nowadd a little bit of styling right here,where I'm going to say margin, and then thatis going to be equal to four, REM and zero,and nine within the section. Let's just gowith heading two. And I'm going to call thisa regularencounter version, see something like thison the screen. Now after the Heading Two,I'm going to set up my value show at the moment.Of course we don't have anything, but we willuse you state. And you're not, I don't wantyou to set up a state value because that shouldtake us a second since we already know howto do that. So I'm going to go with valueand set value. And that is equal to or usestate. And then as far as my initial value,well, that is going to be a number of zero.And now in heading one, I can just simplygo get more value. And surprise surprise,of course I have the zero. And now let's addthree buttons, one for increase, one for reset,and one for decrease. So I guess we'll startwith the decrease one. Let's go with buttonon my class name. That will be equal to Abtn. And let's just right here decrease. Andwe'll just copy and paste the same button.So one, two, and then of course three buttonstotal. And we just need to change these routersaround where we're going to go with the reset,as well as the increase or just go here.Again, I know I've covered this before butI'll set up two ways how we can click on abutton. One is going to be, we have a functionhere. So where we reference it, for example,with the reset, and the decrease and increaseis going to be with inline functions, justshowcase, again, that you always have multipleways how to set it up. And essentially, itis up to you. Now there's going to be somecases where you definitely need to use theinline when you are actually passing in. Butthen, in some cases, you can simply use thereference, and you're good to go. So we haveour buttons. And like I just said, we'll gowith on click,set up a inline function here, where we gowith set value. And now I'll use the old value,I'll say value, whatever it is, of course,at the moment is zero. And then I'll say minusone, because of course, the button is decrease.And we'll do the same thing here, we're goingto increase,copy and paste. Now, of course, now the valueshould be plus one, correct. So once we clickon a button, I would want to invoke my cellfunction on whatever is the value, and thenplus one, like I just said, for the reset,let's set up a reference, just so we are allon the same page that we have multiple wayshow we can get the same result. So I'm goingto go here with reset, I'll have my function.And then within this function, I'm just gonnasay set value, again, my sub function, andI'll set it equal to zero. And now where Ihave the reset, I'm just gonna go with onclick, I just need to reference the function.So in this case, of course, he is a reset.And then let's test that out. So once we click,of course, notice, we can nicely increase,we can also decrease,we can reset. So again, this is a way of passingdirectly the value in our set function, wherewe pass in the value. And then the momentwe do that, of course, that is our new statevalue. Following video, I would want to coverthe functional updater form, where essentially,we pass in a function on why would want todo that in the first place. Nice. And oncewe have our simple counter, let's take a lookat how we can pass in a function in our setfunction. And why we would want to do that.So first, we'll set up a counter or this isgoing to be more complex problem. However,the JSX pretty much is going to be the same,the only difference is that we're not goingto use that many buttons. So what I wouldwant to do is grab all my section, copy andpaste, I'll still keep the margin that staysthe same. Let's call this a more complex orcomplex counter, more complex counter valuestore the same.As far as the buttons, we'll delete most ofthem on what just say here button. And it'sgoing to be just a increase button. So let'ssay here button for the class for the styling.As far as the text inside the button, let'sjust say increase layer. And now I would wantto set up a function that is going to be acomplex increase. Why am I calling this acomplex increase, because I would want toadd a little bit of the timeout. So essentially,once I collect, there should be some delay.So once we click will set up two seconds delay,and only then the value should be updated.In a process, we'll see why would want touse that functional updater warm. Now, let'sfirst set up the onClick. Let's say on clickover here, and that is going to be equal toa complex.Let's call it my function, the increase complexincrease over here. Now of course, we do needto create a VAT function, because now we'rejust referencing. So let's say const. Andnon complex increase, that is my function.It's not going to be looking for any argument.However, in here, like I said, I don't wantto simply call my set value, what I wouldwant is to go with set timeout. And then remember,in the set timeout, we needed to pass intothings a callback function, which is goingto run push in a certain amount of time. Inour case, that is going to be two seconds.And in here we just pass in that value. Twoseconds. Well, we in our set timeout we havethe callback function that is going to runin two seconds, just remember that as faras theTime, we're passing here to milliseconds.That's why for two seconds, we are going topass in 2000. And then within the callbackfunction, this is where I would want to callmy setvalue, because that is my function. Now inthis case, again, I'm going to go with a simpleway, where we have the value directly in ourset function. So in my case, I'm going togo with set value, and value plus one. Andnow million dollar question, do you thinkonce you click three, four or five, whatevertimes that will, right away update after thosetwo seconds each and every time or there'sgoing to be an issue. And you can probablyalready guess, since we're setting up thewhole example, that there has to be a gotcha.So let's try it out. What I'm gonna do rightnow is click three times. And the moment youclick, you notice that Yeah, after two seconds,something happens. But essentially, I haveclicked only once, meaning my value only increasedby once. So why is that happening? Well, let'sthink about it. So we're grabbing here, thevalue, correct part, we need to understandthat this set function is a synchronous. Sowhat happens is the for example, I click threetimes, all these three times, it thinks thatthe value is zero, or in this case, if I clickit right, now, of course, he's going to thinkthat the value is one. So again, I can clickthree times. And yeah, is going to increasebut again, only by one. Because all thosethree times, when we call this set value,we'll still be looking for at all the value,meaning to one, or whatever. So essentially,we're not using the current value in yourstate, because what should happen is eachand every time we click, we grab that previousvalue, that was just right there before. Andthen we update. And this is the case whereof course, we would want to use that functionalapproach. Now how does that work? By the way,I'll leave this for your reference, just soyou can have it later. And the way it works,we go with set value. And then instead ofpassing directly, that new value that we want,we pass in the function. Now what's reallyinteresting about this function that as aparameter, it get that old state value. Soright before the update, now, what is really,really important that it gets that currentone, and you'll see that in a second. So inthis case, it gets the one that is actuallycorrect. Now the one that is called, for example,two seconds ago, now, it gets the currentone. So of course, in this case, what we cando is we can increase and we'll see how ourvalues update right away. And since it isa parameter, you can call it whatever youwant. But pretty common convention is goingwith pre state or pre value, whatever you'dwant.And then whatever you're going to return fromthis function is now the new value. Now thisis very, very important. Because if you leavethis on the farm, and of course, your wholefunctionality will break. Now I know whatyou're thinking, you're like, Well, why wouldI ever leave this undefined? Well, also keepin mind that you can start setting up here,some kind of conditions based on somethingreally small gotcha is that if you will returnundefined, meaning if you won't return anything,and we know already that in JavaScript, functionsreturn undefined, run, your whole functionalitymight break. So just be careful, when you'resetting up this function, whatever you'llreturn from this function will be that newset value. And if it is undefined, well, whenis going to be a problem. So in this case,what I would want is to go with brief state.So whatever is my primer, and my last one.And now what you'll notice is that if I clickI don't know, 10 times, it's going to waitfor the first one. And then of course rightafter that, notice how we nicely increasethe function, meaning the value, and it ishappening, because in this case, we are gettingthat correct. Old value. So right before theupdate. Previously, when we use this one,no, we were not getting the correct value.Because if I clicked for example, three, four,or whatever times, I was all the time gettingthe same valueis when I call all my functions. In this case,it gets the current one, one that is rightbefore the update, and what you're thinking,you're like, Okay, why we haven't used thefunction before? because let me tell youright away that yes, you can use a setup forall the previous examples that we used before.And you'll see some people that prefer thattype of method. Now, it is not set in stone,of course, in this case, you have to use it.Because, of course, it wouldn't make sense,we show the error that we're getting our,in some cases, the ones that we covered before,you can use the value way of doing that, whereyou just pass in the value. But just so weall are on the same page, let me change thisaround to for example, I don't know, finalone mondas case, I'm going to look for a reexample. And we'll reformat a little bit,just so you understand that yes, you can usefunction in any of the examples that we covered,whether that is this one, whether that isthe second one with array, or with an object,and you might see some people who prefer doingthat way. Now, whichever way you choose isup to you. Some people choose to use all thetime function, some people just use it wheneverit is definitely necessary, which of course,would be this case. And the way we're goingto do that is simply we'll change this around,I'll say that I'm going to be looking forthe final one in this case. Now keep in mindthat of course how we'll delete it, meaningI'll leave the final that was there before,I just want to showcase that, of course, wecan use the functional approach as well. SoI'm going to go with you stay here. And I'mgoing to go with final this case, I'm goingto do the array example. Since I changed thisaround, we're going to go with final here.Now that is my array. Remember, the functionalityshould still work, where we can remove oneitem working, we can clear all of them. Andnow let's navigate to that final one. Again,you don't have to do it with me, brought inmarkers, I'm just going to show cares that,of course, we can refactor this, using thefunctional approach, where remember, we usethe sub people. Now what I'm going to do isjust instead of the new people will say hereyeah, that we will pass in the function. Remember,whatever we return from this function is goingto be the new value. If we really needed toor wanted to our guess we can just set upthe whole functionality here within this function.Sure, what I'm going to do is just grab everythingthat we currently have within the Remove itemand move it to the function within a set people.Now in this case, again, we're not reallydepending on that value. But just to showcasethat, of course we can use it, I will go wepeople. So that is going to be my new or I'msorry, the old value that is coming from thestate. And of course, I now filter it, oryou're not more just say old people,old people. And we will refactor it a littlebit. So old people. Now again, we filter it,and then whatever we return, that is goingto be our new value. So once I save Noticehow I can still remove the item correctly,like I did before. However, in this case,of course, we're using this function approach,where again, we're getting the parameter thatis our old state value, so right before we'reupdating, or you can maybe also say, the currentvalue of that state. And then whatever wereturn from this function is going to be thatnew state value, and just showcase where youcan set up a bug. For example, if I say thatI don't have the return, sorry, fall common.So you'll notice that the first time our remotesomething, I just have the bananas happeningin my application. Why? Well, because nowfrom this function, I'm setting up my peoplemy shared value to be undefined rather whyit is very, very important for us to alwaysreturn something from this function, and thatsomething will be that state value. Again,just to reiterate, we have multiple options,we can either pass in the value, however,there is going to be some cases or or somepeople who prefer using functional approachall the time, where you can pass in the functionin your set function. And then you can havethe parameter and that parameter will be thatcurrent state or previous state right beforethe update. And then you can set up some grandfunctionality, whatever you would want, andwhatever you will returnFrom that function will be that new statevalue.While spending time in tutorial will, is nice,you'll only get better. If you start applyingthe concept we just covered by building somethingcool. That's why I would highly highly, highlyencourage you to check out the React projectvideo where we do just that. More specifically,you're looking for project number one, thebirthday reminder, if you want to see someof the projects, we're going to build in theprojects video, just navigate to react hyphen,project dot nullify dot app. Now it is stillworking progress. time when I'm recordingthis video, I only have one project. But don'tworry. By the time you'll be watching thisvideo, of course, there's going to be moreproject. I purposely structured them in away where we build the easier projects first.And then as our topics in tutorial are gettingmore complex, we right away have the correspondingproject that emphasizes the knowledge we justlearn. And then if you want to check out theapps just hover over the card. And of courseclick it on this is going to be the app thatwe're going to build. Now I also would liketo mention that if you're interested in morecorresponding projects, for the remainingof the topics, and tutorial project, navigateto README markdown file. And here you'll findthe project that relate to the topic. So likeI said, once you learn use state, I wouldhighly encourage you to go out and work onbirthday reminder, then, once you will learnuse effect and conditional rendering, of course,there is going to be some project that youcan practice on. Again, this is still workin progress. Because as I'm recording, I onlyhave two projects done, then by the time you'llbe working on the React tutorial, there isgoing to be more project that correspond tothe topics. And I also want to let you knowright away that some topics won't have thecorresponding project, for example, prop drilling,so keep that in mind, just follow the roadmapin the readme. And I'll also leave here thelink for the project video. As well as thelink is going to be available in the descriptionof this video. Not bad, not bad. We're donewith the first part of our tutorial, the usestate hook. Hopefully you completed the projectas well, because it will help solidify allthe knowledge that we're learning in tutorial,because at the end of the day, we can stayin tutorial will for remaining of the days.But if you won't know how to apply that knowledge,as far as building project, it is going tobe somewhat useless. So even though it's notmandatory, technically, you can just keepon going through the tutorial, I would suggestevery time we are done with some specifictutorial part, just go ahead and do the projectthat I'm suggesting. Because at the end ofthe day, if you won't know how to apply themto build a project now, and we can sit intutorial Ville all day long, but it's notgoing to make much sense. And our second tutorialtopic is going to be the second most use talk.So like I mentioned previously, the use stateand use effect are going to be most used hooks.And now we finally arrived at the second hookthe use effect. official explanation of useeffect hook is falling where it allows youto do the side effect. Now before you freakout, frantically start searching for urbandictionary. Essentially, when we talk aboutside effects, we talk about any work outsideof the component. Now that work could be changingdocument title, that could be signing up forsubscription that could be fetching data thatcould be setting up a event listener and stuffalong those lines. So every time you thinkof use effect, think of work outside of thecomponent. And similarly to our first topic.Of course, we do have the folder in tutorial,and we're looking forward to second folderand name is user. And then of course again,we have the final folder where we have completecode. And then we have a setup folder wherewe will set up our examples. And the filethat we're looking for is this use effectbasics. So what I wouldWant you to do first is in the app j s, again,come up with the name my case, it's goingto be a setup, just so you know that we'reworking on a setup folder. And then you'relooking for tutorial, you're looking for useffect folder, vendor setup. And the filename is one hyphen, user, and learn basics.And once you render the component, you shouldsee in the screen, use the fact breadsticks.And once that is done, of course, let's navigateto the file. Go ahead and let me reiterate,it is in tutorial, then use a quick run setup,and then use the fact basics js. So that'sthe file we're looking for. And just likewe use state, we have two ways how we canset up our hook, we can either import it andnotice again, areas a named import, or rememberhow we did react dot and then use the foot.So that is also an option. Now, by defaultuse effect arounds after every render region,every time we re render a component use effectwill run. So that is going to be by default.And there's two more comments that I willcover the cleanup function and second parameter,whole area is going to be more important inthe later videos. So first, let's set up Iguess, some kind of use effect. So we haveour function body, again, we go with use effect.And then the way use effect works is we passin the callback function. So we have use effect.So that's the hook. And then within this callbackfunction, whatever functionality will placewill run after every render. And just to showcasethat let me go with log, and I'll say rendercomponent here. And then I will log as wellcall us.So I'll go here, call us back like so. Andthen if we'll open up the console, more youshould see is around their component. So wehave that. And then of course, we have thecall use effect. So as you can see, once werender the component, we also call the useeffect. Now the reason why you see these rendercomponent wise is simply because in the setupin the index js, we have this react strictmode. So if I move this out,if I remove it, you will see that only once.So basically that is their setup. So as youcan see now we have only render a componentonce. So if you're wondering why you willsee once in a while, the render componenttwice, essentially whatever we played as faras the function body, it is because of thestrict mode. Right? So let me close the sidebarright now. And let's talk about the use effect.So at the moment, we have only simple consolelog. And by the way, yes, even the consolelog is considered a side effect. I know itsounds funny, but that is true. And once weare on the side effect will what we wouldwant to do, for example, I would want to changethe title or the document title. So the momentI react up, can we do that? Well, let's tryit out. I think I'm going to close the console.For now. I think I'm going to come up witha button. So in my JSX, I'll set up a button,where essentially we click on a button, thenwe increase the value,we will set up a new document title that showsthe messages, not say new messages. And ofcourse the value will be equal to whateveris the amount of times we click on a button.Here. Let's do this way, we'll go back toa react fragment. And in here, we'll typeout heading one, where eventually there'sgoing to be a value.And let's go right away with the button classname btn just for styling, on click, we willincrease the value. Now of course we haven'tused the use state yet. So let's go here withconst non value, then set value function setvalue, not as equal to use date. Again, we'llstart with a zero. And of course, once weclick on a button, what I would want is toincrease that value by one. Now I'm not relyingon the previous values. So we'll just passin the new value in the set value. Here wasjust right click me. Click me where we havethe button. So of course now I have the value.If you'll noticemoment or click, couple of things are happening.So in my console each and every time I click,I'll have that render component. And thenI'll have that call usually.So each and every time we click, this is exactlywhat is happening. Why is that happening?Because every time we click the button, weinvoke set value correct. Now what happenedwith the use state, you stayed the two things,a, preserve the value between their fingers.And the second one is triggered rerender.So every time I click on a button, I'm essentiallyrunning my use effect. Because remember, bydefault, use effect will run after every render.So each and every time we rerender, the component,we are running essentially this use effecthook. That's why in the console, we can seecall use effect, call us call use effect.Now, of course, let's do some more interestingside effect, where not only I would want toconsole log, but I want to go with document.And then title amount is going to be calledto a template string. Now say new messages.And in this case, I'm going to use parentheses,Van out want to grab much that value, whichyou'll notice that the moment we render thecomponent, of course, we call the use effect,we can see that in console. But I can alsosee here where I have the new messages. Now,I have new messages. And now I'm using mystate value, which of course, is zero. Butnow, every time we click, notice how we'reupdating the value here, we're calling theuse effect after every render. And of course,the functionality that is within the use effectalso runs because now I have document title.And our new messages is three for each andevery time I increase. Also, my title changesas well. Now again, just to reiterate, useeffect is used when we want to set up a sideeffect. And that is some work outside of thecomponent. So think data fetching, think listeningfor events, think signing up for subscriptions,and stuff along those lines. And then by default,it will run after every render. And the wayit works, we pass in the callback function.And then whatever functionality we set upwithin that callback function will run afterevery render. Now, this is nice. So we'reupdating our document title, each and everytime we click on a button. And of course,we do that using the use of However, whatif we would want to change our functionalitya little bit around? Where What if I wouldn'twant to showcase that I have zero messages?What if I would want to do that only whenessentially, I have value bigger than zero.So I only want to showcase that if I havethe actual messages. So what I'm trying tosay is, I would only want to run it when myvalue is bigger than zero. Because at themoment notice, of course, we render the component.And then since use effect runs after everyrender, well, of course, we right away, dothe functionality that is within the use ofour rational thinking would be something likethis, where if value is bigger than zero,then of course, we would want to run yours.Sounds pretty reasonable, right? But remember,seems like an eternity ago, when I talkedabout general rules of hook, I said that wecannot we cannot place hooks, as far as conditionals.So this, we right away have a big fat complain,because we cannot call hooks conditionally.And at that time, I said that it doesn't makesense for me to place a use in the conditional.However, I will do that once we get to a useeffect. And of course, we have finally arrivedat the use effect example, which technicallywould make sense to place it in the conditional.However, we cannot do that because of therules of the hoax. So just keep that in mind.Now, the question of course, is well, howwe can fix that. And one of the ways we cando that is by setting up if and else insideof the callback function. So the point ofthis video is to showcase that even thoughYou cannot place hooks in the conditional.Similarly, how we work with a set functionwhere we set up a conditional, and then dependingon the value, we called the set function withsome specific value, the same thing we cando in the use effect. We're inside of thatcallback function. Yes, we can set up a ifan if statement. So how is that going to looklike? Well, in here, I could say if valueis bigger than one, only, then I would wantto update document title. So what happensnotice on the initial render, nothing happens,even though we still call the user. So westill call it however, in the use of acnein the callback function, we have a conditionalwhere I'm checking the value. And I only wouldwant to update the document title if the valueis bigger than one. So on our initial render,nothing happens. However, once I click yourbutton, Now, of course, the value is one.So again, nothing happens. So I guess in thiscase, we can either look for bigger or equals,and you'll notice how now once the actualnumber is one, and of course, I'm also updatingright away the title, because it matches mycondition of without make sense, where wecannot place the hooks in the conditionals,something we already covered before our asfar as setting up the conditionals. Withinthe callback function. Yes, we can definitelydo that. It is not against the rules. So ina previous video, we covered how we can setup a conditional inside the use effect callbackfunction. Our question still remains Is thisthe only possible setup where our user runsafter every run? By default, yes, that isthe case. However, you can also notice thetwo comments that I left here. One is thecleanup function, something we'll cover inthe next video. And now I want to talk aboutthe second parameter. What on earth is that?And essentially, second, brahmer is somethingthat we add here, as far as the user factor.So we have our function. So that is the functionalitythat will run and return will call the userfor. But as far as the second argument, wecan also pass it here, a array, and that isthe array of dependencies. So essentially,that is called a list of dependencies. Andif we leave this blank, that just means thatit will only run on the initial render. Andnow notice something interesting, where asfar as our logic, it technically is lookingfor the value if it is bigger or equal thanone. Correct. So it will run on the initialrender. And then we have our if statement,of course. So essentially, once we save, thisshouldn't update the title, originally, right?Because we have our if condition, how arewe did call it, we can clearly see that, yes,we have call us. And that is, of course, comingfrom the console log. Now the first time Iclick, notice something interesting, whereI clicked, I updated the value. But sinceI have that second argument, I have the dependencylist, and I have nothing in there. Essentially,it is empty, it only runs on the initial rendermatters something very, very important thatyou should remember. So if you only want theuser to run on the initial render, you justadd that second argument, and you'd pass itas a empty array. That just means that itwill run on the initial render. Now the secondquestion probably is, well, can we add morestuff in there? Because it's fine. All right,it runs on the initial render, but maybe Iwould want to run it each and every time Ichange some kind of value. Now what that valuecould be, or here, we could maybe run it eachand every time we update that value. So let'stry it out. So in here in the dependency array,we just pass in whatever name is for our dependency.So in this case, of course it is the valueif it will be text, you will pass in text,and hopefully you get the gist. So now onceI say again, in rounds on the initial render,virus, beautiful, but now you'll notice thatwill also run once we increaseThe value show, once we increase the value,we change something about there's dependency.And then the moment we change something aboutthat value, of course, then we trigger useeffect to run one more time. Since in dependencyarray, we have the value. So each and everytime we'll change something about this value,essentially, we will run the use effect aswell. So that's something to remember where,by default, if you have no dependency array,the use effect will run each and every timethe component get re rendered, including theinitial render, that if we set up the secondparameter, the dependency array, as far asthe empty list, meaning and the array, thenof course, it will run only once we renderthe component. And then as we start addingdifferent values here, as far as differentdependencies, then each and every time thatdependency will change, if it is added toan array, then also use effect will run. Andone more thing that I would want to add isthat you can have as many use the fact asyou'd want. So for example, in this case,we have one use effect that will run on theinitial run there, also when the value changes,but nothing stops me from setting up anotherone. And then again, I have my callback function.And in this case, I will just set it up tobe on the initial render. Now, I'm not goingto do much, I'm just going to go with simpleconsole log, and I'll say hello world. Andwhat you'll notice is that, yeah, it runson the initial render, just like the previoususe effect of we have, however, a war on thesecond time. So each and every time I'll clickon a button, you'll notice that use effect,the second one with hello world doesn't run,because the value is not in the dependencylist. Hopefully that makes sense. And nowwe can talk about the cleanup function. Notbad, not bad. We're done with use effect basics.And now let's take a look at the cleanup function.Why would want to use it.First, I would want to change the file. Soall this time we were working in use of basics.Now, of course, I would want to navigate toobjects. And I'm still looking forward toset a folder. But now I'm looking forwardto file number two, use effect cleanup. Again,it's still going to be a setup since I didn'tchange the name. And what you see on the screenis use the fact. Now of course, let's navigateto that particular file. So again, not thefinal one, we set up one. And in here, whatI would want is to check for the width ofthe window. So we're still using years, onladders. Good. But I would want to check thesize of the window. And we can do that bysetting up the event listener on the windowobject. Now first, let's set up some use statevalue. So again, notice we have imported usestate and use effect. What I'm looking forhere is const. Now online this size and setsize, set size, and we'll use the US statethat is our hook. And then in order to getthe width of the window, we're going to gowith window and the property is in there withnow if you'd want to console log, you canjust go with console log and check the size.And you should see some value over here. Solet me open up the console. And of courseit tells me here that is 484. Now of course,it's not going to change at the moment, wehaven't set up the functionality. But thatis going to be the whole idea where we setup the event listener on the window and asthe size of the window changes, so does thevalue. Now first, let me open up a biggerbrowser window because it's going to be easierto operate. I'm going to go here with localhost3000. Of course, I still have the same setup.Now in this case, though, of course the valueshould be different, correct, because of coursethe window is bigger. So as you can see itis 12 131. So now what I would want to dois to set up a some kind of return. So I guessagain, we'll go with a fragment first. Andlet's type in one, we'll say window. And thenlet's write Heading Two, and heading two.We'll be looking for that size. So first,let's access the set value. And then let'sthe pixels. So we should see here a windowand then whatever is the value, and of courseit should match exactly oneWe have in console. And now let's set up aevent listener on the window. For that case,we will use the use effect. So we're goingto go over here we'll say use effect. Andthen in the use effect, what I would want,of course, is to pass in my callback function.Now that is true. And then within that callbackfunction, I will want the event listener onthe window. So first, I'll be listening forresize event, that's number one. And thenwe need that callback function. So essentially,a function that will run each and every time,the event will take place. So the resize one,and in this case, I think I'll call this checksize. So let's write check size. Now the thingis, of course, we need to create that particularfunction. So let's create it or say checksize. And as far as the function, it will,all the time, update the size. So all righthere, set size, and then whatever is the value,get the inner width. So what we're doing hereis we have the use effect, we have the callbackfunction, and we're setting up the event listeneron a window, each and every time, this eventwill take place the resource one, we willinvoke the check size function. And as faras check size, now we just call set size,and we get the current width of the window.So let's see whether this is going to work.So the moment of course, this is 1463. Nowlet's see whether we can update it. And everythingworks nicely correct. So we can make it bigger,we can make it smaller. And each and everytime I'm resizing the window, I'm gettingthe correct value. Because again, we havethe event listener, we're getting the routers,and everything is beautiful. Or let me throwyou a mind grenade. What if we will go toelement? One will check event listeners?Or check for the resize one? Now, what doyou think? How many will have there? We shouldn'thave one correct. Now, does that look likeone? No, it doesn't. And the problem withthis one here is that eventually, we'll justhave a memory leak, where the moment yourapp gets bigger and bigger and bigger. Andif you have a bunch of components that aresetting up these event listeners, left andright, it will cause huge problems. Here,there has to be a way where once we of course,exit, then we remove that event listener.Now first, we need to understand well, whyis that happening here? Well, we have theuse of correct, we have the window listener.Now, in the callback function. What are wedoing over here? What do you think we haveset size correct. Now what is the set sizedoing? It is triggering the rerender? Correct.Because the moment we invoke set size, weupdate the value. As far as the state valueas far as the size. And what was used to doing,it was preserving the values, and it was triggeringthe rerender. So each and every time, we callthis callback function, meaning each and everytime we resize the window, we also triggerthe rerender. So the moment we trigger rerender,then again, we call the use effect. Now ifyou want, you can just simply console login, you'll see that in a console, where I'llsay hello world, the moment we refresh, notice,technically we have one correct. Now we haveone event listener. But of course, the momentI'll start adding some changes, you'll noticefirst of all in the console, I have a bunchof hello world. So each and every time, I'mcalling the use of an Of course, if I'll checkmy events, and I fall refresh, I have a bunchof event listeners as well. This is wherethe cleanup function come into play. So everytime we have this user, we also have an optionof returning a function. So we go here withreturn.And as far as the function, wherever we placeover here, will be invoked once we exit. AndI think the best way to showcase that is addinganother console log. I'll say clean up here.And let's set up a remove event listener.So we'll go with window and remove event listener.Again, we need to set up a resize on the samecallback function. So we would want to removeonce essentially, we are done. And what you'llnotice right now is something really interestingWe call the HelloWorld. course that is initialrender. But what you'll notice, before wedo anything show before we set up anotherevent listener, because notice this is happening,as I keep changing the screen size, then wealso call the cleanup function. So I thinkthe best case scenario is going to be addin here console log. And I'll say render,burn here. We'll call this use effect, useeffect. And then we'll have our cleanup. You'llnotice how it works. So initially, we havethe render correct, then we call the userfor now, before, we call the use effect, onemore time, we'll also clean up Shall we haveour initial render, again, don't pay attentionthat there's two of them. There's initialrender, then we invoke the user. And thenagain, once we trigger rerender, once we renderthe component one more time, before we callthat user. So before we add that, anotherevent listener, essentially, we clean it up,we remove that listener. And of course, wecan also see that by the console log. So thatis going to be how the cleanup function works.So yes, the use effect will run after eachand every render node is of course, the defaultevent. In this case, we're setting on theevent listener, we're checking for a resize.Now, that will trigger the rerender. However,before we around the use of after that render,we will run the cleanup function first. Sothat's how the setup works. And you mightmake a good argument where technically inthis example, we don't need to clean up function.Now, what am I talking about here, are remember,we had that initial render, we had that dependency.So for example, in here, I could say you knowwhat, I would just want to run the user onlyonce we render the component. And in thiscase, you're actually correct. Because whatyou'll notice that even if we comment outthe return, meaning the cleanup function willstill have only one event listener. So noticehow I'm re rendering the component that istrue. But if I check out the elements, I canclearly see that I still have only one eventlistener, because my use effect only runsonce. Now, before you dismiss the cleanupfunction where you can say, well, each andevery time on just this empty dependency array,you need to understand that the cleanup portionis very important, when we will start dealingwith component appearing and disappearing,meaning there's going to be conditional rendering,where Yeah, at the moment, this componentis all the time on the screen. So totally,honestly, this makes sense, where we justset up a dependency array, and we say, youknow what, once the component renders, wewill set up event listener, and life is great.However, we need to understand that there'sgoing to be component that, for example, aredisplayed and they are moved. And the problemwith this one is that even though it runson the initial render each and every time,we will show and hide that component, it willadd again, the window listener, or event listeneror whatever side effect you added there. Andthat is something that I'll show you a littlebit later, once we talk about the conditionalrendering, just don't dismiss it. Even thoughin this case, here, we could have fixed ourissue with this empty dependency array. Essentially,don't forget that it is a good practice, eachand every time you set up a side effect isto also set up a cleanup function. So youdon't make a big fat mash, by just addingtons of subscriptions, tons of event listeners,or that kind of thing. Nice. And once we havecovered all the use effect works. Now let'sput it to good use. And let's see how we canfetch data using use effect. On first whatI want you to do is in the app j s, changethe import a little bit. Now I don't thinkI'll change the name. But we're gonna growwith us effect again. And we're looking forthe final in this case. Let's look for usea quick fetch data file. And once it renders,you'll notice a bunch of GitHub users. Soessentially, this is whatWhat we're trying to create, where there'sgoing to be some title,we'll just get some default GitHub users.And of course, we'll do that using use effect.So now let's change it around to a setup.So instead of the final folder we're lookingfor to setup. And we should see on the screenfetch data, that's the one that we're lookingfor. I think I can close the console, it'snot going to be necessary. And let's navigateto fetch data, I already provided the URL,if you want to double check what you're goingto get back, you can just copy that and navigateto your browser, copy and paste browser willperform a get request. And as you can see,essentially, we'll get a array of objects.And then in each and every object, we haveinfo about the GitHub users, I believe we'regetting 30. But don't quote me on that. Imight be wrong, but I believe there's 30.So once we have this particular setup, Now,of course, let's work on our component, whereI think I would want to start by setting upsome kind of state value. Again, we have theuse state. So let's set up the users, I'mgoing to go with constusers. Now I will need a set users functionas well,users here, and that is going to be equalto use state. Let's start with an empty array,that is going to be my default setup. Then,of course, in the return, let's also add somekind of heading three.This is where we'll place our users, eventually,we're below it, we're going to go here withGitHub users.All right, that's a good start. And now let'sset up our user. So I'll set up my hook. Souse effect. And then I'll have my callbackfunction, of course, share within the callbackfunction, what I want is to perform a fetchrequest. Now we have multiple scenarios, wecan set up the function here. So you can juststart typing away, that is always an option.Or you can set up a separate function. Soin my case, I'm going to go with separatefunction for a very simple reason that I'mgoing to use async await. And that is onemore rule that I would want to mention thatyou cannot, you cannot make this functionasync await. For simple reason that Remember,a sink await returns what it returns a promisecorrect. So if I'll say here, a sink, righthere, it is going to be an issue. Okay, thiswill work, there's going to be a big fat orbecause you use a frickin cannon to be a sink,it cannot return a promise. Because remember,in the previous video, we talked about thatcleanup function. So use effect is lookingfor that, not for the promise. That's whyyou can either set up async await inside thecallback function. Or you can just set itup as a separate function, which exactly whatI'm going to do. So I'm going to go here withcons, and then I'll call this get users. Now,like I said, it is going to be a sync function,because I'll use the async await syntax. Andthen within the function body, I'm just goingto be looking for a response. So go with responsesequal to await. And then I'll use the builtin fetch. But of course, you can use axios,or some kind of external library as well.By the way, I think during the projects, we'lluse the external libraries, because it's justgoing to be a little bit easier. And thenwe already know that within the fetch, wejust need to pass in the string, meaning theURL, which of course, he is, right now, theAPI github.com, and then forward slash users.Now we already know that as far as fetch,we would need to run the JSON because we'relooking for that format. And again, we canawait for that. In this case, I'll go forusers and is equal to await or response. Sothat is, of course, my variable. And thenI run the JSON. So my key thing here is gettingthis users. And before you're on set users,let's just do a little bit of dance, whereI'm going to show you what would be an issueif you just directly call set users. So first,let's start by console logging, whether weare getting the data in the console. And thenonce we get the data, then of course we'lldiscuss what steps do we need to take? Soin the console at the moment, I don't seeanything. Of course, the reason why I don'tsee anything, because in the use of I didn'tcall it. So let me call get users let's invokeit. And now our console Yeah, I have 30 userswillLife is beautiful. Like I said, it is an array.And each and every user in that array is anobject. Now, what are the steps that I wouldwant to take? Well, I would want to use setusers. And of course, instead of this emptyarray, I would want to set it up as the usersthat I'm getting from the GitHub, correct.Show, instead of this empty array, it's goingto be array of 30 years. And then once I sether up, then in the JSX, I will iterate overmy users. And then for each and every user,I'll just set up some type of return, meaningthere's going to be named, there's going tobe an image, and all that good stuff. Now,before we do anything, I would want you tothink about something. So I'll purposely placedthis in the comments, because I don't wantyou to run this right now. But what do youthink is going to happen if we go with setusers, and then we pass in the users? Andlet me tell you right away that as far asthe code, this is correct. There's nothingwrong here. So I have my GitHub users, andthen I'm just using my set function, and thenpassing in the GitHub users. But there's adifferent problem. What do you think is goingto be a problem? Well, I have my use effect,correct? It runs after every render. Now,again, I've said this already 30,000 times,but it's very important. What is the use statedoing?It preserves the value. And it triggers rerender.So what do you think is going to happen rightnow? Everything was fine. With console log,we did not trigger a rerender. That was fine.But with this one, what are we doing overhere? So we're getting to users, then I callset users, I update this, I update users.Now, what is that doing in return? that triggersa rerender? Now, what are we doing in thererender, we're getting users. And then again,we're setting users. So essentially, we'resending up a infinite loop. So if you're onthis, essentially, your browser will clash.Now, it's not the end of the world. But that'swhy I commented out because I don't want mybrowser to crash, if you want to test it out,be my guest. Again, it's not the end of theworld. But essentially, you will have theinfinite loop. Because in your function thatyou call in the user fact, you are triggeringrerender, because you call set users. Andonce you trigger rerender, again, you calluser, and on and on and on and on. So whatis the solution? Simple. Out here dependency,right? Correct. Something we already talkedabout. And in this case, I only want to runonce the component renders. So I'll add empty,dependency West. Correct. So now everythingshould be fine. Where I think I can just commenton the log or your reference. And I can callset users. And if I don't have the infiniteloop, then life is great. So now, of course,what I would want is iterate over those users.So again, we'll set up curly braces, we'llsay users have no map. So we're mapping overfor each and every user. Of course, I'll havemy parameters. So call this user. And as faras the return, I don't know, I'm going togo with a list item. And you know what, Ithink I'll place this in the unordered list,showed me fix this a little bit where I'llbe on our list. Let's add a class name. Andby the way, this class is coming from theimages, just adds a little bit of styling.And then let's wrap our users in that unorderedlist. And then for each and every user, course,like I said, I'm returning a list item. Nowuser is an object, and I'll right away, setup my destructuring, where I'm looking forID login, and then avatar, and then URL. Nowif you want to console log, you want to seewhat is the user Be my guest. But in orderto speed up everything on won't do that turnhere, I'm going to say HTML URL, these arejust the properties that are on the object.And that is coming from my user. And as faras the list item, remember each and everytime we have a list, we needed to pass thisunique key. And of course, this is what I'mdoing over here. And then for the user, orwant to have the image as far as the sourceis equal to the avatar, underscore URL. Andas far as the alternative, you know what,let's pass in the login, just so we have somereasonable value. And let's go with a dev.So right next to our image, we're gonna havea dev with a hearing for and then let's placehere to login. Matt is going to beMy name, once I save, it should look somethinglike this. And then right below it, let'sadd a link that just links back to a userprofile. So here we will go with HTML URL.Let's just type profile like so. And we arein good shape, we're essentially within amatter of minutes, we set up a data fetching,where we're looking for get up users. Again,the biggest takeaway would be the fact thatif you have some kind of functionality withinthe function, whether that is directly ina callback function, or within one of thefunctions that you're calling within the callbackfunction of the use effect, if you are triggering,re, render, make sure that you the dependency,alright. So our either you only run it oncethe kimono renders or if certain values change,but be very, very careful of how you set thisup. Because essentially, if you will failto do that, then you'll get the infinite loop.Again, I keep on repeating, it's not the endof the world. But it might just get annoyingto keep on restarting your browser, just becauseyou're not checking when you are triggeringthe rerender. And of course, when the useeffect runs, as well done on completing theuse effect part of this tutorial. And beforewe jump over to the project and start practicingby building something useful, I would wantto cover one more topic. And that is not goingto be a hook or it is going to be a very importanttopic. And that is conditional rendering.And essentially, what that means is that wewill display different components or differentcontent based on some condition. And thenonce we cover this topic, yes, then we willright away, jump over to project and practiceit. So let's start first by importing a specificfile. And you can probably already guess thatwe're looking for folder number three. Andname is conditional rendering, of course,we're working in setup. And we're lookingfor this multiple returns file. So here inthe app j s, I'm going to go with import.Again, I'll call this setup from online, we'relooking forward tutorial, we're looking forconditional rendering,setup, of course. And finally, the multiplereturns file. And I'm here, let's run thesetup component. And let's see what we got.And we should see on the screen simple, multiplereturns. So what is happening over here? Well,if you take a look at the component, you knowthat it is a function. Correct? Now, whatcan we do in a function as far as returns?Well, we can have no returns, of course, thatjust means that we're returning undefined,which will be an issue or you fall commentthis out, where you know that there's goingto be a big fat issue. However, what it alsomeans that we can have multiple returnsbased on some condition, I can, for example,return one piece of content. And if the conditionis not met, then of course, I can return somethingelse. So how is that going to look like? Well,I could simply say before the return beforethe multiple returns, I can just return aHelloWorld correct. Everything is going towork nicely. I have hello world. Why not?Because in JavaScript, we know that once wehave our first return, and of course everythingelse is just ignored. So those would be thebasics. However, what we're looking for issome kind of condition. And of course, basedon that condition, then we are returning sometype of content. So how is it gonna look likewell, the most basic example, we're just gonnago here with loadingand then set loading. Now by default, we'llset our loading to be true. So I'll say yeah,loading is true. And once I have my statevalue, I'm simply going to set up a conditionwhere if loading is true, ran out one to returna Heading Two, with text of loading one show.However, if the loading is not true, Van I'llsimply return the heading two with multipleterms. If the condition is met, van, we arereturning a heading twoSo however, loading data that if the conditionis not true, which of course, we'll changeit in a second, then we'll have our multiplereturns. So the moment I have loaded, Why?Well, because the loading is true. So now,of course, I'm returning this heading two,please keep in mind, you can set up the wholeapp in here. As far as this return, nothingstops you from adding Dibs from adding models,or whatever you would want. I mean, you cango as crazy as you feel. Okay, just keep inmind that if the condition is not met, thenof course, you have your default one. So yourturn the Heading Two, with multiple returns,again, you can set it up the whole applicationhere, the way we can test that is by justpassing in false. Now, of course, we havemultiple turns. This is somewhat typical,where there's some kind of loading state,you literally can't check for loading, orif the user exists, or something of that sort.And then if the condition is met, then youdisplay one part of the application, one giantcomponent with multiple other components.And that if the condition is not met, thenof course, you display a signup page, or somethingof that nature. So hopefully, the basics areclear. Where since it is a function, we'regoing to multiple returns. Now, of course,if we don't set up the condition, then we'lljust return the first one, because all theother ones will be ignored. How if we startsetting up conditions, nothing stops us fromsetting up returns within those conditions.So if the condition is met, we'll have onereturn if the condition is not met, and ofcourse, we have a different type of return.Now way, of course, you can make your componentsway more dynamic, because now they're notstatic. Now they return based on some typeof condition. Once we've got basics out ofthe way, of course, let's take a look at themore complex example, where we're performingsome type of data fetching. And then we havethe loading state, we have the error state.And then we have the final state if everythingwas successful, because otherwise, you'reprobably thinking, well, there's probablyno scenario where I will be statically, changingthe data from true to false, meaning, of course,I would want to do it somehow dynamically.And one very good use case is by setting upsome type of data fetching, which we alreadycovered in years. But of course, in this case,it is just going to be a little bit different,where I would want to still keep my loading.So that stage, we still have our set loading,that also can stay. And as far as you state,you can go with true initially, or you cango with false, that is up to you. In my case,I'm going to go with Trump. So initially,the loading will be true. And then I wouldwant to more state values. And those are goingto be error. So in here, we'll say is ourand by the way, again, this is one of thosecommon scenarios, where a convention is touse this is if you have some kind of bulliononline, whatever name, again, there's no rulefor it is just something that you will see,I would say somewhat a lot more people justadd this is whatever is the name. And thenof course, we still have our set function.But again, it is just a naming convention.If you don't want, you don't need to followit. And again, we're setting up a state value.And by default error will be false. And letme add that is in front of the loading aswell. So it's loading.And then set is learning. And the last onewill be user. And essentially, as you canalready see by the URL will just be checkingfor one GitHub user. And if the user exists,beautiful, will display some data, just somevery basic data. If we are loading and ofcourse will display one content. If there'san error, there's going to be another content.And eventually, if there is a user, then ofcourse, everything is great. The user willbe displayed. And in here, we'll have a setuser and use state. And we'll go with defaultuser. Awesome. Now, like I just said, we'llbe performing a fetch request. And we alreadyknow that we will need a user. That's whyit is important. But before we do anythingallegedly decide, well, what we're going todisplay based on those values, and we'll startby loading and we'll say ifis loading is true. And just to showcase thatwe can add way more than just the headingto, I'll just place a div. Again, let's justsignals that you can have as big of as thereturn you'd want over here. So let's justwrite loading, and then dot.so. That happensif the loading is true. Now in this case,we also have the is error, correct. So inhere we go is error.Again, on just skip a little bit by copyingand pasting. And now say there was an erroror error, something rather nice,short and sweet. So let's say that, of course,now we have loading. Why not because thisis true. All right. And then as far as there,it is false to begin with. And then eventually,we have the default case. So if there is noloading, if there's no error, then of course,I would want to display my user, which simplywill be a div, same way,where we have the heading one, I'll just displaythe user. So you can probably already guessthat, if I'll set my loading to be false.Now, none of the first conditions are met.So we just go with the default cache, wherewe display our user, but the moment loadingwill be true. And of course, it will be displayed.So that is good. That is going to be our return.So now let's set up our fetch request in theuse effect, where we will control our conditions.So let's go with use effect. Let's pass inthe callback function. Now, our right awayset up a second argument, I already coveredwhy we're using it. So please, if you needto go back, go back to the last video of useeffect, where we covered that in detail. BecauseI don't want to repeat myself, all right awayat this empty array, meaning it will justrun once. Once we do it, let's err on fetch.Let's go with URL. As you can see, in thiscase, I'm not using async await. And I'm typingeverything within a callback function, justto showcase that, as always, you have multiplewords, or you can achieve the same thing.So you don't think that you always need touse a separate function that is async await.Now, that is my preference, because I findthe syntax to be more straightforward, butyou don't have to. And then we know that withFrench, we have that then because of coursewe're getting back the promise. And then westill need to go with our JSON. So let's goto response.And now I want to return response. json onmy and also I could set up a catch. If there'serror. Let's just start by console loggingthe error.There's going to be a little bit of code inhere. Because as far as the fetch, you know,has a gotcha. Now at the moment, we fetcheverything we return JSON. Beautiful, whatare we doing after that? Well, in between,we'll set up another dot event. And here weshould have the user. So let's set up ourfunction again. User for the time being, let'sjust log whether we're getting the user. Solet's say right here.And then if we inspect, we should see a usernow of course we do. So that is our object.So we successfully set up a fetch request.So now the question is or how we can startoperating with these vowels? Well, first,we need to understand when are we callingthis function. So in my case, if I said loadingright away to true, when I would want to changeit, well, I guess when I get my data, correct.So once I successfully my user, then of course,I am good to go. Now, if of course the userdoesn't exist, then it's going to be a differentballgame. Shown here, let's add curly braces,like so. And now let's just set up a userfirst. And then let's hide that loading. NowI already know that user will be here andlogin. That's what I would want to actuallydisplay. So since the user is an object, I'lljust say const. And I'll be looking for thelogin that is coming from the user. And thenI have two functions. I have set user andthen I have set is loading, since my initialloading is true, since it is shown. Now ofcourse, once I have the user, then I wouldwant to hide. So first, I'll set up set userand I'll pass in my login. That's the onlything that I'm looking for.Second thing is set is loading. And now ofcourse, I would want to set it equal to false.Why? Well, because I have my data correct.Instead of default user, now I have my login.Now I have the name of my user. And then onceI set the login, and of course I can rightaway call set is loading. So once we'll save,we'll notice that we have our initial stateof loading. And then once we have our data,everything is exactly like we expected. Okay,so that's the first thing that we can do withmultiple returns, where we have a loadingstate, which is either displayed right fromthe get go. Or another way, you could do itlike this, where you say false. So technically,it's not displayed. But when you set up yourfetch, or right before, I guess, we can setup loading. That is true. So that is anotheroption that you can do. So let's go here.So it is loading. And we'll set it equal totrue. And now what you'll notice, first, again,we have this for split second loading. Andthen, of course, eventually, we change thestate, we say set is loading is actually equalto false. And then of course, instead of isloading, which was true in the beginning.Now we just go with our default one. Okay.Hopefully that is clear. Now, again, I'm justgoing to go by default, set it to true. Andthen here, I said, set is loading false, whichis remembered, you have this option, as well.Now, if you want to see that loading for longer,the only thing you need to do is just go toNew Window, run again, or start a localhostonline, I'm going to go with 3000. And inhere, we can just slow down the network alittle bit, just so you can see.We do that in network. And I'm going to belooking for three G, the first one online,once I refresh, notice, there's going to bea loading dadadada dot. And then once we getthe data, then of course, we fall back. Hopefullythis is clear. As you can see, it's not likeevery time we'll just do that manually changingthese values. Notice how this is happeningdynamically. Now, one problem with a fetchis that when you talk about this error, essentially,you're not talking about 404, for example,you're talking about the networker. So whatI'm trying to say is, if I add here, Ash,not technically, that kind of user doesn'texist, but it is not going to trigger my errorover here. Okay. And this is why we'll haveto do a little bit of dancing around, wherewhen we are getting the JSON right beforethat, essentially will check what is the statusof our response. Again, this has nothing todo with react, it has to do with fetch, where,as far as built in functionality, it doesn'ttrigger the error if the status is four orfour, which means that there is no such user.So how we would fix it, like I said, we wouldset up all here curly braces, because there'sgoing to be a bit more functionality. Herewithin the curly braces, I will check whatis the status of my response. And if the statusis between 203 100, then I would want to returnJSON, because I know that everything is correct.However, if the status is not between twoand 300, then of course, I'll throw the error.So then eventually I'll call this set is again,for example, with axios, you'd have differentsetup because axios deals with those kindsof errors. But as far as fetch, when you talkabout catch, you're not catching here, the404 b not found, you're just catching thenetworker. That's why we're doing this wholesetup.Like I said, I'll go with response and thenstatus. Also if it is bigger or equal to 200.And let's do the AND operator response, andstatus status, less of 299 299. If that isthe case, then I would want to return my JSON.So say here return all look for response.json server that is the case however, if itis not a case, if it is four or four, likewe have over here, then I'll set up my house.Again, I'll have to set is loading to false,because initially in my case, it is true.Then next, we would need to set is error.So now of course I would want to tryThat state set his error. And now of course,we're setting it equal to true. So now wecan already guess that, where we have thesemultiple returns, this will meet this condition.So his error now will be true, correct. Andonce that is the case, we should see thiserror dadada. And then again, it's not a reacting,but I'll also throw the error. So I'll sayhere throw newerror. And I'll go the response. And thenstatus text. Usually, that's where we canfind more info. Of course, this is not correct,it needs to be. And once we save, notice,now we have the error. So we have error data.So first we were loading, you can clearlysee that once I refresh, for split second,we're loading. And then since our URL is incorrect,since there is no user, we are hearing theerror, of course. And then since we're hittingthe error, now we're displaying Dev, and thenheading one with error dadada. And, as a sidenote, of course, you can place your spinnersor whatever you would want. So once we startworking on more interesting projects, youwill see how that works as well. But essentially,the main idea is following where we can havemultiple states. And depending on that state,we are setting up the returns. Again, keepin mind, you can return different components,you can return a bunch of HTML elements, orwhatever you'd want. This is just a most basicexample. Okay, hopefully that is clear. Letme go back to a proper user. And now as youcan see, I first have the loading, then sincethere is no error, I'm just setting up theuser and removing the loading, because I saidset is loading equal to false, beautiful job.And up next, we're short circuit evaluation.Hopefully, you're clear with that concept,because it is coming from the JavaScript nowI will try to cover the basics. Or if youneed to brush up, then please do that. Becauseagain, this is just straight up JavaScript.Or of course, we will take a look at the Reactimplementation of setup. And we're lookingfor conditional rendering, learn we're lookingfor setup, of course, and short circuit file,we save there is short circuit. Now of course,we can navigate to that particular file, filenumber two, and this is what I'm talking about.If you need to Google hard works and drawsto please do so. Because again, everythingwe're going to talk about in this video isbased off of that. So we have short circuitevaluation. And the reason why would wantto use it because in react when we talk aboutthe JSX, we talk about the fact that it hasto return a expression, correct, meaning hasto return a value. And that's why we set upa expression. So for example, if I have here,a fragment, and then within this fragment,if I would want to set up a if statement,where I have the expression, this won't work,because as far as if it doesn't return a value.So if I'll try to go here with console logon, say hello world, it's not going to work.And it's not because I didn't pass any conditionover here is just not allowed in react. Sothis is why we will heavily work with shortcircuit operators, as well as the ternaryoperator to display something conditionally.Because we already covered it, of course,we have multiple returns. But what if I wouldwant to have a one return. But again, basedon some condition, there's going to be eithersome data shown or hidden stuff along thoselines. So first, I'll comment this out justso you can see that this will throw an error.And now let's set up some state value. Andalso, let's set up some returns. So first,I'm going to go with some kind of text andI'll say set text function that will be equalto use state and then it's just going to bea empty value. And now notice here I havesome stuff that has been commented out. Soon commented an aria first value, the secondvalue, and the first goes we have the OR operatorand then in the second case, we have the ANDoperator and now let's just see whatWhat are the values, I'm going to go withheading one, I guess, I'll just get the firstvalue. First value.I'm going to go with a heading one one moreon, let's just look at the second value, secondvalue. And once I render, I can see that thefirst value is equal to a Hello World. Andthe second value, I just found the value.And basically the way it works in JavaScript,when we're talking about the or on operators,for example, 40. Or if this is false, themeaning false. And of course, it is false.Because it is an empty string, then we essentiallyreturn the second route. That's why wherewe have the empty string that is fuzzy. Sothat evaluates to false, then we have ouroperator, and essentially, the second value,the one that is right, from the OR operatorwill be returned. That's why when we takea look at the first value, that's where youcan see the Hello World. Now, if I'll changethis around and add one letter, meaning nowit's not going to be a empty string, now,it's not going to be fuzzy. Now, essentially,it will evaluate to true, you'll notice thatnow the value is k. So since this is truthy,now, it's not going to return a second value.Now, essentially, it will return that firstone. Now, when we talk about an operator,it works a little bit differently, where ifthis is truthy, which of course is now thecase, then we will return the second value.Now, if it is fuzzy, like we had a previouscase, violin is going to return that firstvalue, which of course, in our case, is thatempty string. Okay. Now, of course, you canconsole log, and you can see second valuein a console, we should see that a is goingto be empty, essentially. Correct. So if itis true, then it returns this one. If it isnot true, then it returns of that first one.Okay, so kind of the opposite. One is theour operator, and then the second one is theoperator. All right. Now, why am I showingyou all this? Well, because we can use thatwhen we're setting up the expression in theJSX. That's why it is so important. And I'llstart by simply showing you the example ofname. So I'll leave this for your reference.I think I'll comment these ones out as well,just in case you would need it present. Let'simagine this scenario, where what if I havea new one. And as far as the text, I wouldwant to display that text that I have overhere. But the thing is, I also would wantto set up some kind of default, if it is aempty string. So if I go here with text, everythingis great. But of course, says the text isempty string, and nothing is displayed. Correct.So now I can use my OR operator. And I cansay You know what? If the text is halsy, thenreturn some kind of default value, just likewe were doing here with the variable. Butof course, now we're doing that in react.Now say, if the text is there, awesome, great.If the text is not there, then please returnjohn doe. And of course, since it is false,it routes false. And now we're turning thisaround. Now, if I add something here, if Isay Peter, now of course, you'll notice thatthis is true thing. So now this gets returned.Okay? Now another thing you can do is of course,use the Add operator. Now an operator we usea little bit differently, where again, wewill set up the curly braces. In here we'rechecking for the text value. And if it istrue, then we're returning that element. Okay,so in this case, we were returning the elementregardless, but using the AND operator, wecan trigger the showing or hiding of the componentor the element in this case. But you can alsoof course do it with components. So for example,if the text is true, then I'll say that Iwould want to display the Hello World. HelloWorld. Correct. Now if the text is not true,meaning if it is going to be emptyThe VLAN, you'll see that nothing gets displayed,okay. So that is the difference. In this case,if it is true, then of course, we displaythe first one, if it is false, then we displaywhatever is on the other side of the OR operator.However, with and it is the opposite. If thisis true, only, then I will return this particularelement. If it is not true, then you can seethat, nothing will get rendered. And by theway, you can double check that by lookingat the elements.Or notice if you're checking the route, youcan see that you have the container, and theonly one is played is this one.Because this is false, we use that is an emptystring. That's why we're not returning it.And of course, we can also do the opposite,where I copy and paste. And I'll say, youknow what, if this is false, then returning,so we can kind of flip it by using the NOToperator, that is also the possibility. Andnow you will see that of course, there's goingto be a Hello World on a screen. Why? Becausenow in this case, I'm saying, you know what,if it is not true, if it is not true thanreturning, again, of course, we'll add somemore dynamic setup a little bit later on.But just keep in mind that everything thatwe are going to talk about and use. And theexamples and projects later on, is based onthis short circuit evaluation that I covereda little bit in the beginning. So if you needto go and research that, please do so. Butthe way it works in react is when we use thewrapper, if this will be true, meaning ifthis is going to have rallied to true, thenthis value will be returned. Or if it is positiveor false, then the value on the other sideof the OR operator will be returned. However,when we talk about and if the value will betrue. So if it will evaluate the true, thenof course, we will return whatever he is onthe other side of the an operator However,if it is going to be false, and of course,we won't return anything. Now we also haveoption to check for the opposite value. Andthat is also the case. So here the only differenceis that I'm saying you know what, show theheading one, if it is false, which of courseit is palsy, so it evaluates to false. Sowe are in good shape. So those are the basicsof how react implements short circuit evaluation,my bad and bad. Hopefully, we are comfortablewith short circuit operators. Next, I wouldwant to add a button to the mix. So that way,we'll see how we can set this up dynamically.Essentially, instead of hard coding, of course,this will depend on the value. And mine willchange that value using the button. And thenalso to want to talk about the ternary operator.And why is that useful? All right, so let'sstart, I guess by setting up our button. Soright below the heading one, or Yeah, I thinkthe heading one is going to be the best casescenario, we're going to go with button.And then again, a little bit of styling, soit'll say class name, not equal to A btn.And then inside the button will write toggleerror, toggle on error. And now let's imaginethat we're going to have some kind of stateshow, of course, this is going to be the errorstate. And then I'll toggle it using thisbutton, show up where I have the text. Andyou know what, whether we're at this point,can just come in there mode, I'll create anotherstate variable,it's going to be error. So I'm going to sayis error. And then of course we have set functionas well set is her man in here that is equalto a US state. And by default, it is goingto be false. So by default, there is no or.And now what I would want is to set up somekind of element, same like we did with headingone over here, or you're not having we'regonna do the same one. Hopefully you haveit for your reference. Because what I'm gonnado right now is just change it around a littlebit, where instead of relying on text I'mlearning to rely on is error. So I'm gonnasay his error. And now what I'm trying tosay is that if the error is true, then I'llwant to display this hidden one. So of coursewe can change that.text as well. So say here error, and thenthree dots. Now, of course, the moment I save,I have nothing there. Correct? Why? Well,because here I'm checking whether the erroris true. And we know that with an operator,only if this is true, and of course, willdisplay the heading one, unless we the exclamationpoint. And of course, I'm checking if thisis false or false. And then I'm displayingthe heading one. So now of course, I can see.But I actually would want to only displayIf the error is true. And now I would wantto use this button to toggle the error usingthe set function. And the way we can do that,is by turning on click over here, then again,we'll need our inline function. And also here,set is error. And then I'll use again, theexclamation point. And I'll say is error.So what's the code saying over here? Well,I'm calling set is error. But then on allthe time grabbing the opposite value of thecurrent is error. So currently, is error isfalse. Correct? That's the default, how thefirst time I click it is going to check. Allright, what is the value that is false? Sure,let me flip his error to true, because thatis going to be opposite. And then of course,the next time when it is already true, thenagain, we run the same functions. Now, ofcourse, it will change it back to false. Soessentially, we set up a toggle state, wherethe moment I click, notice, now I'm displayingthe error, why not because I change the valuein the state, I change it from false to true.And I think this would be a good use casefor react dev tools. So let's go with localhost3000.And remember, we had to look for componentshere. So let's say where it is where it isprofiler components. And of course we haveshort circuit, and check out the state we'regonna have state is false. So the moment Iclick, notice, now it's going to be true.Okay. So again, once we click, we flip itback to false. So essentially, this is howwe're toggling the state. And as we're togglingthe state, we're also toggling this headingone, because we're using the AND operator.And only if this is true, when display. Ifit is false, then of course, we don't displayit, right. And also take a look at the ternaryoperator. And the difference between a ternaryoperator. And the OR operator is the factthat ternary operator will give you two possiblevalues. So for example, in this case, I'mchecking for his error, only if it's true,then I'll display our ternary operator, wewill display something if it is false. Andthen something else if it is true. Again,it is just a JavaScript thing. So if you needto go brush up on that, please do so you canGoogle it, or you can use my playlist. It'sup to you. But essentially, we'll deal withthe ternary operatorsyntax for ternary operators following wherewe have a question mark, then we have firstthing that we would want to show if it istrue. And then the second thing if it is false.So in our case, I think I'm going to do thesame thing we use error. So let's set up thecurly braces first. Again, we'll check forhis error, whether it is true or false. Andthen the syntax for ternary operators followingwhere we add a question mark. And then likeI said, even this is true, then we'll haveour first value. If it is not true, then we'llplace the value after the colon. So in ourexample, what I would want to display Well,if it is true, I would want to display a paragraph.And I'll say some kind of tax. Now again,keep in mind, you can set up whatever you'dwant over here, you can add 10,000 componentsthat are sitting in one giant component. Inmy case, I'm just showing you with paragraph.But sky is the limit. Just remember that asfar as text, I'm going to say there is error.And again, we go with three dots. So thisis going to be the case if the error is true.Of course we know that by default is not thecase. Now after the colon will place one willdisplay If the error is false. So notice inhere, we had no fallback case. We only displayif this is true. In this case, though, wedo have itknow if this is true, beautiful will displaythe paragraph. However, if it is not true,not me showcase that we can set up somethingmore complicated. I'm going to go with divwithin a div, there's going to be headingtwo. And I'll say there is no like show. Andonce we'll save, check it out. Now it saysthere is no error. Why not simple? Becauseerror, of course, is false. Correct. So ifit is false, then of course, we skip the firstpart, because we check what is the value 40is error. And of course it is false. So weskip this one, the paragraph, and then weright away, go to the second value. That'swhy we have here, there is no error. Now themoment I will click, notice what's going tohappen. So first, I'll have my error, we alreadycovered up because that is of course, ouroperator, but then I have my paragraph withthere is a error. So those are the ways howwe can display elements or components conditionallyin react, because Please keep in mind, wecannot use if, because if doesn't return thevalue, need to use something that returnsthe value, whether that is a short circuitoperator, or that is a ternary operator. Alright,and once we're clear with ternary operator,now I would want to set up a small examplewhere we will toggle the component in thiscase, and in a process, I'll try to hammerhome, why we need the cleanup function. Sothere's going to be a little bit of repetition.Eventually, we will set up again, the eventlistener on the window. And I'll showcasewhy it is important to use the cleanup function,because setting up the dependency list emptyis not always going to save us. All right.Now what we're looking for in the app, Jessis File Number three, still conditional renderingstill set up, or in this case I'm lookingfor, and then forward slash, and then of course,show and hide. So the moment you're on it,this is what you're going to see. Now I'mgoing to navigate the file. So again, in thesetup folder, File Number three, show andhide in first out want to set up a state value.Again, we have the use state, let's go andsay const. Show and then set show function.All right, bad. And that is equal to use state.And by default, it is going to be false. Allright. Now as far as the return, let's makeit a bit more interesting. More. First, I'llset up my fragment. And we'll start with abutton, I will say that there is a class namefor the button. And the class name is button,of course. And then remember how we were togglingthe state value. Again, we'll do the samething where we have onClick, then we'll haveour inline function. And then let's run setshow. And each and every time we'll click,we will set the new state value opposite tothe current one. So if it is false, then it'sgoing to become true, if it is true, and it'sgoing to become false. And here, let's typeshow an forward slash hide, let's save. Okay,we should have the button. Everything is awesome.And now depending on that show value, I willshow or hide another component. So that isgoing to be the difference where I previously,I mentioned multiple times that we're notlimited to HTML elements. So of course, thisis the example where we will toggle the Reactcomponent. And for the time being, it's simplygoing to be a div. So let's go with div. AndI'll add a little bit of styling here. Minimal,go with a margin top amount is going to beequal to two RMS. And then within the Dev.Let's again go with window window, and we'llcheck for those pixels. So for the time being,of course, we haven't set up anything, soI'm just gonna say size, and then colon. Soonce we save, we should see something on ascreen, but of course we don't, because wehaven't implemented that show. So what I wouldwant here is set up curly braces, and thenI'll say if show is true, then we'll use theAND operator and then I would want to displaythe item component. Now of course I do needto be a bit more specific here, where it isa component. Now of course it is hidden wherewe hopeBut then the moment we click Check it outmy window size. So as you can see, now I'mtoggling the component. Correct.It is important because of two reasons. First,the fact that we're not limited to just HTMLelements, like we had in a previous example.And a second thing, I would want to hammerhome, the fact that we need to use the cleanupfunction, when we're setting up some kindof side effect that needs to be cleaned up,which in our case, is still going to be thatevent listener on window. So within the item,not within the show and hide component withinthe item, what I want is to set up that sizestate variable. So again, we go here withconst, on size, and size, like so. And nowwe're using huge stay. Again, let's checkfor a window in our width. Beautiful. Andthen we will set up each and every time whenwe render the component, our use effect.So we're going to go here with use effect.Now we have our callback function, just toshowcase that it's not going to work if wesimply are empty array. Now, let me add herewindow,the event listener. So as we'll be resizingthe window, we'll be listening for this event.So resize,we'll run our check size, like I said, a littlebit of repetition, because we already setthis up when we work with us. Now, of course,let's come up with our function. Sure, it'sgoing to be check size function, not goingto be looking for any parameters. However,each and every time, we'll resize the window,I will set my state value equal to a window,and then in our width. Okay, beautiful. AndI remember when we covered use effect, I saidthat even though in that particular scenario,the empty dependency array saved us. Becausewe were not toggling the component. Essentially,the component was there. And the first timethe compound rendered, we set up the eventlistener, and we were good to go. However,the problem now is going to be that we willbe toggling this component. So even thoughwe run this only once, because we will togglethe component. Essentially, we will set upmultiple event listeners, I guess, in orderto see better what is happening, let's justgo with size here in adding to show now onceI click Check it out. Now, of course, thewindow is 462. By the way, we can add pixelsas well if we would want. So let me go herewith pixels. Again, I show and then as I'mgoing to be increasing or decreasing the sizeof the window, of course, this value willchange. Now the problem is a little bit different,where every time notice, as I'm clicking ontoggling the component correct. And if wecheck out the elements and non event listeners,and then research notice, is this the behaviorthat we're looking for? No, of course, itis not. So even though empty array saved usin the previous example, because we were nottoggling the component. This is why this cleanupfunction is so important. Because even thoughthis runs only once, because we're togglingthe component, we run every time we show thecomponent. So that's why remember, we needto go with return. And we have the functiononce when of course the component is removedand discuss Of course, once we removed fromthe DOM, and we'll go with window, then removeevent listener. Again, I'm looking for resizeon our on check size. So now what you'll noticethat once you navigate here, well, you cansee that there is no event listener. Thatshould be the case because the component isnot displayed. Then the moment we show thecomponent, then of course, we set up the firstevent listener. But then as I'm clicking,notice, I'm not going to be adding those eventlisteners. So there's always going to be onebecause we have our cleanup function. So oncewe remove the component from them using theshow, toggle, and of course it will also removeour event listener. So that's how we can togglecomponentIn react using the operator, and also that'swhy it is so so crucial to use the cleanupfunction. Excellent. Up next in the tutorialwe have the forms. More specifically, we'regoing to cover controlled inputs, what theyare and how they work, and also how we canset up multiple inputs with just one function.Before we cover any of those topics, though,our just want to give you general info aboutthe how the forums work and react. So we'llstart working and control the inputs, butwe'll cover them in a next video. In the beginning,I would just want to give you the generaloverview.The Fall, of course that we're looking foryears. Again, I'll call this setup, just soI don't have to change stuff around in here.And also tutorial when we're looking for tofolder number four forms. When set up, ofcourse, we're looking for controlled inputs.And now instead of deciding to all aroundthe mine setup murders,if you're working with forms in JavaScript,you know that it works, something along thelines of setting up some kind of ID or classor whatever the input, then you targeted theinput. And then in order to get the value,you are looking for the value property onthe node. Now interact, it's a little bitdifferent, where you have those controlledon controlled inputs. By the way, we'll talkabout uncontrolled inputs when we talk aboutuse ref. But whenever we deal with controlledinputs, you will be hooking up your inputto a state value. And since it's going tobe easier for me to show, of course, let'sjust put this one on ice, just remember whatthe setup is going to be a bit different thana regular JavaScript. So what I would wantto do first, well, I think we could changeour JSX a little bit more or start with article,by the way, there's going to be two articles,one is going to be displaying the items. Andthe second one will be dealing with forum.So let's just start with the form. And thennext video, we'll add those items as well.When it comes to a form, we're not going todeal with action. So we'll deal with thaton our end. Now, I do want to add here a classname just for styling purposes. And that isgoing to be a warminside of the form not set up, I think twoinputs is going to be good. So go with formcontrol. Again, this is just for styling,please keep that in mind.Once I save, I should have the form on thescreen beautiful online within the sport control.Again, this is just for styling, please keepthat in mind. It has nothing to do with reactwithin this div. Now I would want to set upmy input. But I also want to set up a labelbecause I would want to showcase how we canconnect label with input in react as far asthe React because the naming conventions inJSX are calling for camel occurs, you'll seethe syntax where in regular HTML Of course,you wouldn't write that like this. But inreact if you have label and you want to connectit to the input that we're about setup, youneed to use this HTML for written in camelcase. And here you need to pass in the IDthat is eventually going to be on the input.So in my case is going to be first name thatwe're marrying it right here. And all righthere name,colon, like show. And of course, we wouldneed to set up our input. So I'm going togo with input. Now type the same works aswith regular HTML. So we are multiple types.In this case, I'm going to go with most basicone, which is going to be a text. And thenof course, I would need to have two things,I would need to have the ID as well as thename. So we're going to go here with an IDand also the sequel to a first name, justlike I had in the label. And then let's alsoset up the name. So say your name, and thatis equal to a firstname. So say read Emeritus. Now of course,I have my label. Notice once I click on alabel, I right away highlight a my input.And of course I have the input. And sinceI would want to have two of them, I'll copyand paste and we just need to change somevalues around or form controls. There's exactlythe sameNow it is going to be a bit different. Solet me select both of them, we're lookingfor email, and also the name will change.So let's right over here, email. And by theway in here, I also would need to change itto email. And once I have my second input,I also want to set up right away a button.So we're going to go here with button, eventtype will be met. And here let's just writeadd person. And you'll see why we do thatin next video. So we have our button. Awesome.And then when it comes to react, we have twooptions. Either we can add on submit, form,so the form element, or we can still add onclick on this button, I'll show you in a second.Both of them will work. But let's start withonsubmit. Because that is something we haven'tcovered. So on a forum, we can set up a submitevent listener. And then of course, we'llstill need our handle. Andworkshop, of course, we would want to comeup with that function across online handle,met. Now eventually there's going to be anevent object. And I'll show you why in a second.For the time being, let's just go with a littleworld. And let's see what is happening. SoI typed my values, both of them will show.And now Once I press the button, or I pressreturn, I should I should see hello worldin console. However, it's not happening. Why?Well, because by default browser will tryto submit the form and then refresh the page.That's why we don't see this HelloWorld. Andjust like in JavaScript, we have access tothe event object. And on that event object,we have a method called prevent default, we'reessentially we're saying you know what preventeddefault behavior, we will deal with this formdata on our own. And so the way we preventthe default would be falling way where wego with prevent default. Now, of course, oncewe fill it out, either, we can press enter,or we can press on the button. And of course,we'll be able to see the hello world. So essentially,now we're not refreshing the page, the momentwe submit the form, awesome. Just to showcasethat it will still work. If we set this upon the button with a type of Submit. Let'sgo here with on click. It's the same dealwhen we pass in animal Submit. Now our movementfor a second even though we'll push it back,here, again, let's try it out and check itout, it will still work. So again, that isthe case, where you have multiple optionsof how you would want to submit the form inthe React either use this on submit, but makesure you place it on a form. Or you can stilluse the good old on click, make sure thatthe button is type Submit. And then of course,make sure that you in both scenarios as brahmer.In this function, you are accessing the eventobject. And then however you want to callthis brahmer. In my case, I call this E andyou can look for the properties that are availableon that event object. So my guess our movethis on click. So that would be a basic setupwhen it comes to forms in react. Nicely done.Hopefully we are clear on basics. Now let'ssee how we can connect our input to the statevalues. Because at the moment, yeah, we canprevent a default, we can console log helloworld. But of course, what I would want isto access the data that is inside the inputcorrect as I'm typing or as I'm submitting.And the way we do that in react, we set upstate values. So again, we'll use usenot only to add two attributes on the inputvalue, that will reference the stored value.And then on change on change event listenerwill fire the callback function each and everytime we type something in the input. And Iguess let's start by setting up our statevalues. So here I'm going to go with conson first name, and then I'll say set,first name, first name and that is equal tomy usestraight on by default, it is just going tobe an empty string, I'll copy and paste. Andof course, I'll do the same thing with email,where it's going to be an email and then setemail. And again, by default, it is goingto be a empty string. So now what I wouldwant is to head to my input. And then likeI said, we have to add two attributes, oneis going to be value. And the second one willbe on change event listener, where we'll setup our callback function. So in here, let'swrite value. And now which value would wantto reference from the state? Well, I guessmost sense would make personnel correct. Soagain, I'll just referencing here, the statevalue. And now I'll do the same thing withmy email. So again, we go with value online,we're looking which state value would wantto reference. And the moment you do that,you'll notice something interesting. Firstof all, there's going to be a big fat error,because react will complain, or maybe morespecifically a warning, where react will complainthat I provided value prop. However, I missedout on the on change handler. Memorial reactwill be on change handler a little bit later.Now, I would just want you to understand that,notice how you're typing, and nothing is happening.Why nothing is happening? Well, because weconnected our forms, meaning our input tothe state routers. So since both of my statevalues are empty strings, they all the timewill stay like this. Now, of course, if I'llsay hello, world, of course, in my name, one,I will have that HelloWorld. Just keep inmind, of course, now we have connected thoseinputs to the state value. The last thingin a puzzle is to set up that on change. Soeach and every time we'll type something ina form will fire the function. And withinthat function, we will set up this state value.And then in return, you will right away seeit in the form as well. Just hopefully thisis clear, we're now the value in the formdepends on state value, since it is an emptystring. That's why you can type all day long,and nothing won't change in the form.With that said, Now let's set up our on changehandler. So we go here with on change. Again,we can set up a reference, meaning we canset up a separate function and reference it.Or we can set up the inline one. Now sincethis is already fifth or sixth example ofinline and reference, I'm not going to setup two separate scenarios, all just do theinline, where we'll have to pass in our arrowfunction first, because again, we will beinvoking. And now we'll go set, first name.So here comes the interesting part. Remember,when we were submitting the form, we haveaccess to the event object. And in this case,the method that we're looking for on the eventobject was prevent default. Now with on change,we also would want to access the event object.However, in this case, what we're lookingfor is the event target value. So the samedeal, like we had with handelsman, where wehad access to the event object, same workswith onchange, where again, we can accessthe event object, or in this case, what we'relooking for is the event, Target, and morespecifically value. So that is going to giveus whatever is typed in the actual input.So I'm going to go here with event target,and then we're looking for the value. So nowwhat you'll notice with the first one, asyou start typing, actually the values aredisplayed. And what is even more interesting,if you go to the components, you'll noticethat the moment there's nothing there. Yeah,that is true, more controlled inputs, or I'msorry, in here. So notice we have the statevalue as you start typing. Notice the statevalue also changes. So we're affecting thatin two places. Because we have connected ourform each and every time I type somethingin the form the on change, function fires.And then within that function, I have setfirst name, and then I'm controlling the state.Now in turn, I'm also controlling the input.Remember when it was justempty string, while we can type all day long,and nothing was changing in the input. Now,of course, once we have our on change, wehave the function, we access the event object.And then in order to get the value for thisparticular input, I would need to go witha rent object. And I'm looking forward totarget and then I'm looking for value. Sosimilar, like we worked in just vanilla JavaScript,or in this case, we directly can access ourinput, because we have an event object, thenwe have a target. So that is going to be ourinput. And then more specifically, we're lookingfor the value property. And of course, oncewe have this set up, I would want to do thesame thing for my email, where I'll copy andpastein the email, I'll also do the same thing.So I have onchange. However, in this case,of course, I would want to call set email,my first name, but the event target value,of course, won't change. So I'm going to gohere with email. And once we do that, checkit out. Now I can type and everything is displayedcorrectly. And of course, once we have thisparticular setup, now in the handle submit,instead of looking for specific input, onceI submit the form, now I have access to themin the state, the first name, as well as theemail. So let's do that. Our will consolelog here, the first name, last name, firstname,or I'm sorry, email, I guess more properly.So let's type, I'm going to go here, you knowwhat, let's write some reasonable named john.And then we're going to go with john@gmail.com.And once we add the person, there it is. Nowwe havejohn john@gmail.com. So that's how we canset up controlled inputs in react. Remember,you need to have a value property that referencessome state value. And then you have on changeevent listener, where either you set up areference. So either you set up a functionhere, like we did with an or submit, justmake sure that in either case, you're lookingfor this event. So you pass in that firstparameter, because that will reference theevent object. And then in order to controlthe state value, you call the set function.And then what do you would want to pass inis the event target. So you're grabbing theinput, and more specifically, you'd want toget the value for each and every time youtype something in a form. In turn, you'llchange the state value. And since that statevalue is referenced over here, also it willbe displayed in the form input. Excellentwork. Now we understand how we can set upcontrolled inputs in react. And just to completethis particular part on forms out also wantto create a little app where we can add aboutperson to our list, because up until thistime, all the time we work with lists, wewere just getting some kind of data, whetherthat was external data coming from the API,or it was ours. Our in this case, we'll takea look at how we can add those items dynamicallydivorced. Since now we have covered forms,I can grab more inputs. Now, I'll start simplyby creating my state value for my list ofpeople. So I'm going to vote people,people over here that is you state and weare know that we need to start with an emptyarray. Right? Not bad, not bad. Now, whatis the next step? Well, once I submit theform, I can see that I can grab these valuesshow Wouldn't it make sense that once we submitthe form, I would want to add that new personthat I'm creating to my people? All right.I think that would make sense. Now, beforewe do anything, well, let's think about it.Do we want to have the functionality whereonce we click, we can also submit the form.And notice how as I'm clicking on adding theperson, I have to empty routers. Now why doI have to empty routers? Well, because firstname and email are both empty strings, right?But nothing prevents me right now. From consoleon show. Essentially, if I would want to setup some kind of functionality where I'm addingthis to a people array. I can definitely dothat. So that's why I'll right away set upthe condition.Where I'm only going to submit the form meaningI'm only going to add my item to the arrayif both of the values are true, because wealready know that empty string is positivevalue. So of course, that condition will failif both of them or one of them, essentiallyis a empty string. So in this case, I'll sayfirst name, I'll use an operator, and email.And what you'll notice that only then I cansubmit the form submit the form we form. Andhere, let me write empty values. So that isnot the case, of course, the values all willbe empty. So I'll set up the else. And let'ssay empty Mars. And you know, I think I willleave this for your reference. So we'll havethe else there's going to be no modal no infoto the user. But at least we will know thatif we see in console and developers, thatjust means that the user is trying to submitwith empty vouchers. Now, if both of themhave some kind of value, what I would want,I guess, I'm going to start by creating anew object. So I'm going to go here with const,online person. And I'll start with first name,and email. So what's really cool in ear six,if the property value matches the variablethat you're assigning to, then you can skipone step where essentially, if I'm creatinga new person, I could say something like thisfirst name is equal to a first name, and thenemail is equal to an email. And now if I addthe value, let me just console log the personfirst. But if I'll say here, by the way, letme save it here. Now, not here, sorry, I'mconfused a little bit, I would want to savemy file first. And let's write again, john.And we're gonna go john@gmail.com. So oncewe add the person, notice how in the console,I did create this person, I have the object,and everything works beautiful. Now, the thingis that I can shorten this a little bit, becausein the last six, we have a shorthand, whereif the key name matches the variable thatholds the value, I can just write somethinglike this. Where email is email, and firstname is first name, please keep in mind, bothof them essentially have the same value isjust a little short syntax, which I'm goingto use throughout the tutorial, as well asthe course. So if we go here with john@gmail.com,you'll notice that new person, yeah, we stillhave the value. So everything works correctly.Now, next hour would want to add this newperson to Mirek. Correct? How do we do that?Well, we go with set people. And just so wecan keep on practicing on a function setupas well. Remember, that was my old people,or current people, or whatever. So I willcall this same thing, people just rememberthat we're talking about the current valuein the state. And what I would want to returnfrom this function is data.so, whatever wehave as far as the values in the array, sowe're using the spread operator. And thenof course, I'm returning a new array. However,I would want to add that person object aswell. Again, I know I said this 20,000 times,but we also have an option of just passingthis directly in set people. The reason whyI set this up as a function is I would wantyou to practice on setting up the functionas well, if you see that in someone else'scode, you're not confused of what is happening.And now of course, what I would want is alsoset both of these, the first name and theemail back to an empty string. Correct. Thatwould make sense. So let's go with set firstname, now is going to be equal to an emptystring. And I'll have also a set email thesame way. So now, once we click, by the way,if you want, we can console log it somewhere,the people or not, let's use the React devtools. Sorry. Let's go here to a bigger screen.Notice I have this value over here, the emptyarray. And now if all go again with maybePeter,if also the email at Peterg gmail.com. Check it out.Once we have the person, now, we clear thisone, we clear the first and second row inmy state, email, and name respectively, aman in the state, check it out. Now I haveemail, the first name for the Peter. So whatnow we can keep on adding more and more people.Now before we add more people, why don't wealso set up here a return, where we displaywhat people we have in our array. So again,we'll iterate over the state value, then eachand every item will be an object. So I'llname this in my Paramor as a personas far as the return our return a deer overhere, and I'll go with const, a man ID, aman first name, first name, email. So essentially,what I'm doing is, I'm destructuring. My,you're probably wondering about this ad, well,don't worry, we will create that Id in a second.Because remember all the list,we needed to use something unique here, eventhough technically, I could do something likethis index. And I'll set it equal to index.The problem is we'll start once we start removingthe items. Now, I'm not going to do that inthis particular example. But in general, youdon't want to use index. Once you start addingand removing items to the list. Or even thoughyou are technically in this example, we mightlet it slide and then use the index, I'm notgoing to do that, I'll show you how we canquickly set up the unique key as far as whenwe're creating the person. So for now, let'sjust go with Dev. And notice how we destructuredthe first name and email from the person.Because we already know that of course itis there, because we are creating a particularobject.And then in here, what I would want is tohave the handling forall show the first name so reading forfirst, ma'am. And I'll also add a class nameof item, just so we have a little bit of styling.And then let's have the paragraph with a emailsite value. So now every time we add somethingin a form, that person should be displayed.Now, React will complain, because we don'thave that unique value in the key warriorall summed up in a second. So let's go withAnna. Mine is going to be onG gmail.com. And yeah, we do have the honor,everything is displayed correctly. Again,the problem right now is that unique key prop.And this is not the most vigorous setup. Butwe'll cheat a little bit where I'm going touse the new date get time to string. Normally,you'd use some kind of package.You You rd is one of the most popular ones,where it's a NPM package installer, you importit, just like we did with for example, react.And then you set up that unique ID again,in my case, I'm just going to cheat a littlebit, where I'll use a nifty set up off ID.So now notice how I'm creating this new person,I'll also add this key of ID, and that isgoing to be equal to a new gate. And thenwe're going to go and get time to string,we invoke it. And now what you'll notice thateach and every time you create a person, thereis going to be that unique ID. So you fallconsole log the person. In this case, we'regoing to go with Susan, for example, Susanon susan@gmail.com, check it out. Once weare the person, there it is now of coursewe have the ID. And the last thing, of course,is where we are rendering the list of peoplenow want to also get that Id now I alreadydestructured out of my person. So now remember,we needed to use the key propand set it equal to the ID. And once we dothat we shouldn't have no issues whatsoever.We can type whatever names we would want.And we can clearly see all they're also affectedin our state. So we go here with gmail.com.Of course, once we are the person, where ismy person in the list, and I can clearly alsosee that in a state. And I shouldn't haveno errors in the console, because I am usingthose unique keys. So that's how we can combineour controlled input with our list. So eachand every time we add some kind of item inthe form, we can just submit the formIf values are more than an empty string, andof course, we trigger this functionality,where again, we have some kind of state valuefor the list. And we just add a new item tothe list, clear the items, set them back toan empty string. And at the bottom, we justiterate over the list of items, grab all theproperties that we want, nicely, displayingthem on a screen. Beautiful job. Now we knowhow we can use our controlled inputs withour list. Next, I'll want to showcase howwe can have multiple inputs with the sameon change number. Now, the use case that I'mtrying to showcase is the one with many, many,many, many inputs. On my case, I'm just goingto add one more to our current setup. Butkeep in mind that the whole idea is to showyou what if you would have, I don't know 10inputs, you don't want to have 10 differentstate values than different functions thatyou're calling inside of the handler. Now,first, we will need to navigate to the address.And we're looking for a different file. Inthis case, we're looking for file number two,andthe multiple inputs is the name. So save it,and what you will notice that it is exactlythe same, like we finished in the controlledinputs. And that is by design. So essentially,I'm not the biggest fan of refactoring. Butthis is exactly what we'll do in this video,where we will refactor it a little bit. Soour whole setup is going to be exactly thesame where we are still submitting the form,we're still adding the items. And all thatgood stuff is just the implementation willbe a little bit different. I would want tostart by adding one more input on again, whenyou're looking at this setup, the one thatwe're about to set up, please keep in mindthat we're talking about the form with multiple,multiple, multiple inputs, not just two orthree, we have two or three, probably, there'snothing wrong with our previous setup. Nowwhat I would want is to copy and paste, sowe're adding one more item over here, I'llcall this age. So we'll change this around,we'll say that HTML four will be for age.So also, of course, the ID will change, we'regoing to add here age value as far as text,let's change the ad to age. Now, we also wouldwant to change the name, which by the way,we haven't used it yet. So in this video,you'll finally see why we're setting up thatname attribute all the time. And then I wouldwant to get a state bar. So for the time being,I will copy and paste.I'll copy and paste and I'll say age and thenset age, by default age will be no no, I thinkI'm going to go same way we have an emptystring cared about is going to be my age.And of course, in here, where I have the value,the treasure, I would want to change it toage and set age. So this should work correct.But wouldn't it be better if we would haveonly one value in a state instead of three,or instead of 10, or 15, or how many inputsyou have. And also wouldn't it be better ifwe would have only one function that is responsiblefor on change, regardless of which input we'retyping in. Because that way, if we need tomake some changes, we only need to do it inone place. And we will do that by first settingup one state value. So instead of first name,email, the age, I will go with const. AndI'll call this person so say person. And thenof course, there's also going to be a setperson function. Now it is going to be equalto a US state and now set this equal to Aobject, someone wrote first name on that itwill be equal to A empty string, or email,same spiel, empty string, also the age andyou guessed it, empty string. So once I setup these values, now instead of using themone by one first name, email and the age,now I would want to reference the person andyou're not by the way, I will delete Donaldsubmit and we will write it from scratch.So let's just delete it so it's not in ourway. And then eventually we'll set up onemoreDone. And of course, I have my person withall those three properties. And now, wherewe see the inputs, of course, we would alsowant to change, or now the value will be persondot person, not just the person. By the way,I think in here, I'm just going to commentthis out, or you can delete it, it's up toyou. So we have person, that first name, andperson of that email. And eventually, also,we have person of that age. Correct. Now,the gotcha here is that we're still usingthese functions. Correct. So we have set email,we have set age, and all that. Now, there'sa big fat complaint from react, because, ofcourse, we don't have the handle Submit. Andalso, we don't have the functions. So whatI would want to do right now is just delete,we will flip it over to the submit button.And as far as the on change, lead, just referencethe function in this case instead, so go withno man change. So that is, of course, thefunction we haven't created yet. We're goingto go with Collins and then handle change.Again, I definitely would want that eventobject. So I need to set up my parameter,I'll have access to the object. And like Isaid, we'll copy and paste. So we'll changethis around, there's not going to be threeseparate functions, there's going to be onefunction. And again, Frank 15 inputs. Thatis where it definitely makes way more sense.So we have onchange, equal to a handle change.And then on the submit button, well, let'sgo with on click, just so we can see that,of course it is going to work on in this case,I'll call this handle shop will scroll up,crowns on handle.Right now, still in the same setup, we needto have access to the event object, and willright away preventthe fault arc. So that is the function thatwe're looking for. Now, at this point, it'scomplaining the handle change is not defined.So of course, I call this handle. And that'snot what the function name is. So let's saynow we don't have the hairs beautiful. Noweverything works, but it will start to trytyping. Course, again, nothing will work,or because the handle change is not doinganything. Now, why am I showing you this particularsetup? Well, because now I would want to runthe handle change, regardless of the input,I would want to get those values. And dependingon which input I'm changing, I also wouldwant to affect the person. Now, two propertiesthat I definitely want from the event objectare the name and the value. So if I go herewith const, name, equal to event, Target,name, copy and paste. And if we go here withthe value,changes there around again to event target.So that is the input where we're typing. Samehow we access value. In my previous case,remember, in the controlled inputs,we use the value correct. When we were settingup the first name or the email, we use eventtarget so that x is the input. And then weuse dot value property. In this case, I'mlooking for two things. I'm saying wheneverI call my handle, change our own check forthe name of the target, and the name willbe right here. Remember, each and every timewe set up that name attribute on the input.Well, now we'll use it now say run targetname, and then the var. So if you'll consolelog, you'll notice something pretty predictable,where we go with a name and value. And theplanning depending on which input entrepreneurs,this tells me that the name attribute on theinput is first name. And then I'm also gettingthe values. Now nothing is displayed rightnow in the input. Because we haven't updatedthe person yet. Meaning we're accessing Ofcourse, the person that first name, and we'renot doing anything with that person yet. Butdon't worry, we'll do that in a second. Butif we change to an email, beautiful on oursagain, it gets me the name of the input. Andit also gets me that current value. And thesame of course, is going to be with an edge.Now, why is that? So cool? Well because nowonce I know the name and the value, I canuse theDynamic Object Properties. Again, this iscoming from JavaScript. So please either utilizemy JavaScript nugget series, or just googledynamic properties, how you would set themup in JavaScript. So now I have the object,correct. And of course, the object set person.So what I could do here is I could say, setperson. And then remember, I need to copythe old values first. Because since it isan object, it has multiple properties. AsI'm updating one, for example, name, I don'twant to remove or delete the email and age.That's why we first start by proper data.we,copy the person from the state, and then weadd a comma. And then after the comma, wewould want to come up with whichever propertywe would want. Now, of course, that is goingto depend on which input we're typing in,correct. And this is the case where we cando this dynamically, where I can say, youknow what, get me the name on that object.Because in here, I'll pass in the value. Now,what were my values, it was either first name,it was either email, or it was age, now willdynamically update this property equal towhatever value we have, please keep in mind,it's the same thing as you'd write over here,first name, and then it is equal to a value.Now the difference is that we are doing thisdynamically, because we have three inputs.So if I'll just leave this as a first name,you'll notice that each and every time I typesomething, it's actually displayed over here,which kind of doesn't make sense, right? Why?Well, because I'm not selling this dynamically.I'm saying first name, where if I have accessto the name, and of course, those names needto match to whatever I have in the object.Now each and every time, I'll type in anyof the inputs, I'll dynamically update thatstate value as well. So that's why I needto go with that name. And that's why we addedthe name, right from the get go. Now, you'renot going to use it all the time. But there'sgoing to be some use cases where it is verynifty to update whichever state value referencesthe input. So now again, let's navigate toa bigger screen. Notice I have my state. Andnow check it out. Where I have the name, I'llstart typing. And there it is, in my state,in person, right away all access the firsttime. And now of course, that it will be equalto a job. Now if I go with email, I go withjohn@gmail.com and murders. Now we have john@gmail.com.And lastly, we have age of 24. So notice hownicely, we updated all the routers. And nowwhat's left to do is again, to submit theform, so we prevented default. And now I wouldwant to check if, and in this case, I'm checkingfor three things. So first name, and person,then dot email. And then the last property,of course, was age. So I only would want tosubmit this form, if all three of themare more than just an empty string. And thenlet's do the same thing where we are creatinga new person. Correct. So we go here withconst, then new person. And then as far asthe value out, we want to copy the personvalue from the state with this one, sincethis is what we're sending up as far as theinput. And now I also would want to add thatID, someone roll with ID is equal to a newdate.Get time, good time invoked. And then we haveto string invoked as well. And lastly, let'sjust add person to a set people. And thenlet's set up person back to an empty string.So we go with set people. That is my array,of course. And like I said previously, weuse the function and in this case, I'm justgoing to pass in new array, where I'll copythe values from the state. And then I'll addthat new version. So we're just practicingin the previous example, where we used a function,we can also pass directly here to value. Andthen like I said, I also want to set personback to empty values. So we pass in the object,we say first name is equal to an empty string.Then email is empty string, and then the ageis empty string. Now, watch this.going out on a bigger screen, where we gowith Susan, then we're looking for susan@gmail.com.And on the edge will be 25. And the momentwe add the person veterus, there is our Susan.Now, if you want, of course, you can add alsoin the JSX. That particular age, you've thatwhat you're shooting for, of course, we'regoing to go here with age. And then in thefirst name, instead of the first name, we'regoing to go with paragraph.Or let's just say age, like so. Let's tryit out one more time with anna@gmail.com.She was going to be 26. And of course, themoment we add the item that is displayed inour list. So that essentially is how we canset up multiple values with the same handlechange function. Now, again, are you goingto use that all the time? No, there's goingto be some use cases where it's just goingto be much faster and easier. Instead of settingup all these multiple servers, separate functionsthat update each and every time you type inthe input. In this case, we have the samefunction. So even if I would have 20 inputs,if I want to change something around, I justneed to do that in one place. amazing work,we're done with forms and take a breather,we will cover use ref. Remember, when we talkabout forms presented, we have controlledinputs. But we also have the option of usingon controlled inputs. And we do that usingthe use ref.So even though there are multiple things thatwe can do with user F, most popular one istargeting the DOM element. And essentiallyin turn, that allows us to set up uncontrolledinputs, similar to how we would have beena JavaScript, not the father, we're lookingfor years user folder. And then of course,we have a setup. And then we have the basics.In the app JS course I imported a file userof basics, and I'm just rendering the setup.If we navigate to use ref basics, we can seethat I have three comments. And essentially,user ref works a lot like us state corridorsome differences. So as far as similarities,it also preserves the value in between therenders, just like you said, however, thedifference is that online use state user ofhook does not does not trigger re render.Like I just mentioned, one of the most popularuse cases is targeting the DOM element, justlike all the other hooks, we import as a namedimport or we use react and then dot and thenwhatever the hook name. Now I'll start withmy return because I simply would want to createa form. So I'm going to go here we form elementwill add right away a class class name willbe form, just we have somewhat good lookingform. And then inside of the form, there'sgoing to be a div with an input text. Andeventually we'll set up our ref. And thenalso our want to have my Submit button. Solet's go with button type. And by the waytype needs to be placed here, type. And thenwe're looking for the button. And we'll justtype here, a met button. And we should havea form with a submit button. No surprise there.Now let's take a look at the handle Submit.Again, we have the form we can either placeit where we have the button or where we havethe form. Again just to spice things up. We'regonna go with on Submit. And then of coursewe'll have a handler show handle handlemet. All right, awesome. Let's try to submitour form const.Met function I would want to have access tothe event ardra show in the primer I typeII Amman first I would want to prevent preventthe default. And I'm second I'll set up myuse ref. Now the white use RF orcs, we wouldneed to come up with a name for markers. I'mgoing to call this refpainter and that is equal to a huge arrayF and now we need to pass in that ininitial value shall go with user F. And bydefault, I'll set it equal to a no. Okay.Now next thing, we need to use this value,in my case, a ref container, and then setit equal to a ref attribute. So in this case,I have the input, and I have the button. Sowhat I could do is add this ref attribute,and I need to set it equal to my ref container.And once we have invoked use ref, assign itto a container, bypassing some kind of initialvalue, and then use the attribute in our inputand set it equal to the name of that we chose.Now, of course, let's console log just sowe can see what what is actually a rough container.So rough container was not as my name. Andwe'll notice something interesting where itis a object.It is a object with a property of current.So now what happens when we submit the formwater, you're going to see,since we added this ref attribute, and setit equal to a ref container, when we're submittingthe current dot value, will hold the valueof our input. So to showcase that, we're goingto go console log here, and then go ref container.And then dot current show I'm looking fora current property. And now this, the currentproperty is now our input show, what I coulddo is just grab the value like we did before,okay. However, in this case, of course, we'renot using EDA target, we're using ref containership,whatever is the name, the current property,which initially is no. And then once we submitthe form, it will have the value. So if I'lltype something here, and by the way, I probablyneed to save it first. So if I type somethingin my input, and once I click, I shouldn'thave some kind of value in the console. ButI don't, the reason why I don't have it isbecause this should be submit, my apologies,it shouldn't be button, it should be Submit.And once we change this around, Now, of course,once we type something in input, and oncewe click, check it out, now we have the value.So this is going to be different queries,where we're not setting up a controlled input.So notice, in this case, we don't have thestate value that reflects the value that isgoing to be in the input. And we don't callon change each and every time we type somethingin the input. Instead, we use this ref, souse the ref. And then we have this ref attribute.In the current property, we're going to havea value. Now of course, you can add this earthto any HTML element, you're not limited tojust the input. And in order to access it,you have to go with rough container on theground. For example, if right next to theform, I pass in a div with a Hello, world,e4, set up ref, I'll create a new container.So let's call this div container, copy andpaste. I'll call this div container. I'llstill set it equal to null. By default, ifI go here with dev container now, once weconsole log, when we're submitting, we shouldsee that there have container current shouldpoint to that def. Sounds tried to submiton top something murders. Now notice the devcontainer current is pointing to my Dev. Soif you would want to do something specificwith this particular DOM node, you can usethe use ref book. Again, the general idea,it preserves the value between the renders,but it doesn't trigger a rerender. And thenit's mostly used to target DOM nodes. NowOne really cool thing that we can do, oncewe have the general understanding of use refhook is to focus our input. The moment ourapp renders, sure, the moment we see the formwill right away, place a input. Now sinceuse ref doesn't trigger a rerender, I cansimply call user fact I can pass in my callbackfunction, and I don't need to worry aboutsetting up this dependency array. I don'tI can just call it here.Because it won't trigger the rerender. Sofor example, again, I go with console log,and then I'm going to be looking for ref container,and then dot current. And we're going to gowith a ref container, van, current. And we'regoing to call the focus method on it. So whatyou're saying, the moment we render, we'regoing to get our input tax, and right awayhave the focus. So once we refresh, notice,the focus is there. And then I can clearlysee that in console log, that the ref containercurrent is pointing to that input. That'swhy I'm able to grab that value when we submitthe form, because again, we just call thatdot value property. But what we're doing eachand every time we render the application will,we're adding the focus on the current one,okay, and we simply couldn't do that withoutany kind of dependency list. Because the ref,the use ref hook won't trigger the rerender.So those are the basics of use erfolg. Andprobably the most likely use case we'll betargeting DOM nodes, or elements. All right,um, next we have use a reducer.Now use reducer hook is used whenever we havea more complicated setup, as far as the state.So you can definitely use it with simple examples.But honestly, if you have like a to do listor something like that, I think using justregular use state is good enough. However,as your app gets more complicated, it definitelyis a good practice to use a juicer, becauseessentially, it will add more structure toyour state. So you won't be able to add justwilly nilly however you want, and change thestate. Here, we'll have to go through certainsteps. And that is very, very useful whenyou work in a team. Again, if you have a simpleto do, I don't see a big use case for that.However, as your app gets complicated, thenof course, I definitely would suggest usinguse redress, because it will just add morestructure to the initial setup that you havein the state. Now, before we go any further,let me just mention, I purposely picked thisexample to be somewhat simple, and tutorial.And then once you're done with the tutorial,I would highly highly, highly suggest goingright away to the project and then do theuse reducer project. Because that projectwill be a bit more complicated. And of course,a better use case for a reducer. And beforewe start working in our setup, let me justshowcase what we're going to build. So I'dwant you to import from tutorial, versionsix, the user juicer, and then the final one.And notice how we don't need to go for specificfile. And I'll talk about it in a second.But for now, you'll just looking for thatcomponent that is coming from the final. Andonce you render, you'll notice that again,we have the form, we have some kind of input,I can go here with item, I can add it, notonly I can add the item, but I also have havethis model. And notice how the applicationgets a bit more complex. And that's a gooduse case for using users. And if I try toadd the item that doesn't exist, then I justhave please enter value. And we'll start simplyby building this using the traditional setupwhere we had two values in a state of mindwe will refactor it to use reducer. Now userjuicer relies heavily on Redux. So if you'refamiliar with Redux, awesome, if you're notthen once you understand use reducer, it isgoing to be very easy to pick up Redux becausea lot of the lingo, and the functionalityis exactly the same. So first, let's dealwith this specific path where we don't haveany filename. And we're going to do that bygoing to a sharp here. And instead of final,we're looking for a setup. So I'm lookingfor to set up of course I'll change my componentname as well. And once I save, I should seethe use reducer when we navigate to the sixwe're looking for setupNotice something interesting where I havetwo files in there, I have in luxurious andthe model. So here's what's happening. Inthis particular setup, more we can do is useindex j s in the folder. And then once weimport, we don't need to go with specificfile anymore, because index j s in every folder,unless you change the setup manually, willbe the main entry. Meaning if I, for example,go with import from the folder, and if I havetheir index j s, it will right away importthat index js. And you'll see that in a lotof people's setup, where we have a bunch offolders, and then each and every folder hasthis index. And that index is that main entryin that folder thrown here, I can do whateverI want inside of that folder, but index JSwill be that main entry point. So everythingat the end of the day will be either importedhere, or the logic will be sitting there.So I can have as many components as I wouldwant in the same folder, but all of them insome way, or shape or form will meet in thatindex js. And like I said, we'll just startwith a very basic setup, where we'll stillhave the form, we will still have the simplestate value, and all that. Also, we'll havea simple toggle as far as the model. And thenslowly, but surely, we will refactor it touse reducer. Now, let me close some of thefolders over here.Notice we have the modal component monitorsthe component that's sitting right next toour index j. s. Great, beautiful index js,I would also want to import data, import data.And that is of course, the name the importswe go from. And then again, we go few levelsup, we're looking for the data because firstwe'll just try to do that, using the regularsetup. As far as the state values are concerned,I'll close the sidebar, we're going to gohere with comms on people. I'm not upset peoplethat is equal to our your state. And thenwe pass in our data. Okay, awesome. And also,I want to toggle that model. Now if you checkout the model, there's nothing there, there'sjust a div, that I am model, but eventually,it is going to be there. And as far as mystate value, I think I'll say show, model,and then set show model show model. By default,I'll say that I'll hide the model. So it willbe hidden by default. And now of course, Iwould want to come up with my return. So let'sgo again with our fragment here. And as faras the return, we'll start by just checkingthe model. What is the show model scenario.So if it is true, then I would want to showcasewe already know how we can do that, of course,we have our model component correct. So Igo to model, and I go here with a modal component.So if the show model will be true, or someIf not, then we're going to hide that. Nowwe're going to go with form. We'll go withform. And I think I'm going to go with onsubmit, on Submit. And as you can see, I'mkind of keeping up the pace here because wehave already covered this before. We'll havea handle on met. And then of course, we needto have a dev and an input. It's going tobe a text. Now as far as the value,well, we'll have to come up with a new StateRoute. Correct. So let's just go with text,I guess I can call it that way. I think itis going to be good enough or not. Let's justgo with name. So name, and then set name isequal to reuse state. A manager is going tobe an empty value for now. Variable Type namehere, and then on change over will invokeagain our inline function. And then once weinvoke it, we would want to go with set name,short name, and then we pass in whatever we'regetting back from our input. So event, targetand event dot value, not the moment it completes.Well, we have no access to event, becausehe is not defined. There is now here is thefun, and also the handle summit. So let'sjust go with const and then handle.Sir met, that is my function. Now I wouldwant to prevent a default, of course. So I'mgoing to go here with E and then rent, default,let's invoke it, let's save. Yep, we sharedsomething there, then let's add a little bitof styling as well. So let's say here, there'sgoing to be a class name, form, once Also,our button. So right next to Dev, we're goingto go with button type is going to be met.And let's just right here, add person or addor whatever you want. And there it is. Now,of course we have our form. If I would wantto add that item to the people, well, I wouldneed to do that when I'm submitting the form.Correct. So first, we prevent the default.And then now we want to check if the nameis more than just a empty string. If it isa empty string, then of course, I would wantto display the more now how I can displaythe model. Well, I can go here with else.And I can say show model. And I'll set itequal to true. Correct, because now our oneof the split, also, you know, the value isempty. Now I'm not going to pass in any kindof values, we'll deal with that once we setup use reducer. So for now, we'll just displaythat show model. Now, if the name is of course,there, if we have typed something, then wecan say show modal. And again, we'll set itequal to true. So that is also going to beuse case where we show the model. And thenI would want to add that item to my list tomore people. So let's write here.We go with certain people, than all passingthat new era where we spread out the old valuesfirst. And then we pass in what we pass inthe new person, now new person is going tobe an object. So let's say here ID property.We'll go with new date, again, a little bitof cheating, get time involved. And lastlyto string invoke. And now let's set up a name.Let's say that the name will be equal to ourstate value. And of course, we show the modelwe added to the people. And then lastly, let'suse set, set name is equal to an empty string.And now of course, let's iterate over herewe show the list show right after the form.We're going to go we people, people van map.And then of course, I'm looking for each andevery person, like show.Once I access it on one return, the diffneeds to have a ID of course. So he and thenperson have that ID,we're going to go with heading forlet's just display person, dot name. Now eventuallywe'll add the button, but not right now. Solet's type some gibberish. And once we add,of course, show modal is not a function, becausewell, it's not a show model. It is set showmodel, set show model, as well as here, setshow model. Again, straight out some gibberish,I can see the item over here. And I also cansee the model. And once I refresh, it willalso happen if I tried to submit the emptyrealm. So that would be a scenario if we usethese state values. And like I said, if youhave a small application, there's nothingwrong with that. But as your app gets bigger,bigger, bigger, bigger, you'd want to havesome kind of structure, because notice herehow we have no problems, changing state valueshow we would like. But that's not usuallya best use case. If you have a bigger app.And if you work as a team, you'd want to havesome kind of guardrails, where you're onlyupdating the state in a certain way. So thatway everyone is on the same page. This isexactly what we're going to do. Starting fromthe next video. Our basic setup worked somewhat.Okay. Now let's refactor this sucker to usearray juicerAll start by removing this people show now.So we won't need these guys, because we'llset up a new one. And we're going to go hereagain with our array destructuring. And we'llset up a state, again, versus just a name.Or you can call this burrito if you want,but I'm gonna go with state. And then we havea second thing, a function, a specific functionby the name of dispatch. Again, you can callthis whatever you'd want. But a common practiceis using this dispatch. Why? Well, becausewhen we invoke use reducer, again, we're gettingtwo things back, we're getting the state value.And then we're getting the dispatch function.So similarly, how we have with us state. Nowthe difference right now is that in the usereducer, the first thing we pass in is thereducer function. And the difference betweenthe US state and use reducer that each andevery time, you want to do something withthat whole state, you always, always, alwaysmass use this punch. And it's going to gothrough their juicer. And you can think ofreducer function as something that takes theold state and takes in something called theaction, which we're going to cover a littlebit later, and then spits back that new state.So you always need to have that reducer function.And the kicker here is that eventually we'llmove this into a separate file, just so wehave less code in our main component. So reducerfunction, it is just a simple function. Sowe set up a reducer. And eventually it's goingto look for two things. So state, that isgoing to be the state right before the update,and then the action. And you can think ofactions of what are we trying to do. Now fornow, we'll just leave it blank, we'll getthere in no time. So user juicer is lookingforward, you sir. So the function of thatwill manipulate the state, it will happenonce we call dispatch or once we dispatchthe action, I guess that is more proper wayof saying that. And then the second one isthat initial state, now we can serve thisup as for the separate variable you want,or you can type it directly in here, I thinkI'm going to go here, I'm going to say const,and then default state, and that is goingto be my object. Now, any object what I wouldwant, well, we had a people, correct. So thatwas my people array, and for time being isjust going to be blank array, then we hadshow model, right? So as you're on, you'regoing to go is model open, let's maybe tryit out that way, is modal, open, and by defaultis going to be false. So it's not going tobe open. And then last one is going to bemodal content, whatever text we would wantto place on here, so have a modal content.And on here, I'll just start with hello world,eventually, of course, it is going to be anempty string. And now where we have this usereducer, we pass it that default state again,you could have easily set this up as an objectright here as well. Now, once we have that,of course, our app will break for multiplereasons. For example, there is no show modelanymore. So first, what I would want you todo is just save, and then slowly, but surely,we'll start dealing with these errors. Andfirst, I want to remove all these three functions,if name is there, as well as this one, becausewe won't need them anymore. And where we haveshow model, well, now we have a state. Correctthat is the object. So now what I would wantto do,of course, is change it around and say stateand then years model open, because that isthe property that is responsible for showingthe model. And then where we have the peopleagain, we need to go state and run peoplenow of course, it is going to be an emptyarray. So don't be upset if there's nothingon the screen. And of course, there's nothingthere show we are in good shape. And beforewe go any further, let me just pass in twothings into the model or not. Let's startwith one and then eventually there's goingto be another one once we set up the function.So we're gonna model out want to set up amodal content, and I'll pass in state andthen model content again, property that iscoming from my state value. And then beforewe go any further I also want to show themodelMeaning I would want to add some changes tothe model, where it's going to be destructuring,two things, model content and eventually closemodel function, which we don't have at themoment. And as far as the return, let's adda class name and add model. And inside thisparagraph, let's just go with a modal content,show modal, modal content, not save. And now,of course, if you want to test out this manually,the only thing you need to do is just changethese values. So we have the data. Right?Now, I'm not going to set up adding data.Because what I want, we will do through thereducer properly, how if you want to see whetheryou can access these routers in a state, simplyset people equal to the data. Now, of course,you have the data, okay, just to showcasethat it is still just an object, we're stillaccessing that in a state that has an objectand it has properties. So if I want to showthe model, and of course, I'll say that itis true, because I have stayed model is open.So if it is true than showing the model andmodel continent will be hello world, Americais now of course, I have the HelloWorld Yes,of course, we will do this dynamically startingfrom next video. But for now just understandthat we have a state, which is an object inthe object, we have these multiple properties.And the whole idea is why we're using thatuser juicer, because I only want to updatethese things. Once I call dispatch. And onceI pass in proper action, I'll handle all ofthem in one place, it's only going to happenin one place in that reducer, and essentiallywill just be affecting this state. So nowlet me go back to property for values, wherewe have empty string, where it is hidden bydefault, and the people will be an empty arrayresave it. And now we can start dealing withour reducer. Alright, and once we have refactorto basic use reducer setup. Now let's seehow the dispatch works. How the reducer works,what is a action, in order to affect anythingin our state, we would need to dispatch andI'm going to do that if the name is there,meaning if it is true, if it's not an emptystring, so I'm going to show you I'll haveto add at least one letter, and then I'llclick on Add. And in here, we'll call dispatch.So that is our function. And we always, alwaysneed to pass in the object with a propertyby the name of type. So that is going to beour action. So action is going to be our object.And in an object, you must have the propertyby the name of type. And when you need toset it equal to something, a common practiceis using uppercase, but you don't have to.So in my case, I'll just call this testing.And then once you dispatch, once you dispatchyour action, that's what it's called, thenin reducer, you need to handle it. And likeI said, reducer is taking as parameter twothings state right before that update. Andthen what action you will want to do for nowcase, that is, of course testing. Now, onething you need to keep in mind that producer,you always always, always want to return somekind of state, because again, this is goingto be that use case, where if you don't return,well, none of the functionality that you havelater is going to make sense. So let me justsimply start by console log, and you'll seehow there's going to be a big fat error ifwe don't return the state. So we get the stateright before the update. And then I also wantto console log the action. But if I don'treturn the state from this function, thenthis functionality won't make sense. Becausenow of course it is going to be on the phone.So once I save and once I had the letter overhere, check it out. Now I have cannot readproperly his model open of undefined. Why?Well, because I had the initial state, thedefault one that is right here. But sinceI dispatch the action, than the action wentto reducer, in reducer, I did not return anew state. My whole functionality went bananas.Because there's no more is more open. That'swhy you always always need to return someKind of state, if you want your functionalityto work. So once I say run, once we have,for example, letter F, once we click Checkit out, what do we see in the console. Sonow, of course, I see my old state, correct.And I also see this object with a type ofperson. So that is the state right beforethe update, where we have people array, andthen his model open, and then model content.So now let's see how we can work with thesevalues. So we have the state, and we alsohave the action. So why don't we go with ifstatement, the condition and check whetherwe are dispatching the action with a typeof testing? Let's do it, let's say ifwe go with action, then that type, remember,that was the property name. And if that isequal to a testing, then we would want todo something. So essentially, what you do,you set up your dispatch functions with youraction object where you set up type propertywith a value. And then in reducer, you catchthem, you say, all right, if I dispatch testing,this is what I would want to do. So noticehow we are not directly affecting state. It'snot like we call set name, or set people orset model, we're not doing that. We only controlthe state when we dispatch the action. Andthen in reducer, this is where we deal withour state. And essentially, it is more structured.So even though it's a little bit more boilerplate,it is less prone to errors, or some kind ofsilly bugs. So let's deal with RF. So if theaction type is testing, well, what I wouldwant to do, well, I would want to return correct,I always need to return a state. So in thiscase, this is default one now. But now, ifthe type is correct, if it is testing, thenI would want to return that new state. Andsince it is an object, again, we need to keepin mind that if I just add some kind of propertyhere, then still my functionality will gobananas. Why? Well, because I need to havepeople, I need to have his model. And I alsoneed to have moral content was the way ofgetting all those values, well, we are returningthe object correct. And then we go with dotdot dot. And then I would want to copy allthe values from the state right before theupdate. Correct. And now we add a comma. Andthen we just decide what vouchers you wouldwant to change. And for now, we'll just doit manually, where I'll say, you know what,people will be equal to my data, right?Then his model open is going to be actuallytrue. So say the model. And also as far asthe model content, model condom, well, we'llset it equal to itemadded work. So let's test it out. Again, thiswill only happen when we click on a button.Correct. So let me add something here. Andthere it is. Now I have my list, john, Peter,Susan Anna, and also have item added. So thenext time I will do something as far as dispatch,I will already have this particular statevalue. And you can clearly see that if yourconsole log. So if we go here with a state,the first time we'll click, notice, eightis going to be empty. But then if we justclick one more time, then of course, we alreadyhave the last state value. That's why it'sso important to always return state. Now,as far as this default, one, you can returna state if you want. But another way, howwe can do that is throw the error, if theaction that you passed in, does not matchany of the types that you're checking for.For example, here, I could go with thrownewand also no matching action type sure whereI would use that, for example, if I have herethe house, and then I dispatch. And I don'tknow by mistake, I'm going to go type andrandom around them. So once I save once Iclick on the button, if my value is not there,if it is empty, of course, I'm going to havea big fat error. We're just gonna say no matchingerror type. So what is happening here? I couldtechnically return a state. Yeah, that isan option. But this just gives me a clue thatI'mdispatching something that I'm not catchingin reducer, because in the reducer at themoment, notice, I have my Action. Action,of course, has the type. And I'm just checkingfor testing. Now, if I would be checking fora random one that I pass, then, of course,there is a different scenario, then everythingwould work fine. But this is a good defaultscenario where I have bunch of these ifs forall the action types that we're about to setup. And then if none of them match, then wethrow the error. Again, the alternative wouldbe just returning a state. And then if wereturn to state, you'll notice that nothingwill happen, because of course, we're notchecking for that random. But also, the problemmight be that you won't notice that, hey,there's something wrong, I'm not checkingfor this action. That's why the alternativewould be throwing the show with me deleteit. And now let's set up to something useful.Now, what is that useful? Well, instead oftesting, I would want to say Add Item, becauseessentially, this is exactly what I wouldwant to do. So I'll say dispatch, and thentype. And now I'm going to go with add onunderscore item. Again, this is just a namingconvention, where everything is uppercase.And then in between the words, we just usethe underscore, that is not a role. And ofcourse, in the reducer, I would also wantto check that. So I'm going to go back toadd, and then underscore item. Now, everythingis awesome. But of course, we understand thatwe won't return just a data. So this is whereI would want to get that value that is comingfrom the input, and then add to my empty array.The people right, now let's just leave itblank. But we're heaters.And we need to decide what how we can passthat data. And the way we pass that data isby adding more properties in here in the object.Now, of course, what would help is if I wouldactually create that item once on trying tosubmit the form. So let's do it this way,I'm going to go with const. And then new itemis equal. Again, we need to have that ID.So I'll come up with that property new date.And then let's go with get time. And lastly,we'll set it equal to a string. Now grab thatname for whatever is in my state value. Andnow once I dispatch, remember, I just saidwe can add more properties. And a common conventionis calling this payload. But again, there'sno rule. And the way you would do that youwould add a comma since it is a new property,and payload is equal to my new item. Sure.Now, in the reducer, not only I'm checkingfor the type, which of course I'm doing, sinceI would want to set up some kind of return.But I also would want to grab that payload.So right above my return in the Add Item condition,odd want to say new items. And that is goingto be equal to data.so. Let's copy all thevalues that we have from default state orthe state one before the update, which ofcourse essentially is going to be empty array.But as we keep on adding items, there's goingto be more and more items would go with stateitems. So whatever array items we have, andthen I would want to add action and payloadto the new items. So now where we have thepeople, I'm going to go with new items. Nowof course, I would want to open up the model.So I will leave his model true. And of course,I'll also leave item added. So once we savewe have a big fat error because I did notadd space in between New. And so now let'stry it out our goal with random man, onceI click on Add, then I have another issueset items is not iterable. And of course thereason for that is because it is not items.Sorry, it is people, my apologies. So noweverything should work. And you know, whilewe're still on the subject, well just callthis new people. The reason for that becausein my original setup, I went with items. Andnow as I'm recording, I just changed my mind.That's why we got this bug. Let's just sayrandom, odd, and there is now we have itemadded, shall we display our model. Beautiful.Also, we showcase that here in our list. Nowwhat else we would want to doI guess I would want to clean out my values.Once I submit, correct, that only makes sense.So let's do it this way, where we have thename, right after that, I'm going to go withset name, and we'll set it back to an emptystring. And knowledge dispatch another action,or this one will be no value action. So ifI tried to submit an item without any values,then of course, I would want to showcase thatin my model, we'll just change the actionaround where it's not going to be five random,will say no, on the score, and then value.Now when it comes to our no value action,but we'll just go with action type is equalto now underscore value. So if that is thecase, what I would want to do, I simply wantto return different modal content, correct.And I also would want to showcase the model.But remember, I still want to return my peopleare still want to show my items correct. Sothat's why again, we go with return data dotstate. So we copy everything coming from theprevious state state before the update. Andthen we say show model is true. And also,of course, I want to add different model content.So say model content, and that will be equalto a place and their value. Let's save it.And the problem here is that course smartenough, I added in my previous condition,and you know what, also the name is a littlebit different. It is is modal, open, likeshow analysis route, we're out tried to submitand devalue. And now of course, we dispatchthe null value. And then in action, we justcheck, again, the whole point where we copythis virus, because essentially, we just wantto change two properties on that state ismore open and more complex. And I want toleave the people, the list of people. In fact,maybe there's going to be cases, for example,with a closing model, that will only affectone property. That's why it is very important,once we return state, always to copy the valuesthe previous values from the state, and thenjust decide which property value we wouldwant to change. And in our previous example,of course, we changed all three of them. Ifyou want to dispatch a action, and then changeonly one thing, just make sure that you copyall the hours. If you would want to burn throughthings, again, the same thing, make sure thatyou complete the hours. If you want to changeall of them. Again, it is a good practiceto always make sure that you're keeping trackof your old state priors. And I think we'rein good shape. So now we can add more actionsto our arsenal. Nice work. And let's add twomore actions, one for removing the item. Andthen also the clothes model one. So I removedthat console log, I don't think we need itanymore. I mean, just keep on scrolling. Sowe add one for no value. And I guess let'sstart by passing in the closure modal function.And the way we'll set this up, notice we havehandle submit,let's also create a function that will beresponsible for closing the model. So const,close modal, not going to look for any arguments.However, within the function body, we willdispatch an action that we haven't set upin our juicer yet. And the type will be closeunderscore, mortal. And the only thing thatI would want to do as far as this functionalityis again to return all the state values, andthen change his model to false. We're gonnago if action and non type is equal to close,none underscore Morrow, then return again,copy all the previous state values state.And let's go with his model open. And let'sset it equal to a false. Now the gotcha hereis that I would want to call it in model onour we want to call it after three seconds.So what I would want is to pass this closemodel as a prop down to a model. So let'sgo with closed model. is equal to a closemodel work show. And then once we do thatin the model, of course, we can access it.So I'm gonna say here, close, close model.And in the model out want to set up a user,where like I just said, I would want to closeit after three seconds. So let's go here withuse effect. And in our callback function,we'll just set up a timeout. And let's saywe have a callback function. And I would wantto go with close modal here. And I would wantto call it after three seconds. And that,of course, is 3000 milliseconds. So once wetype something, first of all, that item shouldbe added, we added the item. But then afterthree seconds, notice how we dispatch withdispatch this actual close model, I'm notof course model is. And similarly, we couldadd here a button to our items, and then removethat item, if we click on that button. Andfor that, of course, again, we'll have todispatch an action. And of course, we willhave to handle that action in the reducer.Right below the heading for let's go withbutton. I'll set up on click right away. Andhere, let's pass in our callback function.And our want to dispatch an action. Now typewill be remove item. So type, and then wego with remove underscore item. And then Iwould want to be payload again. Why? Well,because I need to be specific, which itemI would want to remove on orders. In thiscase, we're not passing that ID. Otherwise,how do I know which item I would need to remove.So we're gonna go with payload payload inthis case, is going to be equal to that person,and then.id. So once we save, of course, weshould be able to see. And there it is. Andby the way, I should have added the item class,first of all, is going to look a little bitbetter. And also, I would want to add somekind of text here. So let's say of course,let me try, I'm saying item. And then oncewe have various, our item. Now that is ourmodel, okay, Ireson after three seconds. Andnow we want to handle that remove item. Soif I'll click right now, what do you thinkis gonna happen? Well, we're not handlingthat, right. So we should have this error.And this is awesome. Because at least tellsus Hey, listen, you are dispatching an actionthat you're not handling in the reducer. SoI go with if action men that type is equalto or more item, or more, move around. Sowithin my condition, I'm going to come upwith new variable, new people, that is equalto state peopleout want to use filter, I'm going to accesseach and every item as far as the parameterof person. And then I'll say person ID, there'snot much to a action, and then pay well. Sothat is the case, then I wouldn't want toreturn this particular item. And now of course,I just need to return the state. So I'll sayhere return a new object. So we'll go withdot, dot, and then state where we have thepeople that is going to be equal to a newpeople. All right, we save it. And what shouldhappen once we click the button, the modelshows up for three seconds, and it says, Hey,please enter the value. Now, if we successfullyadd that item, example will say a random item.And once we added it displays random item,and of course, we can remove it as well. Sothat's how we can set up our state using userjuicer where notice how it adds way more structure.And last thing that I would want to showcaseis that normally, since reducers, are goingto have a lot of functionality, you do movethem to a separate file. So in a setup, Iwant you to create a reducer j s, then takeeverything as far as the function reducer,cut it out or show and in the reducer, copyand paste. Now of course we would want toexport now if you want to export this as default,you can definitely do markers I will exportthis as a named export. And here we go withimport, Van reduce. And then of course weare importing this from the reducer Now ourfunctionality should still work. But I justneed to make sure it is reducer. And now,of course, I can keep on working with my form,and everything will work. And now notice howmuch cleaner, more structured is our application,where we have the reducer, that just dealswith our data. And each and every time wewant to do something, we just dispatch thisaction. Again, like I've said this before,of course, it has way bigger use case, asyour application gets bigger, or you get morepeople on a team. And if you'll go right nowto the project and start working on the usereducer project, you'll see use reducer ina more complex setup. And of course, likeI keep on saying, it is going to be a betteruse case for use reducer hook. amazing job.And once we have covered use reducer, andhopefully worked on practice project as well.Now I want to talk about the prop drilling.Now, let me just emphasize something rightaway, where prop drilling is not an officialterm. However, it is somewhat of the sideeffect. When you have multiple componentson line, you're out the big component tree.And then you need to start passing some statefrom the top component all the way to thebottom of your component tree. And the reasonwhy we will cover prop drilling first is becausein a next tutorial chapter in the use context,we'll see how use context fixes that. Andmore specifically, we'll take a look at thecontext API that is designed for the use contexthook is the new way how we can access thatcontext. So this is going to be somewhat ofa repetition, where we will share up a componentwhere basically we have less than than eachand every item in the list has a button, andwe would just want to remove that item. Soa little bit of repetition, just to see whatis prop drilling, and how it looks like. Andthen in the next chapter, we'll see how wecan fix that using the context API, as wellas use context.Alright, now, we're going to navigate to ourprop drilling folder, we have prop drillingdress, and of course, it is being the foldernumber seven, and then the setup file. Inthe app, only one input I guess I want tostart with that, where I'm going to go withimport. I'm looking for setup. And it is comingfrom the tutorial, Van prop drilling, of course,and then the setup. Now we would want to rendersure we're going to go here or hit a sharpand there. Now of course, it complains thatthere is some type of issue. So let's navigatethere, we have the prop drill, and everythingshould work. And of course, the reason whyit doesn't work, because I successfully messedit up by not pointing to a specific file.And now of course, we have the prop drilling.Now, once we're here, like I said, a littlebit of repetition, where essentially we'llcreate a list. And we will have the itemsin the list. Of course, each and every itemwill have that option of removing itself fromdoors. Now we do need to have a data here.So let's go with the import and data thatis coming from. And of course we need to gomultiple levels up. So I believe three, thereis our data. So once we have the data, nowI would want to set up a my main componentwhere I have the const I'll have a list valuehere. So people again, set people set peopleamount is equal to a year state. And thenwe'll pass in that data, we're sure to have,again, that basic array that we already coveredbefore. And now of course, what I would wantis to do some kind of return in my JSX. Sowe'll start by returning a section. So let'sgo with a section. And let's write headingthree, maybe, let's just say Prop, a drilling.And also I would want to have a list. So there'sgoing to be a list component that takes asa prop, the people. So we're going to lookfor people here. And that is going to be equal,of course, to my people state value. And what'smissing is my list correct? So we'll go withlist now I already know that I'm going tobe looking for People prompt. So that's whyI will destructure it right here without anyhesitation. And as far as the return, I wouldwant to iterate over that array, because wealready know that it is an array. And thenfor each and every item, I want to renderthe single person component that I haven'tcreated yet. So I'll just go with return,we'll close out our fragment. And like I said,we'll just go with people array, we'll usemap, each and every item is a person. Andwhat I would want to return is a single personcomponent that we're going to create in asecond. So columns, and single person is equal.And now in a single person, again, I knowthat person is an object, there's going tobe multiple properties. If you need to jogyour memory. This is our data. So we haveID a name. And what I would want in that singleperson is to target the ID, and name for now,eventually, there's going to be more data.But for now, we'll just Target ID and Namework show online as far as the return, let'sjust return a div with a class of item, classname. And item here, for the time being largestright, single item, so heading for one singleitem. Now, of course, what I want is whereI'm returning, I'm going to go with singleperson, and all right away get my ID, becauseremember, we still have the list. So we needto use the key Prop, we'll just say here,person, and then.id. So once we save, we shouldhave four single items on the screen. Nowwhy do we have world because my arrayhas four objects. Just so we all are on thesame page, we have our array, we set it equalto data, that's our initial value, then wehave the first return, where we have a headingthree with prop drilling, and then our listcomponent that takes a prop. And I named peopleand I set it equal to my state value of people.Then in here, I'm the structure right away,the people prop out of the props on returninga people map. So a new array, where I'm iteratingover people. And then for each and every itemin my array, I return a single person component.Since it is listed, I need to pass in thekey. And then in this component, of course,I'm accessing the ID mm, which I'm not usingat the moment. And as far as the return, I'mreturning a single item. So that is somethingthat we have already covered more than fewtimes when we talk about tutorials, as wellas the project. Now here comes the interestingpart. Well, what if I would want to set upa function that deletes that one single itemfrom the list? Okay, let's first set up thefunctionality. And then of course, we'll dowith rest on the use case. So we're goingto go with const, I'll call this a removeperson is equal to an ID, because this particularfunction will be looking for the ID, thenwe need to call set people that again, justso we can practice a little bit, all callthis in a function. I'll say my current statevalue is equal to people. And then let's justreturn people filter. And each and every itemwill be set up as a person. And I'll say,if the person ID does not match to whateverID I pass, then then of course, I'll returnit. If it does match, then I'll remove itfrom the person ID is not equal to an ID work.So let's save it. And we have the functionbeautiful. And now the interesting part startswhere now I need to get this function where?Well, I need to hear correct. So what arewe doing? first need to pass in the life,then we'll have to destructure it of course,then we'll need to pass into a single person.And then eventually, we'll also have to useit over here. So the big question is, howcan we get this function allthe way here, and this is that prop drillingwhere essentially, we have the component hereand you can make a good argument that thiscomponent last component does not, does notneed that remove person function. But there'sno other way for us to pass it down to a singleperson. I mean, I cannot simply say, all right,remove person, you'll be called here in asingle person, a single person needs to somehowhave access to that remote person. And thisis what the prop drilling is where the listcomponent will have to take the remote personand pass it down to a single person. So first,let's start by passing the Remove person asa prop down. That is something that you needto keep in mind, where when we talk aboutthe functions, we also can pass them as props,we're not limited to just state values. Soin this case, was to go with remove personis equal to A remove person. So now I'm passingin my function. Now in the list, like I said,I would need to destructuring I would needto say, all right, so get me this remove personfrom my props. And now I need to pass it intoa single person. Now, I also need to passin this ID and Name. And like already previouslycovered, we have multiple ways how we cando that. But my preference is using this spreadObject Notation, where I just go with curlybraces, and then dot, dot dot, and then whateveris the name of my primer, meaning list now,points that item in the list. And I'm justsaying, you know, add all the properties,meaning in this case, ID and Name on to theprops of the single person. And that's whyright away have access to the RDMA. And thenagain, we need to pass in that remove person.So go here with remove person. So now we'repassing it down. And of course, if I'm lookingfor ID and Name, I can also look for removeperson Prop, correct, because now we passit down. So we say remove person. And nowit's finally set up our logic, we're not goingto say heading, forcing the item, nurse aname here. So I'm going to be looking formy name prop. And also, we want to set upa button where I could set up a on clerk thatwill trigger that remote person. So buttonon click is equal to A in one function here.And we'll say remove person, I also want tograb that ID, each and every item, singleperson item will have that unique ID correct.And now of course, I would want to invokemy remove person, once I click on a buttonwith that specific ID. And then as far asthe value again, we are right. And again,idea of Prop drilling is following where listcomponent technically does not, does not needto have access to the Remove person. But wehave no other way to pass down our functioninto the single person, unless we actuallypass it through the list. That is somethingcalled prop drilling, because we need to understandthat there's definitely could be more components.So if we, for example, set up this functionall the way up in the prop drilling, whatif I'm gonna have, I don't know, two, threecomponents down the component tree. So fromthe single person, I would need to keep onpassing and passing and passing and passingall the way down to that one specific componentthat is looking for a remove person. routeis something that the context API, as wellas Redux. But Redux is definitely for morecomplex cases. I wouldn't suggest settingup Redux for this particular scenario. Butcontext API is beautiful for this type ofscenario, where essentially, we can avoidthis prop drilling.Okay, hopefully that is clear, understandingwaters prop drilling. And then in the nextchapter, we will take a look at how contextAPI helps us to fix it, where we won't haveto pass in return through the list or anyother components we would have into that onespecific component that is looking for thefunction that is all the way up in the componenttree. And once we have looked at prop drilling,once see how context API as well as use contexthook will help us to resolve that issue. Onfirst I would want start by pointing to adifferent folder on the file. Can we're lookingfor tutorial then I'm looking for use contextAs well as the setup and context A p II, oncewe render, we should see the prop drilling,and especially everything that we worked onin a previous video. And that is by design,because this is going to be the use case wherewe'll have to add a little bit of code, aswell as refactor or old one, in order to seehow context API as well as use context works.Now, what you'll notice here is the same exactfile. And I would want to start by addinga few things, I'll say, use context. So thatis the hook that we'll use eventually. Andalso, you know, I don't want the same name.So I will remove it. And I'll say, contextAPI. It's not a big deal. But just makes alittle bit of sense if we do that. And oncewe have the setup, ran, let's see. So we havethis remote person. And again, the whole dealwas that we were passing this remote personthrough the list through many other components.Of course, if we would have more components,down to that one component that is lookingfor that particular function. So how we canfix it? Well, first, we need to create thecontext. So I'm going to go above the contextAPI. And I need to come up with a name. Inthis case, I'll say person on non-complex.Now that is equal to A react, and then wesay dot, and now we're looking for the functionof create contacts. Now we can pass in somedefault one, but in my case, I won't do it.Now, the moment we do that, now we have accessto two components, the provider and the consumer.So let's say here, two components. One isgoing to be a provider. And then the secondone is the consumer. So with the arrival ofus context, we want to use the consumer previously,before the hook was introduced, we were usingthe consumer. However, now we don't have to,I'm just telling you that you will get essentially,two components back, once you set up thatcreate context. And the way you access thosecomponents, you are going to go with personcontext, and then dot and then provider, orthe consumer. So the thing is, provider worksas a distributor. So what you would want todo is, for example, this is your root component,correct. This is where the rest of the componentsare rendered. Because you're less than ninewithin less you have a single person. So you'dneed to find out a root component, and thenreturn of that root component you would wantto wrap in person context. And then the provider.Let me show you why is that important? Soinstead of section, I'm going to go here,we a person context. And then like I said,I'm looking for that provider. Now, why isthat important? Because for the provider,we have the value prop. And what's reallycool is that we can pass whatever would want.So we'll start very simply by passing in theHello. And what's even more cool. I can alsouse use context to access this value, whateverit is. And to showcase that. If I go to singleperson, I can simply say coms. And I knowthat there's going to be some kind of value.So I'll call this data. Right now. We'll refactorit a little bit later. But for now, let'sjust say that it is data. And now let's useour use context hook. And inside the use contexthook, we need to pass this context that wecreated. So please don't mix the two, we haveperson context provider that needs to wrapyour whole component tree, or later, in differentprojects, it will wrap our whole application.Okay, that is important. Please keep thatin mind. But when we talk about person context,we need to pass in that context into the usecontext. So don't mix and match don't saypersonal context, that provider here. Now,here, we're looking for the person context,but we would want to wrap our component treeor our whole application in the person contextdot provider. Now of course, I keep on allthe dimensional person context, whatever nameyou have, or here for the context, okay, inmy case, that his person context if you wouldhave bananas context, then you would go bananascontext, dot provider. And what's really coolthat if you log data You'll notice somethingreally, really interesting. Check it out inthe console. I have Hello, hello, hello. Andisn't that awesome? Because what that meansis that I have here, person, context provider,all the way down in my component tree. AndI can pass whatever values, regardless ofhow many levels deep. And I'll have accesswithout this prop drilling. So without passingit through the list. Now, you're probablysaying, okay, you just pass in a simple Hello.I mean, it's not a big deal. Yeah, but remember,we are using JSX. Correct. So why don't wepass in the object? Again, we have first curlybraces, which just means that we're goingback to JavaScript plan. And here I'm justsaying object. Again, this is not some secretJS x syntax, where we have double curliesand just simply means, yeah, I'm going backto JavaScript. And in here, I would want tohave an object. Now what do I really wantin that object? Well, I would want removeperson, correct. Here's what I can do, andsay remove person. And now, of course, I needto scroll down, I know that this is goingto be an object so I can right away destructureit. And I can say, remove person. And nowyou'll notice that our functionality stillworks. Now, of course, is going to be a big,fat, massive complain, because the name isexactly the same. So now what I would wantis to return or to remove all these instances,I don't need it over here. And I also don'tneed it over here. Correct.Lastly, I don't need it, where I'm settingup my list, so I can remove all of them. Now,of course, data is the same name, like I have,as far as the import. So now let me removeit amorous now, my functionality still works.But I was able to go around that list. Soif I would have, I don't know, two, threemore components that are inside the singleperson, I would be still able to do it. Sowe set this up in a room, and then whateveris set up inside here, all those componentswill have access to whatever we pass it downinto the value list, because of course itwas just from person. But keep in mind thatsince you're setting up the object, you cando pretty much anything. And similarly, youcan argue well, we can also maybe omit thepeople. And you're right, because I can passhere, the value of people. So the state value,and then I can access it where well in mylist, right. So now I don't need to pass itthrough the component as a prop, I can simplysay that I want to access it using the usecontext. Now in order to speed this up, I'mjust gonna copy and paste. And then noticewe have the remote person. Now in this case,I will showcase that it is an object. So letme call this main data, something like that.And if you'll console log, you'll see that,of course, main data will be my object. Nowit's gonna complain to people is not defined.Because of course, now you need to accessthat main data, and then dot people. Now,of course, everything works. Now the reasonwhy I set up a separate variable, becauseI want you to understand that in this case,we right away destructured, the Remove personfrom the object that we're getting back. Inthis case, I'm just showcasing that, of course,we're accessing the object and you don't haveto destructure you want to do it this way,you can do it this way. Whatever is the nameof the object, whatever you're getting back,and then whichever property or method youwill want to choose. So in my case, sinceI'm looking forward to people array that Ijust passed them. That's why I go with maindata, and then dot people. And then I'm iteratingover. Now, few things that I would want tomention. I personally don't find it that useful.If I haveonly one level, meaning with the list, I seeno problem of passing that people state valueas a prop, where I would introduce the context.That is definitely if I have to three or whateverlows the ban definitely mentioned. And also,a lot of times I stick to setting up it onetime globally. Don't worry, we'll cover thatin the projects where essentially we coverour whole application in that context provider.All right, and the way we do that we needto export this The person context the provider,as well as the main context, and we will needto wrap it in the index js. Again, that issomething that we'll take a look at. In theproject, I didn't see the point of jammingeverything here and authorial. But just keepin mind two things that I have no problemof passing this one level as a prop. Now,some people right away introduce the context.Again, that is their preference. It's justa lot of times I see students where once theylearn about the context, they say, Well, whywe're still doing the prop drilling. Now,in my opinion, the prop drilling starts whenwe start passing in two or three levels deep.Essentially, we start passing through thecomponents that don't need that info. Whenwe look at the people that we just passedinto the list list was using. Again, I haveno big issue over there. All right. Now, lastthing, I guess, what I would want to do isjust change this title, from say, contextAPI, and then forward slash use context. Sohopefully, it is clear how we can avoid passingunnecessary data through the components. Andnow we can move on to our next topic. of Nextwe have custom hooks. And essentially, customhooks allow us to reuse the functionality.So let me be clear, we're not talking aboutreusing HTML elements, we already can do thatwith components. We are talking about thefunctionality, whether that is fetching data,saving to local storage, and that sort ofthing. Also, before we begin, let me justmention that I purposely added only one exampleof custom hooks, since you can easily findother custom hooks examples. So the code communityhas created for three years by just typingcustom hooks in your favorite search engine.The point of this example is to make sureyou understand the purpose and the setup ofthe custom hooks. So after that, you can eithercreate your own custom hooks, or with easeuse someone else's custom hooks in your ownapps. Without Let's start by importing themodule. The module we're looking for is modulenumber nine, by the name of costs them. Again,we have final setup folder. And of course,in the address, we're going to be lookingfor the setup folder. So we go here with importonline the setup. We're looking in the tutorial,online more specifically, folder number ninecustom hooks, of course, the setup. Now inthis case, there is a file name, and we'relooking for fetch an example. So in this case,I'll remove the heading to learn of course,I'd want to showcase the setup show once weload, notice we have loading the doc, andthen we have the data. So what is happeningover here? Well, if we navigate to our file,the first example, we'll notice that we'llhave somewhat standard setup to fetch data.So we have used state we have used effect,we have loading state variable, we have setloading, of course, by default loading istrue when we have some kind of state variablethat is called product. Initially, it is anempty array, then we have the function thatfetches something. So in this case, this ispurchasing from my own API. And we use thisin my JavaScript course where we have theproduct. Now, if you want, you can of course,navigate to a bigger screen. And then copyand paste, it is an array ofproducts. And don't worry, we'll use it alittle bit later in tutorial. So you'll seewhat this is all about. But essentially, it'sjust a bunch of product with some price withsome name, and image and all that. So we'refetching that, I hit the URL course I getthe response, I rhombi. json, and then I setto state values, my offset product, and thenI have set loading to false. And of course,I'm running this with my user. And I havethe empty array means that it runs by default,the moment we run that, and that's it. Andthen of course, I'm just console logging theproduct. Now the point of this is not to tellyou that there's something wrong with thesetup. The point is to showcase what whatif I would want to reuse this functionality,because there's no way for me to reuse it.I mean, I can use this with this. particularURL. But if I have a different component thatalso needs to fetch something, again, I'mjust reinventing the wheel. Now, before wedo anything in our custom Hawk, let me justshowcase that. If your console log, of course,you'll be able to see the product. Again,the point is not to setup anything, as faras the component, we simply have loading.So we check whether the state value for theloading is true. If it is, then we showcaseloading dock. And then once we're done withloading, we just display the data. And whatyou should see in a console are these 12 products.So again, this is not our main concern. Ifwe have the products, that just means thatour fetch was successful, our point is somehowto come up with functionality that we canreuse. So if I have another component, thatalso would want to fetch data, I don't needto duplicate these lines of code. By the way,in this case, we don't have the error. Keepin mind, normally, you'd have the error aswell. And of course, once we set up our customhook, we can definitely add error, as well.And I already said that, we will be creatinga new custom hook. Sure, you can probablyalready guess that in the second file thatis in the folder called use fetch. This isexactly what we're going to do. Right navigatethere, I can see that I have react, I haveused state and I have used effect, not don'thonestly, we actually don't need the react,we can just use use state and use effect.And then I have this function, I have thisuse fetch function. So here's what we coulddo. First, I could save it. And then wherewe see the fetch example, show our previouscomponent, I can just cut out the lines startingwith loading all the way to where we havethe use effect. So let's just grab everything.So starting with line five, all the way toline 17. And just get it up, and then navigateto use fetch, and copy and paste. Okay, that'san awesome start. So we still have our loadingstate value, we still have the product. Andof course, we still have the function. Now,if you want, you can rename this somethingmore generic, for example, data. But sincewe will use them later, so we will use thiscustomer later. But we'll still be fetchingproducts, I won't do that. Just keep in mindthat you are not limited to calling this product.It's state valor. Sure, you can call it whateveryou'd want. So my whole idea is that I wouldstill want to perform this functionality.Correct. But I'm not doing this anymore. Inthe component show, I have my custom hook.And of course, in order for this to work,I would need to return something from thiscustomer. And what I would want to returnis an object. And then in the object, I'mgoing to place my two state vouchers, oneis going to be loading. And then the secondone is going to be product since I also wouldwant to make this reusable, I will set itup where I'll pass in the URL into the function.So I wait when I call this use fridge later,in different components in different topics,I can simply pass in the new URL. And I'llstill get back my loading, meaning whetherthat is true or false. And also the data thatI'm getting back. So I'm going to say herethat I'll be looking for one argument, theURL argument. And also, our would want tocall this user for when the URL changes. Soit's going to run one time when essentiallywe invoke the function. And also if we changethe argument for the US fridge custom pork,so I'll save this beautiful. And now of course,I need to navigate back to fetch example.And I need to import. And as you can see,in line number two, this is exactly what we'redoing. So we import the use fetch custom mock.And of course, it's coming from of the filethe use fetch. By the way, I just noticedthat my naming is somewhat off, should beused fetch. So of course in your example,it's already going to have a proper name butin markers, I would need to change this wherethis is used much and also my import shouldbe used Now once we're done, of course, nowI want to invoke my custom hook. And thisis the case where notice, we're returninga object over here. So normally when we useuse state, since we're returning an array,we did a array destruction. So this is goingto be the case where now of course, I wouldwant to destructure the object, because thatis what I'm getting back from my custom code.So here, I'm going to say cons, and then loading.So that is the first thing that I'm lookingfor. And the second one is the product. Correct?Man, I'm going to set this equal to use fresh,so not use effect not used. But my own customhook by the name of us, and lanforge. Andnow, of course, I need to pass in that URL.And, of course, we already have the URL inthe component correct, because we have thevariable by the name of your URL, and notpoint back to my own API. And now the coolthing about you'll notice that once we run,our functionality didn't break. So now wecan still check the loading animal can stillget the product for navigate there, checkit out. Once I refresh, I definitely can seethat I'm still fetching my products. However,now my functionality is tucked away in a separateplace. Now my functionality is tucked awayin a custom hook. So if I would want to reuseit, and which is exactly what we'll do inthe later topics, just so I can emphasizethe point of using the custom hook, everytime I would want to fetch data, instead ofusing use state and setting up the loading,setting up some kind of array, and that typeof thing. I will just call use fetch, passthe URL from the function, I'll get back toyou things, the loading, as well as the product.So like I said, if you'd want to introduceher as well, definitely be my guest. But inmy case, we're just going to stick with loadingand product. Now the one thing that I wouldwant to mention that since this is a customhook, it has to have this huge. So for example,if you'll just say, fetch, so you're exportingfetch, you'll see a big fat error, even ifI change the correct import, because we'renot allowed to use hooks inside the regularfunction. So either the function needs tobe a component, or it needs to be a customer.That is something you need to keep in mind.So that's why we need to make sure that whenwe're creating our own custom hooks, we needto use this huge show. In this case, I callthis use fetch. So now of course, I just needto make sure that my import is correct. SoI'll say here, use fetch. And of course, everythingis going to work. Nice work. Next, we haveprop types. And effectively prop types allowus to validate our props, so the props thatwe're passing into component.In order to get up and running with our example,course, we will need to import from foldernumber 10. In this case, again, we're lookingfor the setup. And as you can see here, Ihave the images, meaning the main entry. Sowe just need to look for the folder in theapp js. So we'll go with import and set upfrom online tutorial of course, then we'relooking for the folder number 10, the proptypes and then forward slash setup. And we'regood shape. So right after the heading toor not Miramar with. And we're right hereset up my clothes, my component, I shouldsee the product, the devs with a single productbacklog. So what's happening over here onwhat we're trying to achieve? Well, of course,we would need to navigate first to the indexjs. And what you'll notice is the imports.So we have import for the product component,which essentially is where we're going todo most of our work, then we have our usefetch custom hook. And if you didn't watchthe last example the last topic, then pleasedo so. Because I'm not going to go over whatis happening with use fetch with our customers.So we import from the folder from the finalfolder in this case. And then of course Ihave the URL which I pass into the use fetchThat's the nice thing about the custom hook.Because now, every time in a project, whenI want to fetch some later, I can simply usemy use fetch when passing the URL. And I knowthat I'll get back to you things, I'll getback to loading as well as the product. Now,in my case, notice how I don't need loading.So I'm not using him. So I'm just gettingthe product. Again, this is just to emphasizethe cool thing of custom hooks, were now ofcourse, I don't need to set up your state,I don't need to set up use effects. Everythinghas already done in the US fridge custom.Now, with that said, Of course, I'm grabbingthe product out of my return. And then I havethe section with a class name of productsthat I'm iterating over those products. Andthen for each and every product, I'm returninga product component. And then of course, weneed to pass in the key prop value is equalto a product.id. And I'll show you the APIin a second. And then we do the object spreadoperator, where I pass in all the propertiesfrom each and every product into the productcomponent. Beautiful. Now, I guess we'll startby checking out the API, and essentially areset up this API myself, just so we can havethe example, of course, which you can do isagain, navigate to a browser, and then justcopy and paste URL. And you'll see that again,we have some kind of array. And then eachand every item in the array is an object,which represents product. And there we havethe ID property, we have the name, we havesome kind of image. Of course, if you want,you can open this up. And then we also havethe price. So far, so good. Everything thatwe have covered already before. And we canprobably already imagine that in that productcomponent. Well, we'll have to access thoseproperties one by one correct. Only to havethe name, we'll need to have an image withthe URL more specifically, as well as theprice. So let's try it out. And let's seewhere prop types come in handy. So I'll openup the sidebar, and I'll check my product.Like I said, the moment the single thing thatI'm returning is just single product text.But of course, I would want to change thataround access those properties, because Iknow that I'm passing the amendment correct.In the next jarius, we do pass them in. Soit's not like they're missing. But there'sgoing to be a gotcha. I'll look for my image,I'll look for my name. And I'll look for myprice. Now, of course, in the return, wellout mana make it a bit more interesting, whereI'm going to return article with a class ofproduct, that still stays the same. But thenI'm going to look for heading four. And I'mgoing to say you know what, show me the name,get me whatever is the name of the product.And so far, so good. We have utopia so far,all the way to a surface.Alright, so that worked. We got our prop bythe name of name. And of course, we can split.However, what do you think is going to happenwhen we try to do the same thing with a price.So let me access here to price. And what youwill notice that all of them have some kindof price. But the last one, for some reason,displays nothing. And that some reason issimply because in this API, well, all theobjects have those properties, apart fromthe last one. And I did this on purpose. Becauseif you're ever worked with API's, you knowthat you're not always guaranteed some kindof value. Yeah, for the most part course,if you have an array of objects, the valuesfor the properties won't be there. But oncein a while with some images with some prices,some of the values might be missing. So herethe problem is that I'm relying on the factthat I will for sure have this price.But the question is, well, what if all thedata that I'm iterating over that property?So that value is not there? We're done. BecauseYeah, it's nice to say, Yeah, I would liketo get the price. But if the price is notthere, what are my next steps? And what'seven worse, is because we have the image,an image purposely, I set it up as an objectin the object. I'm looking for the URL. Nowwhat do we know about JavaScript? If I'lltry To access the URL property on the imagethat is undefined, in my last object, you'llsee that we will get a big factor. So whatI'm trying to show here is that even if 99out of your 100 items have all the properties,if one of them is going to be missing, sinceyou're checking for the property that is inthe object, you'll get a big fat error. Andof course, you'll have to deal with that,showcase that I'm going to go here with animage. And what I would like is, of course,set up my return, then I have my source. Andthen remember, we needed to go for image,and then dot URL. All right. And now of course,for the alternative will also go with a name.So once I save, like I said, there's goingto be a big fat or Now why is that error?Well, it's simply there, because I alreadymentioned few times that we are getting theproperty values on the object. And even thoughfor rest of the items, image property is rightthere. The last one doesn't have it. SinceI'm checking the property on on defined, course,reacts, complaining, if you ever see thiskind of setup, first of all, I would suggestnot freaking out. And what I mean by thata lot of times I see students right away goingfor questions saying, Hey, listen, there'ssomething wrong with my project, because,well, I cannot access the property, I havethis on the phone. If you ever get this case,what you simply need to do is just make surethat you're turning some kind of static value.And then one by one, you start checking, hey,listen, what is happening with my prompts.Now, why do I want to return a static value?Well, because of course, I don't want to accessthem dynamically. Because that will alwaysthrow the error. So always, always, if youever run into some kind of issues like that,I would suggest, in this case, commentingout and then saying some kind of value, someground return, it's going to be heading forand then again, back to single product. I'llsave it. And of course, I would want to check,hey, listen, what is happening? Where is myimage? Where's my name? Where is my price.So once we go back, of course, we're goingto do that in the bigger browser window, andI can see that something's off. So yeah, forsome of them, I have the values. But thenI see those on the fines. And of course, nowI would want to set up the prop types thatessentially would check that forming. Andthe second thing that I would want to do isset up some kind of default values. So first,let's start dealing with those prop types.And what's really cool, as far as the proptypes, we don't need to install, any extrapackage is coming right away. By default,when we set up create react app. And we gowith prop types. And then from and packageis exactly the same, it is called prop types.So notice how this one is with an application.And that is done on purpose. Because in orderto set up prop types, we'll have to set upa prop types property on the component. Sowe go with the name of the component, in thiscase, it is a product, and then we go withprop types. So that is the name of the property.Keep in mind, this is an import from the package.And then this is the property on the componentthat is always going to be there. And thenwe just say, Hey, listen, what kind of propsare we getting. So if I have image name andprice, then the same way in this object, I'mgoing to say that I'm going to be lookingfor image prop. And then I need to run myimport the prop types. And then of course,we have multiple prop types, whether thatis a string number, object, or whatever justified.So in my case, I know that image is goingto be what? Well, it's going to be an objectcorrect. So go with prop types, then I gowith object. And then since I would want proptypes, to yell and scream, if something'smissing, we also add this is required. Andeffectively for every prop that you have,you would want to do the same thing. Now inmy case, I have name and price. So just copyhere. Then since it is a JavaScript object,I just need to add a comma. Of course, changethe names. So I'll change it to nameand also change it to a price. Now in thiscase, of course, I'm not looking for the object.I'm looking for the string. Like I said, Ican add whatever job value would want. Andhere we go with number. Now, since I set themup as required, which you'll notice in theconsole, now we don't need to go and manuallycheck and say, Hey, listen, is one of themwithout the image in price, because I canclearly see that in my console, where I havethe warning that says failed prop type, propimage is marked as required, but then thevalue is undefined. Now unfortunately, itdoesn't point me back to that specific product.But at least it tells me Hey, listen, there'ssomething off, you need to do something becausethe props that you're expecting, well, inone of the items, they are missing. So that'sstep number one. Now the next thing that wecan do is start using either the short circuitoperators, or we're going to set up defaultprops. So first, let me show you how we wouldset up a default props. And then from thenwe'll take a look at the short circuit operators,as well. And the way we set up default props,simply because I don't want those big faterrors, if the image is missing is like sowhere we go with the product. And then theproperty name is default props. It's as straightforwardas it gets, where again, I write my prompts.By the way, here, I need to have a equal sign.And then of course, what is going to be adefault prop if that prop is missing. So Igo here with default name. If the name ismissing, then I go with the price. Now forthe price, I'm just gonna go with 399, justin case it is missing. Remember, last onealso have the price missing. And when we havethe image shown here, I'm going to go withimage. But it would help, of course, if Iwould show some kind of image. Correct. Sothat could be either URL, or, in our case,if we check out our project, we should seethe assets folder. So right next tutorial,notice we have the assets folder. And in there,I have default, hyphen, image. jpg. And thisis going to be the case where I'll also showyou how we can import images into our componentswhen we work with create react app. So whatwe would want to do in that file, in the componentwhere we want to use, we're going to go import,then we need to give it some kind of name.So in my case, I'm going to give it somewhatexplicit name, and somewhat long, I'm goingto go default image. And then we need to navigateto that folder. So this is going to be threelevels up. Because of course, now we're ina product. So we need to go first to the proptypes Vantage authorial and not eventually,we need to be in source. And this is wherewe look for assets. So we go dot dot, andthen we leave one folder, then dot next one.And then finally we arrive at assets. Andthen since it is not a JavaScript file, weneed to go with default. And then hyphen,image and then jpg. So essentially, you needto have a full path, including the extension.Okay, hopefully, that is clear. And now ofcourse, what I could do is just say, defaultimage. So if the image is missing, then ofcourse, this is going to be set up as a defaultimage. Now, what are we doing next? Well,now are concerned. And of course, I can tryto uncomment. So on comment, and of course,I can see something beautiful. So that isnot that bad. I can see that I have all theseproducts. Okay, good, good, good. And by theway, there's extra single product that I don'tneed. And then for all the products that havethose properties, life is great. But thenthe one that is missing, remember the lastone, not only the image was missing, but alsothe price was missing. Now I can see thatI see that default price. So that's alreadya good start. However, there's one more problemwhere now of course, this image is an object.Correct. So even though I set up default valuefor the image, when I'm going with image onthat URL, well, I still cannot see the image.Why? Well, because there is no URL propertyon the image that I'm providing. So we'llalso need to take a look at how we can useshort circuit operators in order to fix that.Now before we go any further don't. I wouldjust want to showcase that. As far as theimage we can import In any file we would want.So if we go back to index, if I'll just copyand paste the path, because of course, it'sgoing to be exactly the same. And if I wantto place my image, I'm just going to go withimage from source. And then of course, we'regoing with default image, just to showcasethat each and every time you'd want to useit. And by the way, I need to push it abovethe URL. That's why it's not working, thenof course, I can use my image. Again, samesetup is going to be for every component.So you can set up your images. And as faras the import, you just need to give it somekind of name. And then of course, the fullpath because it is not a JavaScript file.So that should cover my images. And I'll justcomment them out for your reference. But nowlet's finally deal with this product. So Ihave the product, I have some problems thatare there, some that are not, technically,I was able to fix somewhat a lot when I talkedthe default props. But there's also anotherway how we can set up those default props.So I'll comment this out for your reference.And now take a look at another way. Now yes,there's going to be a big five compliant.But first, I would want to showcase that wecan use or operator. So if I know that pricemight be missing, what I could say is, getme the price. If the price is not there, thenwe use or opere. And then we can add thatdefault value. So in this case, I can go with399. Now the problem is going to be that wewill still have this error, because when wecheck for this URL property, and the image,we cannot use this or I can say here, getme the property on the object. But if theimage is undefined, while this all makes sense.So even though you might think that I couldjust check for default image this way, it'snot going to fix the situation, because JavaScriptstill complains about we're trying to accessthe property on the on their farm, which ofcourse is going to be our last project. Andthis is where the AND operator comes intoplay, where we can set up some kind of variablemarkers, that is going to be a URL where Ican say, you know what, if the image is there,only then get me back the URL. So if the imageis there, then get me URL. If the image isnot there, well, van is just going to be defined.So that way, what we're doing is we're onlychecking for the URL. If the image exists.If the image doesn't exist, then we're noteven checking it. So the last product, ofcourse, it doesn't have the image, it is undefined.So if that is the case, we're not even checkingfor that URL. So in our case, you will noticethat I nicely display that default image,because for all the products, I'm checkingfor the image images there, and then I getback the URL. And then of course, I displaythe URL, or here. However, for the last one,since the image is not there, I'm not checkingfor the property that is not an object, soI don't get the error. And then in here, Isay, Well, you know what,if this is false, then just display the defaultimage. And of course, I can do the same thinghere for the name if I would want I coulduse my OR operator. So that's how we can useprop types in react. And before you ask aquestion, Well, why we won't use it all throughoutthe project as well as remaining of tutorial?The simple answer is that, well, it is addingtoo much code. And in my opinion, it justgets a little bit messy. So since our goalis to learn whether or not is building theproject, or working on a specific part ofthe tutorial, that's why I will avoid usinga bunch of these prop types because in myopinion, they just make our files bigger andharder to read. Now one last thing beforeI let you go is the fact that of course, youcan set it up the prop types using the snippetsas well. So I'll just create some testingfile here. First thing js. If you'd want toadd prop types, you just go here with thisB. So you have our A f c and e is going tostart for export. But then if you add thisB you also right away get this prop types.And then of course, you export the testingcomponent. And then one more thing if youwant to have a short Got where you're settingup the prompt. So for example, I could gowith name, prop. And then if you want thatis required, then you go with PT. And thenwhether that is an array or string or whatever.So in my case, I'm going to go with a. Andthen if you want required, then you just gowith our under notice you have prop typesarray, and then years required. So those arejust the shortcuts that you can use. And thoseare use cases for prop types, where they firstallow you to see which props are missing.And then when you combine them with shortcircuit operators, you can just make surethat if the prop value is not there, you havesome kind of default value. So for all ourexamples, we're in the same page. Even thoughit works for our tutorial, when it comes toreal apps, it's nice to have multiple pages.Now when we talk about JavaScript frameworks,we are not talking about traditional HTMLpages. In that case, we have a new term, asingle page application, which just meansthat we have our one page, in this case wherewe have a div with an ID of root. And insteadof going back to a server and requesting infoabout the pages where the user navigates,we set up a routing on a client side withoutthe page refreshes. To give you a visual example,navigate to App j s. on import. As always,you can call it whatever you would like mycase, I'm going to go with final Of course,from we're looking into tutorial, when we'relooking at the folder number 11. And the finalfolder, show here where we have the advancedreact. In this case, I'm just going to addmy final component to give you a good understandingwhat we're going to create. So notice here,we have the number. And then we have threelinks, and check out the URL bar as well asthe refresh icon. Where notice, as I'm goingfrom one page to another one, I'm switchingthe URL, but we're not doing a full page refresh.So each and every time we navigate to aboutor people, or Hey, we're not going to a server,and fetching the data and then coming back.Instead, all this is happening on a clientside. And of course, this is what we're goingto create in the following videos. Now whenit comes to react, it does not have builtin routing, and will need to use an externalpackage for that. And the most popular routinglibrary in react land is by far the Reactrouter. But let me be very clear, it's notpart of the official react. Even though itmight seem so because of its popularity, itis still an external package. If you checkthe folder for react router, you will finda markdown file with more info. Sure, whatI would want right now is to remove our example.Hopefully you can see what we're going tocreate.Navigate to react router folder, and thenyou're looking for react router, info markdownfile. And here, you'll find a link to officialdocs, just so you can see where I'm gettingthe information from. And also keep in mindthat for your own project, you'll have toinstall the React router Dom first. And youdo that by running npm install react routerDOM. Now, of course, I already installed this.So if you go to package JSON, if you checkout the packages, you'll see that there isreact router DOM, and more specifically, theversion of 5.2. Now just to showcase how wewould install the package, I'll stop the devserver. And then again, we'll run NPM. Andremember, what was the command, it was npminstall and react, router and then down. Soall what you need to do in your own project,you would install the dependency and thenit's going to get added to the package JSON.And then of course, you can start using itbecause you'll see that there's going to besome imports in the upcoming videos. Now letme start up the server again. So we go andstart. And the last thing that I would wantto mention, as far as the React router generalinfo is the version number. It is safe tosay that you'll be watching this in a futurejust like any other software course. There'sgoing to be some update. So if you're watchingthis, if you install it, and you can see thatthe version number is already, for examplesix, then of course, you will have to go todocs and see what are the changes if thereare any, and most likely there will be asfar as the syntax. So the syntax that we'reabout to cover is for version five. Keep thatin mind. Once we switch to a different version,it's a good chance of that also, some syntaxwill change as well. Now, you'll still beable to use a vis index, if you go with thisspecific version. But if you want to use anewer version, if it is available alreadyat the time, then of course, you have to goto a doc, and make sure that you follow theproper syntax that relates to that specificversion. Nice. And once we're done discussingthe general concept of react router, of course,let's get to work and set it up in our ownapplication. First, of course, we would needto navigate to address then we're lookingfor folder number 11. And you can probablyalready guess, of that, we're going to gowith the setup folder. And you would be correct.Server navigate to tutorial. And we're lookingfor folder number 11. And then we're lookingforward to setup. Again, I have there theindex show the main entry point, so we don'tneed to show specific file. And then of course,instead of there's a random text, the Reactrouter, one, we're going to go with a setupcomponent. Awesome. Now it's still going todisplay the same text, so you're not hallucinating.But now of course, I would want to navigatethere. And most of the files that you findin a setup folder are going to be our pages.Now, Iran is a bit confusing, don't worry,once we set up the router, you'll see howit works. But essentially, we have about error,we have also the home as well navbar peopleon person. So everything apart from index,where we're setting up our react router, andthen the navbar where we display the links,those are going to be our pages. Hopefullythat is clear. Once we have that out of theway. Now let's navigate to mixtures. And noticehow I'm importing all the branches. So oncewe set up the router, depending on the URL,we will display that specific component. Forexample, there's going to be a home page aswell as a single person page. Now in orderto get up and running with react router, we'llneed to import from the package from the Reactrouter DOM, the browser router, a common practiceis giving it an LS. In this case, we are givingan alias of router, a route as well as theswitch. So one by one, of course, will coverwhat each of them does. In this case, let'sstart by setting up our return. And this isthe part where we would want to wrap all ourindex return into the router. As a side note.Normally, when you work with react router,you'll wrap your whole application. Again,most cases since we have a separate folderfor each and every example. That's why we'rewrapping the return of images. Just keep inmind, when we will be working on our project,we'll go over how we wrap our whole application.So essentially, the setup is going to be exactlythe same. But the difference is going to bethe router, we'll wrap our objects or theimages doesn't matter, whicheverplace you pick, as long as it is a root component,because that way, of course your whole applicationcan access the React router and can use it.In this case, only the setup folder. Of course,the final one where we have the final codecan use the React router DOM. So with ourrouter in place, now we need to set up theroutes. Essentially, it just means that inthe URL, when we navigate with our data isthe homepage of bulk. Well, then we displaythat specific component. Like I said, theseare just components but I gave it a commentof pages. So these are just components thatwill become our pages. And the way we setthem up as pages. We're going to go here witha route. Then we have a path prop. And thisis a specific prop. So make sure you nameit exactly the same And then this is wherewe showcase what is going to be our URL. Andthe first one I want to showcase is the homepage.Now for the homepage, we just go with forwardslash, that just means the domain. Now inthis case, of course, our domain is localhost3000. But then normally, you'd have cnn.com,or, or google.com, or whatever, just thinkof the domain, for your application, whateveris going to be. So that is going to be thehomepage. And then once we have the routecomponent, inside that route component, thisis where we display whichever component wewould want. So keep in mind, technically,if you want, you can play whichever componentyour heart desires. Because even though thissays that, yeah, it is going to be a homepage, you can easily place here, people componentsas well. Keep that in mind. But of course,in my case, since it is a home page, I alsohave a homepage component, meaning the componentby the name of home, and then of course, I'mdisplaying it. Now, in order to make it abit more interesting. I'm going to copy andpaste One, two. And then of course, I'll addabout as well as people now 40, about whatis going to be my era Well, if the forwardslash is the homepage, let's say that 40 aboutpage, I'm going to go with forward slash about.But again, you are in charge, if you wantto write about shake, bag, Lazarus means thatthis is going to be the page where you navigate.Okay, keep that in mind that you are alwaysin charge. Well, what is going to be yourURL. Now in my case, I'm just going on withforward slash about. And of course, in orderto showcase my about page, I'm going to saythat once we navigate there, I'm going todisplay the about component. And finally,I'm going to go also with a people. And youcan probably already guess that we're goingto be going to a people page. Now the momentwe refresh notice, now I have the homepage.Now why do I have it? Well check it out. Ifwe navigate to a home dress, or home component,this is what we have. So if I'll go here andsay shake, Berg, improv probably already guessthat will display the paragraph with thatspecific text. So hopefully that is clear.We have on page. And now of course, in theURL bar, since we haven't set up the nav baryet. If we go with forward slash, and thenabout, we should. And let me emphasize somethingbecause there's one gotcha, we should seethe about page. And once I press Yeah, I cansee the about page, but there's a tiny issue,where I can also see the home page. Now let'stry it out with people. So in the URL bar,go here and say forward slash people. Andlet's see what we're gonna get. Again, samething, I can see that I have the content fromthe people page. And if you want to checkit out, here it is, essentially, I have mydata here, I set up the state variable. AndI'm just iterating over. And don't worry,it's gonna make sense, once we get to URLparameters, why we have this specific setup.Most importantly, what is happening here,why we have homepage with Shrek and back.And then the people page, even though technically,we are in the people page, where you're seeingwhat's happening by default, when it comestoreact router. If the path matches, it's goingto display both components. And as you cansee by the URL, well for the homepage, italso matches the about correct. And then italso matches the people. That's why when wenavigate to people to about or whatever pagewe will set up, it will also display the homepage because technically, the path matches.Now in order to fix that, we will need toadd another prop where we say exact. So oncewe save, you'll notice that now only the exactpath matches whether that is people or whetherthat is about or whatever URL your setup.And only once I go back to my domain, thenof course I can see the home bridge. Now ifyou want you can have this exact path to everyroute. pad is totally up to you. But in thiscase, since I don't have any nested pages,so there's not going to be about Ford slashand something else. I'm just going to avoidthat. Just keep in mind you're not limitedto adding this exact to only the homepageyou can add it To every route, and that way,only the exact match will be displayed. Sothat would be a basic setup for react router,where we have a router, we wrap our wholeapp being in this case, of course, it is justthe index JS in the setup. But normally, youwould wrap the root component. And then youhave routes online for each and every routethat you have, you just set up a component,whatever you will place in that componentin return is going to be displayed. And thenwe need to remember about the path Prop, whereessentially we say, Well, what is going tobe the URL as far as the homepage is justgoing to be a forward slash. And then youcan come up with your own components, of course.And once your display as well as the URL,just go with forward slash, and then whateverthe name you choose. And then in order toset up exact match, you just need this exactprop is an easy now we're familiar with reactrouter basics, of course, let's make thingsa bit interesting. And talk about the errorpage, as well as why would want to use a switchcomponent as well. As far as the error page.Well, if we go right now to the URL, and ifI go with forward slash, and then Hello, whatdo you think is going to happen? I have threepages of home about and I have people howeverin the URL? Well, I'm navigating to a Hello.With our current setup, the only thing we'redisplaying is a empty page, it will be a betterexperience. If at least we would tell theuser to Hey, listen, such a page doesn't exist.And then he or she can navigate to some differentbridge, most likely the home bridge. And ofcourse, the answer is that yes, that wouldbe a better setup, the first thing we wouldneed to do is go with error page. Of course,that is going to be our component. But asfar as setting up the route, it's going tobe a little bit different, where we go witha route component. And then for the path,we go here with the star. So instead of settingup for slash error, or not found we just gohere with a star. Now it started means thatit will always always match. And of coursein here, our one on display the error component.And now you'll see that I have my garbage.And technically everything works nice. NowI have my Hello, we haven't covered linksyet. So don't worry, eventually, we will addhere a link that allows us to navigate toa different page. But at least it's a goodstart. Once we navigate to a page that doesn'texist, whether that is a Hello or shake andbake. And of course we have the error page.Now, the problem here is going to be a bitdifferent. Where once I navigate to a homebridge, I can see the error page. Once I navigateto a bulk page, I'll also be able to see theerror page. Why? Because this one always matters.This is where the switch component comes intoplay,where we'll go with a router. And then we'llhave our switch component. And we'll put allour routes in the switch component. And witha switch component, only the first one thatmatches is displayed. So that way, if I goto homepage, then I can only see the homepage. If I go to your about page, of courseon the about page. But if all nicely go toa Hello. Since this one always matches, wehave the error page. That's how we can setup error page with paste which component inreact router. Nicely done, I think we're makinga good progress. So now let's talk about dealing.Because even though we could technically leaveit the way it is, where a user needs to navigateusing the URL bar, you would have to agreethat probably that is not the best user experience.And for that, of course, we would create anavbar. Now I already created the component.So the only thing we need to do is place itinside the router. Now again, please don'tplace it within a search insider or show rightabove this, which we're going to grow herewith a navbar the moment the only thing wehave here is some kind of text. Now of course,let's navigate to our navbar component. Andthis is where I would want to set up a orderedlist. So I'm going to go here with our listand list item and then instead of going fortraditional link Like we have been doing alreadyin the HTML. In this case, you need to importa link from react router DOM. And, again,there's a specific prop. And that is to showyou go here with link to prop. And this iswhere you specifically say, well, where Iwould want to navigate. In this course, I'mgoing to go with a home page. So of course,the only thing I do is match whatever wasmy setup in the index. So for the home, Ihad a Ford slash. So of course, if I wouldwant to navigate back your home bridge, well,I will just use to prop and then forward slash.And here I say home. Now, I would want tomake two more items. And I'm looking for about10 people. So first, let's just change thistext around. And we'll say people, and alsowe, of course, need to change the URL. Soif for about my URL was forward slash about,and of course, make sure that it matches.Otherwise, you will navigate to a error page,not the end of the world, but probably alsonot something that you're looking for. Solet's save it. And there it is. Now I havemy lunch. So instead of using the URL bar,now, what I can do is just say, hey, showme the people page. And as you can see, likeI said before, now we're just displaying thepeople component, then we go to about, andthen we go to home. And we can already puttwo and two together. If this only componentallows us to navigate to a different page,not only I can use the nav bar, I can alsouse it in the error correct. So navigate tonotice here, how I have imported already alink component, just keep in mind that thatis a named import. So make sure you add thecurly braces. And the only thing that is missinghere is link to then we go for example toour home page. Again, you can navigate towhichever page you'd want. I'm just goingto a homepage, and just a little bit of CSS,I'm going to go with class name. And we'regoing to go with btn. Let's just say backhome, back,home. And now try it out where not only Ofcourse, I can navigate around with my navbar.But I can also do here where I say forwardslash and then shake, and bake. And now Ihave the error page. Now in this case, ifI want to navigate back to the home bridge,either I can use the nav bar, which is stillthere. And by the way, this is somewhat important.We'll notice this nav bar will be added toevery page. So these are my routes. This iswhere we are setting up everything with asearch component. But navbar will be addedto every page. So that will be displayed onevery page, regardless which page it is startingwith home all the way to error. So if I wantof course, I can navigate back using the numberor can if we go to a Hello, the page thatdoesn't exist. I also have a nice line thatsays back home. I click it. And of course,I'm back home. We're almost done with ourbasic react router setup. But before we moveon to a different topic, I also would wantto cover how we can deal with alerts. So inthis case, notice I have the list of people,which is of course coming from my data correct.If we navigate to a people component, likeI said, I import data, the file the data thatwe have been using. For our tutorial, I setup this use state hook where I have peopleand some people and I'm here are just iterateover my list and then display the name ofthe person. But now what I would want is toset up some kind of placeholder where we canimagine that this could be a list of blogpost, or list of products or whatever, somekind of list of items. And then once we clickon one specific item, we go to that placeholderpage that just grabs the item that you clickedon, and then displays it. So essentially,I don't have to create four different pagesfor each and every item in the list or 20different pages, depending on how big is thelist. In this case, I can just create oneplaceholder. And then regardless whether Ihave 4000 items or four items, the momentI'll open up that placeholder I'll grab thatspecific ID, or some kind of data that isspecific to that item, and then display onlythat one item. And if you're a little bitiffy off what I'm trying to make, well justhang with me. And we'll be in good shape.So I have my list of items correct. I displaythem, of course, by iterating, over my list.But what I would want is to set up that placeholder.And we can do that if we navigate to indexj, s, and I already have this person component.So if you navigate to a person component,you'll just see that we have a person component.And it has a text of person, just like theother components that we used for pages. Nowthough, I would want to set up different thingsin index js, where versus my person component,I'm going to go right above the error, wherewe set up the route. So that will still saythe same, where we go with route, or the valuesare going to be a bit different. Because inthis case, I want to go with path.Instead of just word slash, we also have somethingcalled URL parameters. So the first part,the beginning part can be up to you, you caneither go with forward slash, and then youcan set up the Euro parameters. And by theway, those are going to be in react router,the colon, and Lan, whatever name you wouldwant. So in this case, you can go with ID,you can go with name, it's up to you. Again,this is just going to show up once we startaccessing that value. So naming is up to youJust remember that name because you will haveto use it. So in this case, I'm going to gowith it. But remember, I said the beginningpart is up to you. If you want you can rightperson, forward slash and then of course,colon an ID, if you don't, you can simplywrite forward slash, and colon and then ID.So this beginning path, you can make as longor as short as you want. And then in here,we do a little bit differently, where we don'tplay that component inside, we go with children.And we set up well which component we wouldwant to display. So this person componentwill be our placeholder for each and everytime we will navigate to a person, and thensome kind of ID, we will display this personcomponent, now the difference is going tobe in that person component, we will grabthat ID and fetch that data. So in our case,that is going to be that one specific person,hopefully that is clear, we have our placeholder,we use our URL parameters. In this case, Inamed this ID, but you'll see in a second,that name is definitely your choice. And nowwhat I would want is navigate back to a peopleshow let me find my people array. And in here,right next to the hiring poor,I would want to set up a link. Okay, so Ihave imported the link component and alsohere hiring for. And now of course, I havemy own component. Now the difference and nowis going to be that, check it out. we're iteratingover the list correct. And I have each andevery ID available for the person, we alreadyknow that that's how our data is structured.So now when we set up to, we need to set itup dynamically. Now what do I mean by thatwe set up curly braces, and then we go witha template string, where I say that I'm goingto be navigating to a person. So the onlyreason why I'm adding this first part is becausein the index, I also added this person, ifyou don't have it if you just have the forestslash, and of course, don't add markers addedadd the person. So that's why I need to makesure that they both match, then I have anotherforward slash. And this is where I place thatID. So I know that in the data object, I havethat ID. So the only thing I need to do isgo with person, and then ID and what you'llnotice that the moment you click on any ofthe links that we're about to display, theywill all open the same page, that person bridge,the difference is going to be in the URL wherethe IDS will change. So within the link, wecan just write whatever we want. So in thiscase, I'm going to say learn more And oncewe save, notice, these are my links. And likeI said, Every time you click on them, we'restill opening the person page. So we're stillnavigating to the person ID. And then of course,since in the children, the value was personalcomponent, that is what we're displaying,the difference is going to be the URL, becausenotice now we have person and then one. Soif we navigate to the third one, we have personand forward slash three. And hopefully youget the gist. So now, of course, the questionis, well, how I can access that value, becausethe idea in the person is somewhat simple,where in the person, I would want to grabthat value. And then in my case, I'm justgonna look for that specific person in mydata array. Now, again, this is oversimplifiedexample. Normally, the way it works is youhave a list of blog posts have a list of products,and then you already fetch them from the API.But then if you'd want to have a more specificinfo, then of course, you fetch it one moretime. So you set up the link, where you navigateyour placeholder page, and you pass that ID.And then in that placeholder, this is where,again, you set up another fridge. Now, inour case, since data, of course, is local,I don't have to do that. So I purposely didn'twant to overcomplicate things, but just understandthat this is over simplified example. In orderto access that, we need to use use paramshook from react router now. So again, thisis coming from react router DOM, where theyprovide this hook that allows us to accessthe parameters. Now, just to showcase thatwe can name our URL parameters, however wewant, I can go with log, and then we go withuse params. And then let me invoke it. Andwhat you'll notice, the moment I navigate,for example, john,I'll see of course, my placeholder, my person.And then in here, I have the object. So inthe object, I have the ID property, and thevalue is equal to a one. Now one gotcha, though,is that list will always be a string. Andif you remember our data, it was a number.Correct. So that sometimes might trip youup, where some API's have their ID, strength,and some of them as a number. So for example,if their strength, no big deal, once you passit through the React router, you'll be stillin good shape. But if there are numbers, thenof course, you'll have to keep on watching.Because in the following few minutes, we'llfix this issue where this is a string, thatis very, very important. However, keep inmind, this name is an ID. So what that meansis when I was setting up my index, and whenI say person, and then the name of my europrimer was ID, if I change this around toa orange, you'll notice that the value doesn'tchange, it's still going to be one. So we'restill within the people, we can navigate around,because we just pass in the value. However,the name, of course, is the orange. So thisis where I'm trying to make a case that coursenaming is, in most cases, up to you. So Ihave ID on showcasing these placeholder. Sonow I would just want to have a simple setup,where I'm going to display well, which personis actually the one that I have clicked onin people, because for now, I'm just displayingthe person, correct. And the way I would dothat is navigating to person j s. And I wouldjust want to get that value. And since I'mgetting back the object from use params hook,I can simply say that it is going to be anID. And I'll say use params sorry, not useif I say use prompts. So that should giveme my ID. I know that I'm getting back theobject and I'm just destructuring the object.But I also want to set up some kind of statevalue. So say const, Morgan for name, andthen set name. And that is equal to use state.And for now I'll just say default name. Andwe're have the heading to our changes thisaround Pentagon. And I'll say yeah, you knowwhat, I would want to display the name. Ialso would want to add a link just so we cannavigate back to the people page. So let'ssay here link. And as you can see, of course,I have already imported. So we go here witha link on to. And in this case, I'm just goingto say, let's navigate back to people. I'llalso add a class name here, because I wouldwant to add a little bit of CSS online. Asfar as like value, I'll say back to people.Beautiful. So once I save, when I click onPeter, I should have default name and backto people. But the good news is that Ihave myID, here, we could set up the user, wherewe could filter out, well, which person actuallyclicked on. And then of course, just changethe name. So that way, we can always be surewhether it's Peter, or john. So we're gonnago with use effect. So essentially, once thecomponent around nurse, then we want to callour callback function. All set up empty arrayof servers, no dependencies in here. So juston the initial render, node want to get thatperson. So I'm going to go const, and I'llcall this new person, and that is equal toa data. And now I'm just gonna use the findmethod. Now, the gotcha here is that, of course,I would want to parse the string, becausekeep in mind that this is a string in my data,this is going to be an ID. So if you'll simplysay, like, so where you have the person IDmatches the ID, this is not going to get youany person. Why? Well, because of this oneis a number. And this one is a string. Sowhat you need to do is go with parse, int,and then you wrap the ID inside there. Andof course, we need to be closing parentheses.So now I have my new person. And I can gowith setname. And we're gonna go with newperson, and then dot name. So now what willhappen, I have the peer. So if I navigateback to people, and I click on Susan, Now,of course, the value will be Susan. So that'show we can deal with less set up the placeholder.And then each and every time we click on someitem, instead of creating a brand new page,we use the same page. But there is alreadysome kind of setup, where I can get that uniquevalue about that product or blog post, orwhatever. And then we can fetch it. This displaythat specific item in the placeholder, here,we create only one component, only one pagethat could be used by 4000 items, or fouritems, like it is in our case. Excellent work.And next we have performance optimization.More specifically, we're going to cover react,memo function, use callback, hook, and thenuse memo hook as well. Now, before we go anyfurther, let me just be very, very clear,where I purposely added this topic to be ourlast one. Why? Because react is fast by default.Again, let me repeat, React is fast by default.And what I mean by that is just because youhave these tools to optimize the performanceof your app doesn't mean that you need torun over to your to do list app, and startoptimizing. That's not how it works. Now,I did include it. And by the way, I was debatingback and forth. I almost skipped it. But Idid include it in tutorial because I wantyou to be aware of these functions and hooksand how they work. But it doesn't mean thatyou need to use them in your apps. Yes, thereare some specific use cases where they areuseful. But trust me when I say this, justbecause Twitter guru says that you need toapply these optimizations, you have to doit. No. React is fast by default. And whenit comes to optimizations, they do add theirown costs. So it's not like it's a free ride,where we just add these magic functions andeverything works like beaches. They do usethe memory, they do use the competition power,they'll be mindfulwhen you actually use them. During the videos,I will mention term memorizing. And that isnot my term that is not react term. That isa computer science term, which just meansthat we're caching results, and I'll simplifyit even more during videos where I'll sayremember Remember, we're remembering the value.Just keep in mind what the official namingis because of course, remembering is somethingthat I added, because I thought that we shouldsimplify this memorizing term. And then lastly,if you don't trust me, if you think that everythingthat I'm saying is gibberish, and that youshould use all of these functions, I wouldsuggest going to your favorite search engine,and just type use callback will use memo ontype again, and you should get the articleby Kent Dodds, where essentially he talksabout when you should use memo on use callback.And there's not much to add there, he justlays out step by step, why you shouldn't gocrazy with use memo. Use callback org. Sothat's what we're going to cover next, there'sgoing to be of course, an example. Now, Icreated that example with this specific purpose.Again, it's not normally where you would usethese optimizations. But since I wanted youto have an idea of how they work and whereyou can use them. That's why I created sowe get a good practice on the React memo,as well as use callback and use memo hooks.And once I've shared my two cents, about theperformance optimizations in react, of course,let's go to our example. And we're lookingforward to folder number 12. I named my componentagainst setup, and you're looking in the memoryuse memorials callback folder, and then morespecifically, the setup folder. Again, it'sgonna have the index, so you don't need togive it more specific path. And what you shouldsee on the screen is the count. So of course,I can increase the count, as well as I havesome products are here. So now of course,let's navigate to that index. And let's seewhat all the big fuss is about. And you cansee that I have some reports, I have you stateuse callback, use memo, something we'll usein later videos. And also, I'm using my customfetch. So use fetch hook, where I pass inthe URL. In this case, again, the URL is myown API,where I'm just sharing my product. So thatis for my JavaScript course, we built a ecommercestore. And this is the API that is providingthose products are getting back the product.Notice again, I'm not using loading, thatI have the count and set count. So this ismy state variable. Notice I have the headingone for my account. And of course, I havethe button that increases the comp. And thenof course, things get a bit more interesting,where I have my big list. So again, this isoversimplified example, we're talking aboutthe big list, whether that is 100 items, 1000items, or something along those lines, becauseif you check it out, my list is not a bigsort of big list, then the problem is product,and I pass in the product that I'm gettingback from my customer. And again, if you didn'tcover custom hook, please go back becauseI'm not going to cover it one more time. I'mnot on here, I have the section, I iterateover the product. And I created a single component,sure single component for the product. Justto emphasize one of the points online Of course,I have the key matters, that specific value,the unique one, because I have a list, andthen that product. So I use the spread operator,where I grab all the properties of that areon a product. Of course, if you'd want tosee what we're getting back, be my guest.In this case, I'll copy and paste. And you'llnotice that of course, I have the array. Andthen each and every item is that product,I have the ID. I have the image and all thatgood stuff. Now that is not the most importantpart though. Because yes, in single product,notice, I'm maxing the fields property onthe object, then I do a little bit more destructuringare give the image and this should look veryfamiliar because we have done 1000 times alreadyin this tutorial. The point that I'm tryingto make is something else. We're at the momentI have the list I have click me. And you'llnotice that if you add user for me singleproduct, as well as the big list each andevery time you click on a button, you're actuallyre rendering. Let me show you how is thatgonna work. Sorry, imported, the use effect,by the way, didn't My apologies, let's gowith use effect now again in your case isgoing to be already there. And if we scrolldown here, and if we go with big list, andif you go with use effect, and then you callit. And we'll just log a big list called Biglist called. And I'll do the same thing overhere, where I'll copy and paste. And you canalso add the array here, the empty dependencyarray, it's not going to change the simplefact that every time you click on a button,you will invoke both of them. So again, Ihave used the fact and now say, single itemcalled, by the way, I can add here a countas well. So if I navigate to a bigger browserwindow, or refresh, notice, so once we callour component, yeah, I have item called thatand called on, it goes all the way up to a24. Now, what's more important though, isif you check out the console, I keep on clicking,notice these values, they keep on increasing.So I have 12 items, and then pretty much eachand every time I click on a button, I seethis big list called and also each and everyitem gets rerender. Now, first of all, whyis that happening? Because I have the statevalue using use state. And then each and everytime I click the button, what am I doing?Well, I changed the value correct. And remember,your state was doing what it was preservingthe values between the renders, and it wastriggering the let's say it all together rerendercorrect. Course, in my component in the indexone, I have my big list. So each and everytime I click on a button, I update my countvalue. I'm triggering the rerender. And thenof course, I'm re rendering the big list.And then in the big list, I have my singleproduct. More specifically, I'm iteratingover the array, and I returned for each andevery item, my single product. So those onesalso get rerender.So what would be the solution? Well, solutionis the memo function that comes with reactagain, please don't confuse it with use memo,use, my more is gonna do something else thatis a hook, we're talking about function bythe name of memo. If you want to be reallyspecific, then of course, it is a method becauseit is on react. And what we would need todo here is just go with react, and othmar.Or you can import it. You can also do thatup here where we're importing everything.And what you would want is to wrap your essentiallywhole component in that memo. So memoir isa function, and you just pass in your component.So simply your set of parentheses, and thenyou set up all the logic that you had forthe component in that memo. All right. Soonce we save, we will notice that yes, onthe initial render, notice, we have 12. Sowe call this 12 times because we have 12 items,then each and every time I increase, noticehow we're not calling that usually Why? Well,because memo is checking it is memorizingWell, what is the value? Sure, if this propsvalue did not change, then we're not triggeringthe rerender. Because we need to rememberthat every time the props or the state changes,component re renders. So in this case, what'shappening is that we're triggering that rerenderwith account, correct, because each and everytime we change the state value we triggeringthe rerender. Now when we have this reactmemo, what we do is we check, we say hey,listen, did the value for my props change,or it's exactly the same? And of course, theanswer is, as you're clicking on a button,the value for the product is exactly the same.But then react is like okay, sure, now I don'tneed to re render my component. So if we don'trerender the big list of course, as a result,we also don't rerender the single product.So our is the memo function in react. Notbad. Not bad. We've got Got a react memo methodout of the way. Now, let me throw you a mindread. What if I were to create a state value.And I'll call this card on not the actualitem in the card, but will somewhat simulatethat action. Wherever we go with karten andsipcot course we use use state, our awesomeHawk, we provide the initial value, whichis going to be zero, then we'll also set upAdd To Cart function. So we're going to gohere with cost, and then add to cart Markshow for time being is just going to be anarrow function that does one very simple thing,it sets the cart to the previous value plusone, so cart, and then plus one. So that'smy Add To Cart function. The thing is, though,that now I would want to pass that functiondown to my item. So first, right after thebutton, I'm going to create a new one. AndI'll add a little bit of inline styling here,I'll say margin top is equal to three REM,I think a lot is a good value. And then inhere, let's say cart is equal to my cart value.Let's save it, it should be zero, becausethat is my default one. But then, like I said,I would want to pass this sucker down to asingle product. Yes, granted, we'll do someprop drilling. But I think we can live withthat, because there's something else thatI'd want to show you. So where I have thebig list, now, let's go with the prop of AddTo Cart. And then of course, our Add To Cartfunction, add to cart prop is equal to myAdd To Cart function. Well, of course, weneed to destructure it, we already know that.And then we need to pass it into that singlecomponent, correct. The single product componentof the cart again, add to cart over here.And then finally, we're good down to the singleproduct. And then in the single product outwant to add a button that of course causeit. So right after the paragraph, I'm goingto go with button, add on collect, and we'llpass in our Add To Cart. So we'renot going to add that item literally to thecard. But we'll simulate that action. So addto cart. And again, there's going to be aissue. issue is going to be simply becausewe click to add to cart and notice, again,we're calling that single item. So every timeI click on this button, again, I'm re renderingall the items. Okay. Now, why is that happening?Well, if we scroll up, we see that we havethis big list. Now in this case, we have theproduct that we technically took care of witha memo. Okay, but then we have Add To Cartfunction. So again, this is our prop. AndI told you in the last video that every timeprops, or state changes, component will rerender.Now the thing is, when we change the statevalue, we trigger the rerender. And each andevery time we create this function from thescratch. So that's why react things that hey,listen, this value changed, because it wasrecreated from scratch. And that's why again,we're triggering the rerender. Now what isthe solution, the solution is using use callback,which essentially somewhat similar like wewere doing with a memo, but now it's goingto do with a function where it's going tocheck Hey, listen, has the value for the functionchanged. If it hasn't changed, good, I don'tneed to recreate the function from the scratch.If the value has changed, well, then of course,I would need to create that function one moretime. So what we do is called use callbackhook. And then we would want to pass in thatfunction. So here again, we wrap our functionin the parenthesis, that's step number one.But also what I would want is to add the dependencyarray. And that is very important becausewhat I would want is each and every time Iupdate the cart value, I also create thisfunction, and I'll show you what happens ifyou don't do that. But the good news is nowthat if I'm Just working with a count, I'mnot going to trigger that rerender. Becausewhat you'll notice that once you click thecount, check it out, see, the items are stilljust 12. So I don't rerender each and everytime I click on a comp, because with our previoussetup, so without this use callback, by theway, I didn't show you that. So my apologies,let me delete it. And I'll recreate it fromscratch here, where now the problem is that,as I'm clicking on account, all the itemsstill get rerender. Because again, this functiongets created from the scratch. And then reactthinks, hey, listen, the props change, soI need to trigger the rerender. That's whywe use this use callback. So now we createthis function only when we update the cartvalue. So just like we had dependency arraywith use effect, we have the same thing withour use callback. And that is a very importantbecause you might be tempted to do somethinglike this, where you go with, okay, I havemy count, I have the card, so I only wantto create a function, when I have the initialrender. Now the problem is going to be, you'renot going to get that second value. Becauseif you go and if you console log the card,it is always going to be zero. So if I gohere, if I click on the add to cart, now asthe cart is going to be zero. And then eventhough my value got updated in the state,since I didn't create this function, whenthe cart value changed, well, it's alwaysgoing to be sitting on a zero. So here, youcan keep on clicking. And notice, it's alwaysgoing to be one because I didn't create thatfunction one more time when this value changed.So that's why you have dependency array. That'swhy you add whichever value you'd want touse to recreate the function which of course,in our case is the cart show. Once this valuechanges, we would want to create a functionone more time. Now of course, in that case,we will trigger the rear Enders Where is normal,that is not unexpected. But at least in thiscase, notice how I can keep on clicking thecount. And I'm not triggering the rerender.Also, as a side note, if you check out theconsole, you should see here the warning,where we have react hook use effect has amissing dependency, we get product analysiscoming from our customers. And this is anotheruse case where we can use the use callback.So just wait a little bit. In the next video,we'll cover use memo. And we'll circle back.And we'll take a look at how we can use thisuse callback to get rid of this warning inthe console much later. On. Next we have usememo hook, which unlike the use callback,which memorizes or remembers the functionshow if the cart value didn't change. Thatmeans we don't need to recreate function fromscratch. The use memo deals with a value.So like I said, Please don't mix and matchthe two, where react memo will essentiallybe looking for the prompts. and see whetherthe prompts change, or do you use memo isspecifically for the value. Now in order toset up our example, I'm going to create afunction first that returns some kind of value.Certain here also cow who late again, I'msomewhat of the fan of explicit name for myfunctions. So expensive. Brand serve here.And I'll pass in there. And what I'm tryingto do with this function is just calculatethe most expensive value as far as my product.And the way we set up the logic. I'm justgoing to return from this function, a valueusing the reduce function. So I'm going togo with data, whatever I'm passing in, andI can tell you right away that I will be passingthe product, then I'll use the reduce function.And again, it's not really important whatI'm doing over here, in this calculate mostexpensive one, but since I would want to makeit a little bit more realistic, I will actuallycalculate the values from my items. Keep inmind that you can return for this examplesome kind of random value, and it's goingto work exactly the same. I'm showing here,I'm iterating over my products. And then Iknow that the price is sitting in fields andprice. And again, if you want to double checkthat you can see it over here, I have my array,I have my object that of course representsthat one specific product. And then I havethis value for price. So that's what I'm lookingfor, where I would want to reduce it downto that one single value, which is the biggestone. So that's why I'll say that I'll be returninga number and I'll divided right away by 100.Because the price is incense, and then I'mjust going to say that there is a price variableamount is equal to item fields. Right, sothat is the property here. And we know thatwith reduced, we always need to return thetotal correct. That is my first parameter.And I'll just say that if the price so thatvariable is bigger than the current totalone, well, then the total essentially willbe equal to that branch. So I'm simply checkingfor the highest value of the price, whateverit is. And then once I have my function, whatI would want in my return, right above thebig list, but below the cart, I'm gonna haveanother heading one on in here, I'll say mostexpensive. Math is equal, again, to $1 sign,I guess, I will make more sense, I'm goingto go with most, or you know what, sorry,the function name was calculate most expensive.And then I would want to pass in my product.What do we need to keep in mind that we talkabout some functions that take a long timeto calculate. So the function returns a value.But let's imagine that it takes a long timeto calculate this value. And if I log on beable to see that every time I click for example,on account, I'm calling this Hello. And imaginethat if this function takes a long timeto get that value, it's somewhat of a pain.Because I'm calling this every time I'm updatingthe state value. So it would be nice if Iwould somehow be able to remember that value,and only recalculate it or essentially runit one more time to function if my data changes.So in my case, of course, that is the productcorrect, because that's what we're passingin. And this is where use memo comes intoplay, where we go with const, I need to comeup with some kind of variable in this case.So I will just rename it to most expensiveover here that I call use my mouse. So that'smy hook. And where we need to pass into usememo is a callback function. And the firstthing we need to set up is the function thatreturns a value, which in our case, of course,is calculate, most expensive van, we invokeit like so. And the second thing is the dependencyarray. And again, in this case, I'm passingin the raw duct. And then of course, I needto change from calculate most expensive shoemost expensive, and I can remove those productsright now. So what you'll notice that it isstill the same value. So we still call thisfunction, but then every time we click onaccount, what we don't see the Hello. Alright,so that means of course, we're not callingthis function, we remember the value usingthe use memo. And not only were the productschange, essentially the data that we're passingin, only then we run the function one moretime and recalculate the value. So that isreact memo, use callback, as well as use memohook in react. And the last thing that I wantto showcase just like I promised, there'sanother use case for use callback. That isessentially when we're fetching data. An awesomeexample is over here, if we check the terminal,we can see that I have this warning wherereact use effect has a missing dependency,get product year included or removed fromthe pregnancy right. And of course that isin my custom, the US furniture. So let's saywe'll navigate over there. We have our customerAnd then we have our use fetch, I can seethat react is complaining that hey, listen,you have get product function over here. Soyou need to add it as dependency. But beforeyou jump over there and add it as dependency,let me warn you, you will create infiniteloop. Why? Well, let's see, we have Get Products.Correct. And what is this good products doing?Well, it is calling ship products. So it setsthe stage value, which triggers the rerender.So if I'll go here, and if I'll say get productis my dependency, the first time I'll callthe get product, I'll change that value. Andthen since this needs to rerun every time,of course, when we change something aboutthis value, well, since get product, oncewe added there, since it will get createdfrom the scratch, once we rerender. That'swhy we'll create a infinite loop. Becauseagain, the same scenario like we had overhere with index, where we had the add to carteach and every time you rerender. You createa function from scratch. So if this gets addedto dependency array, technically each andevery time when it gets created from scratch,well, you will rerender the component. Nowin a function, though, you also change thestate value. So you have that infinite loop.What is the solution? Well, remember, we haveour use callback, right? So we can go herewith use callback. And then I can set it equal.I can say use callback over here, one show.So let me wrap everything. And now I justneed to say, well, one, I would want to createa function. Of course, the answer is whenI have a URL change,for once the URL changes. Yeah, please recreatea VAT function from the scratch. And of course,once we have this setup, I can bravely growto use effect and just add Mark get product.Again, let me re emphasize the point wherepreviously, before we added this huge callback,if we simply would add theirs and get product,we would get a infinite loop. Why? Becausethis would get created each and every time.Now we only create a new function, launchthe URL changes. And of course, as a result,we're not getting this infinite loop. So thatwould be another use case for use callbackcall.\n"