JSXの書き方

JSXって？

Reactが表示される流れは、Reactの表示される仕組みについて〜DOMとは?〜にも書いた通り、
①DOMの要素を取得
②仮想エレメントを作成
③レンダリング
です。
この流れを毎回書くのは大変なので、同じことをやるとしてももっと簡単な書き方があります。
それが、JSXです。

JSXについて

JSXはJavascriptを拡張した書き方で、HTMLのタグをJavascriptのスクリプトに直接記述する仕組み。JSXはJavascriptなので、もちろんJavascriptを埋め込むこともできます。
JSXは②のエレメントオブジェクトを生成する部分を担当します。
JSXが作るのは1つのエレメントで、複数のエレメントを作ることはできません。
<div>...</div>で囲んであげて、一つの要素として扱います。
大事

JSXの書くときの決まり

これからJSXの書き方のルールについて、まとめていきます。

変数をうめこむ

  let text = "テキスト"
  let link = "https://qiita.com/"

  let el = (
          <div>
            <h4>{text}</h4>
            <h5><a href={link}>Qiita</a></h5>
          </div>
        )

タグの中身でも、属性にも{}で指定できる。
変数として認識されなくなるので、クォーテーションで囲んだりしないように。

クラスを設定

<div className="〇〇">

クラス属性を設定するときはこのように記述します。

スタイルを設定

2つのやり方があります。
①タグに直接styleを書き込む
{{}}で囲む

 let el = (
          <div>
            <h4 style={{color:"red",fontSize:20}}>message</h4>
          </div>
        )

②変数にまとめて定義してstyle属性に設定する

   const msg_style = {
        fontSize:20,
        color:"red"
      }
  let el = (
          <div>
            <h4 style={msg_style}>message</h4>
          </div>
        )

注意

ハイフン(-)は使わない

font-size、margin-topなど間にハイフンが入るプロパティはハイフンをなくして、その後の文字を大文字にして対応します。ハイフンを使うとエラーになっちゃいます！

数字を扱うとき

20pxと20では扱いがちがいます。
20pxと単位が付く場合は""とクォーテーションで囲まないとエラーになるので、気をつけましょう。