React Admin Crash Course

[Music] what's going on guys in this video we're going to take a look at and set up react admin which is technically a front-end framework for building apps that run in the browser on top of a rest api or graphql api so it gives you this interface to list all your resources whether it's blog posts or products or users whatever it might be and it lists them out you can edit you can delete you can create a new resource so it's really cool and it uses a data provider so if we look at the code down here we bring in admin from react admin and we render that pass in a data provider now you can actually create your own data provider it's basically a way to interpret the data that's coming in but we're just going to use the rest provider from this package here which is called ra data dash simple dash rest so that's this right here it's a simple rest data provider for react admin so we are going to use that now as far as your back end in reality you probably have something like an express server with mongodb or postgres as a database or you could use laravel or django or net doesn't really matter in terms of the technology of your back end as long as it adheres to rest api standards and of course you can create different data providers for different types of of data or not different types but different structures of data and as far as what we're going to do for our backend instead of setting up a complete you know rest api using express or whatever we're going to use json server and if you've never used this before i think you're going to like it it's it's fantastic for prototyping rest apis basically you just have a json file but you have complete crud functionality so you can create read update delete you can send post and put and delete requests you can filter paginate sort basically everything you would get in a in a real full featured rest api except authentication it doesn't have like protected routes or anything like that at least as far as i know and i've used this for quite a while so that's what we'll be using we're going to set that up and then we're going to basically connect react admin to that we also need to install material ui which is a ui library for react i actually have adrian doing a material eye crash course i should say he already did it and either it's going to be the it's going to either be the video before this or the video after i'm not sure what order i'm going to upload them in but he goes you know in depth into the different components and stuff so definitely check that out so let's get started here i'm going to jump into vs code and i just have an empty folder called react admin example and i'm going to open up my terminal and before we we even touch react and get started with that let's set up our json server so i'm going to just npm and knit and just do dash y here so i don't have to answer any questions and that just is that's just going to create our package.json and then from here let's npm install jason dash server and you can install this globally as well and you can run it globally but we're just going to create an npm script for it so under scripts let's say server and let's get rid of this and we want to run oops we want to run json dash server we want to dash dash watch a file called db.json that's where our data is going to be held now by default this runs on port 3000 and we don't want that because react the dev server when you use create react app that runs on 3000 so i'm going to add the port flag and set that to 5000 so let's go ahead and just save that and we should be able to just create our data and then run the server so i'm going to create a db.json in the root here and this is just going to be a very simple json file so as far as your i guess you could call them your collections you can put those here so we'll have posts which will be a json array i'm also going to have users we're not going to have authentication but i'm just using users as a resource and of course you could implement json web tokens or or whatever with react admin in fact i believe it says right here so supports any authentication provider so rest api oauth basic auth maybe i'll get into that in a different video so posts let's go ahead and just add a couple posts here i'm going to have an id you can use whatever fields you want i'm just going to have an id a title title will say post one and a body we'll say this is this is the post body and then i'm just gonna have a we'll do a published at and say 10 1 20 20. all right so i'm just going to copy this down two more times so we have three posts total and for the second one here i'll just change the id to two change the title to post two and down here let's change that to three and post three and then for users i'm just gonna add one user which is gonna have an id and a name let's say john doe and an email so john at example.com all right so i'll save that and that's going to be our starting data now we will be able to make like post requests and ad add new posts or users or whatever so let's run the server with npm run server and you'll see it's watching so anytime i make a request it's going to show here kind of like how the the morgan middleware does or any logging middleware really so let's go into i'm going to jump into postman now you don't want to see that yet so you don't have to do this i just want to show you that this actually works so if i hit http 5000 posts with a get request you'll see i get my three posts okay if i hit users i get my you my one user but what i want to show you is i can also make a post request so i'll go post and in the body i'm going to send raw json data and it'll create the id automatically just like a normal database would so i don't need to put an id let's just put a title for the post say post four and let's put the body and let's put the published published at say 10 2 20 20. and let's go ahead and send that so that's a post request and i get back a status of 201 which means created and the new post and you can see it actually gave it an id and if i go to my db.json that new post is going to be there and i can also do puts i can do deletes you can see the all the requests down here with the status codes so json server is definitely just one of my favorite tools to work with makes things really easy when you just need to prototype a you know a simple rest api so now we want to get react set up so i'm going to stop the server here with control c and i'm going to use npx to run create react app and i'm going to put this in a folder called client so everything that has to do with react is going to go into the client folder okay so all of our react files are in the client folder now there's a couple things i want to do before we run react i want to go into client and then the package.json and since we have our api running on port 5000 i'm going to add a proxy here okay make sure you're in the the client side the react package.json and let's set the proxy to our server url which is http localhost port 5000. okay we'll save that and the next thing i want to do is instead of going you know cd into client and then npm start to run it i want to add a client script here so client and we're going to set this to npm run i'm sorry npm start now that runs the react dev server but we have to be in the client folder so we want to add a prefix of client or whatever you call that folder and then we should be able to run from here npm run client and that will start the react dev server and it should open up on 3000 now the back end or the the api is not running right now it's just the react server so i'm gonna once again just stop this with control c and i want to have another script that will run both of these at the same time i could just open up two terminals and do it but i'm going to use something called concurrently if you've taken any of my udemy courses you know my node course or any of my mern courses you know i use this all the time so i'm going to create a script here called dev and i want this to run both the server and the client so we're going to run concurrently and then we have to escape double quotes and then npm run server another escape quote and then another slash quote and then npm run client and then you know an escape quote and then one final double quote at the end so if we run that we should be able to run both at the same time so npm run dev okay so it opens up react now let's go to i'm going to go back to postman and just test this again so we'll make a get request to posts and you can see i get my 200 okay and my api is running so we have both the front end and our json server backend running at the same time good so in react so in the client folder i would just want to do some cleanup so in the source folder here i'm going to get rid of app css app test logo svg and setup tests so we're going to delete those and then in app.js i'm going to get rid of the logo and the app css imports and we're going to get rid of everything inside of this div right here and for now we'll just say hello if we look at our in our browser we should just see hello okay now we have some stuff to install on the front end so i'm going to just open up a new terminal here excuse me and i'm going to cd into client and let's npm install react dash admin we also want to install the data provider which is r a dash data dash simple dash rest and then also material ui which is at material dash ui core so make sure you install these in your client folder so now that those are installed let's go to our app.js i'm just going to clear this up and make this a little smaller so in our app.js i want to bring in a couple of things from react admin we want admin and then resource okay because obviously you can have more than one resource you might have products users you know posts orders whatever it might be and we want to bring this in from react admin and we also want to bring in our provider a rest provider so let's import rest provider and that's going to be from that's from ra data simple rest okay and then down here we don't need to return a div we just want to return admin from react admin and we want to pass in here as a prop the data provider and we want to pass in here rest provider and wrap in whatever the url to our api which is going to be http localhost port 3000 now you might be saying why 3000 and not 5000 well we added a proxy in the package.json so it's going to proxy to 5000. all right so that's all we need there now inside here we want to put a resource and resource is going to take in a bunch of things one is going to be the name so this is going to be the resource for posts and we're going to have a list component called post list okay so we have to create this let's bring it in i know we haven't created it yet but we will in a second so import post lists from and then we'll go into components which we'll create in a second and then post list all right so we'll save that and let's go to our source folder in the client and create a components folder and inside components we're going to create a post list.js okay and i'm going to just generate an arrow function component of course you can use any any style that you want and then we're going to bring in a bunch of stuff from react admin okay so first thing i want to bring in here is a list and which is going to be basically the wrapper for for this component and we want a uh data grid so data grid and it's a lowercase g that kind of messes me up i usually mess it up and put it uppercase so just make sure it's lowercase and then a text field and what this whole thing is going to be is basically a table with all of our posts and it will show whatever fields we want i know we don't have many we have an id title body what else and published at so we can choose from those the published ad is a date so i'm going to bring in the date field and i also want to have an edit button here so edit button and also a delete button so we can delete edit and delete posts and inside post lists we'll pass in any props that are going to come in and for the wrapper element here it's going to be a list like that and then we just want to pass in here an object and we want to spread across all of our props okay now within this list we're going to have our data grid and inside the data grid we put any any fields that we want fields buttons whatever it's basically like the table columns so the first column i want to have is the id so i'm going to use text field and what we do is pass in a source prop and set that to whatever field we want which in this case it's going to be id okay and then i'm just going to copy this down two more times the next one is going to be the title of the post and then this one is going to be published at except instead of text i'm going to use a date field right and then underneath that i just want to have the edit button now the way this works is we pass in a base path so for this to work at least using the the data provider we're using you want to have just stan a standard rest api so so a get request to slash post will get all the posts if you make a put request to post slash id that's going to be you know an update if you do a delete request to post slash and then the id that's going to be a delete so here we just need the base path which is going to be slash posts and it and it will work it'll just work so this will be our delete button and again just pass in the base path so let's go ahead and save that and now we already brought it in here and we're passing it in here so let's take a look okay so you can see kind of the the outline of the ui here um we get this little sidebar so any resource you add is going to show in this sidebar you can also export like as s sorry csv comma separated values or whatever you can implement authentication so there's a log out here we don't have authentication but that might be something i could look at into doing another video on now we get no results found and i just want to show you that if i open up right here so this error the content range header is missing in the http response the simple rest data provider expects responses for lists of resources to contain this header with the total number of results to build the pagination so your server needs to have this content range value i'm actually going to move this over here so it needs to have this content range value now we don't have like uh we're not using express where we can just go in and and add the header but with json server you can actually use middleware so if i search for middleware you'll see right here add middlewares we can create a function that takes in request response next and we can do whatever we want in this this piece of middleware and then just call next now to implement it where we actually call json server in our npm script we can simply add the middleware's flag and then any files that we want to include so what we're going to do is add a middleware file so you want to be outside of your client in the root here i'm going to create a file called uh let's we'll call it range.js and we want to say dot exports so we're exporting a function that's going to take in request response and next and whenever you have middleware you want to call next at the end to just keep the request response cycle moving and then all we want to do here is just set the content range header value so we can take our response object and call header and pass in whatever header we want to add which is going to be content range now for this let's say actually in quotes here let's say posts so normally what you would do if you had like an express server you were working with let's say mongodb you would want to see how many total posts you had in the database because this is how the pagination is going to work in react admin now we don't have the ability to do that so i'm just going to say let's get 0 to say 0 to 20 out of 20 i guess so be something like that so i'm going to save that now in order for this middleware function to run we have to go to our package.json and go in our server here our server script and add dash dash middlewares and then where that file is located which is in the same directory so just range.js and you can put other ones here as well if you had some other you know middleware file all right so we'll save that now you're gonna have to restart the server so let's go here and just control c and run npm run dev again and now this should go away when this reloads and we should see our posts yep so now we can see our posts and it says 1 through 10 of 20 again it's just a number that i threw in there but normally you would you would check that in your database okay and if we look at our network tab here and we look at posts you can see the response which obviously is the four posts in the header get 200 get requests the content range so that was put in there from that middleware file that we added all right now if i go if i click edit that's not going to work because we haven't created the post edit component yet however delete should work because it's just going to make a request in fact i'll show you we'll take this post 4 and click delete so it goes away it says we get a little notification down here and if we look at the requests so it first deletes it from the ui and then it makes the request to the back end which is i think it was this yeah so it was a delete request to this right here post slash and then the id and we got a 200 response back with just an empty object so we have delete functionality and like i said edit's not going to work if we click delete here that that will also work we don't have an add button either because we need to add that component as well so let's jump back into react so close that up so we have our post list that's all set we can close that and in our app.js we're going to want to pass into resource now let's do let's do create next so we have lists let's add create and we're going to set that to a component that we create called post create so up here let's bring in post create and we'll save that inside components let's create a new file called post create.js so for this file um we're gonna it's this is gonna be pretty easy let's sketch out a component here and let's bring in from react admin i want to bring in a few things and this is going to be different because this is a form so we want create which is like the the wrapper element and then we're going to use something called simple form which does just that allows us to create a simple form we want a text input for the title and the body and we want a date input for the date for the published and this is going to take in props and then our wrapper element here is going to be the create element and this can take in a title which i'm just going to say create a post and also pass in this object here we want to spread the props and then inside here we want our simple form element and a text input so this is going to take a source just like the text fields do and this is going to be the title okay and then we'll have another text input for the body and since this is a body it's going to have more text so i'm going to add the multi-line prop here which will allow us to have multiple lines and then let's do the date input so date input will take in a label and this is all in the documentation too and we'll say publish i'll just say published and then a source so our source is going to be the published at field and that should do it i'm going to save that and let's go back here and notice we now have this create button so there's very little work we have to do to get some really cool functionality so i'll click create takes us to a form like this and here let's just say post four this is the body for post four and then we can have a little date picker here we'll go ahead and choose today and save and there we go so post 4 gets added so we now have that functionality let's do the edit now because right now this doesn't do anything so back in our app.js here we're going to pass in just like we did list and create we're going to pass in edit and for that we're going to have a post edit we'll want to bring that in okay so we'll save that and let's let's copy post create actually copy everything here and then create a new file and components called post edit.js and we'll go ahead and paste that in so i'm going to change this create right here to edit and we want to change the name here and here to post edit and the other stuff we're bringing in we're going to keep that we're going to change this this wrapper to edit and let's change the title to edit post and then this stuff here is going to stay the same now we could also put the id but obviously you don't want people to change the id so what we'll do is we'll just add disabled to this that way you can see the id but you just can't edit it all right so let's save that and let's go back here i'm just going to reload this so if i click on edit for post one it'll take me to that form we can see the id we just can't edit it save is disabled because i haven't changed anything if i say this is the post body for you'll see as soon as i start typing save is now enabled so i'm going to save that and we get element updated so just to make sure if we go back to edit here this is the post for post body for post to okay we'll go ahead and just change it back good all right so we can now create read update and delete posts and not only that but we can export as a comma separated value list so you'll see i hit export we get this post csv i'll go ahead and open that and there we go so we can do that if you want to add another resource you can go into your app.js file and basically just you know duplicate this and change this to whatever resource you want like users and you could have a user list user create and user edit you could put all these in the same file if you wanted to if you don't didn't want to have as many files and then basically just copy that and change all these instances of post to user and then in components create a user list dot js and just copy what we have in post list you could even create like an abstraction a a kind of a wrapper component so that you don't have to create all these different lists and all these different edits and so on but this is just to give you an example so i'm going to change this to user list and we have different fields so let's show the id let's show the name and the email which is text text field unless there's an email field let me just check i'm not sure oh there is i didn't even know that so we'll use email failed for that and change this to email and these should be changed to users okay let's see what's going on here delete button oh i forgot my comma let's actually move that up cannot resolve components user create that's because we haven't created it yet so let's create uh users create or user create.js i'm going to copy post create we'll paste that in and we just want to change the title here and here to user create and we'll say create a user we don't need the date input we'll get rid of that we'll get rid of this get rid of the multi-line and just change this to name and email all right and then the last one we want is user edit so let's create a new file called user edit.js and i'm going to copy post edit so i'll grab that and go to user edit paste that in let's change that and that to user edit edit user and keep the id we'll change this to name we'll change this to email and we'll get rid of the multi-line and we'll get rid of this date input we don't need that and we don't need to bring that date input in either so we'll get rid of that okay so let's go back and check it out and now we have the automatically we have this users and if i click on that we'll see the user we have with the name the email so we can edit change it to like john smith save updates it we can create a new user and save so it creates the user brings me right to the edit page has the id there we go we see our new user we can delete the user good so quite a bit of functionality here for very little a very little amount of code and obviously you would want to add some kind of authentication and like the documentation says you can use uh rest api json web tokens you can use something like oauth so really cool i just wanted to kind of give you guys uh i guess like a crash course or an overview of how to implement this and you could use this with just about any rest api or graphql api so that's going to be it for this video guys thanks for watching and i'll see you next time

Channel: Traversy Media

Views: 161,798

Rating: 4.9688249 out of 5

Keywords: react, react admin, json-server, react admin tutorial

Id: HRmdj-HpJyE

Length: 31min 25sec (1885 seconds)

Published: Wed Oct 07 2020