React + meteor : Got stuck at the very beginning of TodoList

Hello. I’m new at this forum and Meteor is new to me as well.
I wanted to learn some Meteor basics and tried to create Todo List from official tutoral
At 2.4 step, I should Create App component at imports/ui/App.jsx » .
The problem is I don’t have such folder:

taras@t626:~/workspace/simple-todos$ ls -a
.  ..  client  .gitignore  .idea  .meteor  node_modules  package.json  server

Feel free to create this folder by yourself. :slight_smile:

Thanks for a reactive answer. I thought I missed something.

Using imports folder wasn’t the original way to create Meteor applications, it came with Meteor 1.3. That’s why it doesn’t come in the default Meteor project. You can get a small bootstrap project with this folder by writing meteor create myprojectname --full, but its structure is too complex for the small tutorial example app which just requires a few files.


Well again problems:
App.jsx:17 Uncaught ReferenceError: task is not defined
Here’s code:

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

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

    render(<App/>, document.getElementById('render-target'));


import React, {Component} from 'react';
import Task from './Task.jsx';

export default class App extends React.Component {
    getTasks() {
        return [
            {_id: 1, text: 'This is task 1'},
            {_id: 2, text: 'This is task 2'},
            {_id: 3, text: 'This is task 3'},

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

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



import React, {Component, PropTypes} from 'react';

export default class Task extends Component {
    render() {
        return (

Task.protoTypes = {
    task: PropTypes.object.isRequired

you have tasks as argument of your arrow function but instead your are using task.

1 Like

I agree :flushed:, that’s stupid typo mistake

1 Like

Just for reference, there is a nice shortcut for creating a directory structure like this on OSX/Linux:

$ mkdir -p imports/ui

The -p flag indicates that directories in the given path which don’t already exist should also be created.


Another question : What the pattern is that in the ToDO APP:

    'tasks.insert'(text) {
        check(text, String);

        // Make sure the user is logged in before inserting a task
        if (! this.userId) {
            throw new Meteor.Error('not-authorized');

To be exact : 'tasks.insert'(text) { – that part (the quotation marks).
what do they mean

In short, you use them if you want to use the dot in the name of a method.

hm it looks very confusing :confused:

OK I get it:
The quotes allow you to use keys that aren’t legal variable names, like this:
var foo ={ 'variable name':2}
Found it here:

Just haven’t seen this for a long time

You don’t have to. I don’t use it and name my methods this way:

  insertTask(text) {
    Task.insert({value: text})