【React】JSXとは

KS React

JSXとは

JSXとはJavaScript XMLの略でJavascriptの拡張構文です。
Javascript内でHTMLと似た記述が簡単にでき、Reactアプリケーションの作成が容易になります。

 

具体的には以下のような例になります。


　const SectionArea = () =>{
  return(
    < button className='btn'>
       Click Button
   </ button>
  );
}

上の式はbabelによって以下の式にコンパイルされます。


  const SectionArea = () => {
    return React.createElement(
      'button',
      {className: 'btn'},
      'Click Button'
    );
  };

上記2つの式は等価になります。

 

JSXを使用しないこともできるが・・

上記の通りコンパイルされているだけの為、必ずしもJSXを使用する必要はありませんが、
JSXなしでReactを使わない場合React.createElementを呼び出さなければならず記述も大変ですし可読性が落ちるのでJSXを使用したほうが良いでしょう。
Reactの公式でもJSX構文の使用は推奨されています。

 

create-react-appで作成するとbabelによって勝手にトランスコンパイラ（コードを別のコードへと変換する作業）を行っている為
jsでもjsxが使うことが出来ます。

 

JSXの記法

HTMLのclass

JSXは基本的にはHTMLタグや属性をそのまま使用することができます。

ただしHTMLのclassはJavascriptの予約語にあたるため代替としてclassNameを利用します。
{}で囲むとその内側にjavascriptのコードを書くこともできます。

 


　 const name = 'post'
   const text = '投稿する'
　 < button className='post' name={name} > {text}  </ button>

最上位要素はひとつ

JSXでは複数の要素を並列で設置できません。必ず階層でタグを構成する必要があります。

NG例

 


　return(
　　< p  > Reactを解説します  </ p>
　　< p  > JSXの記述方法  </ p>
 );

OK


　return(
   <div >
　　< p  > Reactを解説します  </ p>
　　< p  > JSXの記述方法  </ p>
  </div >
 );

OK
余分なdiv要素など差し込みたくないときはで< React.Fragment >囲むか、もしくはその省略系の<>～</>で囲むこともできます。


　return(
   < >
　　< p  > Reactを解説します  </ p>
　　< p  > JSXの記述方法  </ p>
  </ >
 );

こちらには書ききれないルールもたくさんあるため、詳細は公式ドキュメントを参考にしていただくと良いかと思います。

JSX を深く理解する

参考

公式ドキュメント

基礎から学ぶ React/React Hooks