Pass data between React UI and MongoDB Atlas | MERN Tutorial

hey everybody my name is marina i'm a certified information systems auditor but i also like teaching programming and in this tutorial we're gonna do a simple react application but we're gonna learn how to post the information from the database in mongodb atlas to the react interface and the other way around how to get the information from the react interface through a simple form to express server and to the mongodb so subscribe to my channel and let's go okay so in this tutorial we're gonna build a simple react application with back end based on express node and connect it to the mongodb atlas database it will have a simple bootstrap navigation bar with three links home that will be just static with some sample text will have notes that will render the notes that we create in this page so this is a one-page react application but it feels like we have three separate pages um thanks to react router dom package okay so let's start so first of all let's go to our terminal and we're going to d into desktop where i would like to create a new directory let's call it node app okay city into it and here we will create our react application through the command npx create react app oops app we will call it front and to be clear okay so our react application is uh created let's cd into our front end folder and here we're gonna install some packages that we're gonna need in our react front end namely we will install their bootstrap then we will install the react router dom and we will install axios okay now let's start our npm and look and see how our react application looks like now it will use the default 3000 support and it's working now let's work on our interface so let's go to our visual studio code open up this folder nodes app okay let's go to the source file and first of all i would like to remove everything that we don't need so i will leave just two files index.js and app.js everything else i will just delete in our index.js once again i will remove everything unnecessary and we will just render the app the app component which is right here here i will also remove the logo and let's just delete everything just simpler to work from scratch at least for me and here we'll return for the meantime just a div uh that will say h1 react here and see if it works oops what's up okay reacts here it's working so let's plan our application what we want to render here is we want to return a navigation bar a home page notes page and create notes page so our navigation bar will always be shown across all these three pages while these three pages will be rerouted using the react router dom package let's work on our navigation bar let's create a new folder in the source called component and let's create our first component that will be called navigationbar.jsx okay here we import react from react is pretty standard we'll call our function navbar and it will return something and then we'll export it as default enough r here as we install the bootstrap let's just get it over with and import bootstrap in react we already installed let's just copy this line here and paste it in our index.js file so here we will import this bootstrap and now we can use it in our navigation bar so we want to return enough with the class name and let's copy something from bootstrap mainly in nav bar bg dark and let's make it a container uh we need to render it here so instead of just commenting it we will render it right here okay expect an assignment or function called because we need to return it yeah not bar is not defined of course we need to import knob bar from components navbar and now it's working but is empty for now let's create some links here for example just uh for now let's just call them h4 we will have three links home notes and create notes okay here we will import a method from react router dom that we will call that is called link and we will be able instead of just statically writing home here we'll be able to render this component here home that will be directed to the route route he will do the same link notes and it will be directed to let's say slash notes and here we do the same render link and the path will be to slash i think create create note okay let's see how it looks you should not use a link outside a router that is correct we need first to configure our routes here so let's import browser router as router and route okay and now we can return instead of returning just the navbar we're gonna return the router and inside this router we're then gonna render all our components okay so we're already rendering the nav bar and as we said it will be shown across all three pages so it will be outside the route but for the three other links we're gonna use the route and we will wrap it around our links route we do this in order to specify that to specify the route that will take us to each of these components so in this case the path will be the same as we specified here the links so this path will be the root route this path will be the slash nodes and this path will be slash create create reset note yes reset create now let's see it's working now it's taking us to home to slash notes and to slash create okay so now let's create each of these components home node and create node we go to components create new file first one is home the second one is notes jsx and the third one is create node.jsx and in each of these components let's just specify the template import react from react function will be create node will return some div where we'll have the h1 that will say create note page and then export as default as create note component now let's copy everything to our home page we will return this the same basically but just rename it it will be home page and export it as home save in our nav bar we already returning something in our notes let's return notes notes page and export as notes now we can import all these created components in our app.js so we import first to the home page from slash components slash home we can import the nodes page from slash component slash nodes and we can import the create nodes component from slash component slash create node okay and now we can render it here so at this root route we said we are rendering home here we are rendering nodes and here we are rendering create note okay looks good so home page notes and create notes but we don't want home page to be rendered on every page so we specify here that home is an exact component okay so we have home nodes and create node looks good just let's make everything align so in every component the we specify the div class name as container okay i will copy this in every component here we'll have a container save and here we will have container safe okay so home notes creates we didn't save this one okay so let's just change the styling of the navbar a bit because this blue is and underline is killing me let's go to our nav bar okay let's create a new file we call it navbar.css and here i will create class for every link that will be just link and copy it to here and to here let's import the styles here now bar.css and in css file we're going to specify some styles for the link that's mainly the color will be white last thing i want to do here is to specify that one hover we don't want any text decoration please okay and on hover i would like also color to be pink i like pink home notes create notes okay looks good now let's work on functionality let's just render here some sample text more ipsum i copy this one right here go to our home component and paste it as a paragraph okay in our notes we will then extract data from the database now let's work on our create notes page here we want to have a simple form with the inputs for the title of the node with text area for the content of the node and with a button submit let's do that let's go to our create note and here we will let's make it a bootstrap form so let's go find a bootstrap form and let's see what we have to do here uh we have to wrap every input into a div with a form group class and every input has a class of form control okay that looks simple enough let's render here form and inside our form we'll have an input and text area and a button so we said that input should be wrapped in a div so let's do that and also text area will be wrapped in a div okay diff with the class name of form group let's copy it also for the text area and input should be with the class of form control okay class name equal form control copy this for the text area save and let's have a look okay it looks better let's just specify the button here add note okay and let's give it some styling from bootstrap let's make it btn btn large and btn let's say info okay now looks better i will just specify for the input and name that will be title and for the text area name will be content let's turn autocomplete off for both inputs because it's annoying okay and let's add a placeholder what the what the hell notice title and this the placeholder will be node content okay so now what we want to do is to track the changes in this field and in this field and when we click the add note we want to send this input to our back end but first let's work on this functionality in the front end so on each input we need to call a method upon change that will change activate the function handle change and we do the same for the text area and for the button we call the method on click that will activate the function handle click ok so in this component we can now create a function that will help us to handle change that will take an event and do something with this event for example log event for now um then to handle change we need to track the state of the input so for this we import another method from react that is called use state and we use it here so we create a new constant uh what we need to to keep track of inputs and the function set input will help us to do that and this will be equal to use state that will be an object because we have two fields to track so the first field is title that will be initially empty and the second field is content that will be also initially empty and so in this function handle change we can now destructure this event.target so we can make another constant with name here and let's say value let's add value also here that will be equal to input.title and here value will be equal to input dot content that will come eventually from here from this object so let this destructure this event.target and now we can use this function set input tool to set this title and content to our actual input so we have access here to our previous input just not to erase it and then we can return an object where we have all the previous inputs and we have also a new value for for that and based on the name so if we change the title we set the title to this value if we change the content we set the content to this value okay now we need also to create this function here handle click let's do that it will also take an event because we need to prevent the default state of this event which will allow us not to refresh the page after we click the button and then let's just console.log this input here to see if uh we receive our data correctly let's go to our front end open up our console create a note 1 and quantum one click on the button and we receive the title and the content now we are ready to connect our front end with the back end for this let's go back to our terminal open a new tab and here we will cd out of the front-end folder and in the root folder we will create our server.js file and we will also create a couple of folders that will call routes and modules now we have to initial initiate the npm here npm init with the default settings so i just click enter for for everything now we have our package.json file here and for this tutorial we will need the following npm packages so we write npm install express then we will need mongoose and we will need course and let's run our server okay so now we are ready to configure our server here we will require express we will create our app we will require also course and mongoose and now we are ready to use our course use the express dot json method to parse the request coming from the front end and here we'll read later connect to mongoose and we will later also require the route but for now let's just specify that app is listening on port 3001 which should be different from the react default port which is 3000 and we will log in the terminal that the express server is running on port 3001. now let's specify this route as a proxy key in our front end as a connection point so in our front end folder we go to the package.json file and we specify a new key proxy equal to http colon slash local host 3001. so this is our home route our route route routes okay let's go back to our js now we are ready to connect to mongoose but before doing so let's go to our mongodb atlas if you are not familiar with how to configure the clusters in mongodb atlas i have another tutorial on that one link in the description below for now i assume that you already have an account in mongodb atlas and a cluster so i will log in with google this is my cluster we click on collections and you can see the current databases that i have so for this new nodes application let's create a new database we call it nodes db and one collection will be nodes create now node database is empty for the moment but now we can connect it to our application let's go back to clusters now let's click connect with the shell copy this link and go to our terminal we open here a new window for our mongodb paste this link here and specify the name of our database which is notes db enter password this is the password from my username admin marina account which we created here in the in the database access all right so it's connected i assume let's just run some commands to check yes we have our node okay so now we are ready to connect our application let's copy this link here and go to our server.js file so here we will specify mongoose.connect and paste the url but here instead of db name and and if everything else we will just specify the name of our database nodestp and here instead of password we'll specify the password from our database admin account okay everything looks good now let's that we have our database and our collection we are ready to create our first data model let's go to to models folder and create a new file that we will call nodemodel.js here we will require mongoose and we will create a new schema that we will call node schema that will be an object where the title will be a string and the content will be also a string okay and now we can create also our model that will be mongoose dot model and it will be referred as to note and it will use notes schema so now let's just export this module as note and now after we exported this model we are ready to use this note model in our route so let's go to our routes folder and create new file that we will call node route.js here we we will need x to require express so constant express quadric y express constant router will be using the express router method and here we will already we will also require a node that we just created outside this folder in the folder models called node model okay later here we will configure the route to get or send data from the database to the front end but for now let's just export this module as a router okay and now we are ready to use this route that we created in our server.js file so here we will specify app.use at the home route we will require the route that we just created so routes nodes around okay so now we are ready to send data from our create notes page to our route and eventually to our server and to the mongol tv how do we do this we need another package here which is called axios that we installed previously so import access from axios and instead of console login here when we click on the button we will use axios.post methods and we will specify two arguments the first where do we want to post this information that we just inputted and tracked this will be the address of our back-end server which is http colon slash local host 3001 and let's do it slash so we will send this data to this route and the data that we will send will be a new node so we need to create this new node and it will be an object where we will have a title and content so in this case title we get from our input so we specify input dot title and content is input dot content okay and we send this object to this address so now let's go to our route and specify that router dot route at this address we will use a post method that will receive a function of request and response let's make it an arrow function and it will help us to recreate this node that we just that we just create created in the front end so we can parse the request into title that will be request dot body dot title and into content that will be a request dot body dot content and we'll create a new note here in the back end that will be new note mo new note model not new model but a new document in the note model with the title and content fields and then we will just take this new node and call the mongoose method save okay now we are ready to save and test let's go to our front end refresh create note one it's a beautiful day by youtube beautiful add note okay we didn't send any response but i assume it works and we can just check our collections in our mongodb atlas let's go to notes notes and you see is working so okay is good to have some response here but it's not essential now what we want to do is when we create the notes we want to retrieve all the notes to be shown on this page so we need another route so we have we we should create another route that will take us to slash notes and that will will be also a post request i know it will be a get request and it will also be a function of request and response and it will just take our note model and call the find method on it then it will take this response this found notes let's say and it will send response in json format with this found notes so we send here from the back end from our note model and we receive them here in the notes so here in the notes we will also we have also to fetch this data that we just received from the note route and how do we do that we need a method that is called use effect from react honestly we also need to to import use state here because we need to track the state of the nodes okay so let's start let's fetch some data okay so let's start with creating new constant that we will call nodes and function set nodes that will be using states method and here we will track the state of this node which will be eventually an array of objects and each object will have a title that will initially be empty and the content that will initially be empty now let's use effect use the use effect method to fetch the data so here we'll have an anonymous error function that will help us to fetch the data from which route from slash nodes here yes from slash nodes okay and after we fetch this data we want to receive the response and we want to check so if our response is okay we want to return response in json format and after that we want to take this json response and we want to set our notes to be equal to this json response okay and here instead of returning okay we can return also h1 but we will also return the information from our notes okay so now because notes is an array we can call the node.map method and for every node we can return an h1 with node title for example and we can also return a paragraph with node.content and that's it let's test it person error jsx elements must be wrapped in an enclosing tag okay so here we cannot actually render it separately because these are children children tags we need to return some sort of div and enclose these two inside this div okay save refresh let's go to our home to our notes into our create notes we're not receiving any data because we need to restart our react server let's stop it and start again i think when we add the new proxy the new key we need to restart the npm okay now it's working it's rendering data from our database so our app even if it's so ugly it can create notes let's say day 55 of 100 days of code i'm so excited for this tutorial we can add node and we can see this node added here thank you so much for watching um i hope you enjoyed it if you did please give me a thumbs up and then i will see you in the next video bye-bye

Channel: Marina Kim

Views: 21,996

Rating: 4.8965516 out of 5

Keywords: react router, react native project, react js app, react js, react native, mern, mern stack, mern stack developer, mern stack project, mern project, react express, react express app, react example, react node js tutorial, the mern fullstack guide, react node, react node js, react node js project, axios react, axios reactjs, axios tutorial, axios post request react, react fetch api, react fetch data from api, react fetch hook, react fetch data, react fetch vs axios

Id: nUbNn0voiBI

Length: 36min 50sec (2210 seconds)

Published: Sun Oct 25 2020