下記内容は、とらゼミさんのYouTube動画を個人学習用としてテキストにまとめたものになります。(https://www.youtube.com/watch?v=gLbTluYSb_U)
より詳しく知りたい方は動画をご参照ください。

JSXとは？

JavaScriptの拡張言語。
HTMLとJavaScriptを掛け合わせて使えるようにしたものと考えるとイメージがしやすいです。

const Button =()=> {
  retrun (
      <button className={'button'}>
           buttonです！
      </button>
  )
}

JSXを使う理由

Reactを使う場合、HTMLを出力する際は以下のような記述が必要になります。

React.createElement(
  'button',
  {className:'button'},
  'buttonだよ！'
)

少ないHTMLの記述なら問題はないが、実際に多くのHTMLの記述をすると考えた時にこの書き方では少々大変になります。
そこでJSXを使って記述すると同じ結果かつスッキリとした記述にすることができます。

<button className={'button'}>
   buttonです！
</button>

JSXは何をしているのか

JSXで記述したものをコンパイラを通してコンパイルを行うと、React.createElementの式に変換を行ってくれます。
React.createElementを直接使用したものは、見た目的にもわかりづらく直感的ではないのでJSXを使用してより分かりやすく記述することができます。

JSXの基礎文法01

import React from 'react';
const Button =()=> {
  retrun (
      <button className={'button'}>
           buttonです！
      </button>
  )
}
export default Button;

JSXの基礎文法02

Vueを行ったことがある方はイメージがしやすい印象です。

import React from 'react';
 const images = () => {
  const alt = 'イメージ画像';
  const path = '../img/xxx.png';
  
 return (
    <div>
        <p>{alt}</p>
        <img src={path} alt={'alt'} />
    </div>
  )
}
export default images;

特殊な構文

JSXは必ず階層構造で、最上位のコンポーネントは並列にできません。
Vueの<template>内のイメージに近い感じがしています。

■ Error

return (
  <p></p>
  <p></p>
)

■ NoError

return (
<React.Fragment>
  <p></p>
  <p></p>
</React.Fragment>
)

■ NoError

return (
<>
  <p></p>
  <p></p>
</>
)