Meteor's simple-todos app won't retrieve data from MongoDB using ReactJS

I am trying to follow up meteor’s guide to create a simple to-do app as mentioned here Create simple to-do using ReactJS but I am stuck at Collections

I am able to successfully save a collection in MongoDB but the same is not retrieved in front end. What am I doing wrong? Here is my


import '../imports/api/tasks.js';


import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import App from '../imports/ui/App.jsx';

Meteor.startup(() => {
   render(<App />, document.getElementById('render-target'));


import { Tasks } from '../api/tasks.js';

import Task from './Task.jsx';

// App component - represents the whole app
class App extends Component {

    renderTasks() {
        return => (
        <Task key={task._id} task={task} />

render() {
    return (
    <div className="container">
        <h1>Todo List</h1>


App.propTypes = {
tasks: PropTypes.array.isRequired,

export default createContainer(() => {
return {
    tasks: Tasks.find({}).fetch(),
}, App);

And finally

import { Mongo } from 'meteor/mongo';
export const Tasks = new Mongo.Collection('tasks');

I think you need to declare a publication at sever and subscription at the client for the data to sync using web sockets. Alternatively you can use meteor methods to retrieve a list of objects and.l render at the client without using collections.