Синтаксическая ошибка "Ожидается выражение, получено '<'" при попытке запустить учебник по реагированию

Я работаю через учебное пособие по реагированию с использованием моего собственного сервера (apache) и предлагаемого HTML файла и дословной копии примеров учебников...

Самый простой пример не удается на моем сервере, но работает на JSFiddle..

Мой HTML файл с script показан ниже.

script завершается с синтаксической ошибкой в ​​функции render:() {...

Сообщение об ошибке в Firefox и Safari (версия для Mac, последняя версия).

"" SyntaxError: ожидаемое выражение, получено '<' React.render(, document.getElementById('container') "" [Мой файл]

<html>
<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

</head>
<script>
var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

</script>

<body>

    <div id="container">
    <!-- This element contents will be replaced with your component. -->
</div>


</body>
</html>

Ответы

Ответ 1

В коде, который вы опубликовали, есть две проблемы.

Во-первых, трансформатор JSX не преобразует ваш код, потому что соответствующий атрибут type отсутствует в теге script.

Изменить

<script>
var Hello = React.createClass({
...

к

<script type="text/jsx">
var Hello = React.createClass({
...

Во-вторых, вы вызываете document.getElementById('container') до того, как div действительно существует на странице; переместите этот последний тег script и его содержимое после div (например, в нижней части body).

Вы должны получить код, аналогичный тому, как он показан в учебнике:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
      // Your code here
    </script>
  </body>
</html>

Ответ 2

Это старый поток, но я недавно столкнулся с этой ошибкой, когда выполнил сборку npm run для своего приложения React и просто скопировал ее из коробки Windows в коробку Linux с помощью WinSCP. Я использую nginx для обслуживания приложения на Linux-коробке. Оказывается, моя проблема заключалась в том, что не было разрешений на выполнение для файлов JS в статическом каталоге. Это вызвало ошибку и просто послужило моим index.html вместо файла js, поэтому выражение SyntaxError: ожидаемое, получило '<'. Надеюсь, это поможет кому-то, кто наткнется на эту ветку в будущем. Просто запустите chmod -R 755 static из каталога приложения

Ответ 3

Ответ Narsters работал для меня, но мне пришлось добавить эту строку в мой package.json

 "homepage": "./",