React js Axios CRUD with JSON SERVER and Tailwind CSS|React REST API | React Tutorials for Beginners

hello guys welcome back to my youtube channel react developer and today i'm going to build the website with the card operations so if you don't know code operations i open this website to read see about good operations so what is good operation card operation basically stands for create read update and delete so what happens in the create is we perform some insert statement to create a new user record anything like that and read is just to view the user or view the user details basically and the update thing is to edit the particular user profile and the delete is so particularly it is that this is all we're gonna do today so let's jump into the vs code and we're gonna use this tailwind css with the react app so these are the all steps on their official website that you must follow and you can follow so basically first one is for to create react app then cd in the my directory then npm install d the tailwind core css auto prefixer and basically what this does is there is a um this makes two new files that is uh tailwind config.js and both css config.js and host css just converts our television classroom into the normal css whereas statement config is for the it takes all the custom colors and custom fonts whatever we want to define we have to define the tailwind config and it also does a thing which is very good just just in time compiler with with that we only uses the css that is on the screen and the rest of the unused css has is been clear by this thing this is all it does so and we need to copy this thing and just paste it in our italian config.js and we need to include this so you must follow this all steps okay so i don't want to waste time on this and we also have to create a json server we are not going to build the whole back end with the node.json express we are just using the json server so you need to install this package to npm i json server so let's jump into the vs code directly and this is the hello world app that i have built right now it's running on port 3000 so what happens in the package of this since i'll show you i have installed the json server and i have react auto down installed and i've also installed the xeos which and what is x use the nexus is our messenger it takes our data from our front-end part or you can say that from our form and it takes data to the back end or wherever we want to store it also brings the data this is all it does all now i have included a very uh one thing that you are you must include two that is json server this is the script to run the json server on a different word because on port 3000 we are running our app so we need to run a json server the particular that back-end thing on the other port so we have defined the port here you can see you can copy it directly from here and i'll show how we gonna use it npm run json server this is the name of the script i guess json server yes so we're gonna run it on a port 3000 okay so see this is running on the port 3000 and what it is saying is that jason's ever watched and what is db.json is tv.json is this file i have created with bunch of json data with the fake data it's all the fake data it's not the data i've created i've just taken it from type dot cord cod you can find it json.typecode.slash users i guess this is the website i just took from there this is a bunch of fake data on db.json file just beside the packet.json file okay so once the thing runs yeah it is running so we gonna go to the localhost [Music] localhost 3000 slash users so you can see we are running the fake data here so what we're gonna do here is we're gonna fetch this data and so our data on the home page we're gonna edit data we're gonna create users and add to this data so basically this is all we are going to do so you must have got the understanding what we are going to do so one last thing if you you're new to my channel then please subscribe it because i want to go to 1k so help me grow so i am going to take this tailwind css what is called table because i liked it very much it's easy just you can show code and copy this and this will work with fine okay so let's jump into it i must show you the tailwind config because i've added some my custom fonts and colors that i'll use so you can see this is all it's not necessary that you also inst means make this like exactly copy of this so you can just copy with the official website thing you can just go with this thing and this will work fine because it is just um personal my experience that i like this font once so i haven't imported it and we also need to import the google fonts in our index.css file like this so you must have got what you have to do this is all the files that i have changed so i am showing it once more so let's start with the individual js file i have wrapped the whole app with the wrap the whole app with the browser router and now i'm gonna do the next thing that is in the app.js file uh it's hello world running fine so now i should do one thing that i'll define some components in the pages section i have name pages you can name it as a component tool and here i'll name a file home.js and this will yeah this will contain all that data and all okay and we need a never to so first of all with full and rightful flex flex call and what else we need here i'll write the h1 tag that it's a home page padding on the x-axis be like 10 and padding on the y-axis be eight so we need a never do so never dodge yes and in this never just gonna do very simple thing very very simple that it will not take much time of us class name with full height 16 bg blue 600 okay h1 [Music] card i'll give it a text three excel and font [Music] semi port and font montessorite or gotham want to set only and yeah we need to define the color too so [Music] text white this is all not like because we have not included we imported in the app.js file so let's do that first never [Music] okay here it is we'll do some more changes here that's like first of all we'll say it as a flexbox flex item center okay we'll need two games of padding on the x axis to be 10 y is fine i guess but still i'll give it a little bit adding the y axis v2 okay so we need to add a button to add users in this okay so what we're gonna do is i'll do a justify between in this so that it will push the whole two thing on the other side of the nav bar maybe you are getting my point what it will do here it will push the other element on the two different sides justify between does that will need to style it a little bit so in the class name thing i'll first of all give it a width of 48 i'll give the vg to be white and what it's to be text would be text would be [Music] blue 300 is good i guess and what else we need it's font semi bold and text excel is good but it looks so weird very weird i'll change it no issues with that i will be 12 and rounded will be large so this is all yeah now it looks good i think so so this is ready okay now what we're gonna do is we'll first define the routes and the path so that we can navigate to the home page and never is available for all the pages so it's outside the routes part and then on the route we define the path as you know in the reactor to down version six this is how we do we'll have to give a path path will be simple as less whatever and the element will have to define the component so component will be home here we go here is the home page so what we have to do in the home page is to bring that to big table that we saw on that website so for that we will do two things first of all we'll name it as a home page and we can just copy this thing oops it needs to be black there we go so we know this is home page now also we need to define some pages here i guess or not maybe we don't need because we don't want to serve pages and this in this we'll have to define that table so i just copied it from that side maybe you don't need this okay so and this one more thing is still i guess yeah this one so this is how the table looks like you can even do this as like just put the home page here flex call [Music] foreign this table i need to give some margin around eight yeah what we need the data on the top is this is the index call we need uh here name or maybe user no name is good what data we have here yeah name then we have the email info the four data we will have so just i'll change it a little bit and it will look good name email and phone so one more thing we'll need as a actions we will define two button edit and delete button okay action there we go this tea body will only need this tr as those needs to be deleted here we go this action we need to button i think i have to give one more button to view too so one more button with the view option we need to define the buttons too so for this i am just giving a px of 6 py of 2 text white and bg for view um black god noises me [Music] [Music] i think i should do it like this so that i can see the designs too yeah nice much better so this is how all the buttons will be maybe so i think just copy the class names from this one yeah it's there just this one will have red with 600 i guess yeah looks good and this in this i will have blue with the 600 looks good to me so this is all the design this is how it will look but we don't have any data now i think we need to increase the sizes of this tool this looks very small yeah at least still large now it's something better than that yes so this is all for the design if you want we can give a border to the whole table too do you want it so border for the black you can see this is how we can give border it looks nice to me so now the real thing comes to fetch the data from our localhost 3000 so let's start that just give me a second i need to drink some water so to fetch the data first of all we need a variable to store the data so how we're going to do that we're going to use the used hook here so user and set user users you state and by default it's an empty error because what we will get from the backend is a type of json and we'll store it an array so that we can map the whole data and so it in the table thing got it maybe many of you know this but still i have to tell everyone because it's for the bigness too and now we're gonna use huge effect here because whenever we come to the home page we need the data to be already fetched from the back end because we don't want any buttons when clicked then we have to fetch the data it's not like that we have to fetch the data automatically so we're gonna use use effect for that and we know that user effect is used to at least run a functions when the page loads and after that we can manually handle how many times it must run the function or not so basically that's all for the use effect so i'm gonna define use effect we can use the this this is called snippet now we want to delete this extra thing from here and we're gonna delete these two now what i'm gonna do here is xcos dot get and execute get will just bring all the data from the backend so what our back end is we have to provide the url for that and this is our url so i'm gonna put it here but i forgot to put it in the [Music] so this is all how we define the use effects thing uh means are we defined excuse or get in the double inverted commas the url so this is all the uh url and now what we gonna do here is the next line if they they get a success we're gonna do like this whatever the response is error function users this dot data so this is all and also we need to do one thing first of all we need to see how the data is coming and not coming so we're gonna do a console.log dot with the user okay so let me check if we are getting the data not getting the data whatever it's happening oh this was not supposed to happen yeah we are getting data with the area something is there this is not defined here we can see is response response is he still giving that error yeah this is uh for this one so what you gonna do is i'm just gonna write class equal to and replace [Music] class name so it will replace it [Music] the response thing is not getting the data i used to do this only still not getting the data but before that we were getting the data one thing let me try one thing more yeah sometimes this happens what's happening there is i must tell you that too again that's not coming what the hell man okay really something let me do one thing more and do that here yeah data is coming just we need to add something very good thing is await so what we can do is use effect async function let it to leave it like this so now we're gonna use this data since we are getting the data in use effect now we have some data so we're gonna map this data okay this is the best way to debug in the app you can just console log to see if the data is coming not coming this will give you the exact thing so in this tr since we want to repeat this tr we're gonna do this like this one so users dot map okay and we want to map with user and index then write some arrow function here and in this whole tr in this one and we gonna give user dot or maybe just index foreign again we need to see what's happening something is really not good here okay let me check i need to check a little detail so it should have come like this um okay there's a little change in the latest thing after the arrow components we need to use the small brackets so here we get the details so yes i was thinking everything was going right and what was happening here need to increase the width i just gave 80 percent i guess yeah i need to give it 490. maybe more than that now looks good so here we have got the data and if you want to see what's happening there i must let you know so let me just format it once so what basically i'm doing is i'm mapping that user's array and showing the data so we are mapping the date user.map here you can use anything you can even use the user it will work fine so i'm just mapping this tr and wants to repeat this tr um whenever uh the data new data comes and for that we are using this key so what it will do is key will just give a unique value so every time the key changes new travel begins okay so this is how we map the data and we get the data from back end so this is all for now so now we want to use view edit delete everything so what we can do here is see now we need to give some functionality and we need to first of all define that pages so for that i'm gonna define one folder user folder and then user folder i'm gonna say yes user.js to view the file and one file with edit.js to edit it and one file to create so add user user.js so rfce rfce so in this user how we will show the user is very good point you must see this very clearly okay we need to go to the user but with some id so we need some id here because without the id we cannot uh means find which users on which users it is so we need to find it so what we will do here is now if we go to the home component and this edit button will have to do a very good thing i think if we use link here to work fine just i need to see it's working fine or not it's giving some error [Music] okay it's data to slash choose us slash data dot id so on this click i am sending the data but it's not rendering something because we have not defined the page so on this web.js now it's home so it's showing home but we'll have to define that user's page now you will see if we click it is on the users page with the id one here on the top on the url you can see with id1 so this is the path we defined firstly see this this is the path with that we have this defined and on the home dot yes what we are saying when we are mapping we are getting the id2 you can see we have the id in this thing okay so we are just saying that send the user to the particular id with this particular id and we gonna cache this id here and how we and to get the id we'll do a very simple thing const id is equal to use params okay so what we this will do is this will get the id from the this one this will get that particularly id this is called the params or parameters okay so this is how it will go now we are again need that particular thing for that use date and this thing so i'll copy just from and go to the user.js and just paste it down here just there a little change with that now we have the user so just we will use it like a user not the users so what we need is we need to go to that particularly id particular id with that users so what we need to do is we need to go to that particular id in the user section in this side okay so what we will do it's less and the curly braces will just keep the id from whichever ideas came over two things we need to import use effect and use state so yes this is xcos is not defined okay so if you want to see the data we can do is console user [Music] we are getting an object with the data your email company everything is here in this so we can just so since we are getting an object here we can just remove it like this maybe just let me see once what's happening what's happening now the console is this okay yeah i told you since we are getting the object now we don't need that diary we just need the json and json is already in the object form so we don't need that launcher so now we will just wrap it map the data but since it's object we don't need to map just we need to do it very simple i'll show you how we do it when it's an object here we'll just say that if the user is there and i'm just trying that after that i'll style it h1 and it this user dot name i'm just trying it to see if it's working or not this is working okay so now we will design it accordingly so what we'll do is we'll define a div first and in this one first of all we'll just define width equal to full height is equal to full justify center flex flex call oops there we go justify center isn't working why is it so okay so now what we gonna do is since we are getting the data class name width will be around [Music] um i'll give it in a pixel 500 pixel [Music] and height to be 500 pixels and this will be a bg of black this looks absolutely blunt so why it's less hundred this is just a grace killer now isn't okay i have one more color let me try it this is somewhat better but it isn't looking good that i know very well so in this i'm having just three sections so what we can do is just we can copy with the div thing but we need a column due so let it be i'll just manage dave flex so class name width to be 5 by 12 and this will uh keep all the headings you know name and all things so flex flex call and space y2b4 okay so this one will first of all h2 with the name class name text white this isn't looking good man what i'll do is just i'll give some border here border black that's all i do yeah and a merging top of 16. looks good man tell me this black font [Music] semi-fold font and what happened to it man just let me copy this and control z cc more than 16 okay px6 and py4 [Music] yep this is all i want name email phone number that's all we have so in this name section we can just do user dot name called [Music] here will be user dot email and i will use a dot phone okay we need space [Music] and what about the space this will be 7 by 12 yeah good this looks good to me maybe you must say so now we can show the data here you give we are getting the data once we go to this page we click on our data and their data is here okay even we can just remove the last order and instead of doing this much we could have just justify center and i terms santa i think border was good no it's looking very bad so good it's looking good to me maybe you are not satisfied i can't do anything to that [Music] now we do we need to edit this but we haven't done this add user so first of all we need to do this add user maybe i have not defined it i'll define it just wait a second hmm since it was a button it was automatically sending the text to the center but okay oh my god now this could happen now here 9 16. okay where do i change this name only because we need to put the names in the camel cases this is what react asks us to do always automatically ports too so so here we are in the add user page and now we'll just do very fast we will not waste any time in that so what we will do we will create a form okay so just like this which will be screen white will be full [Music] justify center legs i dump center and now we will do the form thing form [Music] i'll define a bunch of input here with the placeholder enter your name class name and we need to define the type tool so type will be text class name will be okay here we need to see that with maybe at 80 percent and hide to be full anything else we want up so wait will be 3d person and we need to define here is flex flex call busy [Music] wait wait then so sorry man [Music] [Music] text excel font wanted select and font to be normal here we go focus outline none and a border of order zinc 400 and also we need to define a py of 6 f4 yeah [Music] padding left of 6 2 um i need to add a button to here now for that we'll need to have flex call here and here with the h1 tag and user in this memory it is never so item start maybe would help me so enter your name same thing will go with the and your phone and enter your email so we'll need to change the type to your email and here with the phone we'll need to give some margin here so that it looks good margin four and now we need a button here to submit it basically everything will be the same here little changes will need here but i'll do that why is it looking first of all for the bg i'll use 2600 and outline think we don't want here and border also we don't want border thing okay text white [Music] so here we are ready with third user thing okay so now we need three states to catch the data and for that i'm gonna define the use state const name and now we need to take the changes so how we do it in the react is on change we click a function and on that we set set name e dot target dot value and here we'll say that event is basically the event so and we need one more thing here because that won't work we need to add a value and value will be the name same thing will continue in all the three so this is the control type of email uh input okay this is basically this is only the control inputs maybe you ufo during the everywhere that control inputs control input so this is how we do the control input [Music] so if you will check this what happening right here is that first of all we are getting the data we are sending data in the state and then we are rendering the data with the updated state it's not directly rendering by our keyboard so that's what's happening in the so once again so this is ready now we'll have to send this data so how we can send this on click of this i'll fire the function here leave it we can just directly do this submit so now we don't have that submit function but we'll define function submit and in this we'll just do we'll have to do one thing very first that e dot target dot value what the hell i'm doing that he dot prevent default so that it will perform uh if it will prevent the default behavior of the browser on the click basically on clicks it's reference the page so it will prevent it from the refreshing so now we need to do is x use dot post and in this post we will just and what we're gonna post here is okay we have not done one thing that's very bad cos data is equals to you need to define it in the json form so that's what i'm doing here [Music] okay name email and phone to be phone so this is like what it is in the database how the name is stored and this is the name from here that we are getting the from input what data is uh data stored in the name so we'll send in the name thing okay maybe you got my point so this is how we send it and if dot then excused after posting data i think this is all we need to do yeah i guess this is all we need to do one thing if we need to push the home page how we do that so we'll use const navigate this is just for the what you said redirecting to the home page okay use navigate i think a bunch of us just give me a bunch of as my computer yeah it is getting email is not defined everything looks good to me then how he's saying that teammates not defying maybe i need to refresh it yeah no errors so we'll start and he will give test at the rate since we have used uh email as a type so we need to include at the rate and where it will do 2 so here you can see the data is here so now when we are adding the data it's coming at the bottom so we need this data at the top so we need to uh use one function of a javascript it's a basically javascript function we just need to do when storing the data of the response we need to reverse it that's all data dot reverse yeah so here at the top we get the data now two things is left edit and a delete so we will do the delete thing here only in the home page in this function i'll define the function towards that function delete excels dot delete girls choose a slash oh it does this way high tea so why i have done this i'll say that because we want to call these functions after deleting okay so that's why i just did this dot then load users so this is how it will go maybe about my point after deleting i will use this function to render again the data good so in this button i'll just call on click on click delete and realize the main part will need to give this id so how we gonna do that is very good but so now it is in a data dot id part maybe this would work let's check it out code users is not defined 99 okay now we need to test test this is gone oh my god that is god yes this is also gone now only i did think it's left and i'm gonna do that in the five minutes okay so this is the edit page basically we're gonna do the same things oh we got a battery low percentage let me just plug in my charger here it is so in this add user we're gonna do the same thing i'll just copy whole thing okay i'll not hesitate in doing this and in this edit.js i'll just copy put the name as added and it is not working i guess maybe because i have not defined the path [Music] added user okay adding users is not easy man one thing i left on the user's part if you want to go back to home there was nothing like this so i'm gonna define it here h2 [Music] back to home maybe better with this one let's see [Music] some return link okay this isn't looking good at all so i'm gonna realize i have this whole thing here this end quote this still not looks good so well i need to delete this board this is looking very bad maybe this would work okay i already decided to find that [Music] just want to give a px of 4 bg of white by 10 this isn't working swing 400 maybe this would work yeah this is working v x x x and p y rounded excel okay now we were in the edit page and it is not defined so in the home.js [Music] [Music] okay here we are so there's two thing in this edit user thing so to get the data in that added form from means just loading the page we want to show the which uh data we need to update since if if it's name is sanska i need to subscribe so that we can edit that directly to do that i'm gonna have a very quick thing here we're gonna go to home page uh [Music] we're gonna take this thing here and here we are okay we need a little little things to be changed i should have got with gone with third thing and using there was a user file here this one i should have gone with this one and reducer so now what this field does is this will so in this we don't want user we want to do a very different thing so let it be like that nope we aren't going to do this so in this we are going to set name you know we we are using that uh i said that we are using it what it's called control components so this is the benefit of is that if we go to uh let's see 10 excels so what's going up no issues toward data.name what's the issue okay realized i mean issue in the home.js and even in this app.js i have not done this thing that edit user that's less with the id part and that's why this is happening this in the edit user okay we need to put it in the curly braces dot this is good maybe it must have shown right now okay here we go same thing will continue with the email many of you still have the issues that how is this happening i'll again like to know what's happening is so we are getting the data in this id from this id and we are stored in sending updating the set name basically stating the uh updating the state of this const name with the help of the site name function and we are with the use of this value we are showing the data directly in the browser so this is how now we if we write something it's input so we can write and we are also updating the name with the set state function here now we need to update so how we gonna do that so function put it again we'll need maybe we don't need the id because the id is already present in this one so now i'll just copy this thing one more thing e dot prevent default this is the there we go xco stop to update we use put okay so update we use put x use output and since we again need the data so const data you can write any name here okay we can copy it from directly from the add user thing why i'm writing this dot and after that dot then navigate to slash so so here we need to write pr oh this stint worked nope this work just the page didn't update it by itself but this should have happened here i mean this is not happening this is not working on and this home.yes okay this hook this will not work you know you need some data there now this is working good so this is all and if you want some checkings you can do so this grid operations is ready and you can see it's working fine so you must have got a basic idea how to use the apis so if you like my video please subscribe my channel and do share my videos to your friends who are learning react this may help them very much and please like the video and if you have any questions you can ask me in the comments section or you can contact me on the instagram with the sunscreen double underscore raj you can contact me there and i'll be very helpful to you i'll reply you as soon as possible so and if you have any doubt please let me know in the comment section i will definitely give you the answer so please subscribe my channel and stay tuned for the next video it is going to be very very very good video on the horse disney plus hotstar clone and i'll do it in the next week and upload it so stay tuned in the video

Channel: React Developer

Views: 24,403

Keywords:

Id: l2TX7Pn9XNg

Length: 88min 25sec (5305 seconds)

Published: Sat Mar 26 2022