目的
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で書くことができます。