Блог

Главная - Вопросы по программированию - Ошибка синтаксического анализа: неожиданный токен, ожидаемый «;

Ошибка синтаксического анализа: неожиданный токен, ожидаемый «;

#reactjs #parsing #syntax-error

#reactjs #синтаксический анализ #синтаксическая ошибка

Вопрос:

У меня возникает много проблем при изучении reactjs, которые я не понимаю. У меня Line 5: Parsing error: Unexpected token, expected "; ошибка в App.js и я не могу понять, что я сделал не так. Пожалуйста, помогите!!

Я также пытался изменить расширение, но не работает

 import './App.css';
import "bootstrap/dist/css/bootstrap.min.css"; 
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "TodosList" from "./components/todos-list.component.js";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="https://codingthesmartway.com" target="_blank"></a>
            <Link to="/" className="navbar-brand">MERN-Stack Todo App</Link>
            <div className="collpase navbar-collapse">
              <ul className="navbar-nav mr-auto">
                <li className="navbar-item">
                  <Link to="/" className="nav-link">Todos</Link>
                </li>
                <li className="navbar-item">
                  <Link to="/create" className="nav-link">Create Todo</Link>
                </li>
              </ul>
            </div>
          </nav>
          <br/>
          <Route path="/" exact component={TodosList} />
        </div>
      </Router>
    );
  }
}

export default App;

Ответ №1:

Синтаксическая ошибка 

 import "TodosList" from "./components/todos-list.component.js";

Это должно быть

 import TodosList from "./components/todos-list.component.js";

Комментарии:

1. также, если вы можете объяснить разницу между расширениями компонентов в ReactJS componentname.js и componentname.component.js . Оба работают для меня, но я не знаю точной разницы

2. Оба верны; это просто способ упростить задачу, предоставляя расширение, которое определяет назначение этого файла. Like componentName.test.js определит, что это тестовый файл для этого компонента. таким образом, вы можете отличать другие файлы, которые вы используете только для этого компонента. Попробуйте один тестовый фреймворк или сборник рассказов, и вы получите четкое представление об этом.

3. загружается благодарность.. Я снова скоро что-нибудь опубликую, потому что собираюсь начать тестирование Jest в React. скрестив пальцы!