React基礎[エラー]：Adjacent JSX elements must be wrapped in an enclosing tag

React初学者向け。

エラーをそのまま訳すと、隣接しているJSX要素は一つの要素で囲みなさいという意味。
現在のコードは以下のようになっています。

import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  return (
    <h1>Hello World</h1>
    <p>test</p>
  )
}

export default App

App関数の中のreturnの中がJSX記法で書かれたコードとなっており、h1タグとpタグが一つのタグで囲まれてないため発生したエラーとなっています。
ReactのJSXの仕様として、JSXで書かれた内容は、一つのタグで囲まなければいけないようになっています。

解決方法は３つ

①divタグで囲む

以下のようにreturnの中をすべてdivタグで囲みます。

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>Hello World</h1>
      <p>test</p>
    </div>
  )
}

検証ツールで確認するとdivがエラーが消え、div要素が生成されています。

②Fragmentタグで囲む

１つ目の方法では不要にdiv要素が生成され、他のコードに影響が出てしまう場合があります。
要素を生成したくない場合は、下記のようにFragmentタグで囲む方法もあります。

import { Fragment } from 'react'

function App() {

  return (
    <Fragment>
      <h1>Hello World</h1>
      <p>test</p>
    </Fragment>
  )
}

export default App

コード上部でFragmentをimportします。そうするとFragment使えるようになるので
囲って検証ツールで確認すると

エラーは出ず、先ほどのようにdiv要素は生成されません。

③<></>で囲む

最もシンプルな方法として<></>で囲む方法があります。
先ほどはFragmentをimportしてタグを使用しましたが、そのような必要がなく、
下記のように囲むだけで解消します。

function App() {

  return (
    <>
      <h1>Hello World</h1>
      <p>test</p>
    </>
  )
}

export default App

Fragmentと同じようにエラーが解消され、余計な要素も生成されていません。

個人的には、余計な要素が作成されず、
一番シンプルな３つ目の方法を使用するのが良いかと思います。