React Context & Hooks Tutorial #16 - Reading List Project (part 1)

Key Takeaways

okay then so now we've learned all about reactor context and all about react hooks what I'd like to do is take everything we've learned so far and put them all together in one application which is going to be a reading list a bit better than the stuff we've been doing so far but what I'd like to do for this is create a brand new project so you can see I've already cleared out the other two projects and I'm going to create a new one by saying npx create react and I'm gonna call this book list so press ENTER to install the application so now that's created let me CD into that directory and then I'm going to NPM start to spin up the local server so we can view that in a browser hopefully that's gonna appear over here in a second cool looks like it's about to work for his crust cool there we go so that is the dummy application that react has boiler plated for us so the first thing I normally like to do is create a context file so I'm going to create a new folder and call this contexts and then inside that I'm going to create a new file called book context so this will be a context for all of the book data now before we go any further I will say this I am going to be moving more swiftly in these videos where we're creating this up then I have been in the past and that's because we've already learned all the stuff we're going to cover for the next two or three videos we're just bundling it all together in one single application so if you find that this is too difficult to follow feel free to go back to the previous videos and get a refresher on those before you come back to this anyway now we're inside this context file we need to import react and we need to also import a couple of other things we need to create context function and also use state as well because we'll be using States inside this functional components the first thing I'd like to do after that is exports a constant which will be book context and we set that equal to create context and invoke it so that creates our context for us then we're going to create the context provider so const book context provider and set that equal to an arrow function we're taking the props automatically to this function and then inside I'd like to use States so what we're going to do is store some data about books inside this state now what I'm gonna do is literally copy and paste these from my repo so it's an array of books and if I paste this in it's just two objects we have a titled property for each one and in all the property for each one and also an ID as well so that's our initial data we need to now also say Const and then square brackets is equal to this we get two things from this remember we get the actual data which we'll call books and also set books which is the function we're going to use to change the state so and also now laps you've defined two functions inside this component the first function is going to be to add a new book to the data and the second function to remove a book from the data so let's do the add book function first I'm going to say Const add book is equal to a arrow function inside will take two parameters the title and the author of the new book that we want to add and inside that remember we use this set books function to change the state so we need to call that set books and inside we need to completely replace whatever data is inside here so we pass in an array and this is going to be the new array of books we need to spread out the current content of the books array into this so we don't override it so books like so then a comment then a new object which will be the new book now we have a title property which is going to be equal to the title we take in and also an author property which is equal to the author we take into the function as well so when we add a new book we'll call this function passing the new title and the new author and it's going to take those values and assign them to these properties right here now we can shorten this a little bit by using the shorthand by taking away one of these and that's going to do exactly the same so now we have these two properties we also want an ID property now we can't hard call this to be something like four because that means every time we add a new book it's going to have that same ID instead what we need to do is install a library or come up with another way to create a random ID now I'm going to install that package we used before called UUID so first of all see the into book list again then npm install UUID and press enter and once that's installed we can go ahead and import it at the top import UUID from UUID /v one more use and then we can use that function down here UUID invoke that and that generates a random ID for us so then that's the first function defined next we'll do the remove book one so const remove book is equal to a function this time we're just taking the ID of the book that we want to remove that's what we'll be using to filter out the books that we don't want based on that ID so we'll use set books again because we need to update the data then we're going to say books which is the current value the current array and we're going to filter that array so what the filter method does is cycle through the books array and it performs a callback function on each item in the array then if that item matches a certain condition then it will keep the item in the array if it doesn't it will remove it out and it returns a new array of role and you've filtered a rate so let's pass in the car but function in that car but function we get a parameter which is the individual book we're currently iterating and inside here we return true or false true to keep the item in the array false to filter it out so we want to return book dot ID which is the ID of the book we're currently iterating and we want to see if that is not equal to the ID that we pass in right here so if these are not equal if the ID we pass in is not equal to the current book ID then we keep that in the array we want to okay so that's why this returns true now if this is equal to this ID then this is going to return false and it will remove that from the array so that's this function done now and finally we need to return some JSX which is just going to be the provider so book context dots provider like so and then in that we need a value property set that equal to an object which is going to take the books also the functions at book and remove book cool so we've created this now there's one thing we need to do and that is just to output the props doc children or right here so remember this represents the components that this component is going to wrap so now we need to export this export defaults like book lifts are context rather not list provider like so so now we have that we can go into a pas which is over here I'm going to delete this stuff and then I'm just going to say book context provider and then close this off that automatically imported it for me up here we don't need these things so let's get rid of those and like to run more for our other components inside here so they can access this context so let me save this and save this for now now I'd like to create some components so new folder call this components oops not in capitals components and then inside that we're going to have a few different components we'll have a nav bar is also we'll have a new book form is or we could just call this book form it's entirely up to you spell it correctly whatever you do I'm going to call it just book form and then we'll have a new file called book list is that's going to list out the books and finally a new file called book details Jes so inside book list will cycle through the data and output a single book details component for each book so let's get rid of most of these for now I will do the nav bar we'll focus on that so let's import react again and we also want to import use context because we're going to consume that context we just created so let's create a functional component this will be called nav bar and we want to use context inside of this and the concept we want to consume is going to be the book context so let me click on that auto import it and make sure your semicolon is the out on the inside this returns that state object we need to destructure what we want from this and all I want is the books from this so let's grab those spell this correctly as well books and set that equal to use context so now we have access to books in here and all I'd like to do is return a little bit of JSX inside this so a deal first of all with a class name equal to enough bar and then inside that div we'll do an h1 for the title and that will be ninja a reading list and then below that h1 I want to also do a P tag and inside this P tag I just want to output how many books we have in our list so to do that I can just say currently you have and then we want books dot length which is the length of the books array which we get right here and we'll say books to get the root dot so it could be currently you have two books to get through etc okay so that is that component pretty much you've done so all we need to do now is save it then import it into up or rather we can just do the tag like this and it's called nutbar if we click on this it's going to auto import it for us and there we go wallah so hopefully now this should work we've created the context we've now nested the navbar inside that context provider inside navbar we consume it and we output some data so let's save it and preview over here and we can see currently you'll have two books to get through which is correct because in the context we have two books or right here so finally one more thing I'd like to do in this video and that's just to clean this up so app CSS we don't need we don't need the logo over here we don't need the test file and inside the index dot CSS file what I will do is just paste in a few styles right here so let me get rid of code we don't need that I'm going to paste these ones in and also I'm gonna give the body a background color as well and this is going to be five five three zero and five five so all I'm doing here is colorizing the app and giving it some margin and a max width like this I'm also giving the navbar some padding text-align sensor and a background color with this purple and then the h1 some margin as well so if I save this now this should start to look a bit better so like I said I know I've gone quite quickly through this but I'm assuming you already understand everything we've done in this video in the next video we'll be carrying on with the other components the book list up here and also the book details