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