Ошибка синтаксического анализа: Неожиданный токен Проблема ReactJS

Я был новичком в ReactJS, и я хочу изучить основы из видеоурока Traversy Media, и я применяю код именно то, что он должен делать. Но я застрял в этой части, потому что получил ошибку Failed to Compile, например:   Не удалось скомпилировать

Это код, который я написал:

App.js

import React, { Component } from 'react';
import Todos from './components/Todos';
import './App.css';

class App extends Component {
  state = {
   todos: [
     {
       id: 1,
       title: 'Take out he trash',
       completed: false
     },
     {
       id: 2,
       title: 'Have a Dinner',
       completed: false
     },
     {
       id: 3,
       title: 'Meeting with Boss',
       completed: false
     },
   ]
  };

  render() {
    return (
      <div className="App">
        <Todos todos={this.state.todos} />
      </div>
    );
  }
}

export default App;

Todos.js

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

class Todos extends Component {
  render() {
    return this.props.todos.map((todo) => (
      <TodoItem/>
    ));
  }
}

export default Todos;

TodoItem.js

import React, { Component } from 'react';

export class TodoItem extends Component{
  render(){
    return{
      <div>
        <p>Hello</p>
      </div>
    }
  }
}

export default TodoItem;

person Ryuujo    schedule 23.01.2019    source источник


Ответы (3)


Это должно выглядеть так -

import React, { Component } from 'react';

export class TodoItem extends Component{
  render(){
    return(
      <div>
        <p>Hello</p>
      </div>
    )
  }
}

export default TodoItem;

person Kazi Rahamatullah    schedule 23.01.2019

Так должно быть

return(
  <div>
    <p>Hello</p>
  </div>
)

Используйте фигурные скобки для методов или переменных

person Bon Andre Opina    schedule 23.01.2019
comment
Так что это были мои ошибки. Спасибо за помощь. - person Ryuujo; 23.01.2019
comment
Хорошо, пожалуйста, проголосуйте за этот пост, чтобы помочь другим... И поэтому у меня есть несколько интересных моментов. - person Bon Andre Opina; 23.01.2019
comment
Или проверьте это как ответ - person Bon Andre Opina; 24.01.2019

В операторе возврата TodoItem.js есть синтаксическая ошибка. Просто замените этот код

    import React, { Component } from 'react';

     export class TodoItem extends Component{
       render(){
         return(
           <div>
            <p>Hello</p>
           </div>
               )
             }
           }

      export default TodoItem;
person Rajesh Bhartia    schedule 23.01.2019