CODEWITHSUNDEEP
meteormeteor-react
user1575148
user1575148

Reputation: 589

Meteor React Tutorial Step 2 did not work

I am doing the Meteor React simple-todos tutorial. First step was just to create the app, cd into the app directory and run meteor. So far so good.

I made the changes as given in Step 2, but the to do list does not display. I get a blank screen.

Code is exactly the same as give on https://www.meteor.com/tutorials/react/components No error messages are displayed either in browser or console.

Versions: Meteor 1.5.2.1, OS = Ubuntu 16.04 LTS

Upvotes: 2

Views: 1704

Answers (3)

chidimo
chidimo

Reputation: 2958

Spent hours on this tonight. Here's what I eventually did that fixed it

  1. I removed blaze meteor remove blaze-html-templates
  2. Add static html meteor add static-html. Not doing this results in Uncaught Error: Target container is not a DOM element.
  3. Change Task.jsx so that it becomes and in App.js change the import statement to import Task from './Task.jsx';

Content of Task.jsx

import PropTypes from 'prop-types';
import React, { Component } from 'react';

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

Task.propTypes = {
    task: PropTypes.object.isRequired,
};

See other discussion here

Upvotes: 1

Saif
Saif

Reputation: 3462

Try removing Blaze

meteor remove blaze-html-templates

And add static-html

meteor add static-html

Before that, make sure you have no typos in your files. You can copy the code from these files. Don't worry these codes are just for the step 2.

client/main.html

client/main.js

imports/ui/App.js

imports/ui/Task.js

If this does not work you can always revert back using the commands add instead of remove to add back blaze and remove static-html.

Upvotes: 9

user1575148
user1575148

Reputation: 589

Found the answer. The solution is to change Task.jsx as follows:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

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

Task.propTypes = {
    task: PropTypes.object.isRequired,
};

This is given on the github page meteor/simple-todos-react. Link is https://github.com/meteor/simple-todos-react/commit/ef2c0f0e13af648e784f0c96fe573d923009f919

Upvotes: 4

Related Questions