React Context & Hooks Tutorial #1 - Introduction

Key Takeaways

hey gang and welcome to your very first react context and hooks tutorial okay they're my friends so unless you've been living under some kind of rock for the last six months or so you probably will have heard about react context and react hooks they're the two still relatively new kids on the block in the react scene and they can have a big impact on how we write react applications so what are they exactly well first of all the react context API that gives us a clean and easy way to share states between different components without having to pass props down all of the time and react hooks allow us to do a whole bunch of stuff inside functional components that we can normally only do inside class components things like you States or tapping to a lifecycle method kind of and when we use them together context and hooks that is when the magic happens together they're gonna help us to create a really nice way to work with shared data inside our application similar to how Redux behaves but without having to install a third-party library you might have even heard through the grapevine that contact hooks have killed he dogs now it's a bit early to be saying that in my opinion but they are a killer combination and I really think you're gonna enjoy using them so before you start this course I would expect you to know a couple of things first of all obviously I want you to have a pretty good grasp of JavaScript because it's a very JavaScript heavy course and secondly you should have a moderate understanding of react and you know how to use the react CLI creating class or functional components using props and all that kind of just now if you don't know any of these then I've got a link to a full modern JavaScript course on udemy that will leave the link to down below and also I have a completely free react course as well for beginners so I'll leave that link down below as well so in this course first of all we're going to learn the basics of the context API and react hooks separately from one another then we're going to merge the two together to create this simple reading list application that is also going to work with local storage in the browser as well now I know this is not groundbreaking stuff right here and it's not gonna win any awards for the best design or anything like that but it is going to give you really good practice using the context API and react hooks together inside an application so as you can see we have a list of books which we can delete and that deletes them from local storage as well and if we add in a book for example the final Empire by Brandon Sanderson and add that we can see it right here and it goes to local storage as well so that if we refresh we don't lose these books it grabs them from local storage and shows them on the screen so we're going to use react context API and react hooks together to create this now I have also created course files for every single lesson that uses code in this series and you can find them at this repo right here react context hooks so I'll leave the link down below to this now each lesson has a different branch in this repo so if you want to see the code from lesson 9 for example so let the lesson 9 brunch and you're gonna see the code right here ok so you can download the code by going to the green button over here clone or download and download the zip or just copy this and clone the repo on your computer finally I am going to be using Visual Studio code for this course so if you want to follow along exactly the way I'm doing it then make sure you download this as well it's code Visual Studio comp that you get this from and just click on the green button to download it there's also a package for this that I'd like to show you as well so then inside of Visual Studio code I'm just going to show you this package that I've already installed so go to extensions and it's called simple reactive snippets so this is one of many packages you can install for vs code that's going to help with react and if we just scroll down here you can see we can use shortcuts to quickly create different things inside react like class components or functional components so I'll be using this as we go along now the first thing I'd like to do is actually create a simple project using the react CLI so I'm going to open up my terminal at the bottom and let me just clear this for some reason it never shows this path when I first open it but anyway I'm going to use MPX first of all then create - react - up and we're going to create an app called context up and just hit enter okay then so now that's installed we can go ahead and see the into context tap into this directory and then say NPM start to spin up the local dev service so we can view it in a browser so I'm just going to clear the console first of all then I'm going to say CD context app to go into this new project folder that we created then I'm going to say NPM start to start the project and view it in a browser over here so hopefully that should open up in a browser and we should see that in a second there we go so this is the dummy application that react boilerplates for us but we don't want to start off with this we want to start off with something a bit simpler so I'm just gonna edit this a little bit go into the source folder and again I will expect you to understand everything I'm doing here if you don't then I think you should start with the react for beginners course and again that link is going to be down below so anyway first of all I'm gonna get rid of a few files so it's not so overwhelming in here I get rid of the test file we won't be using that and also the logo we don't need that we'll get rid of app dot CSS as well just because I'm going to keep it simple and put all of the CSS eventually inside this file right here so a pas that is the root component we can see and we don't need this app dot CSS or logo imports anymore we still need react at the top and inside we'll just delete most of this right here because we don't want all of that we'll keep the surrounding div with a class of app so we'll save that then I'm just going to create a couple of different components so right click new folder to keep these in and I'm going to call it components like so and then well create two components we'll create one for some kind of navbar and one for some kind of book list so let me now say new file and call this navbar is and we're going to flesh this out first of all so first of all we want to import react so I'm gonna say I am to import react we also want to import components as well because we're going to use a class component inside this and then I'm going to use the snippet CC to create a class component then press tab and it creates this boilerplate for me now I'm going to call this navbar and then we don't need any state at the minute so let's get rid of that and inside the return statement down here we just want to return a simple template for now so let's do it now and inside this now if we'll do an h1 first of all we'll just call this context app because we're going to look at the context first of all and then underneath the h1 we're going to say you well and we'll just throw in a few Li tags as well I'm just gonna duplicate this a couple of times I'm going to imagine these are links at the top of the page like a navbar it's not going to go anywhere I'm just putting them there for visual effect just so we've got some content to work with so about and contact and that's the reason and creating this little dummy application by the way just so we've got some kind of working template or application to work with when we start to learn about the context up so I'm just creating a couple of different components to work with as we go forward so that's pretty much the navbar sorted we export it down here at the bottom so now we'll go to app KS and we're going to nest that inside the app div right here so navbar well like so and if I go down here it's gonna also import it for me at the top that's nice so let me close that off now we're nesting the navbar inside the app so if I save and preview in a browser okay we see that it looks pretty cruddy but it's there so let's do one more component you file and we'll call this book list j/s and again this is going to be a class component so let me import react and also see that gets as the component as well so now let me say CC to do another class component and this one is going to be called book list and again we're not going to use state just yet and inside the template all I'm going to do is a div first of all with a class name equal to book list like so and inside the div all we're gonna do is a ul and inside that some Li tags these are just going to be different books so let me just duplicate this a couple of times and first of all we'll say the way of Kings it's a Brandon Sanderson book really good the name of the wind even better and then finally the final Empire okay cool so we've got three books there now and we've done this component as well so now let me save that and import it into a pas again so underneath enough bear we'll do book list it's gonna also import it for me at the top which is nice and let's save that so if we save this now and go to the browser we can see those as well so both of these components are showing now on the page now there's one more thing I'd like to do and that is just to add in a little bit of CSS just so that this thing over here doesn't look so pretty often time so like I said all the CSS is going to go into this indexed or CSS file or right here so if we go over here first of all I'm going to get rid of this because we won't be using that rule at all then I'm just going to paste in a few styles that have come from my github repo on the lesson 1 branch so you can grab them from there if you want to I quickly talk you through these so first of all the app class which is inside here right we're saying that should have a max width of 400 pixels then a margin 30 pixels top and bottom auto left and right and text-align:center so this is just putting this in the middle of the page with a max width and causing all the text to be in the center at the nav which is inside navbar right here that is going to have a padding of 5 pixels all the way around the UL inside the nav we're stripping out the padding because it gets that automatically from a browser using default styles then the Li tags inside the nav we're going to display as inline block so that go left to right instead of top to bottom and give them a margin left and right of 10 pixels 0 top and bottom the book list which is inside this other component right here we're saying we want the padding of 20 pixels all the way around a margin bottom of 20 pixels as well the UL inside that book list adding stripping up the default styles and list-style-type of non meaning that we won't see these little dots right here and then down here the allies inside that book list we're saying padding 10 pixels all the way around margin 10 pixels top and bottom auto left and right and a border radius of 10 pixels as well so that will come in handy later on when we start to colorize these a bit more so let me save this and preview okay so still not looking great but at least it's semi respectable now so there we go this is kind of like the dummy application to get those up and running with react and now starting in the next tutorial we're going to dive right in to the context API