Meteor React Tutorial Step 2 did not work

Question

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

Answer 1

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.

Answer 2

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