Reactを勉強していると、
JSXでいろんな書き方が出てきて混乱してしまう。
そもそもJavascriptが苦手なので、よくわからない。
そんな私が未来の自分（またよくわからなくなった時の自分）へ宛てた記事です。

①


import React from "react";
export default function (){
    return(
        <div>
            <h1>あいうえお</h1>
        </div>
    )
}

②

import React from "react";
const Kansu1 = function (){
      return(
        <div>
            <h1>あいうえお</h1>
        </div>
    )
 }
 export default Kansu1

③


import React from "react";
const Kansu2 = ()=>{
    return(
        <div>
            <h1>あいうえお</h1>
        </div>
    )
}
export default Kansu2

上の３つは関数の名前は違うけれど全部同じ動きをする。
これがよくわからなかったので、整理していく。

JSXの流れ

returnするだけの関数を作る
表示したい内容をreturnの中身に入れる。
関数をexport defaultする

これが基本！絶対のルール！
惑わされないで

改めて、最初の3つについて確認すると、

①は関数を直接export defaultしているだけ。

②③は定数にreturnする関数を代入。定数をexport defaultしている。

③は②をアロー関数を使って書いただけ。

アロー関数を忘れた人

普通の関数の定義　


const 定数名 = function(){処理};

アロー関数　

function()の代わりに()=>で関数を定義できる。　


const 定数名 = ()=>{処理}