Fetch Data from Mongo DB and Show it to React using Node JS

hello everyone in this video we will feature cards from mongodb database okay and display them and Chrome on the browser okay uh we will use for the front-end reactors and for the backend nodejs and the database would be the mongodb database okay this is the mongodb database and this is the database this the test is the database and the users are the user that we would like to fetch and display them on the browser on the screen okay using react.js so to create our react app I have already created that this is the setup this command we should run for creating react app and this is these are the commands for server side up okay for node.js app I have already created them so now let's come here first of all we will move to them uh server side and to write the boilerplate code for our node.js app okay so let's first safile import Express let's export the Mongoose for the mongodb database and also let's import the cars okay for the cross origin okay resource sharing to access the data in the front end from our server side cars now let's create enough is equal to we will call Express method after that let's use app.use and now we will use cars Hub dot use we will use Express .json okay this means that whenever we pass data from our front end to our server side so that will be transferred to the Json format now let's run our server put let's assign a food number then let's create a callback function and it's add something in that console.log server is running okay okay so let's run first of all our server app so for that I have installed the node man okay so the number one then I inserted the node one here okay start node one index.js this means that it will refresh our reactive in your we make some changes so let's run our server can I come here to the command line on the command line so let's create a new one okay a new command line so now we will move to our server side up why it is not displaying words let's create a new one so let's move to the command prompt okay in the command prompt or came to that folder okay that is folder enter the server directory okay to this directory now let's write npm start so it will start our server so let's see it yeah its server is running it's okay our server is running so now let's write API for how to fix records from DB database first of all we will create connection with our mongodb database okay install the mongodb database locally I have installed the community server of mongodb so you can connect with it online through online mongodb Atlas also that is simple just a connection link you need okay for that like this okay that connect here I will use local connection string so you can switch the string din from that database okay I will copy now that but when you would like to use the online one for that you should um right here the connection string that Atlas database provide for you sometimes the local house didn't didn't work yeah it is okay no so it will create connection with that so now let's assign a database name also the database name is test so out of which three cards we need to create a model okay for this collection yeah for this users I will create a model now for that so let's come here to the model folder here we don't have any files so let's create a new one that is user user.jsx.js okay and let's first of all import const one goes is equal to require mongos and after that let's create the schema users schema is equal to new mongoose that schema let's write the fields for our table so first call the name which is string type email which is string type you can add more properties here like required and other validations you can apply and that and also the age which is number after that let's create the model const user parallel is equal to mongos dot model it need two parameters the first one is the name of the schema the table sorry users okay first one is the name of the table users and the second one is the schema user schema let's export it is equal to user model so now let's import it inside this file users so now I will create an API a route for that so to fix the records let's write up dot git so we will use git method okay to fix the records the route would be git users we will create a function that will get a request and response so here I will use this model to fetch all the records so let's write user model dot find so this method will get all the records it will fit all the records from the database now then we will get users the digestion hi users just return the users dot KH if there was any error here so it was all about our server side code so now let's move to the front end okay so just come here to the client of SRC come here to the up.j6 so here I will write a table I first of all I will fit the record so to fix the records automatically so for that I will use use effect hook let's write array dependency also and here we will use access library to fix the records okay that is HTTP request in response Library access and also we will import the bootstrap for Designing prefers okay I have installed this Library circuit these packages so now let's come here and use the axis dot git here I will use the URL which URL I should use I should use localhost HTTP Local Host and the port number is this is the port number that we have assigned okay 3001 and after that the route name okay this is git users we will get users now a result so we should store there is the user somewhere so for that let's create users safety users used it it is in Array type it as and now let's store the users in the this variable okay so let's write sit users I will call that method and I will assign users.data okay whenever you console this user so you will see the users you should write users.data in the data we have those fails those records dot cage there was any error just cancel that log here just depreciated now let's write to that HTML code first of all the table T hit okay for the T head let's write table row and for that th and inside the edge we should write first the name then we hold the email and also The Edge you know these three fields and now let's write body Tableau and now I will use map function okay to display these users so let's just write users.map and here we will get a user and let's display the table row and table data and inside the it I will display user dot name same to that I will display email and also the edge so let's write here just assign a name to this class name table and also let's write class name width under it vertical height I think the class is a bootstrap or like this okay and this play yeah display Flex okay T5 untaint Center align it will just Center the all the properties okay all the internal elements let's write one another new element of this should be 50. let's cut it and down here I will paste that here yeah so now let's check it okay let's run our front end up for the front end I will just move to that directory and CD client and here I'll be lighting frame run do so it will run our react up yeah let's move to this URL okay localhost 5173 here and let's press enter see we have just a name email and Edge so let's check it what is here is the error that we didn't fit the records so let's come here our server is running okay it means that that is okay but why we didn't display the data let's just get here localhost 3001 users users.data uh we should return this okay we should write return statement here and let's see we have these records and we display them okay in the table okay these were three cards that we pitched from this mongodb database and displayed them so it was all about fetching records from mongodb database using react.js and for the backend for the serversar we use node.js expressjs so I hope for this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 699

Keywords: react, fetch data from mongo db and show it to react using node js, get data from mongo db and show it in react table, node and react, mongodb and mongoose, react course, work with react node and mongo, react tutorial, node js get data from api and save in mongodb, react and node js project, post and fetch data in mongodb using node js, node js and react js project, how to delete user from mongodb using node js in react, get data from mongo db using node js, react and mongodb

Id: 51JCCLjImnA

Length: 13min 30sec (810 seconds)

Published: Thu Jun 08 2023