JSX - lsadsfj

JSX

JSXはHTML風に書けるJavaScriptの拡張構文

JavaScript内でHTMLを柔軟に扱える。宣言的に書ける（宣言的UI）

const element = <h1>Hello, world!</h1>;

JavaScriptエンジン単体では実行できない

JavaScriptの仕様にこんな記法は存在しない

Babelのようなプログラム（トランスパイラ）がJSXの記法をJavaScriptの記法に変換している

JSXがどのように変換されるかは設定によって異なる

ReactのときReactのライブラリで用意された関数に変換される

VueのときVueのライブラリで用意された関数に変換される

Reactでの変換前と変換後

https://gyazo.com/940ee83cfc6985a47a3b54ddb785b327https://gyazo.com/aa4d30810ddd4a4c6c053180894ac47a

JSXの書き方

JSXに式を埋め込む

code:jsx-statement.jsx

const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>;

JSXで属性を指定する

code:jsx-attribute.jsx

const element = <a href="https://www.reactjs.org"> link </a>;

const avatarElement = <img src={user.avatarUrl} />; // <img /> = <img></img>

属性に文字列を与えるときは、引用符('' or "")でかこむ

属性にJavaScriptの式を与えるときは、中括弧{}でかこむ

属性はJSXに対応するオブジェクト?で定義されている

型定義を読もう?

HTMLでのclassnameはclassName

public.icon