Reactコンポーネントの基本形は以下のとおり、() => {}
のアロー関数内でreturn
文を記述する必要があるが、このreturn
文を省略しコード量をもう少しだけ減らすことができる。
const Title = () => {
return (
<h1>ページタイトル</h1>
);
};
export default Title;
アロー関数の{ }
の部分を( )
とすることで、以下のようにreturn
文を省略して書くことができる。
const Title = () => (
<h1>ページタイトル</h1>
);
export default Title;
また、今回の例のようにreturn
で返す要素が一つの場合、さらに省略して1行で書くこともできる。
const Title = () => <h1>ページタイトル</h1>
export default Title;