自己紹介

経済学部4年生のフロントエンドエンジニアです。

アプリ開発にReactを使いそうなので、学んだことを適宜まとめていきます。所々、知識に曖昧な点があります。間違いなどあればご指摘していただけると幸いです。

JSXとは

JSXとは。Javascriptフレームワーク「React」で使うJavascript構文のこと。

return (
  <h1>
    Hello world
  </h1>
);

見た目通りHTMLっぽい見た目になっています。が、HTMLとは全く別物。
JSXはJavascriptの式の一種。

JSXはHTMLと見た感じが似ていますが、文法は違うので注意が必要です。

JSXの特徴

このようにHTMLとは異なるルールがいくつかあります。

これは見た目のままです。html内にCSSを直書きしたい時には""ではなく{{}}で囲いましょう。

JSXでハイフンは一切使えません。
クラス名やCSSのbackground-colorなど全てが該当します。

ハイフンは使わない代わりにキャメルケースを使います。
例：

background-color--→backgroundColor

それからハイフンだけではなく、Javascriptで既に使われている単語にも注意が必要です。

例えば、classやforなどはJavascriptでも使われていますよね。そういった単語はHTMLとは違う書き方をすることで対応します。

例：

<p class="container"></p> --→ <p className="container"></p>
<label for="name"></label> --→ <label htmlFor="name"></label>

次はstate・hooksあたりの記事を書いていく予定です。