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


## 環境とか整えずに弄りたい場合
CDN を使って最小構成。html と js は分割しておきたいので2ファイル。
これだけでwebブラウザで表示できる。
`JSXTransformer.js` のおかげでjsxを変換しないで実行できる。

ちなみに Google Chorome の場合はデフォルトでローカルのファイルを読み込めないので下記2つの方法など

1. オプションつけて起動する方法 `open -a Google\ Chrome --args -allow-file-access-from-files`  
2.  pythonの簡易サーバーを利用する方法 `python -m SimpleHTTPServer 8080` 

### ファイル構成

1. example01.html
2. 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 を変換。

### 用意するファイルは４つ
1. package.json
2. gulpfile.js
3. index.html
4. jsx/helloworld.jsx

### 動かす手順

1. `$ npm install`
2. 最初だけjsファイルを作成するため `$ npm run react` で jsx を変換する
3. `$ 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 の設定例
1. `npm install -g jsxhint`
2. web-mode をインストールする
3. flycheck-mode をインストールする
4. init.el に設定を書く

[こちらのサイト](http://truongtx.me/2014/03/10/emacs-setup-jsx-mode-and-jsx-syntax-checking/)の記述をそのまま。

```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))))
```


## 参考

- http://facebook.github.io/react/index.html
- http://truongtx.me/2014/03/10/emacs-setup-jsx-mode-and-jsx-syntax-checking/
- http://gulpjs.com/
- https://app.codegrid.net/entry/gulp-1