Reactの基本文法①～named exportとdefault export

JavaScriptで作ったTodoアプリを、Reactで動かしてみることにする。

何はともあれReactの文法がよくわからないので、調べたことをまとめていく。

importとexport

意外と戸惑ってしまったのがimport。

概念は理解できるが、書き方がちょっと混乱する。

named export ※普通(defaultじゃない方)のexport

export const TodoItem1 = () => {
  return (
    <h1>Hello Cats!</h1>
  );
};

export function TodoItem2() {
  return (
    <h1>Hello Cats!</h1>
  );
};

export const TodoItem3 = function () {
  return (
    <h1>Hello Cats!</h1>
  );
};

import { TodoItem1 } from './TodoItem';
import { TodoItem2 } from './TodoItem';
import { TodoItem3 } from './TodoItem';

// こうやってまとめて書いてもいい
import { TodoItem1, TodoItem2, TodoItem3 } from './TodoItem';

importするときに {} を付ける。

1つのファイルに複数のコンポーネントを定義できる。

default export

const TodoItem3 = () => {
  return (
    <h1>Hello Cats!</h1>
  );
};
export default TodoItem3;

export default function TodoItem4() {
  return (
    <h1>Hello Cats!</h1>
  );
};

function TodoItem5() {
  return (
    <h1>Hello Cats!</h1>
  );
};
export default TodoItem5;

const TodoItem6 = function () {
  return (
    <h1>Hello Cats!</h1>
  );
};
export default TodoItem6;

import TodoItem3 from './TodoItem3';
import TodoItem4 from './TodoItem4';
import TodoItem5 from './TodoItem5';
import TodoItem6 from './TodoItem6';

importするときに {} は不要。

1つのファイルに1つのdefault exportを定義できる。

default exportはファイルがインポートされるときに、default exportしたものの値がインポートされるらしく、それ故に、インポート時にexportしたものの名前を違うモノにしても問題ないらしい。

const TodoItem3 = () => {
  return (
    <h1>Hello Cats!</h1>
  );
};
export default TodoItem3;

// 別の名前でインポートして、使用しても問題ない
import TodoItem from './TodoItem3';

1ファイル1コンポーネントを強制したいなら、default exportを使えばいい気がするけど、名前を変えるのは紛らわしいので、却ってわかりにくくなってしまいそう。

いずれにせよ、どっちにするのかは、あらかじめ決めておいた方がよさそうだ。

ところで、default exportの例文を書いていて気付いたのだが、export default functionはOKだが、export default const だとエラーになる。(何やらES6では許容していない書き方らしいぞ。)

// エラーになる例
export default const TodoItem3 = () => {
  return (
    <h1>Hello Cats!</h1>
  );
};

// これはOK
export default function TodoItem4() {
  return (
    <h1>Hello Cats!</h1>
  );
};

// エラーになる例
export default const TodoItem6 = function () {
  return (
    <h1>Hello Cats!</h1>
  );
};