コンポーネント

引数無し

実装

export const Component: React.VFC = () =>  {
  return (
    <div>
      <h2>Componentです</h2>
    </div>
  );
};

呼び出し元

import { Component } from './components/Component';

export const App: React.VFC = () => {
  return (
    <div>
      <Component />
    </div>
    
  );
};

引数有り

実装

type Props = {
  aaa: string
};

export const Component: React.VFC<Props> = (props: Props) =>  {
  return (
    <div>
      <h2>Componentです{props.aaa}</h2>
    </div>
  );
};

呼び出し元

import { Component } from './components/Component';

export const App: React.VFC = () => {
  return (
    <div>
      <Component aaa="aaaa"/>
    </div>
    
  );
};