🍼
いちばんやさしい"JSX"入門 🔰
はじめに
私は初学者なのですが、自分なりに簡潔さと正確さを両立させ、アウトプットによる学習の定着率向上のために記事を書いています。中には間違ったもの、改善可能な表現があると思われますので、お気づきの点がありましたら、フィードバックいただけると幸いです。
以下の JSX のまとめについては、 React で使うことを前提とした記事になります。
JSXってどんな言語？ 🙋🏻
JavaScriptの拡張言語。
HTMLに似た書き方でJavaScript構文が書ける。
公式HPでは React.createElementt の [1]Syntax sugar と表現されています。
JSXでできること 🛠
React 要素を生成する。
JSXがReact.createElementの式に[2]コンパイルされてReact要素を生成します。
JSXを使うメリット 👍🏻
短く、わかりやすいコードが書ける。
＊ React.createElement を直接書くこととの比較した場合
JSX の書き方のルール ✍🏻
- componentの名前は大文字で始める。
大文字で始まる型は React.createElement(Foo) にコンパイルされ、JavaScript ファイルにおいて定義あるいはインポートされたコンポーネントを参照します。
- は使えないので、キャメルケースで記述する。🐪
JacaScript 同様、 - が使えないので、以下のような書き方が必要になります。 - {} の中はJavaScriptの世界 JavaScript を子要素として渡せます。
- また、子要素を持たない場合は、閉じタグを利用します。
<MyComponent message={'hello world'} /> - class は
classNameと記述。 - 最上位コンポーネントは並列に書いてはいけない。
DOMに余分なノードを追加したくない場合は fragment で子要素をまとめる。
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
Discussion