Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 11, 2019 08:00 pm GMT

How to build an admin panel with React

Introduction

A good number of web applications have evolved from static websites that just display content to dynamic webpages where users access and interact with content. This content is often powered by APIs that send and receive data.

Often, an admin page is needed to sort and handle this data. The usual practice would be to build an interface and connect every endpoint by sending requests to the API. This used to be a tedious process until react-admin was introduced.

react-admin is a framework that builds admin interfaces by consuming your APIs Rest, GraphQL or custom. You also wont have to worry about style formatting as its themed with Material UI a React library used in designing application interfaces. In this blog post, we will learn how react-admin scaffolds admin interfaces for applications.

LogRocket Free Trial Banner

Getting started

Lets begin by creating a new React project and installing react-admin in its directory like this:

npx create-react-app react-admin-appcd react-admin-app# install react-adminnpm install react-admin

Your application should be running with an empty React app on port 3000.

Modifying and filtering data with guessers

It is essential for an admin page to have CRUD functionalities. Well use an API to show how react-admin does this. The JSONPlaceholder is a dummy REST API which exists for illustration purposes, heres a sample of the data well be getting:

{    "id": 1,    "name": "Leanne Graham",    "username": "Bret",    "email": "[email protected]",    "address": {      "street": "Kulas Light",      "suite": "Apt. 556",      "city": "Gwenborough",      "zipcode": "92998-3874",      "geo": {        "lat": "-37.3159",        "lng": "81.1496"      }    },    "phone": "1-770-736-8031 x56442",    "website": "hildegard.org",    "company": {      "name": "Romaguera-Crona",      "catchPhrase": "Multi-layered client-server neural-net",      "bs": "harness real-time e-markets"    }  }

We first need to install JSONPlaceholder in our react-admin app:

npm install ra-data-json-server prop-types

Lets try fetching data from the API. For this purpose, react-admin uses <Admin>, its root component to provide the data exchange between APIs and applications. Replace the default syntax in src/App.js with this:

import React, { Component } from "react";import { Admin } from "react-admin";import jsonServerProvider from "ra-data-json-server";const dataProvider =  jsonServerProvider("https://jsonplaceholder.typicode.com");class App extends Component {  render() {    return (      <Admin dataProvider={dataProvider} />    );  }}export default App;

Running npm start at this point should render an app with a confirmatory message on your browser:

react admin panel interface

While still in development, react-admin creates admin interfaces through guessers. Guessers receive data from the API, determine what sort of data it is and then make decisions on what kind of format the data should be displayed in. Lets try to display a list of users by applying guessers:

import React, { Component } from "react";import { Admin, Resource, ListGuesser } from "react-admin";import jsonServerProvider from "ra-data-json-server";const dataProvider =  jsonServerProvider("https://jsonplaceholder.typicode.com");class App extends Component {  render() {    return (      <Admin dataProvider={dataProvider}>        <Resource name="users" list={ListGuesser} />      </Admin>    );  }}export default App;

In the code block above, the <resource> element is responsible for mapping the name property to an endpoint in the API. Here <resource> appends the users value to our API and fetches the data of users from the API. The list property uses the <ListGuesser> component to display this data as a list of users.

display of data in console

<ListGuesser> is not meant to be used in production thus it has to be replaced by a custom component. An awesome feature of guessers is the display of the source code of data retrieved from the API in the browsers console. Lets take a look at what <ListGuesser> displays:

data displayed in console

So this shows us how our user list should be created. Lets replicate this data in our application. In the src folder of your project, create a file and name it users.js :

/src/users.jsimport React from 'react';import { List, Datagrid, TextField, EmailField, UrlField } from 'react-admin';export const UserList = props => (    <List {...props}>        <Datagrid rowClick="edit">            <TextField source="id" />            <TextField source="name" />            <TextField source="username" />            <EmailField source="email" />            <TextField source="address.street" label="Address" />            <TextField source="phone" />            <UrlField source="website" />            <TextField source="company.name" label="Company" />        </Datagrid>    </List>);

In the code block above a couple of changes were made. First, we use the <UrlField> element to make the links on our website column clickable. Then we add a label property to the address and company columns to make their headers more presentable. Lets navigate to App.js and replace ListGuesser with UserList:

/src/App.jsimport React, { Component } from "react";import { Admin, Resource } from "react-admin";import { UserList } from './users';import jsonServerProvider from "ra-data-json-server";const dataProvider =  jsonServerProvider("https://jsonplaceholder.typicode.com");class App extends Component {  render() {    return (      <Admin dataProvider={dataProvider}>        <Resource name="users" list={UserList} />      </Admin>    );  }}export default App;

Admin pages should be able to edit and create data as well. react-admin also does this by the use of guessers. EditGuesser is used to edit data of admin pages. In App.js , import EditGuesser from react-admin :

src/App.jsimport React from 'react';import { Admin, Resource, EditGuesser } from "react-admin";import { UserList } from './users';class App extends Component {  render() {    return (      <Admin dataProvider={dataProvider}>        <Resource          name="users"          list={UserList}          edit={EditGuesser}        />      </Admin>    );  }}     

Now we can edit user details on our admin interface:

One important thing to note is that JSONPlaceholder, the API we are using doesnt have editing and creating functionalities. What occurs here is a concept called optimistic rendering which react-admin uses to display changes made while simultaneously sending an update query in the background. Should the query fail, the data will change back to its original form.

Similar to listing users, a look at our console will give us an idea of what to input as markup. Heres what we have after using EditGuesser:

Lets replicate our consoles markup in our application. Append the code sample below in users.js:

//src/users.jsimport React from 'react';import { Edit, UrlField, DisabledInput, SimpleForm, TextInput } from 'react-admin';export const UserEdit = props => (    <Edit {...props}>      <SimpleForm>        <DisabledInput source="id" />        <TextInput source="name" />        <TextInput source="username" />        <TextInput source="email" />        <TextInput source="address.street" label="Address" />        <TextInput source="phone" />        <UrlField source="website" />        <TextInput source="company.name" label="Company" />      </SimpleForm>    </Edit>  );

The DisabledInput element prevents sensitive properties from being edited. In App.js, replace EditGuesser with UserEdit:

//src/App.jsimport React, { Component } from "react";import { Admin, Resource } from "react-admin";import  { UserList, UserEdit }  from './users';import jsonServerProvider from "ra-data-json-server";const dataProvider =  jsonServerProvider("https://jsonplaceholder.typicode.com");class App extends Component {  render() {    return (      <Admin dataProvider={dataProvider}>        <Resource name="users" list={UserList} edit={UserEdit} />      </Admin>    );  }}export default App;

The process of creating a new user is almost the same as editing one save for a few elements. In users.js, replicate the code sample below:

//src/users.jsimport React from 'react';import { Create, UrlField, DisabledInput, SimpleForm, TextInput } from 'react-admin';export const UserCreate = props => (    <Create {...props}>      <SimpleForm>        <TextInput source="name" />        <TextInput source="username" />        <TextInput source="email" />        <TextInput source="address.street" label="Address" />        <TextInput source="phone" />        <UrlField source="website" />        <TextInput source="company.name" label="Company" />      </SimpleForm>    </Create>  );

and in App.js add the UserCreate component:

//src/App.jsimport React, { Component } from "react";import { Admin, Resource } from "react-admin";import  { UserList, UserEdit, UserCreate }  from './users';import jsonServerProvider from "ra-data-json-server";const dataProvider =  jsonServerProvider("https://jsonplaceholder.typicode.com");class App extends Component {  render() {    return (      <Admin dataProvider={dataProvider}>        <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} />      </Admin>    );  }}export default App;

On our interface lets try to create a new user:


Similar to what happens when we try to edit the details of a user, optimistic rendering occurs. This explains why in the last seconds of the snippet above our newly created user is displayed for a while before the message NOT FOUND can be seen.

Authentication

Every admin page needs an authentication process. It could be basic or a bit more complex (JWT, OAuth). Although by default, react-admin apps do not need authentication to function, its still best practice to integrate authentication to admin pages.

react-admin lets you be flexible with how you implement authentication. JSONPlaceholder has no authentication model so we are going to create a dummy authentication process which will accept any values as username and password and store these values in localStorage. In your src folder, create a file called authProvider :

// src/authProvider.jsimport { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';   export default (type, params) => {    // when a user tries to log in     if (type === AUTH_LOGIN) {     const { username } = params;     localStorage.setItem('username', username)     return Promise.resolve();    }    // when a user tries to logout    if (type === AUTH_LOGOUT) {     localStorage.removeItem('username', username)     return Promise.resolve();    }    // when the API throws an error    if (type === AUTH_ERROR) {     const { status } = params;     if (status === 401 || status === 403) {      localStorage.removeItem('username');      return Promise.reject()     }     return Promise.resolve()    }    // when a user navigates to a new location    if (type === AUTH_CHECK) {     return localStorage.getItem('username') ?      Promise.resolve() :      Promise.reject();    }    return Promise.reject('Unknown Method');   };

Then head on to App.js and pass the authProvider property in the <Admin> component:

//src/App.jsimport React, { Component } from "react";import { Admin, Resource } from "react-admin";import authProvider from "./authProvider";import  { UserList, UserEdit, UserCreate }  from './users';import jsonServerProvider from "ra-data-json-server";const dataProvider =  jsonServerProvider("https://jsonplaceholder.typicode.com");class App extends Component {  render() {    return (      <Admin dataProvider={dataProvider} authProvider={authProvider}>        <Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} />      </Admin>    );  }}export default App;

Now when we restart our application, we first get to a login page:

Summary

Creating admin applications does not have to be as complex as it once was. With react-admin, we can scaffold admin interfaces quite readily. Authentication processes are equally important and they are not excluded here. Should you need to take a look at the source code, you can find it here on CodeSandBox.

Plug: LogRocket, a DVR for web apps


LogRocket Dashboard Free Trial Banner

LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free.

The post How to build an admin panel with React appeared first on LogRocket Blog.


Original Link: https://dev.to/bnevilleoneill/how-to-build-an-admin-panel-with-react-4gf1

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To