読者です 読者をやめる 読者になる 読者になる

JSX構文を理解する

参考:
JSX in Depth | React
reactjs - React.jsのJSXを使ってみる - Qiita
jsx(Reactのほう)に慣れる - こおろぎと蛞蝓

特にJSX in Depth | Reactを用いながら理解を進めていきましょう。

なんでJSXを使うの?

Reactとともに用いるとき、プレーンなJavaScriptでも問題ありません。
しかし、より簡潔で使い慣れた構文であるJSXのほうが、書きやすく読みやすいというメリットがあります。これを糖衣構文と呼びます。

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

タグに囲まれた一見HTMLに見える部分がJSX構文です。


HTMLtoJSXコンパイラを使うとHTMLからJSXへ変換してくれます。
HTML to JSX | React
babelを使うとdesugar(JSXからプレーンなJavaScriptへの変換)をしてくれます。
Babel · The compiler for writing next generation JavaScript