Build a Notes App with React.js (for Beginners)

hey and welcome back to my mini react.js series so this is going to be a follow-up video to the one hour react.js tutorial i'm actually going to be putting our skills into practice and building this little notes application here so as a quick demo before we start um on the left hand side here you can add new notes i'm going to add like three notes here and for each note there is a going to be a title and you can also add some i just you know your actual note here and this the reason for this preview here is because this notepad is marked down enabled so i can use the double asterisk to make things bold or add italics or i can add headers and even code blocks so we're gonna be building all of this in our tutorial here and all of this code is available on github if you need any help and uh yeah so let's get started all right so let's start from the very beginning so we first of all need to install create react app and then we can clean up create react app and we can talk about how we're going to structure our application so step one is to navigate into our working directory of course so i'm going to do a little trick i'm going to cd here into my youtube folder and then i'm going to run my command to use my create react app so mpx create react app and then i'm going to give it a name so i'm just going to call this one notes alrighty so that looks like it works perfectly so next we're going to navigate into that folder we just created which is called notes so i'm going to cd into notes there we go so this is our create react app project here and then of course we're going to run npm start which is to create our development environment npm start and what this will do in just a second is it'll open up my browser go to low close 3000 and we should see our spinning reactor logo there we go perfect so step one what i always do with my projects is i like to clean up the actual create wrap tap boilerplate a bit so first of all let's go ahead and open up our project in vs code so first of all i want to go ahead and clean up all of the create react app extra files that they've added so my sort of standard process here is to delete app.test i'm also going to delete index.css logo.svg report web vitals and set up tests so delete move to trash and there we go so now we're going to have to fix some of these files because they depend on files we just deleted so i'm going to go ahead and remove index.css remove word vitals remove that block of code just there there we go so that's index.js then in app.js i'm going to go ahead and remove the logo i'm going to keep app.css because this is where we're going to put all of our styling and then i'm going to go ahead and just remove everything inside of div class name app and let's just put in notes app like that all right then so let's go ahead and test this by going into here and refreshing and there we go we see notes up now notes app is centered which means react has got some default styling so i'm going to go ahead into app.css and just command a delete to clear this file out so this app does have some styling and i'm not actually going to go through the styling as this is not a css video and i felt it wouldn't be appropriate to you know spend 15 minutes talking about how to style this so what i'm going to do is i'm going to upload all of the css styles to that github repository so all you need to do is go to the link in the description which should take you to this right here the css file inside of the github repository and all you need to do is click on the raw option here and just literally copy this entire file which is very very short it's just a few lines here copy this go back into vs code and paste this into your app.css right there and what this does is add all the styling so we don't have to spend time going through that um you should be fairly familiar with css in order to do this tutorial um but it isn't anything too complicated anyway all right then so let's just go ahead and save that and see what our application looks like so you'll see we've got this nice little distressed background here as you saw in the demo and we have our font improved a little bit all right then so let's go ahead and get started on actually building out this application then so of course we're going to utilize components more heavily in this application because in the last one we're only building a very simple blog sort of one page this one's gonna have a few more elements so we are gonna be utilizing components a little bit more than we did last time so what i'm going to do is i'm actually going to create two main components here the main and the sidebar the main is going to be the right hand side where you actually edit your note and the left is going to of course be the sidebar where you see your list of you know active notes so i'm going to go to my source here i'm going to create a new file i'm going to go ahead and call it side bar dot js oop can't type and create another one and call that main.js so these are our two components here of course in addition to our app.js component inside both of these we're going to create some basic component boilerplate as you need so i'm just going to go ahead and create a function sidebar very standard capital s for your func for your component names and then just down here i'm going to go ahead and export these as the default sidebar just like that perfect now i'm going to do the same thing here for main.js so function main and export default main just like that so now what we can do is we can actually go ahead and import these into our app here so we have sort of our general structure going so as you know to import a component you write them as if they're sort of you know html tags here so what i'm going to do is i'm going to type in my sidebar i'm actually going to get an auto import here by vs code but i'm gonna do it manually so i can show you so sidebar capital s and self closing and then main capital m and self closing again sidebar and main i'm gonna go to the top here i'm gonna go ahead and just import them so import sidebar from dot slash oops dot slash for the current directory and then if you get a kind of recommendation here via vs code you've definitely done it correctly so i'm seeing sidebar i'm going to put that in and i'm going to duplicate this line down and use some trickery here to write main so we have our two imports there we go so if we save that um we actually have no content in these so let's go ahead and render out something let's go ahead and return a paragraph and say sidebar in our sidebar file and return a paragraph that says main in our main file go to firefox and there we go sidebar and main so our two imports are working perfectly so let's go ahead and get started on our sidebar then that's going to be where we're going to sort of start all this this is where we're going to start rendering out our list of notes and then we can go back into the main and look at how we're going to manage all this data in react so in our sidebar file so what we're going to do here is we're going to create a div actually i'm going to give this div a class name to match up with our styling and the class name is going to be app sidebar just like that and that'll give it some basic border right and some padding and so on and the first thing we need to create there for is the header so we had it in our header we had an add button and a little h1 so we're gonna go ahead and create that app sidebar header so app sidebar header and inside of there we're going to have a h1 tag and we're going to add in there we're just going to put notes in there you can call us whatever you want for example you could have like your name and notes i call this like james's notes or something but i'm just going to call it notes and then underneath that we're going to create a button this is going to be our add button so i'm just going to write add we're going to give this an on click handler later on so our head is done now we're going to add the actual list of notes add this the markup for it so div class name of app sidebar notes and each note is going to have an individual div called app sidebar note so let's do that div class name app sidebar note just like that and of course you saw a couple of things inside of each note element for example the title of the note the delete button the body as a short preview of the note and also the last modified text so this is pretty simple to mark up so it is a first of all a header so an app so i called this one sidebar note title and inside of the title we had a strong tag for the actual note title so this will be whatever the title is i'll just write title in there for now and also in the title was a delete button which we can do very similarly by adding a basic button here i'm just writing in delete and underneath the title there we had a paragraph tag add extra space for that and then we had a little bit of preview so i'm just going to put note preview and then underneath that paragraph tag we just added a last modified indicator so i actually did that with the small tags because it was small text and i gave it the class name of note meta some metadata about the note and then this is going to have last mod defied and then a some sort of date here all righty so that is the basic markup for our sidebar so let's go ahead and refresh here and we'll see that our css has done some nice work here and it's added some basic styling to our add button to our title here and to our note with a little bit of a hover effect so next let's move on to styling up the main over here where we're actually going to edit our notes and then all of our markup sort of the boring stuff is done so we can get on with you know doing the real react functionality here so let's head into our main.js file and go ahead and start writing out some markup so the markup in here is even simpler what we're going to have is we're going to have a div and this div is going to have a class name of app main just like that inside of our app name we're going to have a two sections so if you remember from the demo we had a upper section here where we have our text boxes and a lower section where we had our markdown preview so this is going to be two divs the first one is going to be called class name app main note edit so that's the first div the second div is app main note preview and then that is all that is the two sections so inside these two sections in the first one we've got some just basic input fields so we're gonna have an input field for the title so input and this is self-closing and we're just to give it a couple of attributes here so it's going to be a type of text it is going to have an id just a title so we can identify it and we're going to have it set to auto focus so whenever you hit the page this means that it'll automatically be focused on which we can see if we just go and refresh the page we're already typing in there and this is just a nice little user experience improvement here and you can see it's already large and it's got a big font size for the title super useful what we're also gonna do is we're gonna add a little placeholder as well which actually no we're not gonna add a placeholder because we're actually gonna give it a default title of untitled so the placeholder will actually never be seen so we're not going to do that we're just going to have these underneath that of course we had a text area which is a slightly which is just a longer multi-line text box which is text area self-closing i'm going to give this an id of body it doesn't need a type and we will add a placeholder to this one because there'll be nothing in it by default so we could just write like write your note here something like that which we can see if we go to here it just has some gray text which disappears when you start typing and that is actually it for the text area so that's all we've got to add for now and then just below that we're going to add some basic structure here to our preview so you probably guess but we're going to need a h1 for our title which is eventually going to show a title down here and it is then going to have the actual preview the actual preview of our note itself so i'm just going to write you know note preview oh we're missing um i wonder why there was no padding here so we're just missing a class on the h1 here so it is a class name of preview title and this note preview is actually in a div and it is called markdown preview so preview title and markdown preview for these two and if we refresh we'll see it looks just like the demo application which is awesome but of course there is no actual functionality yet so let's get into our functionality all right then so because we have two sub components and then of course our app main component all of our information is going to be stored within app because both components need to have access to it so if we stored for example our list of notes within our sidebar here then main won't be able to access it and app won't be able to access it because they're at different levels on the hierarchy so of course that means we're gonna have to store all of our state within app so we're gonna have a array of notes and they're gonna be stored in state so let's go ahead and create that state so of course const and then our array here to create our getter and setters and let's just call that notes and set notes i'll get to those notes and i'll set it as set notes and we set that equal to the use state function and our default is going to be an empty array of course because it's an array of items our use set is underlined because we haven't imported it so let's go ahead and import it i'm going to put it at the very top and that is going to be a named export from the react library import use date with those named export curly brackets from whoops not sure but then from react just like that so that's our notes state here the component that's going to need our list of notes is going to be the sidebar so what we're going to do is we're going to send this through as a prop on the sidebar so sidebar also gets live access to this piece of state so we're going to go down here to our sidebar and we're going to pass in notes now i'm going to call the prop notes obviously for consistency and set that equal to notes here with the curly brackets so now if we go to our sidebar we can actually get that piece of state so a little tip from last time was you can get props of course by typing in props into the parameter here of the component but a little trick is what you can do is you actually destruct this so in modern versions of javascript there's something called destructuring so whenever you send through an object you can actually write out the object like this you can just put some curly brackets as if you're about to write an object and name all of the keys in it and they become local variables inside of this file if that makes sense so this is a bit of javascript knowledge which is why the prerequisite for this is javascript but if you're not familiar you can just have a quick look up of it but what we can do here is we can actually name one of the exports in the object so if props is an object we know that props has one key on it which is the prop we just made notes so we can name that export so we can type in notes here and that basically takes notes out of the object and creates a local variable here for it so we can access it just via notes and you'll see me using this quite a lot as we go through so now we have access to notes as an array so what i can now do is i can now use that call map function so we're going to loop through our notes and create an individual note within our sidebar here so what we can do is we can wrap this div here inside of that map function so we can open up our curly brackets to start a javascript statement and we can type notes dot map and then for each note we're just going to call it note for now and then of course do our arrow function here and then we're going to automatically return by just using brackets i'm going to take our div here and i'm just going to drag it into the center and what that's going to do is we're going to output this div and all of its content for each note in the array and we can access data about each node with this note variable so cool so if we go to firefox there's going to be no notes here now the reason for this obviously is because we haven't created one yet so let's go ahead and create a note because they're really simple to create so what we're going to do is we're going to add a event handle onto this button so whenever we click this button we're going to do you know on add note right now we can't add this we can't actually write the logic for this function inside of sidebar because of course the data is all stored within app.js so what we're going to do is we're going to call one of our prop based functions and what will happen is when we call a function that's passed through as a prop we can then call a function within our app which is a really really useful function of props so for example if we had a function here now from now on all of my event handle functions will be arrow functions and not in this style like they were in the last tutorial but arrow functions are identical essentially they just look a little different for example if i have on add note equals brackets then arrow and then curly brackets and then let's say you know console.log add what we can do is we can pass this function through as a prop so on add note that's what we'll call the prop and we'll just set it equal to on add note and now whenever we call this here of course we have to name we have to destructure that prop there so now whenever we click this button it's going to call on add note here which is going to go to the props of the sidebar and actually call the function here where the sidebar was referenced which is really really cool so if we save both these files and go back to firefox what we can actually do now is well we'll need our console up we press add it works so we're calling a function inside the parent so inside then what we're going to want to do is write some on add note logic which is going to be as simple as updating our set note state and adding a new object to it each note of course will be an object because we want to store you know several pieces of data in each note so we'll have you know four keys in each object and then we can have you know unlimited amount of objects so what does each note look like let's create that so let's go ahead and create a variable here so const let's call that new note and then let's create an object so curly brackets for object and we're gonna need some keys here so we'll need an id a title for our title we will need a body for the actual note itself and also a last modified indicator for the last time the note was modified for id we ran some prob into some problems last time with ids we don't want to ever duplicate these because we're going to be using it to identify which one was updated and also passing through a key to the array so that it doesn't complain at us so what we're actually going to do is we're actually going to use an external library to create this id so we can assure we have a random id every time so this is our first time installing an external package into react so the way we're going to do that is we're actually going to go to our terminal we're going to press ctrl c to cancel out of our development environment here and then we're going to use npm install and what this is going to do is going to install an external package an external dependency into our project so this dependency is called react uuid so react uuid so npm install react dash uuid like that press enter and now that's done what we have access to is this library react uid so what we're going to do is just npm start to run our server again and while that's working away we can go ahead and start using it so what we can do here is we can import this so i'm going to go ahead and i'm actually going to import it underneath react here and this is actually a named export called a default export sorry called uuid and it is from react uuid package we installed and it's it is really simple to use this so we just call this as a function here and what that will do is it will create a random id for our new note which is perfect all righty so we have that done now our title you can call whatever you want this is going to be the default of the new note so i'm going to call this one untitled note like i did in my example and we're missing a comma up there the body is just going to be empty and our last modified is going to be the current date so date dot now in javascript missing a comma again all right so that's it so now what we need to do is need to append this onto our current array which we're going to use the spread operator again for so we're going to set notes create a new array which will have the new note and then we'll spread on the existing notes so a new array where we add in our new object and then we basically take all the objects out of the current notes array and put them into our new array as simple as that so now we can test that all right so let's go into here and press add and there we go there's our new note with our currently statically named title and note preview but now we can go to a sidebar and we can actually populate some of this information now it's still an object so let's go back into our vs code here head into the sidebar and where we wrote title we now know that note is an object so we can actually write note dot oh note dot title sorry like that and for our note preview this can be note dot body and for our last modified this can be note dot last modified just like that and there we go untitled note and then our description would be here if we had some body text now of course this last modifier doesn't look very pretty and another thing you'll notice is the note body here this would be the entire body which of course we don't want so no body first what we're going to do is we're going to use that conditional rendering like we looked at in the last one and what we're going to do is we're going to check if there's a note body so if there's no body we're only going to look at the if there's a note body not the else so we can use double and so if there's a note body do this otherwise well do nothing so what we're going to do with this body is we're going to use substring which is going to basically take a certain portion of the string off so let's say the first 100 characters and display that so we're going to do note dot body dot sub string s-u-b-s-t-r and then i'm going to do the first zeroth character to the first 100th character so from characters 0 to 100 i want to take and then i want to append on to that dot dot now for our last modified we want this to be a nice readable date so what there is is actually a built-in javascript function for this now where what we can do is we can wrap this in a new instance of date so we can create a new instance of date on our last updated timestamp and then use dot to local date string which looks like this and this takes two parameters the locale so for me it's engb and then an object and this object can take some different formatting parameters which for me so far will actually already look pretty good if i refresh as you can see oh six slash o2 2021 but it's just missing a date here so what i'm going to do is in my options string object sorry i'm going to go ahead and say i want an hour in the two-digit format and i want the minute in the two-digit format just like that cool so now if we refresh we see our full timestamp here so perfect so that is all done what we've done here is we've essentially completed the sidebar except for the delete button which we will um we will do right now actually because we can do it right now so let's go ahead and do a very similar thing like we did to on add notes which is going to be on delete note so we can do one on click here and we can do on delete note now on delete note of course isn't as simple as on add note because there is no data before adding a note because you're creating one whereas on delete note we need some kind of reference to the note we're deleting so this is going to need an id which we have in note dot id because the no object but we of course know that this is going to now automatically run so we're going to bind this to the button by wrapping it inside of a arrow function like this there you go now on delete note like on add note is going to be a function run inside of the parent in app.js so we're going to copy this add it to our list of props here and then create that prop so in app.js let's go ahead and make this prop on our on delete note on delete note so we're passing the function down to our parent here or up to our parent sorry and then we can actually create our function logic so on delete notes will be a simple function like last time and what we'll want to do is use the filter javascript function which is really cool so filter is another one of the modern es6 javascript array functions and what it's going to let us do is it's going to let us write a little bit of logic for when it loops around the array so essentially what this function is going to do is it's going to loop through each item in the array and only if the logic on each loop passes true then that item will actually stay in the array otherwise it will be removed so what we can do is we can what we can do is we can just do a little check inside of those inside of that loop logic to see if the id is the one we're deleting or not and if it is not then we can let it stay but if it is the id then we can return false and we can actually remove it from the array which is really cool so what we're going to do therefore is we are going to of course set notes because we want to set but inside of here we can run that filter function so we can say we want notes to still be in there but we want to filter on them and inside of that for each note we want to check the current loops the current iterations note id like this and then compare it to the note id coming in so on delete note of course we brought in the um the i i'm going to call it id to delete so it's clear cause this is kind of difficult syntax to read so i need to delete so this is our iteration logic so for each note kind of like map we want to look at the note id and then if it's not equal to the id to delete then it's going to pass true and it's going to stay in the array otherwise it's going to pass false and therefore is going to be removed from the array which is super cool so that's it that's it for delete note so if you actually tested that it would delete the note and that's it so if we refresh let's add you know four notes delete delete delete you can't see the difference between them but there you go it's really as simple as that we've already built add and delete note all right then so the next move is going to be to look at the current active note this is going to be our last piece of functionality here so the active note this is going to be the one that we are currently looking at on our right hand side here and this is also so we can populate some props inside of this right hand side main panel over here so if we have a note what we're going to want to be able to do is click on this and then it will store the id and state the current active note and then this component can look at that and say get the data from it and display it all and then it can actually send any changes back to our main app array so that sounds a little complicated but it's really not so let's get into it so inside of here what we're going to want to store is again because we want to share it across main and sidebar we want to store a piece of state that is going to start our current active note so let's call it active note and set active note use state and let's set it default to false i.e no active note now what we want to do is we want to actually set this active note when a note is clicked which of course will be in the sidebar component now sidebar will actually need to know both of these it'll need to know the active note and which and also it will need the function to set it so what i'm going to do out of interest here is give both this getter and setter directly to our sidebar component so i'm going to give it active note and set active note and set those equal to the same named getter and setter here this is quite a lot of props as you start to get into advanced reacts you'll start to use things like state managers which are to avoid problems like this where there's too many props being passed through but this is quite a small project so we're kind of going to hit the limits of how many props we'd want to send through this is fine for this size of project but we've sent all of our props through here active and set active and we can go ahead and grab those inside of sidebar so sidebar now has active note and set active note cool this is prettier by the way whenever i save prettier as a formatter that attempts to clean up my code make sure it doesn't go too far off the screen so you can really easily so that's why if i save and things randomly change it's say this here which you can install it's a vs code extension so anyway active node set active node so what we're going to want to do here is whenever i click on a node so whenever i click on one of these divs here sidebar note i want to set the active with the current id so that's simple right i can just add an on click and i can set active note and set the id right yeah i can but the only problem here is this would run by default so i need to bind it by using a arrow function and that is it yeah i just want to do an on click and set the active note whenever i click so let's test that oh of course yeah so that is working but we can't actually see this working yet because there is no indication we'd want this to go blue now i've added a style for this on app sidebar note which is called active just like that so if i was to save that and have a look we'll see that it's now blue so we want this to happen only when this id the current notes id in the loop in the list matches the one that's set as active in the state so we're going to want to add a dynamic class name which we actually did cover in the first section of this but we want to have a static part and then a non-static part so what we're going to do is we're going to use the string builder for this so i'm going to copy the original class name here and remove all this and open our curly brackets here now the backticks allow us to use what's called the stringbuilder which is a javascript function and what we're going to do is we're going to add in our original class here and then go in this side the builder then use javascript again it's a little bit confusing but it's a really really clean way of doing this rather than using like the append plus or whatever so dollar sign and open up curly brackets and now i can write some javascript logic in it so i can say if note dot id equals equals equals identical to the current active note then i can use the um the conditional logic again with and and and say and and just return active because whatever this whatever these javascript statements return inside of the string uh the dynamic string builder here will just be printed out into into the string right so i can do this and then back in firefox if i add i can add let's say three notes whichever one i click will now highlight because we can confirm that it is stored in state as the active note so that's all right so what we need to do then is go into our app now and send this active note to the main function now the main function does need more than just the active sort of id it's going to need the all of the objects for whichever note is active so we're going to want to pass through the current active note as a prop here but we can't just send through the active note state because this is just an id so what we're going to do is we're going to create a little helper function here so just underneath on delete note i'm going to create a helper function called uh get active note now what get active note is going to do is it's going to get the current it's going to be a super a quick sort of one liner here that's going to get the current stored id and find it in the array and then return the entire object so let me show you so get active node is going to return notes dot find which is another es6 function here and it's going to loop through each note and i can write some logic so the only one here that returns true is the one that's found so i'm going to say if the note id inside of this inside this logic is equal to the current active note and whichever one of these returns true this is going to actually return the object of the current active note and then we can just run this function inside the prop get active note and then of course it's a function so two brackets and we do want this one to run automatically so this one we want it to always be running so this is always passing through the current active note so there is a use for automatically running a function as a prop so that's all we need to do there so now main has access to the current active note which is really really cool so let's go into main now main we can now start you know rendering some of this out so for example in our preview title let's add note dot title but we are missing the adding the prop here so we're going to do a uh we're going to deconstruct it again and we're going to add in the name of the prop which was i think it's active note so we're going to destructure the props here into this active note and therefore this is called activenote.title and this one is activenote.body just like that and let's go ahead and preview that and yeah untitled note and we don't have a body yet because we haven't added any functionality so let's go ahead and well make these do something so these two what they're going to want to do is they are going to want to update whatever the current active note is and then it will actually update it live let's go ahead and do that this is going to be probably the most complicated part of the whole thing here so we're not going to create local state for these because what they're actually doing is they're directly updating this active note that we're bringing through here so what we will want to do instead is we will want to essentially run a updater function that runs in the parent directly on the on change handlers for these so rather than updating state with these they're going to update a part of a array in the parent state now that does sound really really complicated so let's go ahead and do some basic things first let's go ahead and add values onto these they're going to be we need to set the actual values what's going to be in these boxes and it's going to be in these boxes the active note dot title and the active note dot body inside of the text area now at least we have these here as you can see now when we unchange these what we're going to want to do is we're going to want to run a function that we're going to create within here so we're going to call that function uh which we call it on edit field this will start to make sense as i write it out now on edit field let's send through two parameters so we're going to use it in both our text area here and inside of our input so we're going to the first one we're going to say is which one we are editing so this one is the title and then the second parameter we're going to send through is the current will unchange value so get the event here and send it to e dot target dot value okay and i'm going to copy this and use it inside of our text area as well but this one is going to be body so let's actually create this on edit field function that we're sending these parameters to so up here at the top i'm going to create a function called on edit field and that's going to take the key we're updating so either title or body right here and then the actual value like that and what we're going to do here is we're going to update the array inside of the app.js where the state is and we're going to run a function up there but what we're actually going to do here is we are going to construct the object that we're sending back so in fact no let's create the function we're going to call first so in order to not confuse you eventually this this on edit field is going to do something but in app we're going to need to receive that change so let's call this function so we have on add note on delete note let's create on edit note or let's call that on update note and what this is going to do is we're actually going to use map in a slightly different way so map's really cool what map does is when it loops through each one of it loops through an array and it allows you to modify each item in the array for however you want to display them but this also means what we can do is we can actually use map to modify an array so what i mean by this is let's say we create a constant variable here and we call it updated notes array like that and then we run map on notes like we do and we get for each note and instead of an automatic return we're going to open up curly brackets here which is going to allow us to write a proper block of code and what we're going to do is for each of these for each loop here for each iteration we're going to check if the current note id is equal to the note that we are editing so what we can do is we can say if the note id is equal to the current active note then what we want to do is we want to update it with our new object so on this loop here if we're on the current active note so if so inside this loop this means that we're looking at the corrective note so if we are then what we're going to do is we're going to modify this current iteration with a completely new object of data which is going to come through when we run our edit note so this will be updated note the updated no object so we're going to return updated note which means replace this iteration in the array with updated note otherwise which we can just do down here we're going to return the original just note of the iteration we don't want to modify any other iterations on that array now with our updated notes array we can just simply update the state right so we can do set notes and run our updated notes array that we just created so as simple as that so this means now all we need to do is we need to send we need to fire on update note from our main with an updated object so an updated title an updated body and an updated last modified timestamp that's an important one so let's go ahead and take this on update note and pop it into our main and just put it on update note and now we have all the functionality we need right because all this is going to require is that updated object as long as the id is the same because that would kind of mess up the original array so if we go to our main here we need to get that prop from the destructuring on update note and then on edit field can just run that function on update note but we just need to send through some form of object here now this object is going to be a reconstruction of the current active node so we know that an active node has four different fields id title body and last modified we're going to want to update all of these except for id so id is going to be equal to active node.id we're going to get the current active node id and set it exactly the same we don't want to change it but our title this will be based on our key and value so what we're going to do here is well actually we're gonna do something cool here so because this could either be title or body on our key is named identically like here what we can actually do is we don't have to do it's gonna be either or title or body update here so we can just do a dynamic key here which we can do by wrapping it in square brackets typing key and whatever key is it will target either title or body in whichever scenario we're running on update field and we can set that to value like that super simple and then last modified this is just going to be the same as we did last time inside of app.js which was date.now so here's the last modified date whenever something's edited so this one's the kind of cool part here and you know what i actually think that is all so let's go ahead and take a look so active note is undefined here so this means that inside of our main we're trying to access the title when active note is false so what we can actually do here as is really cool is just before we return all this this is basic javascript right so before we return jsx let's go ahead and run if statement which is going to say if there is an active note or sorry if there's not an active note so this is the boolean not here so this is going to reverse this so if active note is true this is going to do the opposite so if an active node doesn't exist then let's return a different set of jsx and actually created some styling for this so it's div class name no active note and you can write whatever you want in here um no note selected and this will remove our error here as you can see because we're not trying to render out something doesn't exist and there we go so no note selected so if we add then there we go it's rendering our untitled note let's go ahead and change this to example note and there we go it's updating that object through on update note and we can see it here because this is rendering also the live output and it's updating here and it's updating here of course as well which is freaking awesome and some body text just like that there oh so here's an issue what we've gone ahead and done here is we've gone ahead and removed the actual title because what we're doing here is we're only we're not adding all the existing fields so example if you're updating title here and setting it to whatever we're actually deleting body so there's actually going to be a better way of doing this here than doing this let's spread out the existing whatever is in active note already and only modify the ones we want to modify so we know we're not changing id so we can remove that and let's go ahead and get whatever's in the active note and just like what we did to the arrays we're going to do dot dot which is going to spread all the keys out of active note and add them so then we're only modifying the ones we want to modify and everything else will stay as is so that's really important a little mistake on my side then i still make mistakes all the time um you will make mistakes as well it's not a problem if you make mistakes so active note like that let's add one go into here and now if we type something yeah both of them stay so we're not modifying we're not deleting the other key when we update one of the keys so that's perfect um so what else is left to do here so we have adding notes and we can update different notes and we can modify them so we are missing a couple of things here so first of all the markdown isn't showing so if we were to write stars in here hello we are rendering our markdown preview here so this one's really really easy so we're actually gonna use another library for this and that library is called react markdown so let's go ahead and install that so go to item control c out of it i'm gonna go ahead and mpm install react markdown great and then we can go ahead and npm start again cool so we have access to it so if we go to visual studio code we can go to our main here and we can go ahead and import react markdown which is called exactly how it's written here so react mark down from what we just typed react markdown like that and this is how the component looks capital r capital m as components always are and all we actually have to do here is we actually replace the div that we are wrapping our current um body we want to convert smart down with the react markdown tags so they become the tags that we use instead just like that so instead of divs we have react markdown and that means whenever we go into our application here and type markdown react markdown is actually going to render that out as html tags so that is done so that was super super simple the last thing here i think this is the last thing is to go ahead and make it so whichever the most recently updated note is will show at the top so if we go ahead and update this note it will go to the top and this one won't be at the top anymore so this is simple we're going to use another es6 javascript function and this is going to be in the sidebar and what we're going to do here is at the top we're going to create a a modified version of this note array here which is going to be sorted so we can do we can create an array called sorted notes i'm going to take the normal notes and we're going to use the sort function which um is it gives a callback and inside the callback you get an a and b as you can see by this little description here and you can compare a and b together now this is quite a complicated function um so i definitely encourage you to look this one up but essentially in order to create descending order which means the uh most recent is at the top we're going to want to compare b to a like this do b negative a and this is going to do a if that's true it's going to push things up the array so what we're going to do is we're going to compare b and a and inside of b and a we want to compare this this is um comparing two elements of the object together as it does a uh loop this is a sorting algorithm so on b we want to look at last modified and a we want to look at mass modified i'm going to go ahead and compare those together comparing b to a first and this will mean that the most recently modified will be pushed to the top of the notes array and then we're going to take sorted notes and replace it down here so will go ahead and work and this is really cool because this is um react of course any changes here will be automatically updated down here so let's go ahead and add a couple and then this one here change it and it goes to the top okay so that's done so yeah great we have a finished application here and in the next section we're actually just going to do a little bonus part which is to get these notes to stay on your computer in local storage so i'll see you in the next section all right so a little bonus here this is obviously an optional feature if you are still watching at this point but it is going to be to make all of these notes persist in local storage so local storage is a little um storage part of your browser where you can just essentially store key value pairs so there's one big object in your browser storage and inside of that i can create a key for example notes and i can store any string that i want up to a certain size which means what i can do is i can actually convert this array of notes to a string using something called json stringify and then i can pass that back into this array again when i retrieve it from local storage and this is actually really really easy to do it's basically going to be two lines of code but as you'll see right now if i refresh the page all my notes disappear but that'll be fixed with this so all i need to do is i need to use an effect hook now this is going to be a different use of the effect hook than what i explained in the last video in the last video i used effect hooks as a way of getting data from an api which if we added an api to this to store it to a server which would be the way better way of doing this is that's what we would use but we're actually going to use the effect took this time to watch a variable and run code when that variable changes so in this case when we write our use effect hook and write our logic in here with our dependency array we're going to put the notes array as our dependency so we're going to use this to run as a side effects of note changing and what we're going to do is we're going to store it in local storage every time it changes so every single letter that's written is automatically saved in the browser and it looks like this local storage small l capital s like that local storage and then it's a function on the local storage api here so it's called set item local storage dot set item and what you do is you give a key and a value so our key is called whatever you want this is just a reference name for it so you know notes anything you want and then the value for it so the value is going to be a stringified version of this array we can't store anything other than strings in here as you can see it'll say somewhere in here that it is a string as you can see that string you can't store array if you saw an array in here it won't work so we use a handy little function here called json stringify which converts any uh you know javascript objects or strings into a str an actual string rather than what it used to be and in there we pass in our notes our actual notes array which is why we're depending on it and that's all whenever we update the notes array in any form it will be stored in local storage but how do we retrieve from local storage now we're only retrieving when the application initially like boots up so we can actually make it the default state for notes so what we can do is we can say instead of an empty array we can say local storage dot notes which is our reference name here so we just do local storage.notes and we can just pass that so we're gonna have to run this inside of json.pass just like that and now whatever's in there will be set like this but this would actually error out if this was a fresh browser using this because there would be right now in mind there'll be an empty array stored in here but some people may not have an empty array because they're visiting your site for the first time so while this is valid now we need to use an else which we can do in one line using another little handy javascript feature of conditional rendering which is a sort of else function so if this returns false i or undefined we can just say double pipes here and then an alternative value if this is false or undefined and i'm just going to say an empty array and that is actually it that's all we need to do to fully sync or sync up our application to the built-in local storage api save that refresh our page add some notes this is my note and i'm going to store some code in here i'm going to store some html tags i'm going to refresh the page and it's all still there working absolutely perfectly so there we go that's how you create a notes app from start to finish as a sort of continuing on from this tutorial try and extend this application with new features in react to really enhance your learning on this because again you don't learn until you really practice following tutorials was not how i learned um you really need to go out there and and actually write code that you haven't seen before um and that you're creating from scratch using things that you've learned like state and effect hooks and jsx and so on so good luck and i hope you enjoyed this tutorial

Channel: James Grimshaw

Views: 10,223

Keywords: react.js, react, tutorial

Id: ulOKYl5sHGk

Length: 60min 52sec (3652 seconds)

Published: Sun Feb 07 2021