Skip to content

Commit d806d88

Browse files
authored
Merge pull request #10438 from marmelab/video-tutorial
[Doc] Add video to the Getting Started tutorial
2 parents d5f12cc + ddfd90f commit d806d88

File tree

1 file changed

+9
-3
lines changed

1 file changed

+9
-3
lines changed

docs/Tutorial.md

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,15 @@ title: "My First Project Tutorial"
66

77
# React-Admin Tutorial
88

9-
In this 30-minute tutorial, you will learn how to create a new admin app based on an existing REST API.
9+
In this 45-minute tutorial, you will learn how to create a web application with react-admin based on an existing REST API.
1010

11-
Here is a preview of the final result:
11+
You can follow along by reading the text, or by watching the video below, made by Brad from Traversy Media, and which covers roughly the same content:
12+
13+
<iframe src="https://www.youtube-nocookie.com/embed/PyaSnpXssks?si=Xvp5PrbRcq-PFOf0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16 / 9;width:100%;margin-bottom:1em;"></iframe>
14+
15+
If you prefer text, you're in good hands! We will go from absolute basics to a fully functional admin app. By the end of this tutorial, you will have a good understanding of the features and developer experience react-admin provides.
16+
17+
The final result is a web application that allows you to list, create, edit, and delete users and posts. Here is a preview of the app:
1218

1319
<video controls autoplay playsinline muted loop poster="./img/tutorial_overview.png">
1420
<source src="./img/tutorial_overview.mp4" type="video/mp4"/>
@@ -948,7 +954,7 @@ Once the app reloads, it's now behind a login form that accepts everyone:
948954

949955
## Connecting To A Real API
950956

951-
Here is the elephant in the room of this tutorial. In real-world projects, the dialect of your API (REST? GraphQL? Something else?) won't match the JSONPlaceholder dialect. [Writing a Data Provider](./DataProviderWriting.md) is probably the first thing you'll have to do to make react-admin work, unless your API backend is already supported [see the list here](./DataProviderList.md). Depending on your API, this can require a few hours of additional work.
957+
Here is the elephant in the room of this tutorial. In real-world projects, the dialect of your API (REST? GraphQL? Something else?) won't match the JSONPlaceholder dialect. [Writing a Data Provider](./DataProviderWriting.md) is probably the first thing you'll have to do to make react-admin work, unless your API backend is already supported ([see the list here](./DataProviderList.md)). Depending on your API, this can require a few hours of additional work.
952958

953959
React-admin delegates every data query to a Data Provider object, which acts as an adapter to your API. This makes react-admin capable of mapping any API dialect, using endpoints from several domains, etc.
954960

0 commit comments

Comments
 (0)