default exportとexport

default exportの場合

import React from "react";

const ColorfulMessage = (props) => {
  const { color, children } = props;
  const contentStyle = {
    color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

export default ColorfulMessage;

通常のexportの場合

import React from "react";

export const ColorfulMessage = (props) => {
  const { color, children } = props;
  const contentStyle = {
    color,
    fontSize: "18px"
  };
  return <p style={contentStyle}>{children}</p>;
};

まとめ

exportの仕方は「関数名を定義して、その下で【export default 関数名】とするやり方」と「関数定義の先頭にexportをつけるやり方」の2つがある。
Reactに関してはコンポーネントの名称が確約される（分割代入して定義元の関数名をコンポーネント名としてインポートしなければならない）ので、通常のexportにする方が恩恵がある（コンポーネント名のタイポの心配がない）。