目的

Gulpなどのビルドツールを使わずに、ブラウザだけでReactを使いたい。
というのも、ビルドツールを使っていないので、環境構築＋情報収集を省きたいという横着っぷり。

とりあえず、ブラウザだけでさくっと試してみたいという方向け備忘録です。

ソースコードはこちら

環境

React: 0.13.3
RequireJS: 2.1.19
jsx-requirejs-plugin: 0.6.2

ディレクトリ構成

home/
  ├ js/
  │  ├ components/
  │  │  └ app.jsx
  │  │
  │  ├ libs/
  │  │  ├ JSXTransformer.js
  │  │  ├ react.min.js
  │  │  ├ require.js
  │  │  ├ jsx.js   ※jsx-requirejs-plugin
  │  │  └ text.js  ※jsx-requirejs-plugin
  │  │
  │  └ main.js
  │
  └ index.html

RequireJSの設定

# main.js
require.config({
  # 使用するライブラリのパス情報を設定しています
  paths: {
    "react": "libs/react",
    "JSXTransformer": "libs/JSXTransformer",
    "jsx": "libs/jsx",
    "text": "libs/text"
  },

  # jsx-requirejs-plugin用の設定情報です。
  # JSXでReactを書きたいので、harmonyを設定しています。
  jsx: {
    fileExtension: '.jsx',
    harmony: true,
    stripTypes: true
  }
});

# サンプルコードなので、すぐにapp.jsxをrenderするようにしています。
require(['react', 'jsx!components/app'], function(React, App) {
  App = React.createFactory(App);

  React.render(App(), document.body);
});

この設定で、ビルドツールを使わずに、Reactのコンポーネントをファイルごとに分けられ、かつJSXで書くことができます。