Create CRUD App with React Hooks & the Context API - #1 Create the UI

[Music] alright guys so welcome back to another video and in this you are going to create crude application using react hooks and you are going to using contacts API to working with state alright so but it is the final project and in here we have at user if I click at user it should be good to slashdot ad so we are going to using react router tom to create this wrote and if i add user say user one for example if i hit enter we have user 1 in here and i add another user say user to and we have a user tool and of course we can add it for any user you click it so i want to edit the user to edit out and you can do that say update it so if i edit name it should be updated in here alright so of course i can do it like that ok so so pretty simple but we are gonna focus on koryaks context API in this video so without any further ado let's create a folder called crude react context API or any name folder you want and you can do npx create react app and meaning in generate create react app in this app folder just make sure you install not yes a new system so I have already doing this so let's running the react application by typing npm storage and should be opening localhost in port 3000 all right so let's make that bigger and we are going to remove couple file in here i want to make that bigger here it is and we are going to remove the logo dot SVG we don't need that we are going to remove the index dot CSS and let's go to index the chess and we are going to remove two index dot CSS right here and save and close the file and let's save we're going to remove the styling in app dot CSS and go to app touch s in here what we are going to do is remove the header everything inside a header and to ch1 and say app we are going to remove the logo and at CSS right here okay save now should be have app in the browser I'm forget to stopping the final project like that and close that out you're going to running again so so let's say NPM start and all right so you are going to install a couple package in here the first is you are going to install of course react router tone so let's to NPM install react this rotor test dome and we are going to install a bootstrap because your gun just filing UI using bootstrap so let's do in the terminal say bootstrap and [Music] react strapped and we are going to install UUID which is if you go to the final project in here if I add a user and for example user one if I edit the user one it should be good to a bit and last the ID we generally do you ID in here by the way okay so you're going to install UID and I think that's it under there at all right so finally we're done and that's good we're going to create couple components so inside source folder in here read critic folder called components and inside in here we are going to creates C home yes and at first add user dot J s and edit user touches ok so whether I'm using es7 extension let's see in here yes Evan react react script QL and you can install that if you want by the way by the way we can do their RFC and if I hit enter and we have functional functional best component so this is really helpful for react developer so great H one in here and just say home save and let's go to add user and do the same thing enter and should be at user and go to edit user and just do that it should be H one added user okay so now save and close the tree component in here in in apps we need to import home from touchless component slash home right and just copy and paste two more time it should be at user and under in here it should be edit user and the name folder say and I forget the name I'm using echo uppercase so let's see user edit user okay so let's bring in the three component inside inside here let's do home let's to add user and edit user should be lower case like that alright so safe and now I hope this three component hearing in a browser let's close the terminal in here alright so here we go here it is okay so we need to import process or router so let's to import see from react roller top and we are going to import is browser rotor and we're going to give a name in here just a routers like that simple in America install we're going to imports which wrote and I think that's it so if you want to using browser router you need to wrap everything inside router so let's do in here same router and we need to bringing everything inside roller point and yeah we need to wrap everything inside a switch see switch like so if you have navigation you should put in here okay not inside a switch back you should put in here because it's still showing up to four for every route you have for example I just want to see h1 and say enough let's just want to show you we had water Tom what happening let's see in package to Jason what I'm wrong here react water Tom we don't have yet reorder Tom what the problem maybe I wrong type in the name or something just to install that again so NPM install react router alright it is done and let's close the terminal and just let's try to save and I hope that work let's reload that all right it's working but we need to using a road in here to see route say pad equals to four slash meaning the homepage we need to say component say component set that equals to home just cut and put inside in here alright so it's on to copy and paste and I was still at that out and it should be at user no should pick up and user like that and it should be edit user and for the pet if I access last add I want to go to add user and if I access ended last ID and access to edit user so if I save now let's see in a browser in here not we still showing up because not outside switch right now and home alright if everything's working so let's go to the last at and now we still showing up but now this is home that's the problem because it's roads looking for slash meaning in here we have slash so I mean meaning in here we have slash that's why home still coming up because this is start from slash you can put this to Road in here outside the home and everything is work so if you good and now it should be at user it is and if you go to add its lands maybe ad one you should go to edit user if you go to home page you should go to the home but the easy way to fix this problem is just you can just put keyword exact in here and everything is work just fine all right so I think we want to remove the knob you don't need that just just for example yeah we need to import the poster operating say import bootstrap slash dist /s s slash bootstrap dot dot min dot CSS let's save that and if the phone is changing the import right here is successfully that's right so here we go it's meaning okay we have already imported bootstrap in our app so we need to give the styling in here just in Weinstein I think I want to remove the add class in here just give me style so that equals to I just want to make a create a maximal weight in here and put everything in the center just give 30 Ram and I want to say margin top and bottom two for RAM and left and right out of the right at center so save and should be in center it here we go yeah here we go okay so for the first I want to just adding the add component which is in here alright so let's go to add user component which is in here we need to import a couple react strap component in here and say import to import it should be from reiax trap and what we are going to import in here is a better wave form in the input field so you can do form as a form group and say label and input thanks to button bottom pardon button button bottom but but I don't know how to say okay so look stop it let's go to give right here we need to remove that and change that to form and let's see in here just just put them just grab everything inside of from group like so and just give it a level and this should be named uppercase in Oh name and this input in here and outside the forum group we are going to bring in the fun like that and it should peer submit and give the type shut meet in here oats type equals to submit and for the inputs I want to give type to text and give a placeholder equals to enter name and for the form we are gonna work that later on but yeah I think that's it let's try to save and see what we have in a processor alright so here we go but I want to add another button here which is canceled so I'll be using link in here so we need to import that from a real rudder tone so in here we need to import link from react roller Tom say dumb and just say the seconds all I think yeah cancel and give the styling should be good to slash meaning the homepage and give a class name so that equals to p TN + b TN des this is a danger and we are going to say margin left - because we want to give a space between the submit button so let's try to save that and let's see here we go you have a submit and you have cancel if I hit cancer I should be back to the home page alright pretty cool die yeah so now let's close the add user and I want to know I think we don't need to close that because we need to copy the code right here because you are we are going to do styling the edit user is look similar so go to edit / for example want and we need to just copy entire in here and we are going to paste in here come and copy that just pace in here and I want to copy the form and should be in here try to save and now we have to form edit but now let's let's change the name not submit I think should be just say edit name like so and if I hit cancel should feed back to the homepage all right cool so let's close the add user and edit user we need to create another component inside the components folder in here we need to create a heading dot J s and we need to create user list user list dot Janus all right so let's do the same thing in here which is a rough sea and come on man what are you waiting for thank you and in here to say H 1 and heading save and for the user list can do same thing and just say in here user lists ok save and now we want to bring the to these two component to a home dot J s right here ok we need to import that say import heading should be from dot slash heading because we are in the same folder and it should be useless oh it's user list and all right now we are going to bringing this inside in here let's do heading and user lists now if I go to something right here 18 should be uppercase okay so safe now if I go to the home page we have the heading and the user list I want to wrap everything in react fragment so the shortcut is just something like this of course you can do react code fragment or something wata so save and now it's working okay so let's go to the heading you are going to style that little bit we need to import link I think because we are going to create a pun and the button should be seen here at user okay we need to import link for react Robert on link from react test runner stone and we need to import say import import to be from react strap and we are going to import is enough bar now no item not per branch and loss it should be a container you're going to wrap everything inside in container that's why we have space in here okay so let's remove the tip in here I don't need that it should be enough for it capital capital end and let's give we where it is like that let's give a color to dark and say dark in here let's put everything in container and say enough bar branch you can do wrap in here if somebody clicked branch should be good to the slash you just a home page and to say my team my team and create enough it should be should be uppercase no like that setting here let's give enough item misprint on item should be capital image and inside in here let's do link should be good to slash at and text let's say at user and just give a styling little quick in here say class name set it goes to BTN and BT and s primary primary okay cool safe and let's see in the react app we have at user okay pretty cool if we collect that you be good /add and we can cancel to back the homepage all right so pretty cool let's good to use the release in here we are going to style that but I want to close the heading of jazz in here we need to import link from real father home and we need to import from real strap okay what we are going to import is this group place group item described and the pun let's remove the deep in here and we are going to do is this group this group and inside of this group we have a list group item list group item like that and this should be item so let's just say user one for now and here we have defeat the class name margin-left:auto to put that to push to the right side which is in here we are going to create a to pun edit and do it and it should be good to slash and it's less any idea we click on that and deal it should be just deliver okay so in here let's do link because we are going to go to select edit and should be two equals to just to edit / wand for example and the text it should be edit and in here Plus bringing the button and should be delayed and let's give a styling which is the color I just give a danger like that and safe let's try to see what happening here just let's see what happened we need to wrap everything inside of this group so we need to put this inside all risk group item waiting in here and we need to just cut the user ones and I need to create just say strong tag in here or a paragraph or anything you want but I just want to give a strong and put the user one in there so try to save that and let's see ok we need to give or display flags I think in here so just give a class name set equals to display flex and save all right so let's tiling the end it right here and give a class name I think in here are going to give a class names and equals to BT and BT and this warning and just give a margin right to one okay save and here we go we have added and do it if I click Edit it should be good at its last one which is right here okay so I think we done with the styling just try to copy this all chief and rode down we have now you have to user let's try to say that and now you have two right here okay pretty cool yeah you have space anything in here so we can add space in rarest ax in here into class name set equals to margin top for safe and now we have the space between your head and the heading and the list and the user list like that okay so I think we're done with styling and I want to create part two for this video so just make sure you follow along in this playlist and yeah I'm going to see you in the next video bye

Channel: Cand Dev

Views: 131,025

Keywords:

Id: 5KZ1XBcSaH4

Length: 31min 27sec (1887 seconds)

Published: Mon Apr 06 2020