React Admin Crash Course 2025

all right guys in this video we're going to talk about and build a project with react admin which is a tool that I've used for a while and I actually did a crash course on react admin a few years ago but a lot has changed since then so I wanted to give you guys an updated version and we're going to just first look at some slides literally like 3 or four minutes just to give you a better idea of what react admin is and then we're going to just jump in and we're going to create an admin area for a Blog using uh Jason server as a backend API all right so let's jump into [Music] it all right so like I said I just want to spend just a couple minutes talking about react admin and what it is so it's an open- Source front-end framework built on react and it was created and is maintained by a company called marm laab and it's designed for creating datadriven applications like admin dashboards and and B2B interfaces and and it offers greatl looking UI components based on material design you can create anything from simple crud apps create read update and delete to complex business management systems and it it adapts to projects of all sizes and one standout feature of react admin is its low learning curve so if you're familiar with react you're going to find react admin incredibly intuitive to work with even if you're new to react um the framework just it provides enough structure and pre-built components to get you up and running very quickly so it's great for Rapid development and it's also backend agnostic so you can build your interface on top of any API whether it uses rest or graphql whether it's built with Express or laravel or D Jango doesn't matter at all and react admin doesn't use fetch directly it actually uses something called a data provider object and it uses that to interface with your API so let's talk a little bit about data providers so these are objects that expose a predefined interface that allows react admin to query any API in a normalized way and you can think of a data provider as an adapter or bridge between your react admin interface so your frontend UI and the backend API and it handles communication like data fetching creating new records uh updating existing ones deleting records all that stuff and there's literally dozens of of different data providers that you can use for certain types of projects for instance there's a simple rest API provider there's a graphql provider um there's even a specific provider for Json server which is the service that we're going to be using in our demo uh and of course you can also write your own data providers which I actually may do a video on at some point now if you were to write your own provider there's just a few methods that you need need to implement and they're all pretty self-explanatory you know if you want to get a list or a single resource if you want to create update delete resources um you can also add other custom methods as well and like I said we're going to be using the Json server provider but regardless of of which provider you use and which type of backend you use the rest of the stuff will be used in the same way as far as our front end as far as react admin and the components and all that stuff goes now as far as the basic building blocks with react admin we have a resource component which defines crud routes for a given API resource whether that's posts or users or products you have a list which of course displays a list of Records create which displays a form to create a record edit will display an edit form and show to display a record in readon mode so we'll be working with these basic building blocks and a ton of other stuff but I don't want to spend too much time in slides so let's get right into it and let's start working with react admin all right guys so we're going to create our admin UI in a second but I just wanted to just briefly talk about the data we're using the backend so we're using a service called Json placeholder which is at Json placeholder.jpg with crud functionality create read update and delete and we have multiple resources we can use we have posts so if I click on post it goes to Json placeholder typy code slost and it gives us about a hundred of them with an ID title body and a user ID that pertains to a user in the user's collection so now you can see we have all these different users so this is the data we're going to be working with and you can make get requests posts to add you know put to update delete to to delete uh it doesn't persist in the database obviously because they don't want people just deleting everything or creating a ton of posts but it does make a successful um request and send you a successful response as if it were a real rest API okay so that's what we'll be using and there's actually a data provider that we can use with react admin to work with this service now in reality you'd have your own API but the way you work with it as far as in react admin is going to be the same so you're going to use the same components like resources and data grids and all that stuff so let's go ahead and get started we need to run npm and nit react admin so you do have to have no. JS installed with and you need npm of course so let's run npm and nit make sure you go into a folder where you want to create this and then react-admin and then I'm just going to call it react admin demo but you can you can call it whatever you'd like now it's going to ask us about the data provider and I showed you a a quick screen that had dozens of data providers so this is by no means all of them um but just a couple that can get you started so fake rest which is a client side inmemory data provider Json server which is what we're using it's based on the Json server API simple rest so if you have a a simple rest API and none if you want to configure it yourself now I'm going to choose Jason server so let's hit that and then you you can also have off providers for authentication and I'm going to choose none here I'm going to show you how to use it but I want to do it from scratch rather than choosing it here so I'm going to choose none and then if you want to add your first resource like post or user whatever you can do it here but I'm going to just hit enter and leave it blank because I'm going to show you how to do it within the app all right and then I'm using npm if you want to use yarn that's fine as well so now it's just going to generate our react application all right so now that that's done I'm going to go ahead and just open it up with vs code so I'm going to say code react admin demo if you want to use a different editor you can that's fine and I'm going to open up the integrated terminal here and I'm going to run the server with npm runev and it's going to run on Port 5173 by default if I click that and open it it's just going to show us this welcome page all right now before we do anything I just want to kind of go over the structure here so if we look at the package.json it it's very similar to just if you were to set up a react app with vit it uses the vit server um we have npm runev which we just ran npm run build will build your your production site and then you can serve that with serve you have type checking you have linting with es lint and formatting with prettier so if we look at the regular dependencies of course we have react and react Dom in addition to that we have react admin and we have the Json server uh data provider that we selected and then just a bunch of Dev dependencies for typescript and eslint and prettier we are using typescript so we're using TSX files but we're not really writing any typescript so if you have no no knowledge of typescript that's absolutely fine and then there's just a bunch of config files for things like vit uh typescript prettier eslint and then if we look in the source we have our index TSX which is the entry point and looks just like any other react Spa bringing in react Dom we're passing in the the root element we're rendering the main app component which is right here app. TSX now in here is where react admin kind of takes over you can see what we're exporting from our app component is this admin component that's like the the root of react admin and it takes in a layout which we have right here layout TSX if you wanted to add something to this or you know add styling or components or whatever you could and then we also have passed in a data provider in our case if we look at data provider. TS we're using the the ra data adjacent server provider and all that consists of is just exporting this function passing in the URL which is in the EnV and it's the same exact URL that I was using here so if we go to/ poost so we're using the same exact data again we can't persist the data like if we add a new post it's not going to really get added to the database but it will make a successful request so it mimics a real API so in that app TSX you'll see this this resource component right so in the admin component it expects to have at least one resource so let's add a resource for post so we got to give it a name and you want that that name to correspond with your endpoint which in our case is post all right then we want to add we can add different views like create edit list which in our case is going to list the post and for now usually you'd set this to your own component but for now I'm going to set it to the list guesser so it has this concept of guessers and they just kind of guess the config for the table columns and stuff like that um or the you know the field names and it's B based on the data that's fetched so if we look at our project now we have this post table or data grid and it has the the user the ID the title and the body so it's get it's getting that from the data it's fetching all right and it has pagination down here um we can export as a CSV file we have dark light mode so just by adding that one line of code right just that one resource we have all this functionality and just to get something from your API and and show it like this and have pagination and Implement a a mode Toggler that's that's quite a bit of code so you can see how high level react admin is and how easy it is to use and you can really customize the stuff now the the guesser isn't meant to be used in production what's really cool is that if we look at the console it actually gives us the code to use to make our own list component so I'm going to just grab this import and this this uh export here and copy it and then we're going to go and create our own component so in Source I'm going to create a folder called pages and then in Pages I'm going to have a folder called posts and anything that has to do with post will go in here and I'm just structuring it how I want if you wanted to structure your folders a different way you could there's no convention or anything nothing you're supposed to do as far as how you structure this stuff or how you name it so I'm going to create uh I'm going to create a new file in post called post- list. TSX all right and then what we'll do is just paste in what I just copied from the console now I prefer to to have my exports at the bottom as default so I'm going to get rid of that export and then down at the bottom I'm going to say export default and then post list okay now to use this right now it's not doing anything but to use it we can then bring it into our app TSX so let's say import post list and then instead of list guesser we want to replace that with our post list and we can then just get rid of that list guesser if I save it it's going to look the same way but now we have control over it right and one of the things I want to do is the users I want to move that to the end so I'm going to move that down to the bottom save it and now the user is at the end of the the table or the data grid okay now as far as this code goes the list component that wraps everything that is what actually fetches the data through the provider and then we're using a data grid to display that data however you're not limited to just this data grid and having it look this way there's a lot of other components you can use there's other themes and layouts it doesn't have to look like this but I just want to keep keep it simple so I'm just using a basic data grid and one example I can give you is the simple list so if we bring that in just going to temporarily get rid of the data grid you still want to be within the list component because that's what basically provides the data and let's say we want a simple list and this takes in a primary text and primary text is going to be a function that takes in a a record and you have access to that record which in this case is a post so let's say we want this to show the the record. tile for the primary text right and then we have secondary text same thing I'm going to pass in say record and we want to display record. body for the the secondary so if I save that we take a look now it looks completely different right we have a list with a primary text title and a secondary text body pagination still works right so um it's just another way to display the data but I'm going to just revert it back to the data grid just because it fits more information okay so now we have the data grid back now we can customize this like one simple thing we could do is let's say instead of title we want this to say post tile we can then add a label to the text field so we'll say label set that to let's say post title come back over here reload and then now it says post title right if we want to change the way that the data is displayed like let's say for the body you know you might have 10 20 plus paragraphs of text you don't want to show that all in this in these tables so why don't we truncate it let's use uh we're going to use something called function field which allows you to really customize the data that you're displaying so instead of a text field which just simply displays the text um or displays the data straight up like if we look at the ID title and body that's exactly what's showing here there is a reference field for users and that's why it's showing the user name here and not the user ID because remember in the post we only have the user ID not the name but what this reference field does is it references the users's table by the user ID and by default it shows the name okay but again this this body what I want to do is use function field and let's set a label and we'll set the label to excerpt and then it takes in render and render is going to be a function that takes in a record just like the simple list I showed you and then we can do whatever we want with that record and that record has the title The Body Etc I want the body but I want to truncate it so what I'll do is Let's uh let's actually use back ticks here and then we're going to take the record do body and then I'm just going to use substring to shorten it let's say we want from 0o to 50 and then I just want to add three dots at the end so now if I save that we take a look now the body is is now an excerpt I changed the label and it's only showing the first 50 characters and then showing the dots so you can change it up to show whatever you want using using that data now another thing I want to show you is how to add style now you can add your own CSS file and you can take any of the classes you know use your your elements here and look at the classes and you can change things in a CSS file but if you want to add to an individual element or component you can use the SX prop which is very similar to react style prop so let's say we want to add some padding to this header right here this header cell so I'm going to go into the data grid and I'm going to add a prop of SX which works like the style prop so you want to have your double curly braces and then you can put your CSS selector so I know what I want is a class and it's called r a data grid Dash header cell so that's the class I want and then I want to set some padding on it so I'm going to set padding to let's say 16 pixels save that and and now you can see that there's some spacing in the header all right now um another thing I want to show you is the expand so I can basically have these these rows have an arrow where it can expand and show more content for instance you might want to show the whole body so let's go to the list and we're going to pass in I'm sorry not the list the data grid and let's say expand and I'm going to set this to a component called we'll call it post panel I know I haven't created it yet but we're going to create it right now so right here let's say const post panel set that to a function and we're just going to return from this for now just a div and just say hello okay now post panel is being passed into to expand so if I come back over here we have these arrows and if I click it it expands and it shows hello for all of these but what if I want to show like I said the whole body in that case we can use a hook called use record context which will allow us to use just that the record context in data wherever we want so in this case in the post panel so let's bring in use record context and then I'm going to go right above that return let's say const record set that equal to use record context and then I should have access to record Dot and then I I want actually I'm going to use the optional chaining here and then dot body so now if I click on the expand I see the entire body so we got the excerpt here but we have all the text in the dropdowns all right now that's not something I want to keep I just wanted to show you how that worked so I'm going to get rid of the expand and the SX and get rid of the post panel all right so now what I'd like to do is show you how to add more resources because right now we just have post but what if we also want to add users so what I'm going to do is create a new file uh a new folder rather in Pages called users and then in users let's create a file called user- list. TSX okay and then for this I guess we could just could probably just type this out it's pretty quick so I'm going to use my react simple Snippets extension and just do sfc and then we're going to call this user list and it's going to be similar to the the post list where we're going to use the list component and we need to make sure we bring that in from react admin and then within the list we're going to have a data grid so let's also bring that in and in the data grid we'll have our text fields and this fact text field is going to have a source of ID and then I'll just copy that down a few times so we have the ID we have actually do I want the ID no yeah we'll keep the ID and then let's do the name the email and the phone okay and this data pertains to the user data so if I go to Jason placeholder and then slash users so we can get any of this data here right because we're using that data provider um but I think that that's good name email phone ID so let's go ahead and save that now we need to go back to our app TSX and let's bring that in so import user list and then what we'll do is copy this resource down add a resource for users and for the list we want to use the user list now automatically we should see users over here on the side if I click that now we have a data grid with our users with pagination with an export with delete that's I didn't mention that either so we can have these check boxes and we can click delete it's not going to stay deleted because again you can't persist the data with this API but it works in theory so we have post and users now let's create a show view right I want to be able to click on one of these and show a readon page page with the the post data so what we can do is go into pages and then posts actually before we do that we can use the show guesser so yeah just like we did the the list guesser so in the resource for post let's say show and let's set that to the shows the show guesser and just by doing that if I now click on this it takes me to the show page where it has as the user ID title body all right but we don't want to use this in production so what we can do is look at the console and it gives us an example of the code that we can use to create this ourself and again you're not limited to this you can display it in any way you want in fact if you go to the the mar laab homepage I mean you can see some of these examples here uh no I don't want Source I want demo so like like look at this this is all custom you know this is react admin go to this demo so an e-commerce dashboard or or whatever so you can really customize it this is I'm just keeping it very basic I know this isn't the best looking but the functionality it gives you is is crazy for the amount of code that you write so yeah we'll copy that and then we'll create a show view so let's go into Pages posts we'll create post- show. TSX and paste that in and again I just like to export it at the bottom just kind of an OCD thing so export default and we want post show and then what we can do is bring that in we can get rid of the show guesser and then we can bring let's say import uh Port post show and then replace the show guesser with post show and now it's the same thing right if I click on it it shows me that that show view okay and we can do the same thing for users so if we go to users and create a new file called user- show. TSX and I'll just copy the post show and then we'll change this and this to user show and of course we don't want this the reference here uh we'll get that out let's do we'll do the ID um name email and phone okay and then in the app TSX we'll bring in the user show and pass in here show I know I'm going kind of fast but this is it's really easy stuff so user show and now if I click on that now we can see the user view also if I go back to post notice now the users actually have a their blue with an underline and it's a link to go to that user page okay so not only can I go to the Post page from here but I can also click on the user and go to the user page so really cool now let's create an edit for the post so we have an edit guesser so we can use that to kind of see what it'll look like so let's say edit set that to edit guesser temporarily and now uh we don't have an edit button we can create one and I will in a minute but the way we can get to it right now is to go to the show and now there's an edit button here if I click on that now we have the the form okay but again this is using the guesser so we're going to want to just grab this and let's create in Pages posts we'll say post- edit. TSX paste that in and I'm just going to bring this down here default post edit and then back in the app TSX we can get rid of the edit guesser we don't need that and let's import post edit and then change this to post edit and we should get the same thing okay so we're able to have an edit page and I can change the user so this is a reference field so I can change the user if I want and then I can change you know title body I can save it now it gets updated but it doesn't stay updated because again it doesn't persist um but I want to show you how we can add an edit Button as well on the list page so and it's very very easy all we have to do is go to Let's close this stuff up let's go to the Post list and let's import edit button and then I'm going to put that as the last thing in the data grid so edit button save that and now we have an edit button so if I click this one I can edit that post now what about create let's do that let's go to post let's create post-c create. TSX and we'll just type this out because it's pretty simple so I'm going to do sfc and let's call this post create and we're going to want to wrap this in create okay and then in that we want to have simple form just like we use for the edit again make sure you bring this stuff in and in simple form let's have a reference input to the user so that we can select the user so reference not error reference input and we're going to add the source is going to be user ID and the reference is going to be users okay and then we'll also have uh the title which is going to go in a text input actually wait a minute text input is going to be self- closing bring it in okay and then we just want to add a source of title and then let's also add one for the body now for the body I want it to be bigger so let's say multi-line and then we can even specify the number of rows let's do five all right so that's our create view so let's go back into app TSX and let's bring in post create and then just simply add on to the resource create set that to post create and now what that did is it added this create button if I click that now we have a create form I can choose the user and I can save save now it's going to give you an error because what happened is it it makes a successful request and we get a successful response but it doesn't actually get added so when it goes to to get that new resource that new post it's not there so we get an error so that's to be expected all right so yeah I mean that's that's crud create read update and delete if you want to add the create and edit to the users you can just simply add them here uh and then just you know plug them into the the resource but I want to move on to filters search and filters and this this is super easy so let's open the post list and I just want to have a search form so I can search for things in the title and so on so I'm going to bring in a text input and then I also want to be able to filter by user so I'm going to bring in a reference input because remember the the user that's not part of the um the post it has its it's part of users so we need to reference users now instead of returning a list directly from post list what I'm going to do is add a curly brace here and then a return and then add our ending curly brace here okay and then I'm going to go above the return because what we need to do is pass in to list we need to pass in filters and I'm going to create po a post fil filters array so let's go right here and let's say const post filters set that to an array and it's going to be an array of inputs so the first one is going to be the text input and I just want to give that a source of Q for query okay and then we'll give it a label of search now if I do that what happens is it it creates this add filter if I click that I get a drop down with search and then if I check off search then I get the input so I would rather have it always there because if I reload well I guess it's still there but if you first come to the site it's not going to be there but you can add always on like that you don't want to set it equal to anything just always on now it's just there and you can search for whatever all right now I'd also like to add a user filter that's where this reference input comes in So within this these brackets just make sure you put a comma after that input and then let's do reference input and for the source we want that to be user ID and let's give it a label of just user and I don't want this to be always on so I'm not going to use that I do need to add a reference though to user and now we should have ADD filter if I click on user then I can narrow it down to whatever user all right so as simple as that to have search and filters now another small thing I'd like to change is the icons right the post and users icons here are the same and we have automatically with react admin you have material icons available so in the app. TSX I'm going to go ahead and bring in let's say import article article icon and that's going to be from at mui SL iconsmaterial SL article I want to bring that one in as well as the person icon so let's change that to person change this to person right and then what we can do is for the resource for the post I'm going to say icon set that to article icon and then for the icon I'll set that one to the person icon save that and check it out and now there's different icons all right so the next thing I want to show you is how to create a custom homepage because right now if you just if you come to your your homepage which in my case is just Local Host 51 73 it just takes me to the Post table you might want to have just a welcome page or something like that so I will create something very simple so I'm going to go into pages and create a file called homepage. TSX and what you call the file and stuff doesn't matter um you can put it wherever you want call it whatever you want and I'm just going to do some copying and pasting here so we can bring in these components from Material UI so card card content typ graphy box and then uh let me see I'm just going to grab this homepage component real quick okay so we just have a box with some styling we're using the SX prop making it a flex box centering everything and then we have a card card content we have a heading and a paragraph so very very simple stuff um and there's just certain certain props you can pass in like topography you can pass in a variant and a component and so on and to use that we need to go to our app. TSX and bring it in so we want to bring in our homepage and then that gets plugged in to the the admin component so in the admin component let's add dashboard that's the prop that you want to pass it in as and say homepage so now if I go to Just Local Host 5173 now I see my little message here welcome to the dashboard okay it's also a link over here as well and then I can go to posts or users whatever all right so that's how you can create a homepage now the last thing I want to show you how to do is to create an authentication provider and we're going to do something very simple and just have a username and password that has to have the username of admin and the password of password but obviously you would have a real authentication system that you would integrate into your provider so in the source folder we're going to create a file called o let's say oth provider. TS and I'm going to import o Provider from react admin um and then that's uppercase a and then we need to export let's say export const oth provider and we'll give it a type of oth Provider that we just brought in set that equal to an object and then in that object we're going to have some different functions that do different things or run at certain times so this first one runs we'll say runs when user attempts to log in so we're going to say login and set that to a function and what this will take in is an object with a username and password okay and then in the function Bo body here basically our validation is going to check to see if the username is admin and the password is password and then a successful login is going to set that username to local storage so let's say if the username is equal to admin and the password is equal to password then we're going to take local storage and we're going to set an item and we'll just set uh the key will set to username and then the value will be the username right and then what this needs to return is a promise it needs to return a promise resol resolve the promise if it's successful and reject it if it's not so in this case we're going return promise. resolve okay now if this isn't correct right if the login is bad then we're going to return say promise. reject okay um and then let's see what's going on here is missing the following properties Au provid yeah so it's just we haven't done we haven't added the log out yet but yeah so very basic obviously you would integrate your own authentication system here but we're just uh we're just doing something very simple so under login let's add our log out so right here we're going to put a comma and then log out okay and then all we want our log out to do is remove let's say remove username uh remove username from local storage so we're going to say local storage dot um REM remove item and remove the username and then we want to return resolve so that's our log out then we also want to have a check error actually let me put a comment here it's pretty obvious but let's just say runs when log out okay put a comma here then this is going to run runs when API returns an error so this is going to be called check error oops check error all right and then what that's going to take in this check error is going to be an object with status and the type for that object status that's going to be a number all right now in check error error we're going to check that status and see if that's a 401 401 is unauthorized um and then we want to also check if it's a status of 403 so if it's either one of those then we know that they're unauthorized and if that's so then let's remove the the username from local storage so local storage. remove item and remove item of username and then we want to return a a promise reject so let's say return reject right and then underneath that so if there is no status of 401 or 403 then we want to resolve so return promise promise. resolve okay so that's our check error then we have our check off so this is going to let's say runs when the user navigates to a new location to check for off for authentication so let's say check off okay now for check off we're going to return success if username is in local storage right so if we go to a page that where you need to be authenticated it's going to check to see if it's in local storage the username if it is then will resolve if not then we'll reject so let's say return and say local storage. getet item we want to check for username and then I'm using a Turner here so if that's true then let's do promise. resolve so you're you're authenticated right and then if it's not true then reject do reject and that's it and then one more so this will let's say runs when user navigates to a new location to check for permissions permissions or rules right because there might be you might be logged in but you might have certain permissions for different users or different roles and you want to check that um and that's going to be called get permission or get permissions and for that we're not going to do any logic here I'm just going to resolve so promise. resolve I just want you to know all the different functions okay so yeah that should do it let's save that and now to use it we need to go into our app. TSX we're going to import Port the uh what is it the off provider the lowercase version okay and then we just want to add that to the admin so right here let's say off and let's set that equal to the off provider um sorry that should be off provider not off okay now let's go to the homepage and we have a login okay so right now everything you need to be logged in to do anything and I'm going to just type in anything just whatever I get authentication failed please try again I'm going to do admin and password sign in and then that works so now I'm logged in all right and you see the little user icon here as well with the log out if I log out it clears that local storage item brings me back to the login okay and again you would have your own authentication logic here these are just the the functions that you would use right obviously this stuff would be different but I mean it's all put together it's all there for you to take advantage of and just really easy to use and doesn't take much code at all to create a really cool system to to manage your API manage your your resources all right guys so hopefully you enjoyed this I will have the code in the description so if you want to create something of your own and you want to use this as a resource you can if you want to add on to it of course you can do that but that's it and thanks for watching