Skip to content

Commit 135f234

Browse files
committed
Update tutorial
1 parent 9f837e3 commit 135f234

1 file changed

Lines changed: 1 addition & 48 deletions

File tree

docs/Tutorial.md

Lines changed: 1 addition & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -76,57 +76,10 @@ JSONPlaceholder provides endpoints for users, posts, and comments. The admin we'
7676

7777
## Making Contact With The API Using a Data Provider
7878

79-
Bootstrap the admin app by replacing the `src/App.tsx` by the following code:
80-
81-
```jsx
82-
// in src/App.tsx
83-
import { Admin } from "react-admin";
84-
import jsonServerProvider from "ra-data-json-server";
85-
86-
const dataProvider = jsonServerProvider('https://jsonplaceholder.typicode.com');
87-
88-
const App = () => <Admin dataProvider={dataProvider} />;
89-
90-
export default App;
91-
```
92-
93-
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:
9480

9581
[![Empty Admin](./img/tutorial_empty.png)](./img/tutorial_empty.png)
9682

97-
Also, you should change the default Vite CSS file to look like this:
98-
99-
```css
100-
/* in src/index.css */
101-
body {
102-
margin: 0;
103-
}
104-
```
105-
106-
Lastly, add the `Roboto` font to the `index.html` file:
107-
108-
```diff
109-
// in ./index.html
110-
<!DOCTYPE html>
111-
<html lang="en">
112-
<head>
113-
<meta charset="UTF-8" />
114-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
115-
<title>React Admin</title>
116-
+ <link
117-
+ rel="stylesheet"
118-
+ href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
119-
+ />
120-
</head>
121-
<body>
122-
<div id="root"></div>
123-
<script type="module" src="/src/index.tsx"></script>
124-
</body>
125-
</html>
126-
```
127-
128-
**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).
129-
13083
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.
13184

13285
Now it's time to add features!

0 commit comments

Comments
 (0)