Использование реакций с requirejs

В последнее время я начал использовать reactjs вместе с маршрутизатором backbonejs для создания приложения.

Обычно я использую requirejs для зависимости и управления кодом. Но проблема возникает, когда я пытаюсь включить файлы, содержащие синтаксис jsx.

Это то, что у меня есть до моего router.js:

define(["backbone", "react"], function(Backbone, React) {

  var IndexComponent = React.createClass({
    render : function() {
      return (
        <div>
        Some Stuff goes here
        </div>
        );
    }
  });



  return Backbone.Router.extend({
    routes : {
      "": "index"
    },
    index : function() {
      React.renderComponent(<IndexComponent />, document.getElementById('index'));
    }
  });
});

Как поместить IndexComponent в свой собственный файл и вызвать его в этом файле? Я пробовал обычный метод (тот же, что я использовал с основой и реагировал), но получил ошибку из-за синтаксиса jsx.

Ответ 1

Итак, я понял это сам.

Я получил необходимые файлы и инструкции из этого репо: jsx-requirejs-plugin.

Как только у меня был jsx плагин и измененная версия JSXTransformer, я изменил свой код в соответствии с инструкциями в репозитории:

require.config({
  // ...

  paths: {
    "react": "path/to/react",
    "JSXTransformer": "path/to/JSXTransformer",
    "jsx": "path/to/jsx plugin"
    ...
  }

  // ...
});

Затем я мог бы ссылаться на файлы JSX с помощью синтаксиса плагина jsx!. Например, чтобы загрузить файл Timer.jsx, находящийся в каталоге компонентов:

require(['react', 'jsx!components/Timer'], function (React, Timer) {
   ...
   React.renderComponent(<Timer />, document.getElementById('timer'));
   ...
});

Я мог бы также получить доступ к файлам .js, у которых в них был синтаксис jsx, используя тот же код:

require(['react', 'jsx!components/Timer'], function (React, Timer) {
   ...
   React.renderComponent(<Timer />, document.getElementById('timer'));
   ...
});

Кроме того, мне не нужно было размещать /** @jsx React.DOM */ в верхней части файлов с помощью синтаксиса jsx.

Надеюсь, что это поможет.

Ответ 2

Инструменты реагирования (включая JSX) устарели в пользу Babel (https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). Я не могу найти способ сделать это без шага "перетаскивания", так что это мое решение с хрюканьем.

Вы можете установить grunt-babel (npm install grunt-babel) и настроить задачу следующим образом:

babel: {
    options: {
        sourceMap: false,
        modules: "common"
    },
    dist: {
        files: [{
            expand: true,
            src: ['js/components/*.jsx'],
            dest: 'dist',
            ext:'.js'
       }]
    }
}

Просто добавьте его в список заданий:

grunt.registerTask('default', ['clean', 'copy', 'babel', 'http-server']);

Babel преобразует ваши JSX в JS файлы, которые могут быть указаны как зависимости RequireJS без дополнительной настройки.