お手軽に React.js を試してみる #JavaScript

環境とか整えずに弄りたい場合

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 を利用する
- https://github.com/STRML/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))))

お手軽に React.js を試してみる