JSX は JavaScript のコード中に XML を記述するのでシンタックスハイライトがうまく当たりません。vim-jsx を使うことで JSX 部分にうまくシンタックスハイライトが当たり捗ります。
インストール
Vundle を使っている場合以下のように設定してインストールします。vim-javascript に依存しているので合わせてインストールします。
.vimrc
Bundle "pangloss/vim-javascript"
Bundle "mxw/vim-jsx"
有効にならないときは、vim-javascript が正しくインストールされているか確認してください。vim-javascript 以外の JavaScript シンタックスファイルと相性が悪いようなので注意してください。
設定
React v0.12 から @jsx pragma は非推奨となり、.jsx 拡張子を利用することが推奨されているようです。
下記設定を行わず、可能な限り .jsx 拡張子を利用する方がよいでしょう。
デフォルトでは .jsx 拡張子の場合のみシンタックスハイライトが設定されるようになっています。.react.js などで設定したい場合は、以下のように設定します。
.vimrc
" js 拡張子でも有効にする
let g:jsx_ext_required = 0
" @jsx React.DOM プラグマがある場合のみ有効にする
let g:jsx_pragma_required = 1