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

回答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.

回答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

回答3:

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

I removed blaze meteor remove blaze-html-templates
Add static html meteor add static-html. Not doing this results in Uncaught Error: Target container is not a DOM element.
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

来源：https://stackoverflow.com/questions/46527461/meteor-react-tutorial-step-2-did-not-work

标签

meteor

meteor-react