mirror of
https://github.com/meteor/meteor.git
synced 2026-05-02 03:01:46 -04:00
finish collections.md
This commit is contained in:
BIN
v3-docs/docs/tutorials/react/assets/collections-connect-db.png
Normal file
BIN
v3-docs/docs/tutorials/react/assets/collections-connect-db.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
BIN
v3-docs/docs/tutorials/react/assets/collections-documents.png
Normal file
BIN
v3-docs/docs/tutorials/react/assets/collections-documents.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
BIN
v3-docs/docs/tutorials/react/assets/collections-see-database.png
Normal file
BIN
v3-docs/docs/tutorials/react/assets/collections-see-database.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 153 KiB |
BIN
v3-docs/docs/tutorials/react/assets/collections-tasks-list.png
Normal file
BIN
v3-docs/docs/tutorials/react/assets/collections-tasks-list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
@@ -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:
|
||||
|
||||
<img width="200px" src="/tutorials/react/assets/collections-tasks-list.png"/>
|
||||
|
||||
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:
|
||||
|
||||
<img width="500px" src="/tutorials/react/assets/collections-connect-db.png"/>
|
||||
|
||||
See your database:
|
||||
|
||||
<img width="500px" src="/tutorials/react/assets/collections-see-database.png"/>
|
||||
|
||||
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)
|
||||
<img width="500px" src="/tutorials/react/assets/collections-documents.png"/>
|
||||
|
||||
In the next step, we are going to create tasks using a form.
|
||||
|
||||
Reference in New Issue
Block a user