React: Unexpected token <

393

26 ноября 2016, 19:54

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<body>
  <script>
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
  </script>
</body>

Ругается на закрывающий h1, соответственно ничего не выводится. В чем дело?

Answer 1

Вот эти "теги" которые Вы передаете в ReactDOM.render, это не html. Это JSX. JSX - это не реакт. JSX - это такое расширение javascript. Обычно JSX транслируется в нормальный js на этапе сборки-препроцессинга.

Во-первых, настройте все-таки нормальную сборку лучше.

Во-вторых, React можно использовать и без jsx, это не очень удобно и мало кто так делает.

В-третьих, можно организовать трансляцию jsx в js "на лету", прямо на клиенте. Обычно jsx в es5-js транслируется на сервере, на этапе сборки с помощью Babel. У Babel на всякий случай есть standalone-сборка для работы на клиенте. Это для очень упорных парней, но вариант вроде бы тоже рабочий.

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает filter в AngularJS [закрыто]

Делаю поиск, но что-то выдает ошибку (ошибка на скриншоте), мне кажется что это через json, на картинке его структура показанаЕсли делать бес...

366

javascript

Как подружить grunt-typescript и requirejs?

Есть следующая проблема: я использую requirejs для AMD, при этом попытался использовать typescript и поставил grunt-typescriptВот отрывок из Gruntfile

311

javascript

Не работает ng-options AngularJS

Что-то не работает ng-options с моими данными, побывал пример с документации все работает, а на моих данных не хочетРазница между примером и моими...

376

javascript

Как проверить число на четность?

Пишу функцию, которая принимает целое число и возвращает строку - четное или не четное число

428