Skip to content

Commit dfb0d75

Browse files
fzaninottofzaninotto
authored
Merge pull request #8881 from marmelab/update-tutorial
Update tutorial to use create-react-admin
2 parents c82cd66 + cdcfaa1 commit dfb0d75

File tree

4 files changed

+39
-54
lines changed

4 files changed

+39
-54
lines changed

‎docs/CreateReactAdmin.md

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
layout: default
3+
title: "The create-react-admin CLI"
4+
---
5+
6+
# `create-react-admin`
7+
8+
This CLI generates a new react-admin application using [Vite](https://vitejs.dev/). Use it by running the following command:
9+
10+
```sh
11+
npx create react-admin@latest your-admin-name
12+
# or
13+
yarn create react-admin your-admin-name
14+
```
15+
16+
It will then ask you to choose:
17+
- a data provider
18+
- a auth provider
19+
- the names of the resources to add
20+
- the package manager to use to install the dependencies
21+
22+
<video controls autoplay muted loop>
23+
<source src="./img/create-react-admin.webm" type="video/webm"/>
24+
Your browser does not support the video tag.
25+
</video>

‎docs/Tutorial.md

+13-54
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,24 @@ Here is an overview of the result:
1717

1818
## Setting Up
1919

20-
React-admin uses React. We'll use [Vite](https://vitejs.dev/) to create an empty React app, and install the `react-admin` package:
20+
React-admin uses React. We'll use [create-react-admin](https://github.com/marmelab/react-admin/tree/master/packages/create-react-admin) to bootstrap a new admin:
2121

2222
```sh
23-
yarn create vite test-admin --template react-ts
24-
cd test-admin/
25-
yarn add react-admin ra-data-json-server
23+
yarn create react-admin test-admin
24+
```
25+
26+
Choose **JSON Server** as the data provider, then **None** as the auth provider. Don't add any resource for now and just press **Enter**. Finally, choose either `npm` or `yarn` and press **Enter**. Once everything is installed, enter the following commands:
27+
28+
```sh
29+
cd test-admin
30+
npm run dev
31+
# or
2632
yarn dev
2733
```
2834

29-
You should be up and running with an empty React application on port 5173.
35+
You should be up and running with an empty React admin application on port 5173.
3036

31-
**Tip**: Although this tutorial uses a TypeScript template, you can use react-admin with JavaScript if you prefer. Also, you can use [create-react-app](./CreateReactApp.md), [Next.js](./NextJs.md), [Remix](./Remix.md), or any other React framework to create your admin app. React-admin is framework-agnostic.
37+
**Tip**: Although this tutorial uses a TypeScript template, you can use react-admin with JavaScript if you prefer. Also, you can use [Vite](https://vitejs.dev/), [create-react-app](./CreateReactApp.md), [Next.js](./NextJs.md), [Remix](./Remix.md), or any other React framework to create your admin app. React-admin is framework-agnostic.
3238

3339
## Using an API As Data Source
3440

@@ -70,57 +76,10 @@ JSONPlaceholder provides endpoints for users, posts, and comments. The admin we'
7076

7177
## Making Contact With The API Using a Data Provider
7278

73-
Bootstrap the admin app by replacing the `src/App.tsx` by the following code:
74-
75-
```jsx
76-
// in src/App.tsx
77-
import { Admin } from "react-admin";
78-
import jsonServerProvider from "ra-data-json-server";
79-
80-
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
81-
82-
const App = () => <Admin dataProvider={dataProvider} />;
83-
84-
export default App;
85-
```
86-
87-
That's enough for react-admin to render an empty app and confirm that the setup is done:
79+
The application has been initialized with enough code for react-admin to render an empty app and confirm that the setup is done:
8880

8981
[![Empty Admin](./img/tutorial_empty.png)](./img/tutorial_empty.png)
9082

91-
Also, you should change the default Vite CSS file to look like this:
92-
93-
```css
94-
/* in src/index.css */
95-
body {
96-
margin: 0;
97-
}
98-
```
99-
100-
Lastly, add the `Roboto` font to the `index.html` file:
101-
102-
```diff
103-
// in ./index.html
104-
<!DOCTYPE html>
105-
<html lang="en">
106-
<head>
107-
<meta charset="UTF-8" />
108-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
109-
<title>React Admin</title>
110-
+ <link
111-
+ rel="stylesheet"
112-
+ href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
113-
+ />
114-
</head>
115-
<body>
116-
<div id="root"></div>
117-
<script type="module" src="/src/index.tsx"></script>
118-
</body>
119-
</html>
120-
```
121-
122-
**Tip:** You can also install the `Roboto` font locally by following the instructions from the [Material UI starter guide](https://mui.com/material-ui/getting-started/installation/#roboto-font).
123-
12483
The `<App>` component renders an `<Admin>` component, which is the root component of a react-admin application. This component expects a `dataProvider` prop - a function capable of fetching data from an API. Since there is no standard for data exchanges between computers, you will probably have to write a custom provider to connect react-admin to your own APIs - but we'll dive into Data Providers later. For now, let's take advantage of the `ra-data-json-server` data provider, which speaks the same REST dialect as JSONPlaceholder.
12584

12685
Now it's time to add features!

‎docs/img/create-react-admin.webm

816 KB
Binary file not shown.

‎docs/navigation.html

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<li {% if page.path == 'Tutorial.md' %} class="active" {% endif %}><a class="nav-link" href="./Tutorial.html">Tutorial</a></li>
33
<li {% if page.path == 'Features.md' %} class="active" {% endif %}><a class="nav-link" href="./Features.html">Features</a></li>
44
<li><a class="nav-link external" href="https://github.com/marmelab/react-admin/releases" target="_blank">What's new?</a></li>
5+
<li {% if page.path == 'CreateReactAdmin.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateReactAdmin.html">Create React Admin</a></li>
56
<li {% if page.path == 'CreateReactApp.md' %} class="active" {% endif %}><a class="nav-link" href="./CreateReactApp.html">Create React App</a></li>
67
<li {% if page.path == 'Vite.md' %} class="active" {% endif %}><a class="nav-link" href="./Vite.html">Vite</a></li>
78
<li {% if page.path == 'NextJs.md' %} class="active" {% endif %}><a class="nav-link" href="./NextJs.html">Next.js</a></li>

0 commit comments

Comments
 (0)