自己紹介
経済学部4年生のフロントエンドエンジニアです。
アプリ開発にReactを使いそうなので、学んだことを適宜まとめていきます。所々、知識に曖昧な点があります。間違いなどあればご指摘していただけると幸いです。
JSXとは
JSXとは。Javascriptフレームワーク「React」で使うJavascript構文のこと。
return (
<h1>
Hello world
</h1>
);
見た目通りHTMLっぽい見た目になっています。が、HTMLとは全く別物。
JSXはJavascriptの式の一種。
HTMLとJSXの違い
JSXはHTMLと見た感じが似ていますが、文法は違うので注意が必要です。
JSXの特徴
-
style=""はstyle={{}}で書く - ハイフンは一切使えない
-
class=""はclassName=""で書く -
for=""はhtmlFor=""で書く
このようにHTMLとは異なるルールがいくつかあります。
style=""はstyle={{}}で書く
これは見た目のままです。html内にCSSを直書きしたい時には""ではなく{{}}で囲いましょう。
ハイフンは一切使えない
JSXでハイフンは一切使えません。
クラス名やCSSのbackground-colorなど全てが該当します。
ハイフンは使わない代わりにキャメルケースを使います。
例：
background-color--→backgroundColor
class=""はclassName=""と書く
それからハイフンだけではなく、Javascriptで既に使われている単語にも注意が必要です。
例えば、classやforなどはJavascriptでも使われていますよね。そういった単語はHTMLとは違う書き方をすることで対応します。
例：
<p class="container"></p> --→ <p className="container"></p>
<label for="name"></label> --→ <label htmlFor="name"></label>
次はstate・hooksあたりの記事を書いていく予定です。