Reactのexportについて学ぶ

学んだこと

export について

named export

• export 型名 コンポーネント名で定義する。
• インポートを行う場合は、import {コンポーネント名} from コンポーネントのファイルパスを記述する必要がある。

export const ColorfulMessage = (props) => {
  console.log('--------ColorfulMessage---------');
  const contentStyleA = {
    color: props.color,
    fontSize: '18px',
  };

  return <p style={contentStyleA}>{props.children}</p>;
};

default export

• export defalt コンポーネント名で定義することができる。
• import を行う場合はimport 好きな名前 from 'ファイルパス';で定義を行う。
  • namedexport の import と違い{}で囲む必要がない。

const ColorfulMessage = (props) => {
  console.log('--------ColorfulMessage---------');
  const contentStyleA = {
    color: props.color,
    fontSize: '18px',
  };

  return <p style={contentStyleA}>{props.children}</p>;
};

export default ColorfulMessage;

import ColorfulMessage from './components/ColorfulMessage';
import { useEffect, useState } from 'react';
export const App = () => {
  console.log('--------App---------');
  const [num, setNum] = useState(0);
  const [isShowFace, setIsShowFace] = useState(false);
  const onClickButton = () => {
    setNum((prev) => prev + 1);
  };
  const contentStyleA = { color: 'blue', fontSize: '18px' };
  const contentStyleB = { color: 'green', fontSize: '18px' };
  const onClickToggle = () => {
    setIsShowFace(!isShowFace);
  };

  useEffect(() => {
    if (num > 0) {
      if (num % 3 === 0) {
        isShowFace || setIsShowFace(true);
      } else {
        isShowFace && setIsShowFace(false);
      }
    }
  }, [num]);

  return (
    <>
      <h1 style={contentStyleA}>こんにちは！</h1>
      <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="green">元気です！</ColorfulMessage>
      <button onClick={onClickButton}>カウントアップ</button>
      <p>{num}</p>
      <button onClick={onClickToggle}>on/off</button>
      {isShowFace && <p>＼(^o^)／</p>}
    </>
  );
};

export の使い分け

• 基本的には namedexport を使えば OK