React で関数コンポーネントをモジュール化する際の記述方法とフォルダ構成

src/
├── components/
│   ├── Button/
│   │   ├── Button.jsx
│   │   ├── Button.module.css
│   │   └── index.js
│   ├── Header/
│   │   ├── Header.jsx
│   │   ├── Header.module.css
│   │   └── index.js
│   └── ... 他のコンポーネント
├── pages/
│   ├── Home/
│   │   ├── Home.jsx
│   │   ├── Home.module.css
│   │   └── index.js
│   └── ... 他のページ
├── App.jsx
├── index.js
└── ... その他のファイル

components/
└── Button/
    ├── Button.jsx
    ├── Button.module.css
    └── index.js

// src/components/Button/Button.jsx
import React from 'react';
import styles from './Button.module.css';
import PropTypes from 'prop-types';

const Button = ({ onClick, children, type = 'button' }) => {
  return (
    <button type={type} className={styles.button} onClick={onClick}>
      {children}
    </button>
  );
};

Button.propTypes = {
  onClick: PropTypes.func,
  children: PropTypes.node.isRequired,
  type: PropTypes.string,
};

export default Button;

/* src/components/Button/Button.module.css */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// src/components/Button/index.js
export { default } from './Button';

// 例: src/pages/Home/Home.jsx
import React from 'react';
import Button from '../../components/Button';

const Home = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <h1>ホームページ</h1>
      <Button onClick={handleClick}>クリックしてください</Button>
    </div>
  );
};

export default Home;

components/
└── Header/
    ├── Header.jsx
    ├── Header.module.css
    └── index.js

// src/components/Header/Header.jsx
import React from 'react';
import styles from './Header.module.css';
import PropTypes from 'prop-types';

const Header = ({ title }) => {
  return (
    <header className={styles.header}>
      <h1>{title}</h1>
    </header>
  );
};

Header.propTypes = {
  title: PropTypes.string.isRequired,
};

export default Header;

/* src/components/Header/Header.module.css */
.header {
  background-color: #f8f9fa;
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #dee2e6;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #343a40;
}

// src/components/Header/index.js
export { default } from './Header';

// 例: src/pages/Home/Home.jsx
import React from 'react';
import Header from '../../components/Header';
import Button from '../../components/Button';

const Home = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <Header title="ホームページ" />
      <Button onClick={handleClick}>クリックしてください</Button>
    </div>
  );
};

export default Home;

// src/App.jsx
import React from 'react';
import Home from './pages/Home';

const App = () => {
  return (
    <div>
      <Home />
    </div>
  );
};

export default App;

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css'; // グローバルスタイル

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

// src/components/Button/index.js
export { default } from './Button';

// インポート時
import Button from 'components/Button';