diff --git a/v3-docs/docs/tutorials/react/assets/collections-connect-db.png b/v3-docs/docs/tutorials/react/assets/collections-connect-db.png
new file mode 100644
index 0000000000..6e29b8eb70
Binary files /dev/null and b/v3-docs/docs/tutorials/react/assets/collections-connect-db.png differ
diff --git a/v3-docs/docs/tutorials/react/assets/collections-documents.png b/v3-docs/docs/tutorials/react/assets/collections-documents.png
new file mode 100644
index 0000000000..3b7e0a2a99
Binary files /dev/null and b/v3-docs/docs/tutorials/react/assets/collections-documents.png differ
diff --git a/v3-docs/docs/tutorials/react/assets/collections-see-database.png b/v3-docs/docs/tutorials/react/assets/collections-see-database.png
new file mode 100644
index 0000000000..3a3115fe80
Binary files /dev/null and b/v3-docs/docs/tutorials/react/assets/collections-see-database.png differ
diff --git a/v3-docs/docs/tutorials/react/assets/collections-tasks-list.png b/v3-docs/docs/tutorials/react/assets/collections-tasks-list.png
new file mode 100644
index 0000000000..cc7924ca4f
Binary files /dev/null and b/v3-docs/docs/tutorials/react/assets/collections-tasks-list.png differ
diff --git a/v3-docs/docs/tutorials/react/collections.md b/v3-docs/docs/tutorials/react/collections.md
index 10b97c11f4..df06f886a1 100644
--- a/v3-docs/docs/tutorials/react/collections.md
+++ b/v3-docs/docs/tutorials/react/collections.md
@@ -118,7 +118,7 @@ Now, we need to import this file in our server:
...
import { TasksCollection } from '/imports/api/TasksCollection';
-import "../imports/api/TasksPublications";
+import "../imports/api/TasksPublications"; // [!code highlight]
const insertTask = taskText => TasksCollection.insertAsync({ text: taskText });
...
@@ -145,20 +145,28 @@ export const App = () => {
}
```
+As you can see, when subscribing to a publication using `useSubscribe` you'll get a `isLoading` function, that you can use to render some loading component before the data is ready.
+
+> For more information on Publications/Subscriptions, please check our [docs](https://v3-docs.meteor.com/api/meteor.html#pubsub).
+
See how your app should look like now:
+
+
You can change your data on MongoDB in the server and your app will react and re-render for you.
You can connect to your MongoDB running `meteor mongo` in the terminal from your app folder or using a Mongo UI client, like [NoSQLBooster](https://nosqlbooster.com/downloads). Your embedded MongoDB is running in port `3001`.
See how to connect:
+
+
See your database:
+
+
You can double-click your collection to see the documents stored on it:
-But wait, how are my tasks coming from the server to the client? We are going to explain this later, in the step about Publications and Subscriptions. What you need to know now is that you are publishing all the data from the database to the client. This will be removed later as we don't want to publish all the data all the time.
-
-> Review: you can check how your code should be at the end of this step [here](https://github.com/meteor/react-tutorial/tree/master/src/simple-todos/step02)
+
In the next step, we are going to create tasks using a form.