【React初心者】JSXのルール

概要

JSXはHTMLそのものではなく、独自のルールを持っている。
今回は基本的なルールを以下にまとめる。

最上位の要素は1つにする

React要素はASTの形で扱われているが、Reactではその最上位が1つであることを要求する。
以下の記述では最上位にh1要素とp要素の2つが存在することになるため、エラーとなる。

export default function Home() {
  return <h1>Test</h1> <p>testtesttest.....</p>
}

そのため、たとえば<div></div>で囲うとエラーが解消される。

export default function Home() {
  return (
    <div>
      <h1>Test</h1>
      <p>testtesttest.....</p>
    </div>
  )
}

<div>を追加したくない場合は...

<React.Fragment>を使うことができる。

export default function Home() {
  return (
    <React.Fragment>
      <h1>Test</h1>
      <p>testtesttest.....</p>
    </React.Fragment>
  )
}

また、<React.Fragment>は<>に置き換えることもできる。

export default function Home() {
  return (
    <>
      <h1>Test</h1>
      <p>testtesttest.....</p>
    </>
  )
}

要素は閉じる

HTMLでは閉じる必要がない要素でも、JSXでは必ず閉じなければならない。
たとえば、以下のように<hr>を追加すると、エラーとなる。

export default function Home() {
  return (
    <div>
      <h1>Test</h1>
      <hr>
      <p>testtesttest.....</p>
    </div>
  )
}

<hr />に書き換えるとエラーは解消される。
※<img>なども同様のため注意

export default function Home() {
  return (
    <div>
      <h1>Test</h1>
      <hr />
      <p>testtesttest.....</p>
    </div>
  )
}

classはclassNameと書く

HTMLの感覚でclassを使うとWarningが表示されるため、classNameと記述する。
※現在のReactではclassでも機能するが、Warningの扱いである
多くのコンポーネントでがclassNameを使っているため、トラブルの原因になることからclassの使用は推奨されていない。

export default function Home() {
  return (
    <div className="test">
      <h1>Test</h1>
      <p>testtesttest.....</p>
    </div>
  )
}

style属性の値は{{}}の中に書く

style属性の値は文字列ではなく、キャメルケース（camelCase）のプロパティを持ったオブジェクトとして指定する必要がある。

export default function Home() {
  return (
    <div>
      <h1 style={{ color:'red',fontSize:'48px' }}>Test</h1>
      <p>testtesttest.....</p>
    </div>
  )
}

式（Expression）は{}の中に書く

JavaScriptの式（Expression）は{}で囲うことで、JSXの中でも使える。
変数だけでなく、関数や条件分岐なども使用できる。

export default function Home() {
  const sub = 'testtesttest.....'

  return (
    <div>
      <h1>Test</h1>
      <p>{sub}</p>
    </div>
  )
}

#　複数行で書く場合は()に入れる
要素を複数行に分けて記述する場合には()に入れる。

export default function Home() {
  return (
    <>
      <h1>Test</h1>
      <p>testtesttest.....</p>
    </>
  )
}

まとめ

書いているコードはあくまでもJSX、JavaScriptのコードだということを意識すれば、問題ないと思う。