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

help
1

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 https://www.meteor.com/tutorials/react.
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
2

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

3

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

4

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.

2 Likes
5

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

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'));
});

App.jsx:

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">
                <header>
                    <h1>Todo List</h1>
                </header>

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

Task.jsx:

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


export default class Task extends Component {
    render() {
        return (
            <li>{this.props.task.text}</li>
        );
    }
}

Task.protoTypes = {
    task: PropTypes.object.isRequired
};
6

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

1 Like
7

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

1 Like
8

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.

2 Likes
9

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

Meteor.methods({
    '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

10

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

11

hm it looks very confusing :confused:

12

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

13

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

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