{"id":8334,"date":"2021-10-26T21:46:26","date_gmt":"2021-10-26T18:46:26","guid":{"rendered":"https:\/\/flatlogic.com\/blog\/?p=8334"},"modified":"2022-05-11T16:38:10","modified_gmt":"2022-05-11T13:38:10","slug":"building-react-admin","status":"publish","type":"post","link":"https:\/\/flatlogic.com\/blog\/building-react-admin\/","title":{"rendered":"Building React Admin Step By Step"},"content":{"rendered":"\n

Introduction<\/strong><\/h2>\n\n\n\n

Every web project has two sides: the one seen by users and the admin page that its manager uses to control each aspect of each page of said project. To draw a parallel, the user side of the site is our usual beautiful world, and an Admin Page or Admin Console is like the Upside Down from “Stranger Things”, where it is dark and scary, but all the important stuff happens. Or, to draw another analogy, a React-based Admin Page is like the Enterprise spacecraft engine rooms: all the main characters like Captain Kirk and Spock are on the beautiful and well-lit main deck, which would be rendered useless if all the ship’s engineers left the above-mentioned engine rooms. So, the importance of a well-made Admin Page cannot be underestimated if you need your whole project to run smoothly and correctly. But first off, let’s fully understand what a React Admin Page is and how it operates.<\/p>\n\n\n\n

What is React Admin<\/strong><\/h2>\n\n\n\n

React Admin Page or React Admin Console is, to put it simply, a framework that contains all the information about the site and its content, including information about your products, users, etc. React Admin page also gives you the ability to control everything about the content on your website or app.<\/p>\n\n\n\n

In other words, it is the control tool that you use to manage and improve your web project<\/a>. Thus, it is a tool of great importance able to make or break your business, especially if your specialty is of an e-commerce nature. Don’t get us wrong, we are not telling you this to scare you, but to merely emphasize the significance of creating a React Admin Page worthy of your business.<\/p>\n\n\n\n

Before we give you a quick rundown on how to create your own basic React Admin Page, there is only one little question left standing: why use React as a basis for your Admin Page in the first place? React is, no doubt, one of the best bases for an Admin Page. It is easy to create, improve, use, and, most importantly, easy to maintain. This fact renders the decision on what to use as a basis for not only your Admin Page or Admin Console, but pretty much your whole web project preemptively made for you.<\/p>\n\n\n\n

That being said, let’s have a look at how to create your own crud<\/a> React Admin Page in two ways:<\/p>\n\n\n\n

1.    By actually sitting down and writing a code, spending so much precious time and effort;<\/p>\n\n\n\n

2.    Or by seamlessly and effortlessly creating it with the help of Flatlogic’s Full Stack AI Web App Generator<\/a>.\n \"Professional <\/a><\/p>\n\n\n\n

More on seamlessness and effortlessness of option number two later, as now we take a look at path number one.<\/p>\n\n\n\n

How to Build React Admin<\/strong><\/h2>\n\n\n\n

In order to create your own React Admin Page you will require some preliminary preparations that mainly consist of installing npx, which version would be newer than its eighth iteration, and create-react-app.<\/p>\n\n\n\n

With the preliminaries out of the way, your next step is to create a new folder that will contain and store your React Admin Page’s codebase. When that is done, you need to use your preinstalled create-react-app with the following line of coding:<\/p>\n\n\n\n

npx create-react-app my-react-admin-page<\/code><\/pre>\n\n\n\n
This line will create a blank React application that will serve as your React Admin Page after we fill it with all the needed innards. Now it is time to install the react-admin<\/em> package, as well as the data provider that will help us connect to a fake API:<\/p>\n\n\n\n
cd my-react-admin-page<\/code><\/pre>\n\n\n\n
npm install react-admin ra-data-json-server<\/code><\/pre>\n\n\n\n
npm start<\/code><\/pre>\n\n\n\n
Now it is time to start working on the above-mentioned React Admin Page innards. Bear in mind that we don’t pay much attention to filling up our frontend with any real data and instead we are going to use an API for testing and prototyping. This will help us by letting us forget about creating custom data providers for now. The first step we are to partake in is replacing the src\/app.js <\/em>element with the next lines of code to set up your React Admin’s default page:<\/p>\n\n\n\n
import { Admin } from 'react-admin';\nimport jsonServerProvider from 'ra-data-json-server';\n \nconst dataProvider = jsonServerProvider('https:\/\/jsonplaceholder.typicode.com');\n \nfunction App() {\nreturn (\n<Admin dataProvider={dataProvider} \/>\n);\n}\n \nexport default App;<\/code><\/pre>\n\n\n\n
The next step is setting up the Resource <\/em>component, which allows you to command react-admin <\/em>to fetch and subsequently display a user<\/em> resource. The process is quite simple: your data provider will process the fetch command and display the requested user with the help of the ListGuesser<\/em>, which takes the data the resource was provided with and tries its best to guess upon the format of the initial data grid. This, subsequently, allows us to use the above-mentioned initial data grid in order to generate our initial list code. And to set the Resource <\/em>component you will need the following lines of coding:<\/p>\n\n\n\n
import { Admin, Resource,ListGuesser } from 'react-admin';\nimport jsonServerProvider from 'ra-data-json-server';\n \nconst dataProvider = jsonServerProvider('https:\/\/jsonplaceholder.typicode.com');\n \nfunction App() {\n return (\n <Admin dataProvider={dataProvider}>\n <Resource name=\"users\" list={ListGuesser}\/>\n \n <\/Admin>\n );\n}\nexport default App;<\/code><\/pre>\n\n\n\n
Now, in order to customize the mishmash of columns, you will have to look through the table element in your browser and copy the parts you would like to systemize and customize. After that, copy the selected parts into your console by using the inspect element \u2192 console chain of commands. The result will look something like this:<\/p>\n\n\n\n
export const UserList = props => (\n <List {...props}>\n <Datagrid rowClick=\"edit\">\n <TextField source=\"id\" \/>\n <TextField source=\"name\" \/>\n <TextField source=\"username\" \/>\n <EmailField source=\"email\" \/>\n <TextField source=\"address.street\" \/>\n <TextField source=\"phone\" \/>\n <TextField source=\"website\" \/>\n <TextField source=\"company.name\" \/>\n <\/Datagrid>\n <\/List>\n);<\/code><\/pre>\n\n\n\n
To sort everything nice and tidy you will need to create a components <\/em>folder in your src <\/em>and paste the data in need of sorting into the user.js <\/em>file. What you get as a result should look as follows:<\/p>\n\n\n\n
import { List, Datagrid, TextField, EmailField } from 'react-admin';\n \nexport const UserList = props => (\n<List {...props}>\n<Datagrid rowClick=\"edit\">\n<TextField source=\"id\" \/>\n<TextField source=\"name\" \/>\n<TextField source=\"username\" \/>\n<EmailField source=\"email\" \/>\n<TextField source=\"address.street\" \/>\n<TextField source=\"phone\" \/>\n<TextField source=\"website\" \/>\n<TextField source=\"company.name\" \/>\n<\/Datagrid>\n<\/List>\n);<\/code><\/pre>\n\n\n\n
Now you can get rid of the unnecessary information. For this example, let’s get rid of the Ids and usernames, as well as disable the phone sorting and change the street address and company name field label with the label prop. Now, this part should look like this:<\/p>\n\n\n\n
import { List, Datagrid, TextField, EmailField } from 'react-admin';\n \nexport const UserList = props => (\n<List {...props}>\n<Datagrid rowClick=\"edit\">\n<TextField source=\"address.street\" label=\"Street Address\"\/>\n<TextField source=\"phone\" sortable={false}\/>\n<TextField source=\"company.name\" label=\"Company Name\"\/><\/Datagrid>\n<\/List>\n);<\/code><\/pre>\n\n\n\n
At this point, it is time to replace the ListGuesser <\/em>with the list above in the Resource <\/em>component. To do that, get back to the App.js<\/em> and add the following lines:<\/p>\n\n\n\n