ReactJS: "Uncaught SyntaxError: неожиданный токен

Я пытаюсь начать строить сайт в ReactJS. Однако, когда я попытался поместить свой JS в отдельный файл, я начал получать эту ошибку: "Uncaught SyntaxError: Unexpected token

Я пробовал добавлять /** @jsx React.DOM */ в верхней части JS-файла, но это ничего не исправило. Ниже приведены файлы HTML и JS. Любые идеи о том, что происходит не так?

HTML

<html>
  <head>
    <title>Page</title>
    <script src="http://fb.me/react-0.12.2.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
    <script src="./lander.js"> </script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
        React.render(
            <Lander />,
            document.getElementById('content')
        );
    </script>
  </body>
</html>

JS

/**
 * @jsx React.DOM
 */
var Lander = React.createClass({
    render: function () {
        var info = "Lorem ipsum dolor sit amet... ";
        return(
            <div>
                <div className="info">{info}</div>
            </div>
        );
    }
});

EDIT: я понял, что я нужно добавить type="text/jsx" к тегу скрипта, который включает мой код посадочного модуля. Однако, после добавления и перезагрузки я получаю это предупреждение

" вы используете трансформатор JSX в браузере. Не забудьте предварительно скомпилировать JSX для производства -http://facebook.github.io/react/docs/tooling-integration.html#jsx"

с последующей ошибкой:

" XMLHttpRequest не может загрузить файл: / / / пользователи/.../посадочный модуль.js. Крест происхождения запросы поддерживаются только для протокола схемы: http, data, chrome-расширение, https, chrome-расширение-ресурс."

кажется, есть что-то еще, что мне нужно сделать, чтобы получить в браузере JSX transform работает, но я не уверен, что это такое.

EDIT: OOOOH мне нужно разместить его с помощью MAMP или что-то еще?

8 64
javascript html reactjs react-jsx

8 ответов:

добавить type="text/jsx" до src attribue из script тег, используемый для включения файла JavaScript, который должен быть преобразован JSX Transformer, например:

<script type="text/jsx" src="./lander.js"></script>

затем вы можете использовать MAMP или какой-либо другой сервис для размещения страницы на localhost, чтобы все включения работали, как обсуждалось здесь.

Спасибо за помощь всем!

87

JSTransform is устаревший, пожалуйста, используйте Вавилон вместо этого.

<script type="text/babel" src="./lander.js"></script>
18

добавить type="text/babel" как атрибут тега скрипта, например:

<script type="text/babel" src="./lander.js"></script>
17

добавить type="text/babel" к скрипту, который включает в себя .jsx файл и добавить это: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

7

Если у вас есть что-то вроде

Uncaught SyntaxError: embedded: Unexpected token

Вы видимо пропустили запятую в таком месте:

  var CommentForm = React.createClass({
  getInitialState: function() {
      return {author: '', text: ''};

  }, // <---- DON'T FORGET THE COMMA

  render: function() {
      return (
      <form className="commentForm">
          <input type="text" placeholder="Nombre" />
          <input type="text" placeholder="Qué opina" />
          <input type="submit" value="Publicar" />
      </form>
      )
  }
  });
4

код у вас есть правильно. Код JSX должен быть скомпилирован в JS:

http://facebook.github.io/react/jsx-compiler.html

3

Если вы получаете сообщение об ошибке вроде этого :

SyntaxError: embedded: Unexpected token (107:9) 105

Это может быть вам не хватает фигурной скобки

2

попробуйте добавить в webpack, он решил аналогичную проблему в моем проекте. Особенно часть "пресеты".

module: {
    loaders: [
        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel',
            query  :{
                presets:['react','es2015']
            }
        },
1