CRUD operation in MERN stack. Note taking app in React.

hello and welcome in this video I will show you how to perform Cloud operations in the morning stack the application will also be out taking app in react and will continue markdown HTML parser and the HTTP request will be made using CEOs politicator reactor you can create it by doing npx create app and give you any name you want flip node and just press enter I've already created one so now now I will change directly create folder and I will run the app npm from start enter And while last while the app starts I will get working on the back end foreign called making inside it I will create a server dot JS file and I will open under instance of the terminal and I will change directory to the backing folder now I will NTM in it to initialize 10 pm now I will install the packages that I will need I will install npmi Express Mongoose and course in courses thanks for cross origin resource sharing that will allow react to request data format again the packages are installed now I will install one more package that is not difficult to the dependency so in PM I minus minus say minus D note it will register any synges that will give me to the server over the file and restart the server automatically now go to the package.json file and create a new script for see the node mode server.js save it now import the modules [Music] cons Express is equal to required Express cones head is equal to Express cons Ole require [Music] mongoose course is going to require course and I'll be using the port 4000 . now introduce course app dot use expression dot Json which is your middleware and also I will need to use Express dot URL encoder in that false this express.viewer encoder and notice on our board built in middle University in Express so I don't have to install it separately now I will be listening to port 4000 and I will console log if the server starts there started yeah port 350 liters can save it almost npm round starts yes okay so the server started report 4000 now let me get the database model I will create a new folder cover models in it I will create a new file dot dot Js first of all I will import [Music] require mongoose then I will be the schema I don't know Mongoose dot schema it will only condenser windows for title should be live stream and also also the node foreign then I will create a export it dual Dot ports equal to Mongoose Dot model and load schema save it and go to the server.js file code cons node is equal to go here models node here and then let's connect to mongoose indoor connect mongodb localhost I will name the Plus collection is create node it gives the existing The Collection by the name it will be the app will use it if not then it will create a new one then to set use you URL parser Unified topology too true then if the connection is established I will console log database connected and if not I will also log the error save it operation for create then read and then update and then delete first let's get the endpoint for create go to the DOT post node request response we need the title which I will get home for form in the front end then I will need hello the request or body property contains key value pairs in the request body in this case final data submitted in the form and then cons new node which is a new instance of the schema the schema that we are saving we are going to save to you know the title and more dot save dot service command error and date sorry if there is an yellow it will console look the error and respond if everything is okay it will send the responses okay until I will console log the new node save it now let's head to the create folder I will be I will have to install the real daughter Dom for routing so the rear data down has been installed I'll be installing a few more libraries and packages for to install NP am I excuse and react and rear wheel and which is a markdown and also if we installed HTML create parser goes the react will only save it in a form of plain HTML I have to pass it HTML note text and while all these installs I will go to bootstrap and get the CSS link I will get the CSS link copied and put it and go to the public index.html in the rear folder and paste it here also I will have to cryptos JavaScript plugins copy and paste it here and then save it next I will create a components folder and inside this I will also I will create all the files that will be required for the various components first of all I will need a nap then I will need a create component creator that are in the nodes then I will need a notes component to display all the nodes then I will need component to update downloads all of these components will be a functional components so rdfce enter save it then rdfc third seed rdfc part save it now go to good save again I will quickly get the left bar beat and paste it foreign now I will configure that also go to Js people import route and routes from create router Dom then I will import all the components import here import create import edit and import notes now remove this I don't need this put it on your part save it let's take a look at it still combining okay all the time set up the routes okay this is looking around part will do create element of the component notes foreign folder and import browse router oh we got to down and wrap this entire thing within the browser router save it and also save the app to JS file now go to name.js and set a notification so import link from your router down in Via you can name it in the class as class I'm using class is a keyword in V8 so you have to change all the classes to class names in chemical case and also you can use Encore text to use Link and in place of HF it should be two link two and this one also two instead of containing I'll put here create and this one will be to display all the nodes foreign so go to post it again from control copy this one then go to dinner go to create deep dot container paste the phone here or maintenance command in place of email address it will be title and the type will be text here it will be load and I will remove this one and since the classes to class names and enclosition writing within a form good paste save it and I will have to import [Music] used it and I will also import xeos and I will import website go to npm series copied and then paste it here and grab this line again copy it in place of the text area please paste it now I will initialize a new step for the title and nodes so chords title set title I'm going to use date initially it will be an empty string and accounts node set node into you stayed 10 I'll set up the own sound since email Handler to listen to the changes me to the input fields or dead here it will be on scenes event and then it will be set title even load Target dot value and this one will be on scenes in this set note save it let's see thank you working so this is how the rundown works also in regular points create date delete then I will need a button foreign [Music] now I will set up a function to handle the changes home sandals of meat with the container object note object foreign title in this title is the state and done mode then I will use xcos to post this to the server is a new mode to this new mode this will be done note on check then if the notice successfully posted it is an alert form on submit and we call the function and result save it let's see if it is working or not I'll go to this terminal here as you can see in the end point if it submits if it successfully submits the poster or server then your console lockdown new node actually PC to sting submit yeah it's working days two so you can see that it is HTML now I will have to display the data in the notes for that I will go to the component notes and quickly create a card card here Dot card node in my tree giving a margin top and bottom margin of 3. and then Dot card body and it's two Dot card title NP [Music] content download and I also need a couple of buttons now we need two buttons [Music] hold for deleting it and another one will be to update it this looks better now I will import use effect before that I will set up the endpoint to read another you have located in limited roots request command response and load dot find function here you are data if there's an error the find function is used to find a particular data on the mongodb database then it is an arrow it will console of the error else detail send the response open Json ATA save it and go to nodes you can also see the nodes here also if you go to kill host 4000 and notes right in small enter yeah let's go to display here is this one data to display it in our front end now I will use the use effect hoop so I'll be needing the use state and I will and I will need the xcos and I will need the parts from the HTML you get cursor [Music] then I will you know initially as another state here by the name of items and set items initially it will be an empty area now use effect excuse dot get please copy this URL and paste it here then I will take the response from the URL and I will set the item foreign error I will console lock driver now the State items is an array so I will map user map to activate over the array and here I will display the element dot title and here I will use parse faster row HTML text save it let's see you'll have to return this sorry my bad delete and before the application save it again I had to restart the npm application again sorry application again so this is working I'm getting the notes Here let me create one more note okay okay now the create and read is done now I have to delete an update the data before I go on updating I should I will show you how to delete it to create the endpoint for deleting I'll show you one more thing before that mean notes if you put element dot underscore ID you will get a unique ID for each other record and I will be using this unique ID to Target the particular node that I want to delete so for that in the back end this F dot delete delete colon ID K response your function node Dot delete one you can see here you just delete one you also directly on delete many this to our Mongoose functions and you can delete number of them at once or you can delete one also I'll be using delete one the underscore ID say request Dot products dot ID function error foreign go to notes and create a function cones delete node and I'll be using I am passing in argument as the ID IDs argument and I will use xcos to send in the HTTP request to delete the particular node for the similar to this one you got since the end point to delete node and I'll be using template tutorial 90 now you may not add this properties but it is better to write this part not then window dot location Dot reload holes what happens when you press delete here it will delete the recorded database but it won't be displayed in the front end now oh I have called a function on click delete node and human dot underscore ID and then save it yeah it's deleted foreign for the update operation and just go to the create copy this and paste it here and instead of post this will be put report request and we save the endpoint here to edit I'm dead space column ID this response will be using the Mongoose function defined by ID and update for request dot data is equal to node Dot find my ID and update GPS dot parents dot ID 10 those will be stored data then I will remove this this block try okay data is equal to data dot save name response Dotson updated and if I catch an error I need console log driver should be using so I will just put it this thing for it and this also we have it save it now let's make the changes to the front end first of all in the notes no we're not in the nodes now to and of course we have to get that particular node that we in the scenes then we have to edit it okay so the user method is to be passing the data of that particular node test box to the edit component to this component but instead of that I am going to use the use context for hook your context in the context provides of a to pass data to the component tree without having to pass process downwind nearly at every level what this means that the states that are created in edit not in addition notes like set item items or title any of them I cannot use them I can only use them locally in this particular component I cannot use them in another component without declined them separately so context provides You by using context I can test that I can use true globally throughout the component throughout the tree so for that first I will create a component we will need a context which is then we'll import create context from the edge and I will export item state context you can limit anything you want I'm just leaving it em state here context save it now go to F dot Js import the item State context from components context 10 we also need to initialize import view state create a application I will name it post is equal to U state and initially it will be an entire day then I will use the provider component provide component which will accept the list post as a prop to pass it throughout the tree foreign foreign just take context from context and chords set Force okay to use context context foreign button and also actually import a link google.com link to edit and click I will set post all the elements the element register object a particular note you will go to edit first I will import with instant context then I will initialize the posted to use context detail State context then I will also use state and Excel is the item and more state ID this will be only for this component um title set Target it will contain the new story selector initial value will be the postal title and then the next one will be close load set node and you state post dot node and let's see if it is working or not if you don't H2 H2 will be detected P will be node save it I'm gonna lose you going back liquidity yeah it's working now so I am getting the data I will have to get a create foreign paste it here and go to create create a hinder subject function into centimeters on the circuit and this will be a place of note it will be update and I will also have to be targeted specific item so I will have to use passing the ID as the parameter just like I did hitting delete ready this will be updated then I mean the form here speed paste it this one I want so from one submit I'm going to do this that I will click I will folder function Al function edit submit and passenger posts you can pass the post dot underscore ID is the parameter first argument and this will remain same thing automatic should be it will be node here I will have to add value equal to title save it so it is thank you go back click on it again it's okay okay smoothie modified updated meet few loads [Music] thank you sorry this would be excused output save it again indeed modified social media two notes automatically different layer blade is equal to okay start all right okay it's working I'm definitely clear one more okay everything's working so thank you for watching this video if you liked it please do share and subscribe

Channel: Dhriti

Views: 813

Keywords: CRUD, mongoose, react, express, note app

Id: ux6NwHcLhWI

Length: 66min 58sec (4018 seconds)

Published: Mon Oct 31 2022