create-react-app reactadmin

 i react-admin ra-data-json-server prop-types

// in src/App.js
import * as React from "react";
import { Admin, Resource, ListGuesser } from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

const dataProvider = jsonServerProvider
 (
'https://jsonplaceholder.typicode.com'
 );
const App = () => <Admin dataProvider={dataProvider} />;

export default App;

import * as React from "react";
import { Admin, Resource, ListGuesser } from "react-admin";
import jsonServerProvider from "ra-data-json-server";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={ListGuesser} />
  </Admin>
);

export default App;

//Post.js

import React from "react"
import { List, Datagrid, TextField, EmailField} 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" />
            <TextField source="phone" />
            <TextField source="website" />
            <TextField source="company.name" />
        </Datagrid>
    </List>
);

import * as React from "react";
import { Admin, Resource } from "react-admin";
import jsonServerProvider from "ra-data-json-server";
import { UserList } from "./Components/Post.jsx";

const dataProvider = jsonServerProvider("https://jsonplaceholder.typicode.com");

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="users" list={UserList} />
  </Admin>
);

export default App;

import React from "react";
import { List, Datagrid, TextField, ReferenceField } from "react-admin";

export const PostList = props => (
  <List {...props}>
    <Datagrid rowClick="edit">
      <ReferenceField source="userId" reference="users">
        <TextField source="id" />
      </ReferenceField>
      <TextField source="id" />
      <TextField source="title" />
      <TextField source="body" />
    </Datagrid>
  </List>
);

 <TextField source="name" /> 

```, this is what we now have instead of using the id.

I'll go ahead to trim down the data, put the post-Id as the first column, remove the *<TextField />, and add an edit button to the UI. I'll be importing the Edit button component to our UI and removing the "rowClick" prop on our Datagrid component.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3ct4391384267sezcqsr.PNG)

Our UI should look like the above screenshot. 😎

###Editing and Adding New Records.
up until now, we have been viewing, deleting our records, it's time to edit and add new records. 

Like the ListGuesser component, we also have what we call the EditGuesser component, sweet! right?  😇

In our app.js, we'll be importing the EditGuesser, check our console, to see the guessed components that will enable us to edit our displayed items.

So, we will have some like this in our app.js

We imported the EditGuesser, add another prop, edit to our post component, and give it the value EditGuesser. Sure we'll be removing the EditGuesser and replace it with our created component as suggested by the EditGuesser.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iu3j3e8nj7bkin1sjqom.PNG)

This is our newly created edit component, I have successfully removed the EditGuesser and everything still works well.

Let's make some adjustments to our EditPost component to improve its UX. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ht52bxv1qnvae0pyuxpr.PNG)

First, we want to make sure the user options is giving us the name of the user, not its id, we want to make sure the id of the id is read-only and should be placed at the top of the component, lastly, the body section should be able to expand and display the text at only. 

We'll be placing the textfield component immediately after the simpleform component, add a disabled prop to it. One issue is settled.

We'll be changing the SelectInput OptionText from the value id to name, to reflect the name of the posts' author.

We'll add the multiline prop to the textinput body, this will expand the text input for the user to see all the text at once.

Our code should be above as above and UI should change to what we have below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1we2ft1o21hn0yfpw78o.PNG)

###Adding New Records.

For us to be able to add a new record, we just have to copy the PostEdit component add little tweaks and we're good to go.

Create a PostCreate component, replace the Edit with Create, remove the *<TextInput disabled source="id" />* and import the new component into our app.js

In our app.js, under our Resources component, add a new prop "create" and let the value be the newly imported "PostCreate".

We have successfully added the ability to create, update, delete, and view our records. 🎉🎉🎉

Note, because the JSON placeholder API is read-only when we attempt to create a new record it doesn't appear on our records, if we're using a real API that accepts a post request then everything should work fine.

##Adding Filters To Our Post

From our previous work, we have been able to sort, view according to pages but not the ability to filter our records, filtering our records is short and simple and let' do just that.

The **<Filter>** component comes in handy from react-admin, the source prop of the value "q" is pertaining to the JSON placeholder API the alwaysOn makes our filter feature always visible in the UI.

We'll be embedding our filter component in a different way compared to how we have been adding other components to the app.js. This time we'll be adding it as a prop to the List Component in Post.jsx.

Import the FilterPost Component, add the "filters" props to the List component and let the value be the FilterComponent, just like what we have below.

Now, we can filter our records, and users can even add search criteria.

###Adding Homepage to our Dashboard

Let's add a home page to our dashboard. By default react-admin places the first resource as the home page, we can however change that and add our own custom dashboard home.

Create a dashboard.jsx in the components folder, go to the source folder, app.js, and import the newly created dashboard.js as a dashboard prop to our **<Admin />** component.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgirmwopw373xa3hu23v.PNG)

There are a couple of things we can still do to make this dashboard, a little better, for example, supporting mobile devices, how to add own API instead of the JSON placeholder, and build a custom dataprovider, this will be rolled out in the next post. So keep your eyes peeled. 

[Source code available on Github](https://github.com/okeken/react-admin-tutorial)

UPDATE: The Part 2 is available  <a href="https://dev.to/okeken/how-to-create-an-admin-panel-in-react-js-part-2-3j9">here </a>