Converting A Plain JavaScript App To React

hey everyone so in this video we're going to be converting a vanilla javascript application over to react now the application that we're converting is actually an application from a previous tutorial and that tutorial is this one right here which i'm going to link below which is just a simple calendar application that we made in vanilla javascript now if you did not follow that tutorial that's fine i still recommend you go watch that video and follow through and code it yourself that way you understand how it works and i think it'll help you through this tutorial as well and you can see some of the benefits of react but that's fine if you don't want to go through and do that tutorial i'll put a link in the description to the final code from that tutorial so you can simply clone that repository and then follow that to this tutorial with that code now really quick i just want to say if you haven't already please go ahead and smash that like button for me and subscribe so you don't miss any future videos now let's go ahead and talk about what we're doing so let's have a look on the screen here on this screen right here is the vanilla javascript app and i'm going back and forth throughout the the the months and i'm going to create an event here and it creates the event here now i'm going to switch over to the react version as you can see there's pretty much no difference at all there's a slight difference in the padding of these buttons that's fine but i can still go through and and go through these months and add the events just like i can in the other app so they're basically the exact same application the code is quite different though in one obviously we're doing vanilla javascript and the other we're doing react so i just want to take a moment to talk about some of the mindset differences between writing a react application and a vanilla javascript application so in a vanilla javascript application you're going to end up writing most of the code that you want to implement manually there's a lot of things that you're going to want to do every single time you write a vanilla javascript application that looks similar to what we're dealing with here and you have to write every single bit of functionality manually including creating event listeners creating dom elements and then giving them classes and then putting them into the dom etc just like everything you want to do you have to manually do with javascript while in a react application it's it's it's much different you see in a react application you have all of these tools at your disposal and then you simply choose which of these things you want to react to so with for example event listeners it already exists on the element if you're using jsx you can simply say okay on click do this or on mouse over do this you don't have to add that event listener it kind of in a way already exists on the element and you simply just have to react to it you have to hook into it and react to it the same thing goes with data changes as well in react you can simply react to all of the data changes you can say okay when this value changes i want to do this so there's a lot of reactivity hence the name react in react so with vanilla javascript it's very declarative you have to say okay i want to do this and this is how i'm doing it in react it's like okay i want to do this so do this when this happens that's kind of the mindset shift that you have to have when converting something over from vanilla javascript over to react and of course there's plenty of other differences between the two but i think that's one of the hardest things to get over is just that concept in your head of switching from okay i want to do this this way versus okay i want to do this so let's do this when this happens i hope that makes sense you'll see it in practice in just a moment so to keep things simple i'm just going to go to the github repository here for the vanilla javascript calendar app for the previous tutorial and i know that a lot of people following this tutorial might not have went through that video so you can simply go to the repository and you can see all of the code for it and what we're going to be doing is basically copying a lot of the code out of here into our new project and then reactifying it now the major difference though is that in the original video i had you copy the style.css file because i didn't want to worry about you know having css as part of the tutorial you could just copy the css paste it into your css file and call it a day and we focused on the html and javascript we're going to do the same thing here except there was there was a few small changes that i decided to make in the css file so what you're going to have to do is you're actually going to have to go to the repository for this react version of the app which is in the description below and copy that css file and don't worry you'll see me do that in just a moment so to kick things off what we need to do is open an instance of your code editor whatever your preferred code editor might be and i'm going to go ahead and open up a empty folder in my code editor right now so i have just opened up a completely empty folder that i named react calendar in my vs code now if you're not using vs code that doesn't if you're using something that doesn't have a built-in terminal you'll probably want to open this up in your terminal as well because we're going to have to run a couple commands in order to get this project initialized so what i'm going to do is open up open this up inside of my terminal here built into vs code which happens to be powershell right now so in order to get things running i need to do npm init to initialize an empty npm project it's going to ask me a couple questions like the the package name which i'm just going to keep default i'll keep the version default description i'm going to say converting a vanilla js app to react for the entry point it says index.js that's fine for now test command that's fine empty keywords empty author i'm going to put my name for the license i'm going to put mit and then it's going to ask me if it's okay i'll say yes and what that did was it created a package.json file so in this package.json file we have this scripts section and we're going to add a script shortly we're going to add the script that starts the application i realized i just misspelled vanilla so i'm going to add an l there really quick so eventually we're going to add a start script but what are we going to use to boot this application how are we going to get this react application to run what is going to serve this application for us on our local machine in order for us to be able to develop and the answer is we're going to be using snowpack for this because i believe that's one of the easiest ways we can do it and it's also extremely fast so i'm going to run npm install snowpack it finished installing and now i can look in my package.json file and see that snowpack is officially a dependency on the project and now i can go in here into my scripts object and add a start script and the value for that start script is going to be snowpack dev cool so now we have the ability to sort of bootstrap this application but we don't really have an application we only have a package.json file packagelock.json file and our node modules folder so we actually need to put some stuff in here and at the very root of this i want to create a index.html file and i also want to create a style.css file so let's go ahead and knock out getting our style.css file completed because again i don't want to focus on styles in this tutorial we'll do some css tutorials in the future but for now i just want to focus on react i think they're two separate concepts so go ahead and go to the repository in the description below that says react repository complete code you know something along those lines go there and copy the style.css file and paste it into here now i've got the code already so i'm going to do that on my end but just remember this is the the react version of the css from the react repository okay so that should be all you need from that side go ahead and head over to the vanilla calendar repository and go into the index.html file now the index.html file for the vanilla javascript file is the actual html for the application and then inside of the script.js we write a bunch of code that kind of dynamically generates a bunch of stuff that we inject into the html we're not going to do that with react with react it's a bit different so what i'm going to do is actually go back into my index.html file for our project i'm going to get my boilerplate code generated here and i'm going to change the title here to be the same as what is inside of the index.html file for the original tutorial so i'm just going to copy that and i'm also going to copy the line for the style.css here so i'm copying the link file the link tag here so that my style.css file that we just pasted and populated here is now referenced in the index.html file and when i save it you would expect there to be nothing in the document and that's true there would be nothing in the document so we need to somehow put some stuff in the document right well in a react application we're able to take the entire application compile it down and inject it into an index.html file and that's what we're going to do so we're going to create a div with an id of root this is where we're going to end up housing our entire react application but we need to actually reference a javascript file which does that compiling process and injecting process which react handles all for us but we still have to reference that file here because this index.html file is the entry point for the app it's what actually gets served to the browser so it has to somehow say okay go grab this javascript file and then when it gets this javascript file that's when it's going to do all that react magic stuff so we actually have to have a javascript file that does all that so let's go ahead and create a source folder i'm just going to call it src for source and inside of here i'm going to create an index.jsx file i'm calling it jsx because we're using jsx in this app which you know is just a templating syntax in order to bootstrap this entire application we're going to use this code right here now we're importing react and we're importing react dom we have not installed those yet so keep that in mind this won't work yet but we're importing both of those and then we're importing a app component which we also have yet to create now we're going to create it in just a moment but let's hypothetically say it already exists so that i can explain this line right now so what this line right here is doing is it's saying we're going to take that that id of root div right here in our index.html file and we're going to inject our app component into that and that is how we're bootstrapping the react application so we have to reference this javascript file inside of our index.html file so to do that we're going to create a script tag here at the very end of the body and we need to set the source equal to src index.jsx except we need to get rid of the x it needs to be dot js because that jsx file is actually going to get compiled into a javascript file in the end so snowpack is going to take that jsx file convert it to regular javascript and then it's going to be a js file in the end so we can't use jsx because when it's compiled it'll be a js file so make sure that you use js instead of jsx and the only other change we need to do here is set the type here to type equals module so once i save this this is going to end up importing this jsx file which is going to be bootstrapping the entire react application but we need to install react and react dom so i'm going to quickly do that inside of my terminal i'm going to run npm install dash dash save react space react hyphen dom so i'm going to let that install really quick and now that that's installed the only other thing left to do to get this react application bootstrapped and at least running is to create my app component because we're importing the app component here and that doesn't exist currently so i'm going to create a folder called app and then inside of this folder i'm going to create a app.jsx file and i'm going to go ahead and create my app component right here so i'm just importing react and i'm exporting a function called app that just returns sim jsx and for now we're going to just have it say hello from the app component i'll save it and i'll save this and let's see if we can get this application to run oh the other thing that i'm seeing is that i'm importing this from slash app and this is the folder so in order to import it from the folder instead of the file itself like this i think it's cleaner to import it like this i need to go inside of my app folder and create a new file called index.js and just simply export my app component so i'm exporting everything from app i'll save that and now i can easily just import it like this which i think is cleaner so now let's see if we can run this app inside of my terminal if you remember we created that command npm start which runs snowpack dev i'm gonna run npm run start or you can just say npm start for short now you can see that it says hello from the app component inside of my browser so i'm zooming in a little bit and you should be able to see that so we know that the react application is bootstrapped correctly we know that we got the app working we can start working on the actual calendar now so the first thing i want to do is start creating components i want to try to think about what the calendar app is and try to break down certain pieces of functionality into separate components and once i create those components then i can use this app component here as a higher order component that uses those smaller components and don't worry you'll understand that in a moment but for now let's just try to think about the different pieces of the app and how we can break them down into smaller pieces so the first thing that i'm thinking is if i go to the calendar we can see that there are several pieces to this application there's the calendar itself which consists of squares each of these squares is a day so i i could say okay there's a day component this day component here looks like this it has its own styles it contains the event it has a click listener because i can click on it and it shows the event and it you know it displays events etc so there's the day component then i see this header here and this header has its own functionality as well because it has the back and the next buttons to go through the different calendar months and it also displays the current month so there's i guess we could call that the calendar header component but then if you notice when i click on this day there is a modal and this modal could be its own component but there's actually two modals there's the delete event modal and then there's the new event modal so that's two more components so we have a total of four so far and i think that's pretty much all the components we're gonna need for this app we don't need to break it down any further than that so let's create those in our app right now so we have the app component it has its own folder and inside of here you know we have the component itself along with an index file that exports it and we're going to follow that same pattern for each of the other components so i'm going to create folders for each one and i'm going to start with the day component and in here we're going to create a day.jsx file and an index.js file which simply exports the component from within then inside of the actual day component i'm going to import react from react and then i'm going to export a function called day which just returns some jsx and in here i'm just going to say hello from the day component and i'm going to do the exact same thing for all four of the components all right so i have created four new components calendar header day delete event modal new event modal they all have index.js files along with component files so now inside of myapp.jsx file this is where i'm going to start writing the logic in order to get the dates set up in order for us to start using these lower level components so let's go ahead and take a quick look at the original applications code in the javascript file so the script.js for the vanilla calendar and if you remember when we went through this we created some state here and we were just basically saying state was global variables with assigned using let that we could change throughout the application and then we also had a bunch of constants but we're going to do things obviously different using react because react actually has a better way of handling state we're going to use function components with hooks so we're going to be using use state in order to handle state within our components so we have three things here that i'm noticing we have nav which is basically the index for us to know which month we're on we have clicked which is the day that we clicked and then events which is an array of event objects so we need to create all three of those inside of our component and i think the best place for that is obviously going to be our higher order component which we can then pass down to our lower order components as needed but in order to use use state i have to put a comma up here after react in my import statement and say use state just like this and we have to destructure it like that and now we have access to the use state hook so i'm going to say const and then i'm going to create an array because using use state as a function returns an array with two items in it the first item is the state itself and the second item is a function to update that state and you'll see how we use that throughout the app so the first one was nav and then we have the set nav function and we want to initialize this as zero because zero is going to be our middle point which basically says the current month one would be the next month negative one would be the previous month and so on so nav is going to be whichever month we're on which is zero right now and then set nav is a function that we can use throughout this component to update that nav the second piece of state we want to add is clicked so const and we're going to do the same thing here clicked and set clicked is equal to use state and we're going to actually we're not going to initialize this value we're going to leave it as undefined because that's actually i believe how we do it in the original as well we leave it as null which is fine we can leave it as undefined here because really what we're trying to do is just have it as a falsie value and the third piece of state that was in there was events now let's look at the code here for events when we initialized it we were checking whether or not there was an events item in local storage and if there was we simply json.parse that out otherwise we set events to be a empty array this would only happen if it was like the first time we used the application or if we didn't have any events at all so we're going to use the exact same logic i'm going to actually copy this entire line except for the semicolon at the end and pass it in here because that's how we're going to be initializing our events variable but i'm going to put this on new lines because it's a little bit big and it's hard to see so it looks like this in fact i could actually break it down even further like that i think that looks good so instead of creating day elements and then injecting them into the dom what we're going to do is create an array of day objects so we're going to think about each one of these squares as being an object and all of these squares are going to make up an array of day objects and what we're going to do is inside of our jsx template we're going to loop through those day objects and then render each one on the screen so i'm going to start by creating a days array in state so day days and set days to use state which i will initialize as an empty array the second piece of state that we're going to add is actually this value right here so instead of just simply generating this on the fly we're actually going to have this value in state so we will call that value i'll come in here we will call this date display and set date display let's use state and we'll initialize it as an empty string and that should do it for our state for now but one thing that i want to add is a helper function that we're going to have here at the top of the component that we'll probably use in several places throughout the app so since it's reusable logic i just want to create it now and i'm going to call this function event for date and i'm going to set it equal to a function that accepts a date and then returns events dot find and for each event we want to find the one where e.date is equal to the date that we pass in so we want to make sure that we go through the events and find a event where e.date is equal to the date that we're passing in here and this logic is going to be used throughout the app so that's why i'm adding it okay now if you remember i was talking about like thinking about what we want to react to instead of thinking about okay i want to do this and this is how we're going to do it and i have to define every step along the way with react i want to think of what do i want to react to and i'm looking at this events variable here that we're setting in state and i'm thinking that is going to change throughout the application and we're having to manage state within local storage as well now local storage is our local database which basically allows us to store values in our web browser it can be thought of as like a key value database and we want to keep that in sync with whatever events is at any given time so if events changes if that value changes in state we want to make sure we update the value in local storage as well so in order to do that i'm going to use use effect but i need to import that now if you're not familiar with how use effect works i do have a video that i'm linking below called like react hooks in six minutes or something like that where i do explain how all of this stuff works if you're not familiar with use effect or react hooks in general but the idea is that whenever events changes we want to run a function that updates local storage so we can use use effect for that now the first argument to use effect is the function that we want to run and the second argument is an array of values and each value that we put into there is a value we're going to watch and whenever that value changes or any of those values change we're going to run the function that we pass in right here so the value we want to look for changing is events and each time this value changes we simply want to update local storage with the new value so we can say localstorage.setitem the item name is events and the value is a stringified version of events so every single time events changes here in state our array of event objects we are setting events in local storage so i just wanted to knock that out really quick before we start working on the template a little bit now let's have a look at our index.html inside of the original vanilla javascript calendar you can see that we have this div which is a container that pretty much contains the entire application except for our modals and inside of this container here we have a header which contains the month display and the next and back buttons and we also have this weekdays container here which never changes so actually we'll probably just be copying this directly and then we have this div with an id of calendar which is what we ended up injecting all of our days inside of so we're pretty much going to use the exact same layout inside of our app so i'm going to start by copying this entire container div i'll leave out the modals for now because those are going to be their own components completely and i'm going to paste them inside of my return here now if you remember we have a calendar header component so i can pretty much remove this for now because we're going to put that into its own component and i'm going to cut it and go inside of my calendar header component and paste that into the return right here so we're going to come back here and change this code a little bit and add the functionality but i just want to get the html inside of there and then in here i need to import that so i'm importing calendar header here and then i'm putting it where that html was just a moment ago so now that calendar header html that we just pasted in here will now render here along with any functionality we put inside of this component now this really does not need to be its own component this will never change this is very simple so we can just leave this the way it is now inside of this div is where we're going to be looping through our days array that we have right here which we have not yet set but we have this array in state that we're going to loop through in order to render our day components so in react what we can do is use curly braces to put some javascript inside of our template and the javascript i want to run is actually a map so i want to use the map function of the array object so the array that we want to work with is days days is our array of days objects and i want to say days.map and i want to map every single day to a day component so i'm going to pull out the day which i'll just call d and index because the each of these is going to need its own unique key and i'm going to use the day component but i have to import it so i'm importing day and i'm rendering a day for every single day in that array now right now day in our code base is empty but we'll get to that and it's going to accept some props obviously one of the props that it needs to accept is the day itself which we have here in our loop called d so we're going to end up having a day prop that will pass in to our day component we need to pass in a key which we'll set to the index which is right here because every time we map through and render a bunch of components of the same type we need to have a unique key for each one and the only other thing that we need to do for these day objects if you remember these day objects are these squares here on the screen is an on click listener so every time i click on a day we end up showing a modal but the way that we really want to handle that is in the original code we we have this if i go to the script.js file we have this clicked this clicked value and we end up setting click so if i search for clicked equals in my code here you can see that whenever we call openmodal we're setting clicked equal to the date so clicked is actually the date so when we click on a day we want a set clicked so i'm just hooking into the on click event which is already it already exists on any element we pass in in react jsx and i want to run a function whenever we click on a day i want to check something and if whatever i put into this if statement is true i want to run the following code which is simply set clicked and if you remember we have that as state i want to set clicked equal to day dot date because our day object is going to have a date and a value and some other things which you'll see shortly but we want to set clicked equal to the date of the day that we click on but what is it we want to check first before we click on a day well if you remember on the original video we had this concept of padding days some of these day objects are actually going to be padding days and the way that we're going to know that they're padding days is if the value is equal to the word padding so if day.value does not equal padding then we want to go ahead and set clicked equal to the date that we clicked on if it does equal padding we don't want to do anything because the padding days are just there for padding so if you're not familiar with what padding days are and all that you'll see later on but again we went over all of this in the original tutorial so we're rendering a day for every day object in the array but we don't have anything in this array it's an empty array we initialized it as an empty array right now we have to set up some sort of functionality which creates that array of day objects so let's just see what's in the in the window right now because i'm kind of curious if if we look here on our local host where we're running the application you can see that we have the calendar header we don't have the the current month because we're not setting the date string in state yet but we do have the back and next button which do absolutely nothing yet and since we hard coded sunday through saturday and our css is already taken care of for us you can see that the header here with the sunday through saturday dates are displaying as expected i think that it's time to go ahead and start looking into how we can populate that day array with our day objects and in order to do that we have to initialize some date stuff and if we go to the original app if you remember at the very bottom what we're doing when we initialize this application is we're calling it init buttons which we do not have to worry about in this app because init buttons was simply just setting event listeners for all the buttons react kind of handles that for us so we don't have to worry about that at all but we are also calling this load function and if i scroll up to that function you can see that the load function is what's creating the date object it's what's determining which month we're on and it's doing all of the date stuff so we have to bring this logic over to our react application but in a way that makes sense for react because if you notice there's a bunch of like document.get there's creating elements you can see we're creating a div we don't have to do any of that stuff in react because of the way that react works so we're going to take this logic and bring it over incrementally and put it inside of a effect in our component that runs when the component mounts or when certain values change you'll see what i mean in just a second so the first part of this logic is that we're creating an empty date object i'm going to bring this window over to the left and my code over to the right actually i'm going to do the opposite i'm going to bring the code to the left and have this on the on the right and i want to start bringing this logic over one by one so in order to run the functionality i'm going to run this inside of a effect now if you remember we call load when certain things happen throughout the application and this is where that mindset shift really starts to hit because you see we call load manually throughout this app if i were to go inside of here and and check for whenever i call this you can see that we call load every time we close the modal which in effect is really just when events changes because inside of the modal what we're doing is changing events we're either deleting an event or we're saving an event so we're calling load in this whenever we update events and then we also call it whenever we change nav like in this case right here we're calling load when nav increments and then we're calling load when nav decrements and we also call it on init and use effect is perfect for this because automatically it's going to call whatever we pass in here on init but we can also add in items into this dependency array where we can call that function when certain values change and if you remember we are calling load whenever nav changes or whenever events changes so i can actually come into here and put events and nav into my dependency array and now this will run both on mount and also when events changes and when nav changes so events is the state we have here and nav is the state we have here and whenever those change we're going to run this functionality so just that's that mindset shift that i was talking about so let's start by creating a date object just like we have here so i'm copying that over and i'm going to also copy this over this is what was setting the correct month depending on what nav is because remember each time you increment nav up we're incrementing up to the next month and same with the other way as well so below that i'm going to paste this stuff because we're using that throughout this function um looks like we'll probably need these as well so i'm going to paste these then we have the padding days and the date string so i'll copy these over as well as you can see i'm just checking to make sure that it makes sense to bring certain things over and then i'm copying and pasting over to the left so so far i've pretty much pasted this entire piece right here and one thing that i'm noticing is that this padding days variable is using a weekdays variable that we do not have in this component yet but it is over here it's set as a global constant well it doesn't really have to be a global constant in our react app because it's only being used inside of this effect so i'm going to paste it here at the very top i'm setting the weekdays array here at the top of the effect that we're working within right now i'm just going to close that gap so now we have all of this if we look back over here the next line of code is saying document.getelementbyid month display and we're setting the inner text equal to this value right here now if you remember in react we don't do that we don't reach into the dom and set inner text we don't we just simply don't do that instead we update values and then in our template we react to those value changes and we happen to have some state here that we set earlier or we initialized earlier called date display so what we want to do is actually set date display equal to the same value that we're setting here and then inside of our calendar header component we just want to set the display value equal to date display so let's start by just copying this string interpolation line right here and let's set that value let's just set it above padding days here so in order to set the value and i'm just going to make this a little bigger in order to set the value we'll use set date display and we're going to pass in that same line of code that we copied from over here it's going to just simply set that in state we don't have to worry about that anymore right now we can just simply know that we have that value in state and it's updated every time events or nav changes along with when the component mounts then comes the the for loop here this for loop is what loops through as you can see the correct number of times that we have for both the padding days and the days in the month it loops through that number of times and then it creates a div and it creates a day square it adds the correct classes and it sets the values and all that good stuff we're not going to do it that way instead we're going to do the same loop but instead of doing all this stuff we're going to build that days array that i was talking about earlier that we have right here we need to build this days array so to do that we'll create pretty much the exact same for loop let i equals one we want to keep looping while i is less than or equal to padding days plus days in month and for each loop we want to increment i by one and we have all of these values because we copied them over now inside of this for loop we want to start by creating our day string just like we are here in our code on the right so i'm copying over this line maybe zoom in a little bit just to make sure you can see it got a lot on the screen i know so i'm copying this line over that's the first thing we want to do inside of our for loop then if you remember we we have this logic here that checks whether or not we're on a padding day or an actual day we're going to keep that same logic so i'm going to create that same if else that same if else block and with pretty much the exact same logic so i'm copying over if i is greater than padding days then we know we're not on a padding day we're on an actual day otherwise we're on a padding day so what do we want to do if we're not on a padding day well on this side what we were doing was creating we were setting the inner inner text for the day square to the current day that we were on in the iteration and then we were checking whether or not we were on the current day and we were also checking to see if there was an event for the day if there was an event for the day we were creating a event div and then adding it to the day square and all that good stuff but instead of doing all that i just want to build that array so outside of this for loop i'm going to create a little bit of a dummy array we'll just call it um const days r days array days r is equal to an empty array and we're going to simply say days r dot push and we want to push a day object to this day's array and this day's object needs to contain four properties value and value is gonna be that value that that we were setting over here as the inner text so i equal i minus padding days i minus padding days then we want to set an event so if there is an event we want to make sure that there is an event value here now of course not all days are going to have events if we look at the app here for example on this calendar the only day that has an event in this month is the first of january so the day object for january 1st would contain an event but the rest would not and the way that we were finding whether or not we had an event was searching through the events array and trying to see if we found one equal to the day string well if you remember we have this helper function that we created towards the beginning of this video ish called event for date and we're going to use that here so we're going to set event equal to event for date and we'll pass in the the day string the day string is that value that we set here at the top of the loop now this could either be undefined or it could be actually an event so event here can either be undefined or an event itself and for most days it's probably going to be undefined the third property that we want to set is whether or not it is the current day so is current day is either going to be true or false and if we look at the calendar app that is complete you could say that i'm making this tutorial i'm recording this tutorial on the 28th of january so for me the current day would only be true if the date was the 28th now in the original application what we were doing to check for that logic is right here we had this if statement and we were saying if i minus padding days is equal to day and also nav is equal to zero then we know it's the current day and the reason why we're checking for nav is equal to zero is because we wanna make sure that we're on the current month and if the nav is not equal to zero then we're not on the current month so this logic right here is saying if if the current iteration value minus the padding days is equal to the day and the day being the day we're getting from our date object then we know that the current iteration we're on is in fact the current day so i can take that exact same logic this if statement turn it into a ternary operator instead of an if statement and then set the value here so i'll simply copy the logic inside of my if statement and paste it here use the question mark for my ternary operator to say if this is true then i'm going to pass in true otherwise i'm going to say that it is not the current day and we can set it to false however we don't really have to do it this way because this in itself is going to resolve to either true or false if it's true then we're returning true if it's false then we're returning false so i can just get rid of this completely and just have this piece by itself because we know this is either going to return true or false so is current day is going to be whatever this resolves to and then finally we're going to have the actual date value as part of our day object now the date value is going to literally be the day string so we can just pass in day string here so now we're pushing what we've done was we've pushed a new day object to our days array with these values here now if if for example it is not we are on a padding day we want to do something a little different but we still want to push to our days array so i'm going to paste in the exact code that i just wrote for the value on a padding day it's always going to be padding because if you remember if we scroll down we're checking to see whether or not the value is padding here or not and if it is then we're setting some clicked and inside of our day component when we get to it shortly we're going to be checking for that value as well the event will always be null because padding days should not have events current is current day will always be false and for the date we can just put an empty string and then after our for loop is complete all we want to do is set days in state equal to our days array so quick very quick recap we're initializing an empty array called days array we're doing our for loop we're setting our days array values we're pushing day objects to this array once the loop is over we're setting that day's array in state as our day's state okay let's take a quick breather so as you can see we are taking pretty much the exact same functionality from our original app here we're copying pasting the vast majority of it but we're just doing it in a different way so react and frameworks and libraries like react etc they don't really make the task of writing code easier and i got this idea from svelte by the way they don't really make the task of writing code easier what they do is they change the way that you're thinking about writing code and you'll start to see that as you begin writing bigger applications that do more and more stuff the vanilla javascript side of it starts to become more and more difficult to manage and you can probably see it right here in fact this app is probably a good threshold to say okay this is right at the edge of where we would want to convert a vanilla javascript app over to some sort of framework now you can create your own framework you can start developing a pattern for your vanilla javascript app and kind of create a framework yourself but there's just so many good options out there already such as react vue spelt angular etc that you might as well choose one that's already backed by so many developers and react is an amazing choice for that but you'll start to see that even just simply the act of reading the code is a lot easier in react if it's structured correctly if we come over to this vanilla javascript app over here and tried to read it and you had never seen it before it would be kind of it would be somewhat hard to figure out the intricate details of what's going on maybe not but if it was a bigger application it certainly would on the react side it's easier because you already know where to look you know hey we're gonna have components we're gonna have hooks we're gonna do things this particular way so it's easier to just figure out what's going on all right let's get back to it let's start by getting our day component up and running if i were to save this and let's have a look over here on our screen you can see i'm going to make this big that we have instead of day squares we have a bunch of hello from the day components and we have one for every single day of the month plus our padding days that's no good we want to go into our day component and actually you know write the correct code so let's do that so over here in my day component i want to accept the props that we're passing in here now the key that's just something that's handled by react that's required by react whenever we're mapping an array to a bunch of components so don't worry about that instead let's focus on our day and our on click function now let's go in here we have two props and the way that we can take these props and accept them is by destructuring the props object so we can say we want the day and the on click and i want to create a div for every day that exists let's go to our code here let's see what that day square looked like that we were creating throughout the app so in our load function in the original application we were creating this this day square and in each iteration of the loop we created a new div we added a class called day so keep that in mind actually we can go ahead and add that now we already are creating a div here so that's the equivalent of creating the div second part is we need to give it a class of day and in react we use class name instead of class let's look back at it what else are we doing to this day square well we were setting the inner text equal to i minus padding days now that i minus padding days is actually the value on the day object if you remember we had that array of day objects the day object dot value is this value here so instead of setting manually like day square dot inner text we can interpolate inside of our component like this so i can use my javascript curly braces here and say day dot value however we only want to show the value if the day dot value is not padding so the best way to do that is to check whether or not it is equal to padding like this say data value is equal to padding and then use a ternary operator to set that to an empty string otherwise we will set it equal to day.value now if you remember that day object also had an event and we want to render an event inside of this day square if we look at the original code if there was an event we created a div we gave it a class of event we set the inner text of that event equal to the title for the event and then we added it to the day square so we'll do pretty much the same thing here we'll check whether or not there is an event and if there is an event we'll render out a div with a class of event and the inner text for that was day.event.title simple enough right well let's have a look at the screen and see what that's rendering so on my end i actually have an event here that's because prior to this i already created events so it's still stuck in my local storage i'm gonna just clear that out really quick so when i refresh this is what you should see here i'll zoom out just a little bit so it fits you should see the same thing now what i'm not liking is that each of the padding days is being treated like a day in other words you can see that there's a box shadow on the padding days and there's also a hover effect and probably a click function too if we were to add it and i don't like that and the reason why is because we're giving every single div every single day square div a class of day we really don't want to give the padding days a class of day so at the top here i'm going to create a variable called classname and i'm going to set it equal to a string using these backticks where we're going to interpolate some stuff and actually every single one of these does get the class of day so we'll say each of these gets a class of day however some of them will have a class of padding and if there's a class of padding we hide those day styles so what i'm going to do is put in my dollar sign in curly braces and check whether or not dot value is equal to padding so if day.value is equal to padding we want to give it the padding class otherwise we just we'll just leave an empty space here and we should do the exact same thing with currentday because if you remember in the original application we would highlight the current day and we would do that by giving it an id or a class of current day in the original application we gave it an id and this one we're going to use a class which is why you need to have those updated styles in the css file so we'll add a space here add a new dollar sign in curly brace and we'll check for day dot is current day which we're setting in the app component and if day dot is current day is true we'll give it a class of current day otherwise we'll leave an empty string there and instead of setting class name today here just like this hard coded we'll put in our curly braces and pass in class name instead save go back and now you can see that we both have the current day and we also have no design for the padding days which is what we would want cool this is starting to look pretty close to the original application we're actually going to need to add our on click function though because right now we're not actually doing anything on click however we are passing in our on click here so for our day div what we can do is set the on click equal to on click if you remember when we're passing this in in the app component here this right here in our app component is where we're checking to make sure that we want to call the on click function because we don't want to call the on click function for padding days instead we only want to make sure that we call the on click function if data value does not equal padding so just remember that that's where we're doing that check so we can just easily pass in on click here without doing any sort of if else checks so i'll save there and i will save here and let's go ahead and see about adding events because now we have the days listed out but we don't have the ability to add new events yet so let's go ahead and work on our modal for create event so hop into your new event modal hop over to the code and we'll just copy that code for the new event modal if i go back out of here go to the index.html file scroll down you can see we have the new event modal however notice that we also need to have the modal backdrop because the modal backdrop is what is that black opaque screen in the background that kind of hides the rest of the app while you're showing the modal we need to have that inside of the inside of this component as well so i'm going to actually keep this react fragment here and inside of there paste in the code i just copied for the event modal but then i'm gonna go back and actually copy this modal backdrop and paste it below the modal itself and we're gonna have to do the same thing in our delete event modal so we'll do this one afterwards okay so we have the html set up for our new event model but we are not implementing it in our app component and we don't have any sort of actual functionality over here for our modal so let's go ahead and start adding that we need to have two props that get passed into here we need to have both on save and on close then we need to have a couple of pieces of state in here as well because there is the title and the title is what you're going to be entering into the text input that's inside of the modal and we also need to have error state just in case you try to submit the input without a value inside of it so let's create both pieces of state but you know before that we need to actually import use state from react so import that and then we'll create two pieces of state we'll do title which we'll initialize as an empty string and we'll have error which will which will just be a boolean we'll initialize that to false in our input whenever that value changes we want to update title so on change we get that change event and we want to set the title equal to e.target.value then we also want to make sure we set the value itself equal to title so i'm going to bring this all to separate lines so that it's easier to read and the only other thing we want to add on this input is potentially an error and we can just go into our class name here set our curly braces and say if there's an error then we should give it the class name of error otherwise we'll just leave it as an empty string so that's good for our input let's go ahead and look at our save button well for the save button let's add an on click function and i'm actually going to bring everything to a separate line here as well and inside of our on click function we want to check whether or not the title exists because if they haven't typed in a title we want to set an error and all that good stuff which i'll do right now so in our else block we want to set the error to true otherwise if we do have the title here in our elf in our if block we want to say set air false and then we want to go ahead and say on save which is that prop that we're getting here and we want to call it with our title now for the cancel button it'll be a little bit different we'll add an on click and for this we'll just simply pass in on close so that pretty much does it for this component now we need to actually implement the component in our app component so let's import it and scroll on down to where we want to put this modal we actually want to make sure that we put it outside of the container div so in order to put something outside of the container div inside of our return we have to make sure that we have these fragments here because we can only return one tag in our return statement be sure to add the closing thing so below our container div we can actually say new event modal we need to pass in the on close and the on save props so for the new event modal our on save function accepts the title because we're passing in the title if we go to our new event model we're calling on save here with the title so we need to accept the title here and we need to do two things whenever we click on save we need to set clicked to null that way we can reset the modal and we also need to set events so we're updating events and we need to set it to the events that already exist so i'm going to use the spread operator for that alongside a new event object with the title the title will just set to title because we already have it here and we also need to set the date equal to clicked if you remember when we click on a day and we show the modal we actually have clicked we've set clicked already in state so we're setting the date equal to clicked whenever we save it now this event modal if i were to just save it and go to the app it's just going to be there and i don't want it to be there by default i only want to show this if if we already have clicked in state so if clicked is already in state in other words if we've clicked on a day then we want to show the modal and we also want to make sure that there's not already an event for the day that we clicked on so i'll cut this add some curly braces and we'll put our our logic in here to check so we'll say if clicked so if clicked is not null or undefined or something like that and we do not have an event for date remember that function you can pass in clicked here for that if both of those are true then we want to go ahead and render the modal so i'll click save let's have a look at what happens here i'll open up my console just in case we get an error and i'll click on a date let's just click on the 31st okay we definitely got an error it says reference error day is not defined and this error is happening at the on click on line 65 of the app component the problem is actually pretty simple you see i'm calling each day d not day so when i'm checking in the if statement here i need to say d value and i need to say d.date instead of day.value and day.date so save that now let's give this a try so click on day three and now the modal appears so let's see what happens if i were to type in something click save and now it looks like it actually worked so i clicked save it added testing the app here now what happens if i were to click on this now nothing happens and that's because click is now there's a value for clicked in state however that second thing that we're checking for which is whether or not event for date clicked exists well it does exist in this case so that's why it nothing's showing up now if i were to click on a day where there is no event then we get the modal again of course i need to set the on click function for the cancel button that doesn't seem to be working so the point though is if i click on a event where there is an event already nothing happens because we need to show the delete event modal in that case we'll do that in a minute but let's figure out why the cancel button is not working that is simple we have yet to implement the on close function and whenever we click on cancel if we go into the new event model you can see that we are calling the on close function that we're passing in so what do we want to do when we click the cancel button it's quite simple we'll just run a function that sets the clicked value the null so now when i click cancel it closes the modal because the modal is only visible if clicked exists in state on to the delete event modal so the delete event model is right here in our code i'll just copy that over paste it into my delete event modal here remember to include the little fragments here because we need to put our backdrop in there which i'll just copy over from my new event modal copy this little backdrop over cool and we can do very similar stuff inside of this event inside of this delete event model here although i think it might be a little bit more simple in this case than it was for the new event modal so this is going to take three props it's going to take on delete it's going to take event text and it's going to take on close and the reason why we need event text is because we want to show the event in the modal that we clicked on so luckily in this case we don't have any inputs or anything like that so this is going to be a lot more simple than the other one now inside of our event text paragraph tags here i can just put a curly brace and actually put our event text inside of here it's that simple and then for the buttons i'm just going to say on the delete button i'll set an on click for on delete and for the close button i'll set an on click for on close and that is literally it we are done with that modal now for the logic to show and hide the modal inside of the app component i'll simply go below this one add new curly braces i'm going to copy this piece right here because it's going to be the exact opposite so clicked we want to make sure that clicked exists in state but instead of checking for an event here and saying we don't want an event we should only show this if there is an event then we need to show the delete event modal which we have to import so i'll go up to the top and i'm pretty much just going to copy this line here and change new to delete here as well and for some reason i have two forward slashes so i need to get rid of that and go back down now we can implement it because i've imported it so we need to pass in the event text the event text it's pretty simple we'll do event for date so we need to get the event for date and we'll set we want to find the event for whatever we have as the clicked state and we just want to grab the title from that then on close is the exact same logic here so i'll actually just copy this line and paste it here just set clicked to null and then finally on delete we're going to get we're going to run a function whenever we click the delete button that's going to set the events and then set click to null pretty much the exact same logic here so i'll paste this in from the onsave function above it except for instead of setting it like this i'm going to i'm going to take the events and i'm going to filter the events using the filter function on the array object and for each event we want to check for the date and we want to make sure that we allow all of the events where e.date does not equal clicked okay so that in theory should work let's che let's check over here so let's go to this one where i have the event testing the app i'll click on it you can see that event is here the actual event is being displayed as we would expect and let me just click close make sure that worked it did now let me try to delete it so i click delete and now it's no longer there so i'm going to add a new event here just i'll add an event here as well and i want to delete one and make sure the other one doesn't disappear okay good all right so we're just about done here what we need to do now is set up the functionalities to be able to go through the months so i i'm on january i should see january 2021 here and i should be able to go back and forth through the months and of course that logic is going to live within our calendar header component which we have yet to implement the functionality for if you remember towards the beginning we are actually setting this date display state but we're never using it yet we haven't used it yet so what we need to do is use it right so we have the calendar header component here but we have yet to implement any props for it now we are going to add a couple of props for this component three to be exact the first one is going to be the date display which we can actually just set equal literally to date display because we have this in state and whenever this changes it will update but we also want an on next function and an on back function now each time we click on the next button we just simply want to take the nav and increment it by one we want to set nav equal to whatever nav is currently plus one so we can say set nav equal to nav plus one we'll do pretty much the exact same thing for on back except instead of plus we'll say minus now inside of our calendar header component we actually need to accept these props so on next on back and date display so inside of our month display here let's interpolate date display save and let's see if we see that now we do that works as expected since we're already setting that in state now we need to go ahead and add our button on click events which is probably as simple as you're thinking we can set the on click here for the back button to be on back and then we can set the on click for the next button to on next click save and let's go to our calendar and click next now it goes to february next it goes to march april etc and i'll just set an event april 4th which happens to be my birthday we'll set an event here make sure i spell that right and you can see the event shows up i can refresh the calendar ends up back on january if i go back to april you can see it's still there i can delete it it looks like the calendar is fully functional now for the cherry on top what i want to do is go back into my app component and have a look at this huge use effect here i know that this functionality is necessary and and all that good stuff and it makes sense that it is housed within my app component because that's the higher order component but what's really bothering me is how much space this is taking up within my file you see all of the other components are super clean they just like you can look at it you can read it it's super easy to understand um but when i look at this giant use effect the only way that i can make this easier to understand what's going on is if i were to put comments up here and explain but i don't really want to have to do that it's better to have some sort of naming convention i want to be able to name this effect and i also don't really want all of these lines of code in this file because it makes it harder to keep this file clean so what i want to do is break this use effect out into a custom hook so i'm going to go inside of my source folder here and create a new folder called hooks although in reality i would have a folder called components where all of these components would exist and then a folder called hooks where the hooks would exist i'm just going to keep these like this for now but just remember that so inside of here i'll create a new folder called hooks and i'm going to create a new file called init date or let's just call it use date dot jsx so we have the use date.jsx actually we don't need jsx because we're not going to return any jsx let's just use it as normal javascript let's start by just simply importing react and use effect which we need to destructure from react and let's paste this entire use effect inside of this file actually we need to export a function so let's export const and we'll call this use date just like the file name and inside of here this is where we want to paste our effect so we have this huge effect here but this effect has a couple of dependencies right this effect requires events and nav but that's not in this file so we need to pass those in as arguments to this function here so events and nav what this is doing is it's actually setting days so what i kind of want to do is just also pass in the ability to set days so we'll say that this function this use date custom hook also accepts set days as an argument here so what i'm going to do is jump into my app component and delete all of that which i already did because i cut it and i'm going to import it here at the top i'm going to import my use date hook so use date from hooks slash use date so now i can use the hook what i want to do is implement it right here so let's just say use date just like this and pass in the three argument it requires the three arguments it requires which is events nav and set days so i'll just copy that over paste it in events exists as state right here so that's getting passed in nav exists as state right here which is getting passed in in set days is actually the function that updates our day's state right here so i'm actually giving that hook this state right here i'm gonna click save and let's just see if this works okay it does not like that says set date display is not defined so inside of our hook here we were calling set date display we're calling it right here and that again is state inside of the app component so we could go through and say set date display pass that in here and then take that as an argument here save and then when i go back it then you can see it's again going to require event for date event for date being this function right here that we're using inside of this app component so as you can see i'm going to keep having to paste in arguments every time this functionality requires a new value now you can see it works fine but i don't want to sit here and go through and paste in five arguments and then if i were to add another piece of functionality inside of here that this needs six arguments and seven arguments etc i don't like the way that this looks so instead what i'm going to do is have this component manage its own state or this hook manage its own state that it will then return to here so what do i mean by that i think it makes sense to pass in events and nav because that state that this component manages and should always manage so let's go back into our use date hook and remove everything except for events and nav and let's import use state here now let's have this hook manage its own state for the date display so let's say display and set date display and then let's also make sure that we get the other information that it needs as well there was the event for date function now as for the event for date function i'm just going to copy this over to my use date hook so now i have access to that function and then we need set days so let's also do the same thing here we'll we'll have it manage its own days state so days set days is equal to use state initialized as an empty array save okay now it doesn't break but what we need to do is make sure that we're setting and returning some things so below the use effect let's return an object with both the date display and the days so days and the date display now this use date hook is managing its own state it has the functionality for the use effect all baked into here and then it's returning an object with the days and the date display so now since i don't have to manage that state in this component anymore i can actually get rid of my my state for that here and instead set those values equal to use date so i can say days and date date display so now i'm just structuring out days and date display from the use date hook and when i save you can see we get the full functionality of the app and this looks much much much cleaner so we basically removed about 60 lines of code from our app component and put it inside of its own custom hook which is super helpful for us to keep our code clean okay so that was pretty interesting we took a vanilla javascript application that we made in a previous tutorial converted it over completely to react if you found this tutorial helpful and you enjoyed it please don't forget to hit the like button and subscribe if you haven't already so you don't miss any future videos and i will see you all in the next video [Music] you

Channel: PortEXE

Views: 29,678

Keywords: react, reactjs, converting js to react, converting to react, react design pattern, how to convert to react, vanilla javascript, plain javascript, pure javascript, react app, calendar app, react calendar, react calendar app

Id: Q5Xen_Y7lUk

Length: 62min 21sec (3741 seconds)

Published: Sun Jan 31 2021