Reactで出てくるJSXという単語の意味

2016/07/20 22:22

Reactで出てくるJavaScript syntax extension(以下、JSX)という単語の意味で混乱したのでメモしておく。

react-railsでComponentを生成した時に生成されるファイルの拡張子が.js.jsxになっていて、この拡張子ってなんだろと思ったのがことの始まり。

rails g react:component Sample
      create  app/assets/javascripts/components/sample.js.jsx

端的に言うとReactでXMLっぽい構文が出てくるが、それがJSX。

Javascriptに対する知識が無いので、てっきりECMAScript2015 (ES6) にXMLライクな記述が出来る仕様が含まれていると思っていた。

詳細はReactのページにJSXのリンクがあって纏められている。
https://facebook.github.io/react/docs/jsx-in-depth.html
https://facebook.github.io/jsx/

JSXはXMLライクなシンタックスをECMAScriptで使えるようにするための拡張と書いてある。

// Using JSX to express UI components.
var dropdown =
  <Dropdown>
    A dropdown list
    <Menu>
      <MenuItem>Do Something</MenuItem>
      <MenuItem>Do Something Fun!</MenuItem>
      <MenuItem>Do Something Else</MenuItem>
    </Menu>
  </Dropdown>;

render(dropdown);

まとめ

JSXはXMLライクな構文をECMAScriptで使えるようにするための拡張でECMAScript2015にはJSXの仕様が含まれていない。なんでBabelでJSXを含んでいてもトランスパイルできるんだ?と思ったらBabelがReact JSXをサポートしているからでした。

おわり。