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

server/main.js

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

client/main.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'));
});

imports/ui/App.jsx

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

import Task from './Task.jsx';

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

    renderTasks() {
        return this.props.tasks.map((task) => (
        <Task key={task._id} task={task} />
        ));
    }

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

        <ul>
        {this.renderTasks()}
        </ul>
    </div>
    );
}
}

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

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

And finally
imports/api/tasks.js

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.