環境とか整えずに弄りたい場合
CDN を使って最小構成。html と js は分割しておきたいので2ファイル。
これだけでwebブラウザで表示できる。
JSXTransformer.js のおかげでjsxを変換しないで実行できる。
ちなみに Google Chorome の場合はデフォルトでローカルのファイルを読み込めないので下記2つの方法など
- オプションつけて起動する方法
open -a Google\ Chrome --args -allow-file-access-from-files - pythonの簡易サーバーを利用する方法
python -m SimpleHTTPServer 8080
ファイル構成
- example01.html
- example01.jsx
example01.html
<!DOCTYPE html>
<html>
<head>
<title>ReactJS sample</title>
</head>
<body>
<div id="container"></div>
<script src="http://fb.me/react-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script type="text/jsx" src="example01.jsx"></script>
</body>
</html>
example01.jsx
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.render(
<HelloMessage name="John" />,
document.getElementById('container')
);
gulp を使いたい or 少し自動化して弄りたい場合
ブラウザのライブリロードくらいしたい。ついでに jsx を変換。
用意するファイルは４つ
- package.json
- gulpfile.js
- index.html
- jsx/helloworld.jsx
動かす手順
$ npm install- 最初だけjsファイルを作成するため
$ npm run reactで jsx を変換する -
$ npm run watchで web ブラウザに表示、かつファイル変更を監視して変更あればjsxを変換してライブリロードされる
以上。
package.json
{
"devDependencies": {
"gulp": "^3.8.10",
"gulp-plumber": "^0.6.6",
"gulp-react": "^2.0.0",
"gulp-using": "0.0.1",
"gulp-webserver": "^0.8.7"
},
"dependencies": {
"react": "^0.12.0"
},
"scripts": {
"react": "gulp react",
"watch": "gulp watch"
}
}
gulpfile.js
var gulp = require('gulp');
var react = require('gulp-react');
var using = require('gulp-using'); // ファイル名の出力
var webserver = require('gulp-webserver');
var plumber = require('gulp-plumber'); // エラー発生時もタスクを継続する
gulp.task('webserver', function() {
gulp.src('./')
.pipe(webserver({
livereload: true,
open: true,
port: 9000
}));
});
gulp.task('react', function() {
return gulp.src('./jsx/**/*.jsx')
.pipe(plumber())
.pipe(using())
.pipe(react())
.pipe(gulp.dest('js/'));
});
gulp.task('watch', ['webserver'], function() {
gulp.watch(['./jsx/**/*.jsx'], ['react']);
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>ReactJS sample</title>
</head>
<body>
<div id="container"></div>
<script src="node_modules/react/dist/react.js"></script>
<script src="js/helloworld.js"></script>
</body>
</html>
jsx/helloworld.jsx
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}!</div>;
}
});
React.render(
<HelloMessage name="World" />,
document.getElementById('container')
);
jshint も使いたい場合
jsx用のjshintの jsxhint を利用する
Emacs の設定例
npm install -g jsxhint- web-mode をインストールする
- flycheck-mode をインストールする
- init.el に設定を書く
こちらのサイトの記述をそのまま。
init.el
(add-to-list 'auto-mode-alist '("\\.jsx$" . web-mode))
(defadvice web-mode-highlight-part (around tweak-jsx activate)
(if (equal web-mode-content-type "jsx")
(let ((web-mode-enable-part-face nil))
ad-do-it)
ad-do-it))
(require 'flycheck)
(flycheck-define-checker jsxhint-checker
"A JSX syntax and style checker based on JSXHint."
:command ("jsxhint" source)
:error-patterns
((error line-start (1+ nonl) ": line " line ", col " column ", " (message) line-end))
:modes (web-mode))
(add-hook 'web-mode-hook
(lambda ()
(when (equal web-mode-content-type "jsx")
;; enable flycheck
(flycheck-select-checker 'jsxhint-checker)
(flycheck-mode))))