web-dev-qa-db-ja.com

requirejsでreactjsを使用する

最近、アプリケーションを構築するために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構文が原因でエラーが発生しました。

javascriptrequirejsfrontendreactjs
68
myusuf

だから私は自分でそれを考え出した。

このレポジトリから必要なファイルと手順を入手しました： jsx-requirejs-plugin 。

jsx plugin と 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'));
   ...
});

同じコードを使用して、jsx構文を含む.jsファイルにアクセスすることもできます。

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

また、jsx構文を使用して/** @jsx React.DOM */をファイルの先頭に配置する必要はありませんでした。

それが役に立てば幸い。

98
myusuf

Reactツール（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は、追加構成なしでRequireJS依存関係として指定できるJSファイルにJSXを変換します。

2
Rocío García Luque