TL;DR
EmacsでJSXを書くために web-modeを導入し各種設定をした。
;; .js, .jsx を web-mode で開く
(add-to-list 'auto-mode-alist '("\\.js[x]?$" . web-mode))
;; 拡張子 .js でもJSX編集モードに
(setq web-mode-content-types-alist
'(("jsx" . "\\.js[x]?\\'")))
;; インデント
(add-hook 'web-mode-hook
'(lambda ()
(setq web-mode-attr-indent-offset nil)
(setq web-mode-markup-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(setq web-mode-code-indent-offset 2)
(setq web-mode-sql-indent-offset 2)
(setq indent-tabs-mode nil)
(setq tab-width 2)
))
;; 色
(custom-set-faces
'(web-mode-doctype-face ((t (:foreground "#4A8ACA"))))
'(web-mode-html-tag-face ((t (:foreground "#4A8ACA"))))
'(web-mode-html-tag-bracket-face ((t (:foreground "#4A8ACA"))))
'(web-mode-html-attr-name-face ((t (:foreground "#87CEEB"))))
'(web-mode-html-attr-equal-face ((t (:foreground "#FFFFFF"))))
'(web-mode-html-attr-value-face ((t (:foreground "#D78181"))))
'(web-mode-comment-face ((t (:foreground "#587F35"))))
'(web-mode-server-comment-face ((t (:foreground "#587F35"))))
'(web-mode-css-at-rule-face ((t (:foreground "#DFCF44"))))
'(web-mode-comment-face ((t (:foreground "#587F35"))))
'(web-mode-css-selector-face ((t (:foreground "#DFCF44"))))
'(web-mode-css-pseudo-class ((t (:foreground "#DFCF44"))))
'(web-mode-css-property-name-face ((t (:foreground "#87CEEB"))))
'(web-mode-css-string-face ((t (:foreground "#D78181"))))
)
経緯
GitHub Pagesを書くためにr7kamura/katatemaを使ってみたらReact.jsが使われており、ちょうどいい機会なのでいまさらながら入門してみるか、と思ったらJSXを書く必要があり、Emacsに設定がなかったので調査してみた、というわけ。
こっち界隈には疎いので拡張子 .js 拡張子でJSXを書いていいのかどうかはよくわからない。 katatema がそうなってるから、という理由でそうしている。
理屈と参考資料
web-modeで .js でもJSXのシンタックスハイライトを適用する
web-mode-content-type で挙動を制御している。通常のJS編集に戻すには M-x web-mode-set-content-type で javascript を選んでやればよい。頻繁に切り替えるようなら別の手を考えよう。
インデント
デフォルトがだいぶ厳しい感じなのでまるっといただきました 
色
デフォルトが暗めで使いづらいのでまるっといただきました