Использование reactjs с requirejs

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

Я обычно использую use 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 синтаксис.

2 67
javascript reactjs requirejs frontend

2 ответа:

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

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

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

require.config({
  // ...

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

  // ...
});

тогда я мог бы ссылаться на файлы JSX через jsx! синтаксис плагина. Например, для загрузки таймера.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 синтаксис.

надеюсь, что это помогает.

96

React tools (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:

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

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

1