tamakipedia

フロントエンドエンジニア。Typescriptもう特訓中です。一日の振り返りや学んだことをちょっとずつ吐いています。

【 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