【 react 】jsxを使ってみる
jsxを使えば、creatElement
せずとも
直感的にエレメントを表示することができます。
JSXとは
拡張構文と呼ばれ、reac的なDOMの指定方法をより直感的に指定できるようにする手法です。 書き方はHTMLで書く時同様の書き方になります。
コンパイルするときにReact.createElement(~)
というreactの文に変換されます。
JSXを具体的に書いてみると、
let root = document.querySelector('#root'); let e = <h1>Hello World</h1>; ReactDOM.render(e, root);
この明らかにHTMLタグが記述されている部分がJSXの書き方になります。
今の状態だとsyntax errorが出ます。
babeljs.io
こちらをbabelでコンパイルした結果が以下の文になります。
let root = document.querySelector('#root'); let e = React.createElement("h1", null, "Hello World"); ReactDOM.render(e, root);
React.createElement
の部分を
HTMLで書くように表現することができるということですね。
:w