React JS Crash Course
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1702980633_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React JS Crash Course
[Music] hey guys welcome to my 2021 react crash course so it’s been about two years or so since my last one and i wanted to create an updated version and this course is meant for beginners i’ll be explaining some of the core concepts and fundamentals of react we’re going to be building a task tracker application looking at components props state we’re going to use react hooks and we’re also going to be dealing with something called json server which is a mock rest api or kind of like a fake back end that we can use so i can show you how we would use react in a full stack application where we’re making requests to an api we’re going to look at routing and a whole bunch of other stuff so the first thing i want to do is just go through some slides and then we’ll go ahead and jump into writing code so first off what is react the standard definition is it’s a javascript library for building user interfaces and you may have heard of it referred to as a framework i refer to it as a framework most people do and i’ll talk about why in a second now react is uh it was created and it’s maintained by facebook it’s strictly front end meaning it runs in the browser when you have a web app that’s built with let’s say php you’re you’re running php on the server your app is hosted on the server and then it serves html templates or html pages to the client with react you build what’s called a single page application or a spa where you have a single html page and then all of your routing all that stuff is done through react which then compiles to a javascript bundle that’s loaded by the browser so it makes for really fast and interactive interfaces now even though react is a front-end framework so if you can’t directly for instance communicate with your database it’s often used in combination with other technologies to create a full stack application for instance the mern stack which is really popular it’s mongodb which is a type of database express which is a back-end framework react and then node.js which is a javascript runtime you could also use react on the front end and use php laravel on the back end or python django and what you would do is you would you would serve json data from your server and you would make requests from react to the server to get data to to add data update delete and so on now as far as being a library versus a framework most people call it a framework and that’s because it’s directly comparable to something like angular or vue.js now it doesn’t have as much included as angular does like angular has a built-in routing system react doesn’t you just have to install an extra package called react router dom so it has an entire ecosystem of packages that you can install to make it function as a full-fledged framework now as far as a library goes when i think of a library i think of like jquery low dash something where you you pull utilities in and you use them in your application react doesn’t work like that it works more like like angular or view and those three are actually the top frameworks in the industry right now uh i would go as far as to say react is the most popular but the other two are great as well i have crash courses on those i’ll be updating soon so when you’re choosing one of these three frameworks if you’re you know if you’re going to be a front-end developer or full stack developer you just want to compare them use each one test them out see what what you really click with and also look at jobs in your area if that’s what if that’s what your goal is all right so we know that react is a front end library slash framework now why would you want to use it there’s actually a bunch of reasons but one of the biggest is it gives you a way to structure the view layer of your application so mvc or model view controller is a popular design pattern for software the model deals with the data the controller deals with the requests and routing and then the view is the ui the user interface the part of the app that the user sees react is basically the v in mvc now if you’ve tried to build a large dynamic interface using javascript vanilla javascript it can get really messy your html your styling and your javascript logic are just all over the place and everyone writes vanilla javascript differently react allows you to build your ui using what are called reusable components so every part of your user interface is looked at as a dynamic component that can hold its own state and data we also don’t have to separate our markup from our logic because react uses something called jsx or javascript syntax extension and this allows us to to basically write dynamic html it’s actually javascript but it’s formatted like html we can even embed javascript expressions variables etc now the apps that you build with react are very interactive because it uses something called the virtual dom which is the document object model so it what this does it allows you to update parts of the page that need to be updated without reloading it so if you have a list of users or in our case a list of tasks and you want to delete one of them it doesn’t have to reload the page it does everything behind the scenes if you were to build let’s say a traditional php application where you’re just serving html templates every delete you make it most likely is going to have to refresh the page so this makes things much more faster more dynamic and interactive react also has performance and testing benefits another huge reason to learn react is it’s it’s very big in the industry right now just by the way it structures everything it makes it much easier to work on projects with teams rather than just having you know a bunch of jumbled javascript so managing data is also really easy with one-way data binding all the data in your state is immutable meaning you can’t mutate it directly and react provides ways to to basically recreate your state every time that it needs to be changed so this this helps with debugging and also offers better performance so what should you know before learning react this this can vary depending on on person to person but generally you want to have a good handle on javascript you don’t want to go from learning html and css and then jump right into react you should know all the fundamentals of javascript including things like data types variables functions loops etc in react and javascript in general you work with a lot of asynchronous code so you should be familiar with things like promises array methods such as for each map filter reduce these are all commonly used in react applications so get familiar with those doing algorithms that’s a really good way to practice these array methods and then the fetch api is used to make http requests to either your own back-end server or to a third-party api for example the github or youtube api so get familiar with fetch again i have crash courses on most of the stuff that you can check out if you want so as i said with react in pretty much any front-end framework you’re going to be looking at your user interface as a bunch of components so here’s the app we’ll be building it’s called just called task tracker it’s pretty simple you just add a task with a day and a time you can set a reminder and you’ll be able to double click and and set the reminder to either true or false which will show this border and we can delete and so on now over here i just have outlined or created a border around each of the components so we have the green around the header component and inside the header we have a button component we have the add task component here which we could actually break down even further and create input components as well if we wanted to down here we have the tasks component the purple which wraps around all of these and then each individual task is also its own component all right then we have down here the footer component we’re also going to look at routing a little bit so we’ll have we have this about link and that’s going to go to a separate route that will show the about component all right so you can go to any website or any ui you go to twitter and and look at the different components the list of tweets each tweet itself the the box to post a tweet your all your followers everything can be looked at as a component so that’s kind of the mind frame that you want to be in when you’re working with react or even angular view now as far as how we create components in react they can be created with both classes and functions or functions i should say now we’ll be focusing mostly on function components with hooks which seems to be kind of the more common way to do things these days in my 2019 react crash course we focused on classes so if you really want to dive into into class-based components you can check that the older crash course out so on the left we have a component called header this is formatted as an arrow function but of course it could be a traditional function as well it simply returns a div with an h1 now on the right is the same component as a class and you can see it’s defined as a class and it extends react.com which is going to give us everything in the in the the root component class to work with including the render method which takes care of rendering it out on the screen and in render we’re just returning the same thing we’re returning here now what’s being returned looks like html but it’s actually just syntactic sugar for javascript which is called javascript syntax extension or jsx and it’s similar to the html syntax aside from a few things like instead of the class attribute you have to use class name but in addition to that you can also put any kind of javascript expression into your jsx to make it dynamic and then once you have your component created you can embed it into other components with this type of syntax which is similar to like xml so we would just have header we can also pass in props which are basically attributes so we could pass in a title of whatever we want into the component and then work with it inside of the either the function or the class whatever we’re using all right so components are not just static markup they’re dynamic and they can contain something called state so state is basically just an object that determines how a component renders and behave so an example would be if you have let’s say a collapsible menu that would have an open and closed state so you might have a state object in your component that has a value of open that could be either true or false now if you have a list of users or tasks or whatever it might be that’s also part of the state so any data that you bring into your components that’s going to be part of the state and a lot of times you want to share that data across multiple components so in that case you would use what’s called either app state or global state now sometimes you end up having just a ton of app level state that gets really difficult to manage so in that case you have a few options you could use the context api which is built into react or you could use a third-party state manager like redux which is way beyond the scope of this crash course but i did want to mention it and i do have other videos on those now prior to react version 16.8 we had to use class components if we wanted if we wanted to hold state so function components were actually called dumb components because they couldn’t hold state however in version 16.8 react introduced something called hooks which allow us to use state and other lifecycle functions within function components and that’s what we’ll be focusing on in this crash course specifically the use state hook which allows us to return a stateful value along with a function to update it there’s other hooks as well use effect is used to perform side effects in function components we’ll be using that towards the end um one of the biggest uses for use effect is to make http requests when the page loads so if you’re fetching data from an api on page load you’ll want to use use effect there’s a bunch of others as well there’s use context user reducer but those are beyond the scope of this crash course all right so if those last few slides didn’t really make much sense at all don’t worry about it because we’re going to do we’re going to have plenty of examples throughout the course and throughout this application that we’re going to build so we’re going to build out our user interface first and then also implement towards the end something called json server which we’re going to use is kind of a fake back end so you can see how react would work if you were building a full stack application and making requests to a back end or an api all right so enough with the slides let’s go ahead and jump in and let’s get started with react all right so we’re going to get started now there’s a bunch of ways to basically start a react application one of the most common and easiest ways is using a program called create react app which is a cli it’s a command line interface tool to just easily get up and running and set up a boilerplate with all the files and folders and packages that you need it also has a development server it has a way to build out your static assets to deploy so to install this we need to use npm which is the node package manager and in order to use that you have to have node.js installed on your system i’m sure that a lot of you already do if you don’t just go to nodejs.org download it install it doesn’t matter if you’re on you know windows mac or linux another thing i would suggest installing is the react dev tools if you’re on chrome there’s a chrome extension there’s a firefox extension as well and it just allows you to kind of see all the components and props and state of your react application so we’re going to install this we’re actually going to use the npx command instead of installing it globally with npm what this does is it just runs create react app and creates the the folder for us rather than installing create react app on your system so first of all make sure you have npm you can do npm-version make sure it’s above 5.2 where you won’t be able to use npx and then let’s do npx create dash react app and i’m going to call this task dash actually let’s call it react dash task dash tracker because i will be doing a vue.js in angular course and we’ll be doing the same application and this is just going to set up all of the files and folders that we need it’s going to install all the packages that we need and so on okay so that’s all set now you just want to open that folder up in your text editor i’m using vs code so i’m going to cd into what i call it react dash task tracker and i’m going to run code and then dot which just means i want to open vs code in the current folder all right so now over here you can see all the files and folders i’m just going to make this bigger for now and i just want to go over some of this so package.json if we look at the dependencies that are included of course we have the react library we have react dom which is responsible for rendering our react application out to the document object model to the browser if you were to use let’s say react native you’d have the same react library but you would also have react native instead of react dom okay react scripts comes with you know the development server the build tool and so on everything that create react app offers and then you have some testing libraries which we’re not going to get into in this crash course down here we have our start script so npm start will run the development server on local host 3000 npm run build will build out our static assets for deployment and we have tests for testing and then eject will basically allow you to if you want to like change something in the webpack config if you want to expose other libraries and packages that are kind of hidden that run behind the scenes you can eject but there’s there’s really not a lot of cases in where you would have to do that all right so let’s go ahead and run the dev server i could run it just in my terminal here but i’m going to go ahead and command tilde and open up my integrated terminal envious code so from here we can run npm start and that’s going to start up the dev server so this when this starts up on localhost 3000 this is the development build if you look at the react dev tools if you installed them it says this page is using the development build of react if you deploy i’m sorry if you build you’ll have all your static assets in the build folder if you run it from there it’ll say it’s the production build all right so let’s close this stuff up we don’t need that and i’m just going to we’ll make this smaller so we can see both of these at the same time and i just want to go over some of the other stuff we have here so in the public folder we have an index.html so this is essentially the the single page of the single page application that’s being loaded and it’s actually really simple there’s a bunch of comments here that make it look more complicated than it actually is so we’ll just get rid of these but it’s just a simple html file and we have some meta tags and some stuff in the head but if you look in the body all there really is is a div with the id of root so this is kind of the gateway to our ui to our react application and the way this works if we look in the source folder which is where we put all of our components and state and everything that has to do with our app that we’re building if we look in the index.js here which is kind of the entry point for react we’re importing react or importing react dom and then there’s a method on reactdom called render and what we’re doing is we’re grabbing that div that i just showed you with the id of root with document.getelementbyd root and we’re inserting our app into that div now this app comes from app.js which we’re importing right here and app.js contains the root app component so remember i said to think of everything in components well app is the root app i’m sorry the root component so every component that we create like our header our events footer the ad form although all that stuff is going to be in this main root app component okay and then that is what’s being put into that div right here okay so i just wanted to kind of explain that now uh let’s actually just want to change the title here we’ll change it to task tracker and you could put like a if you want to use the bootstrap cdn or something like that you could use this file for that kind of thing but we’ll go ahead and save that and this updates right away or it should i don’t know why it didn’t that time but this will auto reload so i want to go into now app.js and this is the root app component and everything that you see here is coming from this component here so we’re importing logo which is uh this logo svg it’s this spinning react logo we’re also importing an app css file which is just some basic styling and then we have a function now remember components can be functions or classes most people these days seem to use functions with hooks which is what we’ll be focusing on but this could this could be a class i might give you an example of that but if we look in the return of this function it looks like html but this is actually jsx javascript syntax extension and there’s a few differences for instance you might notice class name we can’t use the class attribute to assign a class we use classname same with four if you have a label with a four attribute you don’t want to use four in react you would use html4 like that all right so just keep that in mind um you cannot this is also dynamic we can have javascript expressions and variables here we’re bringing in logo adding it to the source of the image what i’m going to do though is just get rid of everything that’s inside of this div and for now let’s just put if you want emmett to work in here you can see it’s not working right now it might for you if it doesn’t click where it says javascript you can change that to javascript react and then it should work so let’s just say hello from react for now i’m going to save that and this will auto reload and we don’t need to bring in the logo and app css and we also don’t need some of these files anymore so logo i’m going to get rid of app css i also don’t want app test and setup test since we’re not dealing with that so we’ll go ahead and delete those four files just to clean things up a little bit now when we’re returning this this jsx here you can only return a single parent element so you can put whatever you want in this div and it doesn’t have to be a div it can be a paragraph it could be a heading it could be just a fragment which i’ll show you in a second but if i go under here and i try to put like let’s say an h2 and i say hello you’ll see i’m already getting an error here and it won’t compile so it says jsx expressions must have one parent element so whatever you return it has to be a single element and then anything else any other other components or whatever you want can go inside of it so i’m going to move this h2 up into the div and that should fix it okay now let’s go ahead and open up the dev tools here i’m going to go to the elements tab just to show you what what this compiles to so we have a div with the id of root that wraps around our entire ui and we have this div with the class of app and then our headings so we’re seeing this right here now obviously class name is going to compile out to just a regular html class if you don’t want to have a div or any element around like these these headings or whatever we have in here we could just use a fragment or just an empty angle bracket if i save that and we check it check this out it’s just the h1 and h2 of course we still have the root div which wraps around everything but as far as this component goes it’s not going to have a div or anything wrapped around these but i actually do want a div and i’m going to have a class name of container for some styling that i’m going to add later okay so you’ll see that that gets changed to div with the class of container now we can add expressions in here we can use variables so for instance if i were to say const name and make sure you do this above the return of course and set a name to brad and i go down here and i put in some curly braces i can then put name in here and i get hello brad okay i can also do like we could say one plus one and that’s going to render out to two i can do conditionals as ternary operators so let’s say const x equals true and then i could go down here and i could say if x then we’ll show yes else then we’ll show no and this is just a ternary operator so hello yes if i change this to false and save we get hello no all right so you can write javascript directly in here which makes it really nice really it really dynamic all right so i’m just going to get rid of that and now we’re going to work on just creating our own components okay remember i said to think of your your app or your user interface as just a bunch of components so we’re going to start with the header i’m going to go over to source my source folder create a folder called components and this is where we’re going to create all of our components the first one we’re going to call let’s see we’re going to call this header.js uppercase oops didn’t mean to do that uppercase h that’s just the convention for components and this could be a class or a function and there’s an extension for vs code that i’d highly recommend if you’re using it if you’re using vs code and that’s es7 react redux graphql react native snippets which has a bunch of snippets for things like imports exports even like loops and just regular javascript stuff but it also has these these snippets for components so rcc will create a class based component rce will create a class component but it will export down at the bottom here the one that i like to use is the arrow function it’s i believe it’s rafce this one right here so it’s nice and and and clean it’s just an arrow function that exports down at the bottom so what i’ll do is just do our a with that extension installed r a f c e enter and that creates just a boiler plate of a component of an arrow function component now this here it’s importing react because this used to be required for every react component however we don’t need this anymore so we can actually get rid of it now as far as what i want to output for the header i’m going to use a header tag as my just parent element and then we’ll put an h1 in here and we’ll say task tracker now if i save it nothing’s going to happen we because we just created the component we didn’t put it into our application so back in our app.js let’s go ahead and import header from and we want to go into dot slash components slash header and we just embed it just like it was uh like an xml tag so header just like that save it and now we have task tracker now just to show you a class based component real quick i’m just going to comment this out and if we use a class we do need to import react from react i haven’t i haven’t done a class in quite a while so we could say class we’d call it same thing app but we need to extends react dot component because we need all the life cycle methods and all that and then we’d have a render so render takes care of the output and then in this render we would return whatever we want as far as jsx i’ll just put in h1 and say hello from a class now if i save that i believe we’re gonna have to reload since we yeah so now we get hello from a class and just make sure we have no errors here header is defined but never used that’s fine all right so i mean if you want to use classes you can and you can check out my older crash course if you want to just use classes but i’m going to go ahead and delete that and that and let’s uncomment this and there we go so now we have our header back now i want to talk a little bit about props because you can pass stuff in here like if we want to pass in a title to our header and for now we’ll just say hello now it’s not going to do anything because we’re not handling it but we can pass anything we want in to retrieve this prop inside of our component here we take in props as as a parameter and then down here let’s say we want to replace this static text with our props dot title if i save that now we see hello because that’s what’s being passed in now we can also have default props so if i don’t pass anything in here and i save that that’s not going to show anything because there’s no title however i could go below the the function the component say header dot default props and set that to an object and set the title to task tracker now if i save that that’s going to show up because that’s the default if i were to again pass something in here it would overwrite the default now this props dot title we could we could clean this up a little bit props is going to it’s just going to be an object of whatever props you pass in so we can destructure so we can just add curly braces and take in the title and then down here we don’t need to do props dot title we can just go like that and that’s going to give us the same exact result now there’s also prop types which is kind of like a built-in type system for your properties it’s not like it’s not something you have to use but it’s something that will will help you out and make your code a little bit more robust i’m not going to focus on creating prop types for everything but i just want to kind of show you how it works now with the extension the es7 react extension you can do impt to import prop types and then what we can do is go down here and say header dot prop types lower case set that to an object and we know we have a title so the title and we can create a type do we want this to be a string a number a boolean we want this to be a string so uppercase p prop types dot string now if i were to go back here and pass in let’s say title and pass in a number now if you’re passing in a number or a boolean or something you want to have it wrapped in curly braces but we’ll pass in a 1 and right away down here in the console it’s still going to render but you’ll see we get this warning invalid prop title of type number supplied to header which expects a string okay so it’s just a way to kind of make your code more robust and catch errors before they happen and you can also use something like typescript with react as well all right and then if it’s required you can do dot is required as well all right and we have a default prop so it’s not going to give us any error but if i were to get rid of the default prop and reload you’ll see i’ll get a warning down here all right so we’ll go ahead and keep keep header as is and i want to talk a little bit about styling because there’s a few ways you can do you know css within react so one is to just use a style sheet which is what ultimately we’re going to do i’m going to use this index css i already have some styles prepared but you can also use something like style components which is an external package that is really popular you can also use direct css in javascript so i’m going to give you an example of that so this h1 here we could set style and when you use style you want to use double curly braces if you’re doing it in line like this and let’s say we wanted to change let’s say color and we would set that to a string of you know whatever color value so if i set that to red if i want to add something else i’d put a comma like say background color now it’s not going to be background dash color like css it’s going to be camel case like this and set it to a string so we’ll say black save that okay another thing we can do if you don’t want to do it in line like this you could create a variable down here we could say our heading we’ll say heading style and set that and then just grab both of these cut that out put those in here and then use single curl single curly braces here and pass in our heading style and that’s going to do the same thing all right i’m not going to be using this except where we have some dynamic styling so i’m going to get rid of this but i will keep this down here just to kind of remind you that you can do this we’ll say css in js all right now i’m going to add some css so this index style sheet we’re going to get rid of that and you can get this code you can get this whole this whole thing in the github repository in the description so just grab the styling paste it in i’ll go through it real quick it’s pretty simple we’re using the poppins font we have a reset the container is going to be 500 pixels wide with a border header is going to be flexbox we’re going to have a button on the side button classes button styles events so our list of events will be styled our form and form control and then our footer so pretty simple i’m going to go ahead and save that and it’s going to look like this let me just make this a little wider like that all right so we’ll close that up and we shouldn’t have to touch the index css anymore now the next thing that i’d like to do here is um add a button so next to the h1 let’s put a button here and this is going to say add for now so we save that yeah we also want to add a class here of header because that’s what i have in the style sheet that’s going to make it a flexbox and align it side by side and then i also oops that should be class name and then i also want to add a class name here of btn i’m using single quotes all right so now we have our button so as far as components go you can make whatever you want into a component so if we want this if we want to create a button button component in case we want to add more buttons with maybe different colors and different texts and events we can do that so i’m going to create a file in components called button.js and we’re going to just map out a function here and we don’t need this so i’m actually going to copy or not copy but cut this out of here and we’re just going to return this button directly and then in our header we’re going to bring that button component in so it’s in the same folder so just dot slash button and then we’ll put that here and we’re going to see the same result now i want to be able to take in a couple props into this button so one will be color so we’ll pass in a color of let’s say green we’ll have text let’s say add actually let’s change it just so we can make sure that we’re actually seeing that so we’re passing in a green and text prop into buttons so remember we catch props here we could just use props and use it as an object but i’m going to destructure that object and take color and text and let’s add right here instead of the static add text we’ll add our prop and then for the color we’ll go ahead and add style and set that to let’s use double curly braces here and we’re going to actually set the background color so background color is going to be set to color so we’ll save that and now we have a green button that says hello so if we wanted to add other buttons you know we could copy this down and this one here oops this one here we could say hello one this one hello three and we could change colors blue red so this is what what i mean by reusable components obviously that doesn’t look good but you get the point we can have we can reuse this component with different props so i just want the first one and i’m going to change the text to add and save that and then in our button we can also have you know default props so we could say button dot default props and we could set the color let’s set that to we’ll use i don’t know steel blue and we could also use our prop types so up here import our prop types and button dot this actually won’t this first one is going to be lower case this confused me for a long time so we have our text which is going to be prop types dot string and then we have the color prop types dot string now we’re going to be we’re going to get into events you know quite a bit throughout this course but let’s just let’s talk a little bit about that now so let’s say i want to have an event on this button i could just add right here i could say on click and set that to a function called on click and i could go up here and create that function so const on click and we could do a console log and just say click so if i go over here if i click you can see it’s going to log that down here you can also pass in the event object so if you want to get you know the position of the the element that’s clicked or whatever there’s there’s a lot of things you can access with that um but since this is a component where it’s not always going to have the same click so what we’ll do is we’ll have that click as a prop right so in here let’s say on click and for now we’ll just set this to a function here called on click in our header so const on click this isn’t going to stay i’m just putting it here for now and we’ll say console log click all right now this is getting passed in as a prop so in our button we have to catch it here just like we did with the other ones and we can get rid of this because what’s going to happen is this will call this on click and it will get sent up to the header or wherever you embed this button now down here in the prop types we could add on click say we want that as a prop types dot funk because it’s a function and we could say it’s it is required because you’re most likely going to want a button to click uh well actually no we’ll get rid of we don’t need that and it’s required so we’ll save that now if i go and let’s just reload that and click add we see click okay because we embedded this button component and we had the on click prop just call this function here now we’re going to later on this is going to toggle the the form but we’re not going to do that just yet i just kind of wanted to give you an idea of how events work i could also i could have made it a double on double click on submit there’s a whole bunch of different events that you can add now i want to start to talk about state and we’re going to start dealing with our tasks so let’s close up header and button and we’re going to create in components i’m going to create a new file called tasks.js so this is our task component so let’s sketch out a component here and we can get rid of this and for now i’m just going to create a variable called tasks up here and set that to an array and i’m just going to paste in three different tasks they’re just objects with an id text day and a reminder which is just a boolean value all right now ultimately this is not the way that we want to do this we want the task to be part of our state so i’ll show you how to integrate that into our component in a minute but i just want to first show you how we can map through these or loop through these tasks and output something based on you know for each one so we do that by creating what’s called a list and we create a list by using the map array method which is just javascript you should be familiar with like for each map filter and so on i’m not going to really explain those too much but in this tasks let’s uh we actually don’t need a div so we’ll just use a empty fragment here and then i’m going to open some curly braces and take my tasks and we want to do dot map to create a list now map takes in a function so i’m going to use an arrow function and i’m going to set this just to some parentheses with some jsx inside now for each task i’ll call it task and then in here let’s just for now we’ll put an h1 let’s do like an h3 and let’s say we want the task dot is it text yeah so we’ll just get the text for each one and i’ll put that all right if i save that nothing shows because we haven’t brought in the task component yet so let’s go up here into app.js and let’s say tasks tasks and then go under the header here and say tasks all right so we’ll save that and notice that it’s showing an h3 of each of the task text okay so um in addition to that we have a warning that says each child in a list should have a unique key prop so when we use dot map in here and we output jsx that’s called a list so the parent of the list which in this case is an h3 should have a key prop and that should be something unique so we’ll use the task.id because those are unique so if i save that and we reload that’s going to get rid of the console warning down here now ultimately like i said that we don’t want this to be separate from our component we want this to be part of our state so what i’m going to do is just cut the array itself and delete this and to use state inside of a function we use whoops we use a hook called use state so let’s say imports and then in curly braces we want to take you state and that’s from react directly okay now the way we do this is above the return we’re going to say const brackets and then what we want to call this piece of state which is tasks and then a function to to update the state which we’re going to call set tasks we want to set that to use state and then in here is the default that we want to use for this piece of state for our tasks which i’m going to go ahead and just paste in that array all right now if i save this you’ll see that there’s no difference here because this tasks variable is still you know it’s still being used right here except instead of having it come from outside of our component it’s now part of our component state if we wanted to change any part of the state we would use set tasks it’s important to know that you wouldn’t do something like tasks dot push if you wanted to add to it because state is immutable it’s not something that you can directly change you basically recreate it and send it down it’s it’s it’s one-way data so you would to do that you would use set tasks instead and then change it to you know whatever you want if you wanted to spread across what’s already there and then add a new um a new object you could do that now we don’t really want to have our tasks in the tasks component because we’re going to want to access these from other components so you could use something like the context api or redux where you would have a kind of a store that that hovers over your ui where you could pull you know different pieces of state from but we’re not going to get into that so what we want to do is just put it in our app.js that will make it our global state then we can pass it down into components that we want as props so what i’ll do is take this we’ll cut that out and we’re going to instead put that in our app.js and then i’m also going to take this whole thing where we define this task and set tasks and cut that all right and then we’re going to put that in our app so this is going to break for a second don’t worry about that but we’re going to put that in here so now this is part of our app component state or our app level state and what we can do is take our task and pass them in to our task component as a prop so we want to set tasks equals tasks it’s still not going to work because tasks right here isn’t defined but remember it’s being passed in as a prop we could do props and then props dot tasks or we can just do structure and tasks and now it works okay if i reload console should clear so now we have our state where it should be which is at the top level because we want to be able to use these within other components or we may want to if we keep it in task we can’t we can only use it in you know components we embed in here or we would have to send it up it’s just it gets really messy so the next thing i want to do is instead of just rendering out an h3 for each task i want to have a separate task component so let’s create a new file called just task singular js and let’s create a component and what we’ll do here um how do i want to style this or format this let’s do a div and give this a class name uh oh you know what my css i believe is wrong i have events because i was going to use events instead of tasks let me just change this this will be different this will be correct in your version but let’s say task instead of event and save that okay so now we’ll set this class name equal to task and then in here we’ll have an h and we’re going to get passed in here actually for now let’s just say my task and then what i’ll do is in our tasks we’ll import the singular task component so that’s going to be from dot slash task and then instead of an h3 this is actually going to be a task component and instead of doing this like instead of wrapping this i’m just going to get rid of that go like that we’re still going to have the id but we want to pass in each task as a prop okay so we’re looping through them here and then we’re outputting a component and we’re passing the task in as a prop so we’ll save that and now all we’re seeing is my task because that’s all we’re putting here however we’re going to catch that prop we’re going to take in the actually we don’t yeah we’ll just say task and in the h3 we’ll say task dot i think it’s text yep so now we’re seeing our task text task text i feel like i’m saying a freaking nursery rhyme song so in addition to that we’re going to want let’s do a paragraph and we have the day so task dot day save that there we go looks good um see what else do we want to do we’re going to want to have an a delete icon so i guess we can do that um you could include the i’m going to use font awesome you could include font awesome the cdn in your index html in your public folder however what i’m going to do is install react icons which allows you to use multiple icon libraries so i’m going to leave my dev server running open a new tab and say npm install react dash icons so that way we can just bring in an icon that we want to use and use it instead of you know using a cdn okay so react icons is installed and if you look in your package.json you should see react icons anything you install with npm as long as it’s not as long as it’s local and not global you’re going to see in here so we want to bring in a specific icon so we’re basically using icons as react components we’re going to bring in fa times which is the x icon from react icons and then slash fa for font awesome because there’s multiple libraries that you can use with this and then i’m going to go let’s see let’s go within the h3 right here so after the after the text we’re going to put in f a times just like we would put in any component and save and i think we have to restart the server after we install react icons so i’m going to go back to my dev server and stop that control c command c npm start and there we go so now you can see we have the x icons i am just going to i want to make them red so i’m going to add a style to this so say we want the color to be red and let’s make the cursor a pointer all right so now we have our delete icons now we want to make it so that when we click this it deletes that particular event but how do we do that when we don’t have access to the events here remember the the events are stored in the app.js and the app component now if you were using like the context api or redux there’s ways to to access your state from within components pretty easily but redux i mean there’s a lot of boilerplate and it can be a little difficult to learn like reducers and stuff like that so in this case what we can do is just use props we can send down a function as a prop and then fire that off when we click in here so in the app.js let’s create a function so whenever we want to delete a task or add or anything like that it’s going to be in this file so let’s say delete task and we’ll create a function called delete task and that’s going to take in a specific id and for now we’re just going to console log the text delete and we’ll also log the id all right now we’re going to pass in a prop to tasks because remember a task where the where the actual button is that is in the task.js and then that’s in tasks so we want to pass in let’s call this prop on delete and basically when that’s fired off it’s going to call delete event all right now on delete is now a prop of oops delete event i’m sorry delete task i’m going to do that a few times through this because i decided to change it to tasks at the last minute so this is going to be delete task all right and then on delete is going to be a prop of tasks so just like we passed in tasks we want to pass in on delete and then that’s going to get passed in here as a prop as well because that’s where we want to use it so on delete equals on delete and then in task again pass in on delete as a prop however we want to call that on a click right so in this fa times let’s say on click and set that to on delete which is going to basically work its way up to here and call delete task so state gets passed down actions get passed up so if i click this we do get the delete text but we also see this event stuff because that’s what’s being passed in here by default if i want to actually pass the id in what i have to do is in on the on click here instead of calling onto undelete directly we call a function and then call on delete and pass in the task.id so now if i click on one of these i get delete one delete two delete three so we’re able to now click on these and call this function which is in the app.js where we have access to the state all right now in order to actually delete get rid of that console log so we want to call set tasks because that’s how we deal with with this with our mutable state and we’re going to take the tasks that are already there and just filter so dot filter is a high order array method you should really know this stuff before getting into react but basically this takes in a function so we’ll say for each task i want to filter so we’re going to filter where let’s say task dot id if the task id is not equal to the id though that’s what i want to show i don’t want to show the task with the id because we’re deleting it okay so this is just within the ui so if we save that and i reload and i click on the x here you’ll see that it goes away because it’s filtering out it’s setting the tasks to the filtered tasks all right now if i wanted to make it so it shows like a message if there’s no tasks i could go down to here and wrap this in curly braces and i could say if tasks dot length if it’s greater than zero then show tasks else show nothing so if i save that wait what am i doing if task.length else show nothing no i want to show no tasks to show all right so there we go so if there’s nothing there it’s just going to give us that message if i reload they’re all going to come back because remember this is just the ui that’s what react does you can turn this into a full stack application by having a back end some kind of api that you can make requests to and fetch data from which we might do at the end with something called json server all right so we’re able to delete these now let’s do the um let’s do the reminder i want to be able to double click and add a specific class and if you look in the css i have a class called reminder with a green border on the left so basically what we want to happen is when we double click we want to change whatever task we’re double clicking change the reminder to the opposite of whatever it’s set and if it’s true have that border so i’m gonna again start in the app.js just like we just did with the delete and let’s say toggle reminder and we’ll create a function here let’s call it toggle reminder and it’s going to need the id because it needs to know which one to toggle all right actually let’s call it reminder no that’s that’s fine so toggle reminder and for now again i’m just going to console.log the id and we need to pass this down just like we did with the delete so inside task let’s say on we’ll say on toggle and set that to toggle reminder and then in tasks also pass in the prop of on toggle or i should say catch the prop and then here pass into a prop of on toggle set that to on toggle and then inside task what we want to do is on the div okay not on the um not on the on the delete button obviously we want to do this on the main div so i’m going to add let’s say on double click and we’re going to set that to and this should get passed in on toggle so on double click we’re going to call on toggle all right now again we need the id so let’s just do a function and then call on toggle and pass in the id so now id is not defined that’s because it should be task dot id because we’re passing in the task as a prop all right so now if i double click one of these it’s going to show the id so when i double click it runs this right here now what do we want this to do we want this to of course toggle the reminder either from true to false or from false to true so there’s a bunch of ways you can do this i’m going to use of course we need to use set tasks and i’m going to use map so we’re going to say tasks which is our state our task in our state we want to map through and for each one we’ll call it task and i’m going to say where the task dot id so if the task id that were you know in the current iteration is equal to the id that’s passed in then we’re going to have a specific object else it’s just going to be the the task is no change right because we don’t we only want to change the one that we’re dealing with so for the one that we’re dealing with the object i want to copy or i should say spread across all of the task properties and values but i want to change the reminder so the reminder i’m going to set to the opposite of whatever that specific task reminder is if it’s false it’ll be true if it’s true it’ll be false so i’m going to go ahead and save that and i haven’t even used the react dev tools yet so if we go down to components here we can see our component tree we have each task and if you hover on that you can see the different props the task itself on toggle on delete what i want to look at is we could look at this but let’s look at app and you can see our state right here which is our three tasks and if i look at the first one doctor’s appointment reminder is set to true now if i double click now it’s set to false okay because we double clicked it called this function and we set that particular task to change the reminder to the opposite of what it was if i click it again goes to true so we know that’s working but there’s no there’s no there’s nothing in the ui that lets us know that so what we’ll do is go back into task and remember we have that specific class of reminder that we’ll add a border to to the edge so let’s go so we have class name equals task what i’m going to do here is make this into an expression and some backticks and i still want the task class that’s going to be there no matter what and then i want a condition here so in a template literal here we’re going to say if the task dot reminder is true then we’re going to have the class of reminder else then it’s just going to be nothing so if i save that you can see the first two have the green border because those are true if i double click it goes away double click again comes back okay so it’s this is coming down from our state this task and we’re checking the reminder okay so we can just toggle these and we can delete them now it goes back to the default because we’re just setting i mean this is just kind of like static data that we have as our default data if you’re using a back end you’d be making fetch requests or http requests to your server as well so now let’s start to work on the the ad form because we haven’t even created that yet so in components i’m going to create add let’s call this add task dot js and we’ll go ahead and create a component now this is going to be a form so instead of a div this will be a form we’ll give this a class name of add dash form and then each each label and input is going to be wrapped in a class of form control so let’s say div class name and set that to form control and then we’ll have a label so this label will just say we’ll just say task for the label and then input will have a type of text and let’s add a placeholder and set that to add task okay there’s other stuff we’re going to add to this but i just want to get the form displayed for now so i’m going to copy this form control down twice and this next one is going to be the day we’ll say day and time type is text and then for this we’ll just say add day and time then this one is going to be let’s say reminder or set reminder and it’s going to be a check box so let’s change change the type to check box and get rid of the placeholder we don’t need that and then i just want to have a submit so we’ll do an input with the type of submit and then let’s have a value the value will be save or save task all right so we’ll save that and then let’s just we’ll embed this into our app.js so i’m going to copy this down and set that to add task set that to add task and then right below let’s see right below the header add task now if i save that we should see our form uh oh one thing i forgot is some classes just the styling so this the check box form control i also have form control i think it’s just form control check yeah and then for the button down here the input submit let’s say class name and that’s going to be set to um btn and btn block okay let’s make that look a little better and let’s just open up our console make sure we have no errors all right now each input is going to have its own piece of state component level state not app level state so let’s bring in use state from not const what am i doing report use state from [Music] react and then right above the return we’re going to have first one is text and set text is the method to update the state the default is just an empty string and then we have set day for the day input and then we have reminder set reminder and the default for reminder is going to be false all right so we have that now down in the input the first one of text let’s go right here and the value of this is going to be the text from the state but we also need an on change because when you start to type in the input that’s going to fire off this on change it’s a controlled component so this is going to have a function we’re going to pass in the event object and directly call set text from here and set it to e dot target dot value which is going to be whatever is typed in all right so i’m going to copy this value and on change and go to the next one of day except this is going to be day instead of text and the function to change that is going to be set day and again it will be set to the target value which is whatever is typed in so check box i’ll paste that in this is going to be the reminder state and this will be set reminder right and then instead of target.value because this isn’t an input it’s a checkbox we can get current target dot checked which will give us either a true or false value if that’s checked or not all right so that should clear up if i reload now to check this if we go to our react dev tools so down here where it says components we can see all of our components and if we go to add tasks we should be able to see our state so right here you can see each one of these is the three inputs if i start to type in the text and i say text because that’s what we called you know that piece of state we can see it down here if i type in a day we can see that if i check set reminder you can see that that all right so we know that’s working now as far as submitting this we’re going to have to have a function in our app.js because we’re going to be dealing with our tasks so let’s put this above the delete we’ll say add task and let’s say const add task so for now let’s just do a console log it’s going to take in as far as what this takes in we’ll just say task and yeah we’ll just console log that now we have to pass this in or we have to pass a prop into add task let’s say on add and then that’s going to call add task okay now in our add task component we want to take in on add and what i’m going to do is add a submit event here so on submit and set that to on submit and then on submit is going to be defined in here const on submit because there’s a few things we need to do so we’re not calling on add directly so on submit that’s going to take in the event object because we need to e dot prevent default so it doesn’t actually submit to a page and then once we do that i just want to do a little bit of validation for the the text the task text so let’s do let’s say if and we’ll say if not text then oops and we’re talking about this piece of state which is connected to this input so if that’s not there then let’s do an alert and say please add a task and then return all right if that passes then we’re going to call on add and we want to pass in into on add we want to pass in an object with the text the day and the reminder okay then i also want to clear the form so i’m going to call set text again and clear it and then we want to clear day set day and then set reminder which is a boolean so that’s going to get set to false all right now i want i want it to be unchecked if it’s false so down here we have our check check boxes can take to take in a checked value which will be true or false so i’m going to say if reminder so if that’s true then actually no we can just set it to yeah set it to reminder yeah so we’ll save that okay now when i submit this what should happen is it should cause it should check to see if text is there so if i don’t have that filled in i’ll get an alert then it should call on add which is just going to call add task which up here is going to console log the task so let’s open up our console and we’re just going to type whatever in here and save so the form also cleared and down here you can see that we have our data now instead of console logging we we want to add this to our state so in order to do that i mean there’s there’s a bunch of ways we could do that i do want to add an id since we’re not dealing with a data a backend where it creates an id on on its own i’m just going to do something really simple here and use math dot floor which will round down math uh we’ll say math dot random we’ll make it uh up to like ten thousand and plus one so that should just give me a random number so if we console log id and i just submit this it should just log a random number good so we have an id so now i’m going to just create let’s say new task and this new task is going to be an object with that id and then i’m going to copy whatever the task text day and reminder which is passed in here i’m going to add that to the object as well all right then we want to use set tasks and we’re going to set it as an array we’re going to copy the current tasks that are already there but then we also want to add the new task onto it all right so let’s save that and now we should be able to add a new task i’ll just say test one test two set reminder save task and there it is and we can change the reminder we can delete it so now we’re able to add it cool so the next thing i want to do is this button here should toggle this form we want it to start off not showing but then we want to click this show it click it again to toggle it so we’re going to have another piece of state in our app.js and we’re going to call that let’s say const let’s say what do we want to call this we’ll say show add task and then set show add task which is going to be a boolean so set this to use state set it to false by default and then this form is going to be dependent on that piece of state so down where we’re embedding add tasks let’s wrap this in curly braces and say if show add task is true then show that component now this is just a shorter way of doing a ternary without an else okay we don’t need an else we just want to see if it’s true if it is do this if not nothing so we’ll save that and now it’s not showing now if i set the default of that show add task to true then it’s going to show it by default all right now we want this button to toggle that so we’re going to have to do a couple things with that now that button is inside of the header so if we go down to header let’s say let’s have a prop called on add now when that’s fired off we’ll have a function and we’ll call set show add task we want to set it to the opposite of whatever the value is so the opposite of show add task now on add is going to get passed into header as a prop so let’s say on add and right now the button on click is just set to this right here on click we just want to get rid of that and change on click to on add so if we save that and just open up our console here as well so if we save that i click add it shows the form i click it again it goes away okay now i think we should also change the button if it’s open change the text to close we could even change the color so to do that let’s see we’ll go back to app.js and where we have our header in addition to the on add prop let’s also just pass in whatever the value of show show ad task is so we’ll set show add task to whatever show add task actually we can just call this prop show add all right and then back in the header say show add and it’s just going to be either true or false if it’s being shown or not so if it is let’s see so the text right now just says add let’s change that to be dynamic and we’ll say if show add so if that’s true that means we want to show that means we want to show close right because it’s being shown else then we’ll show add so save that and now it says close if i click it now it says add now also change the color it’s set to green right now so we’ll change that let’s say if show add then let’s make it red else then we’ll make it green so now it’s red close it now it’s green so you can see how this is where how this is where react is really valuable it allows you to make really dynamic interfaces and no pages are being reloaded or anything like that so i mean this is a really small application but you can see the value in this and i mean it might be a little intimidating at first but you can you really get the hang of it and you you see how valuable it is to do stuff like this in vanilla javascript is it’s just very messy and unorganized and much more difficult so let’s see what’s next we can show our ad form we can add we can delete we can set toggle i think that we’re pretty much done as far as like just the ui goes i would like to get into some http stuff dealing with a back end there’s something called json server that we can use it’s kind of a mock back end um so i think that will do that but before we get into any of that like making requests i just want to show you how you would actually build your static assets out if you’re ready to deploy so and it says right here use yarn build or npm run build depends on you know if you use yarn or npm but if i go ahead and i’m going to stop the server for a second and you’ll see that this by reload doesn’t work and i’m going to run npm run build and it’s going to create a an optimized production build in a folder called build and this is going to be your static assets this is what you would deploy and this used to confuse me when i first got into react was or any framework like this do i deploy my components folder or does the browser see that like i mean it was kind of confusing but no that’s all your development stuff build is where your is is your build folder that’s your where you push to production now if you want to try this locally you could install the npm serve serve package globally so we can go ahead and do that so let’s say npm install dash g actually after you if you’re on a mac or linux you’ll have to use sudo for permissions because we’re installing this globally and then serve it’s just this is just a basic http server so i should now be able to [Music] serve let’s say serv dash s and then the build folder and then i want to serve it on a port let’s say dash p 8000 all right so now if i go to and remember locals 3000 isn’t working that’s our dev server if i go to 8 000 there it is all right so this now if you look at the react dev tools icon it’s blue not orange and it says this page is using the production build so this is your production build this is what you would deploy i could delete all the rest of these folders right now and this would still work because this is our production build all right i hope that makes sense so i’m going to stop this and if you want to stop here that’s fine i’m going to keep going so that you can see how to deal with kind of a mock back end now there’s a there’s a really cool tool called json server and it basically allows us to create a mock rest api with our own data so we install it we’re not going to install it globally you will install it locally and then you can create a db.json with some resources and you can make post requests put requests patch and all that just like as if it were a real back end built with you know node.js and express or django or laravel or whatever it might be so before we start our react server backup let’s say npm install json server and this will install it locally so it’s going to get put in our package.json if you clone this repository it’ll be included in here now we need a way to run this so i’m actually going to create another script here called server and this is going to run json dash server and dash dash watch and then the port i’m going to run this on 5000 because i believe the default port is 3000 and we also have to put the name of the file db.json all right so this will run our server we can pretend that this is like a real backend that we created a rest api so let’s run here npm run server and you can see it actually created a db.json with some posts we’re going to delete this stuff but we also want to run our dev server as well so i’m going to open up a new tab and run npm start that’s our react dev server and the idea is we want to get data from here into here so first of all let’s change this data up so this is going to be tasks and we’ll delete get rid of that we just want our brackets and then i guess what we can do is just copy excuse me copy the from app.js these objects oops these task objects we’ll cut those out and this is the use state right here for tasks is going to be just an empty array if i save that we’re going to see no tasks to show and that’s that’s fine so here i’ll paste those objects in however we need to change these to uh json objects which means that the keys have to have double quotes and any strings have to have double quotes so just add these and no trailing commas either get rid of that now jason server actually creates ids for you just like a real database just like a real back end would so we’re not going to even have to worry about creating ids all right so that looks good now let’s see close that up so the first thing we’ll do is fill is let’s fetch our tasks from the back end from what and you can even do this right from your browser http localhost 5000 slash tasks and there we go we can also make post put and delete requests so in order to load them when the page loads we’re going to use a hook called use effect which is used to create side effects or deal with side effects and it’s often used to if you want something to happen right when the page loads so we’ll use this right below where we did our use states say use effect and this takes in an arrow function and we’re going to be using the fetch api with a sync away now we can’t do a sync like this on this function so we have to create one in here let’s call it let’s say fetch tasks and set that to a sync and then here let’s say kant’s response or res equals await because fetch returns a promise so we want to await that promise and http localhost port 5000 slash tasks okay then we want the data so const data equals we want to await res.json that will give us the json data we’ll console log the data and then of course we have to call fetch tasks all right so we’ll save that we also want to add a dependency array here if you have a value where you want this to run if that value changes you would pass it in here like user or something we don’t have any dependencies but you want to pass in just an empty array alright so now you can see as soon as the page loads we’re getting this data we’re getting it from our json server which you could replace with any back end so in instead of just console logging we obviously we want to set this data as our state however i don’t want to have fetch tasks in use effect because i might want to use this somewhere else so i’m not going to call set tasks right here what i’m going to do is return the data and then i’m going to take this out and cut that out and just put it right below a views effect fetch data from actually let’s just say fetch tasks okay and then what we’ll do is instead have a function called get tasks and it’s going to be async because we’re going to call fetchtask which returns a promise so here let’s say we’ll do cons we’ll call this tasks from server and then we want to await fetch tasks and then from there we’ll call set tasks which will add it to our state and we want to add tasks from server and then instead of calling fetchtask here we’re going to call gettasks all right so if i save that what’s this each list should have a unique key prop uh this should have a unique key prop should have the id let me uh let me console console.log what we’re getting here yes we have the id and then in our component tasks key id i’m not sure why i’m not sure what i’m missing here i guess we could use the index if let’s say index all right so that gets rid of that so we’re able to fetch our tasks from the back end and display them so the next thing i want to do is be able to delete them so we already have a delete and it’s going to delete from the ui just fine but if i reload they’re back because they’re we haven’t deleted them from the server so let’s go down to where we have our delete so we have delete task and this is going to be pretty simple because we just need to make a simple delete request right before we you know filter through the ui so let’s go ahead and make this an async function and we’re going to just await we don’t need to save it in a variable because we’re not getting any data back but we’re going to call fetch and here we’re going to use backticks http localhost 5000 slash tasks slash and then the id now we want to add a second argument of an object where we specify the method of this request to be a delete all right so we’ll go ahead and delete that and it will filter from the ui so let’s save that and let’s try let’s delete food shopping so it deletes from the ui if i reload it’s gone okay and we should see if we look in the where our json server is running you can see all of the different requests that are made and all of the responses so we’ll just keep that open as well so next thing let’s see we’re able to we’re able to list them delete them let’s do the no we’ll do the add okay so we want to be able to add a task and have it persist to our back end so let’s see we have our add task right here now again we’re not going to need to create an id because it assigns an id for us so we can actually just you know what i’ll do is i’ll comment this out just in case you guys need it and i’ll go above it okay so we’re gonna want to response and we want this to be a sync and then a weight fetch and we’re adding a task so the route is going to be http localhost 5000 slash tasks and it’s going to be a post request so we want to add here a method of post since we’re adding data we need to add headers because we need to specify our content type and that’s going to be application slash jason and then we also want to set outside of headers we want to set the body that we’re sending the data we’re sending which we’re going to wrap in json.stringify which is just going to turn it from you know a javascript object into a json string and what we’re sending is the task and that’s getting passed in here all right so that’s the request response then we want to let’s get the data here say res.json now the data that’s returned is just the new task that’s added so then once that once we do that we want to call set tasks again we want to set it remember tasks is the entire array we’re going to take the existing tasks and then we’re going to add on to it data which is the new task that was just created so let’s save that and let’s go over here and we’ll say um i don’t know we’ll say take test monday and set reminder so we’ll save task all right so that didn’t seem to work okay so it did work on the server side but this part didn’t work um oh we didn’t await so this this is a promise we have to make sure we await res.json all right so let’s delete take tests that should that should persist and then we’ll say take test i’ll say friday this time and there we go so now it gets added to the ui or added to the server and then added to the ui okay so that’s all set now one thing i note i i noticed was in my db.json the second one here just had a d and not an id and i think that was the reason why i was getting that key error earlier so just make sure that each one has an id all right now the last thing we want to do here in terms of working with the server is updating the uh the reminder so if i double click that it works in the ui but it doesn’t we haven’t made a request to the server so that’s going to happen in toggle reminder but first i want to be able to get a single task from the server so i’m going to go up here where i have fetch tasks and just copy that it’s going to be very very similar just called fetch task singular and it’s going to take in an id and we want to change these to backticks and do slash id okay so we have fetch task and then we’re going to go down to toggle reminder and it’s basically just an update we’re not able to update like the name you can add that on if you want we’re just updating a single field but it’s done the same way really so let’s let’s first go ahead and create we’ll say task to toggle so which one do we want to grab so that’s going to come from let’s say a weight fetch task singular and pass in the id now this has to be a sync so we’re going to get the task to toggle then we’re going to put it into a variable the updated task which is going to be an event it’s going to have all the same properties of tasks to toggle so we’re just spreading those across here in addition to that we want to change reminder to whatever the opposite of task to toggle dot reminder is we want reminder okay so we haven’t made any requests or anything we’re just getting the task and then creating the new task and putting it in a variable now let’s say const res equals await fetch and let’s see we’re doing an update so we’re going to want the id so http localhost port 5000 slash task slash id then we want to add a method of put since this is an update we want to add headers since we’re sending data we want the content type of the data we’re sending application slash json and whoops not here but under headers we want the body which is the data we’re sending wrapped in json.stringify to turn it into a string and it’s going to be the task i’m sorry the updated task all right then we want to just data awaits on the response jason and then the only thing we want to change right here is the reminder we’re setting it to whatever the data reminded because the data that we get back is just the updated task so whatever that is true or false we’re going to have here if it matches that id so let’s save that and let’s open that up so i’m going to double click meeting at school you can see down here put request to task 2 200 response so if i reload it stays off or it stays false if i make them all true and reload that stays all right so we’re now able to interact with our server in all ways we can delete we can add we’re fetching our data so this is what you would do in a full stack app except instead of using json server you would build your own rest api with whatever language and framework you choose all right now one thing we haven’t gotten into is routing and that’s the last thing i want to cover so we’ve done everything just within this single this one page right here this one view really so to use routing there’s no routing included with the core library i’m just gonna let’s see i’ll just open a new tab here so we use a package called react router dom so let’s npm install react dash router dash dom and that’s going to show up in our package.json okay so there it is now in our app.js if we look at you know what we’re returning let’s go back down here look at what we’re returning we have a container with our header our add task which is dependent on this value our tasks component you know which will show if there’s if there actually is any tasks and then that’s pretty much it so i want to first of all add a footer and i want to have in that footer a link to an about page that has an about component so in components let’s create a new file called footer.js and we’ll go ahead and create a component here uh we’ll get rid of this so this footer is going to be pretty simple i’m just going to change this to footer and then let’s let’s put a paragraph and we’ll just say copyright ampersand copy semicolon 2021 and then under that i’m going to have a link to this is going to go to slash about i’m going to change this after but just have that for now and then we’re going to bring this into our app.js up at the top so import actually i’ll just copy header down and change that to footer and we’re just gonna embed this down here in our return all right so there’s our footer now for routes let’s say let’s create our about first about component so about.js so this is going to be really simple i’m just going to put an h4 and say this say the version 1.0.0 and then we’ll put uh let’s put a link to go back that’ll go to slash go back all right now this about component i’m going to bring into app.js and of course i could just embed it like we’ve been doing but i want to use the router so we need to bring in let’s say import from react router dom and what we want to bring in are two things we want to bring in browser router which will use the html5 push state i’m going to give it an alias of router though and then we also want to bring in route so to use the router we have to wrap everything in our output so in our return right here we’re going to wrap everything in router all right so i’m going to grab that and put that down here so now since we wrap that in router we can use routes so right above the footer i’m going to say route and pass in a path of slash about and then pass in a component and that component is going to be about now if i save that if i click on about i can see the about component i can see the other ones as well because they’re just embedded up here so any route we create we’re always going to see those which i want to change now it’s not going to be as easy as just labeling a component because we i want to put the add task component and the tasks component all in one route all in the index route so to do that we can say route and path set to slash we also want to add exact or else if we go the about it’s going to do the same thing and show this just because it’s going to first match the slash so we want to match this exactly and then instead of component we can use render and inside render it just takes an arrow function with props and we’ll point this function to a set of parentheses and in here we’re just going to have a fragment and then we can take whatever we want which is going to be the add task and the tasks so we’ll cut those and we’re going to put that put that right in here in this route render now if i save that you can see we’re on slash about right and we don’t see the other stuff if we go back now we see the add and the the tasks all right so let’s see next thing notice when i click on about or go back see how the reload and up here see how the page reloads we don’t want that so to stop that from happening instead of using an a tag for instance let’s go to the about page instead of using an a tag we’re going to use link from react router dom so let’s say import link from uh react router dom and then we just replace an eight the a tag with link and replace href with two all right we’re gonna do the same thing where else do we have this in the footer where we’re linking to the about page we’re going to do the same thing and change that to link and change that to 2. and now you’ll notice if i click about or go back it doesn’t reload it’s just instant so you want to make sure if you’re using routes that you use link as opposed to just regular link a tags all right and you can obviously create as many components as you want and as many routes you can also put multiple components with props like we did here the last thing if we go to about we still see this ad which doesn’t make sense so to get rid of that we could go to our header so in our header there’s something called use location it’s actually a hook that we can use from react router dom so i’m gonna import use location from oops from react router dom and this allows us to basically look at the route that we’re currently on so above the return here let’s just create a variable called location and we’ll set that to use location and then we should have access to location.path name so where we have this button let’s wrap it in curly braces so we can add a condition and we’ll say if location dot path name is equal to slash then we’ll go ahead and show the button all right so save that and now notice on the about page the button’s gone if i go back to the index there it is all right so you can you can check out the whatever the path name is or the route is and you can do certain things based on that route all right so that’s routing uh and i think that’s it guys i mean we covered a lot this was a long video longer than i expected and i actually wanted to do routing before we did all the http stuff with jason server so i apologize for that i kind of forgot about it so uh that’s it hopefully this taught you uh something even if you didn’t catch everything if this is your first time dealing with react and this just looks like a horror show to you don’t worry about it you’re gonna get more familiar with it as you learn it as you watch more videos i have an entire playlist of different projects i have three udemy courses uh if you’re interested uh myrn stat courses and so on and there’s just tons of content out there the documentation look at other people’s code you know to get examples um uh to kind of learn what’s going on so there’s there’s a lot of things you can do so don’t get overwhelmed if this looks really hard but um that’s it thanks for watching guys i really appreciate it if you lasted this long and i will see you next time
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
React Router has been updated to v6. Check out this video to see the changes for this project – https://www.youtube.com/watch?v=k2Zk5cbiZhg
someone recommended your channel and its been a great experience as you great in teaching and explaining. But my onDoubleClick isnt firing, if i change to onClick, it fires. is there a reason for that or anyone else experiencing that?
#march31st
half way through it and I have already learned a lot of concepts!
Thank you for creating a thorough video!
59:42 – 01:02:37 if anyone doubleclicked, and the App didn't work or your task suddenly disappeared. Don't worry guys, just 'npm start' to restart the App, or wait for like 25-30mins. it's loading bug.
i have an interview in 3 hours and i dont know what the hell is reat
UseEffect hooks and fetch tasks from server, you got one error on id -> second task on json has d instead of id typo on task.
Please make a video on react with jsx.
50:01
This router thing is funny. bruh
Thanks a lot for sharing this great video although I am a .NET blazor developer for SPA projects.
Congratulations on creating an amazing course! This was my first time using React and I must say, everything you explained was crystal clear. Thank you for making the learning experience so easy and enjoyable!
😍
hi ive got error on this part : "server": "json-server –watch db.json –port 5000",where it shows error db.json not found can u help me fix it?
This channel awesome and its author is the best teacher, I cant express enough appreciation to his content and to the way he teaches. I was struggling to use Router v6 in my app since in the video Brad is using Router v5, but then I went to the GitHub repo for this project and I was so happy to find that he updated the repo with Router v6. This is some level of consideration. simply the BEST!
This is a very informative and easy to understand course, you have a natural way of explaining things simply and understandable. Thank You!
The content is amazing! It's an excellent resource for someone like me who is new to this. Thank you again!
很棒
Amazing, I learned a lot, thanks a lot
Hi Brad, very interesting how you go through the project and explain everything. Well done!
I think the error you got in "useEffect Hooks & Fetch data from server" was because the the second record you used with id 1, was misspelled when you inserted it into the json db. You used "d 1" instead of "id 1".
I’ve run into some challenges. I don’t know how interactive this spaces are but I could use a reply. I have gotten to a point in my code where so I’m trying to toggle reminder and it’s basically almost the same steps as was used in the delete function. And I followed step by step but mine just isn’t working also I tried to look at the react Dev tools on my browser and I can’t seem to find it on my chrome. Did any1 else have this challenge? I could use some help.
better than 90% of uni professors
Thank you so much!
Finallyyyyyyyyyyy im watched and done to the end video, it took me 3 day, so Farrrrrrrrrrrr T___T………
Very educational tutorial! Thank you, Brad.
console.log('click') does not print anything in Chrome console. How to fix that?
King, I got no words man , THANK YOU🔥🔥🔥🔥🔥🔥🔥
Really good, but wow very fast
Thanks for sharing the video! I've noticed you used some hotkey to format the code from time to time to have them in separated lines. What is the hotkey for that? I can't seem to find it.
Thanks for your efforts, excellent stuff.
Great Tutorial!
Any particular reason, why you use the arrow function declaration?
Why
const deleteTask = (id) => {
over:
function deleteTask(id) {
?