組織前端專案的元件資料夾

資料夾結構前端專案的元件非常重要。因為它使專案的開發和維護變得更加容易。特別是在處理大型或複雜的元件時，組織資料夾有助於使程式碼井井有條，並且更易於找到和理解

。

這是資料夾結構。各種格式的元件常用於使用開發的專案Next.js 和 TypeScript:

1. 原子設計結構

原子設計是一種根據組件的複雜性和功能來劃分組件的設計概念。它分為5個層次：原子、分子、有機體、模板和頁面。

src/
└── components/
    ├── atoms/             # Small, reusable elements (e.g., buttons, inputs)
    │   ├── Button.tsx
    │   ├── Input.tsx
    │   ├── Icon.tsx
    │   └── ...            # Additional atoms
    │
    ├── molecules/         # Combinations of atoms (e.g., form groups)
    │   ├── FormInput.tsx
    │   ├── NavLink.tsx
    │   └── ...            # Additional molecules
    │
    ├── organisms/         # Complex UI components (e.g., headers, cards)
    │   ├── Header.tsx
    │   ├── Card.tsx
    │   ├── Footer.tsx
    │   └── ...            # Additional organisms
    │
    ├── templates/         # Page templates (layouts with placeholders)
    │   ├── MainLayout.tsx
    │   ├── DashboardLayout.tsx
    │   └── ...            # Additional templates
    │
    └── pages/             # Page-specific components (used directly in pages)
        ├── HomePage.tsx
        ├── AboutPage.tsx
        └── ...            # Additional page components

例子：

原子：Button.tsx

import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
  type?: 'button' | 'submit' | 'reset';
  disabled?: boolean;
}

const Button: React.FC<buttonprops> = ({ label, onClick, type = 'button', disabled = false }) => (
  <button type="{type}" onclick="{onClick}" disabled classname="btn">
    {label}
  </button>
);

export default Button;
</buttonprops>

分子：FormInput.tsx

import React from 'react';
import Input from '../atoms/Input';
import Label from '../atoms/Label';

interface FormInputProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
}

const FormInput: React.FC<forminputprops> = ({ label, value, onChange }) => (
  <div classname="form-input">
    <label text="{label}"></label>
    <input value="{value}" onchange="{onChange}">
  </div>
);

export default FormInput;
</forminputprops>

生物體：Header.tsx

import React from 'react';
import NavLink from '../molecules/NavLink';
import Logo from '../atoms/Logo';

const Header: React.FC = () => (
  <header classname="header">
    <logo></logo>
    <nav>
      <navlink href="/" label="Home"></navlink>
      <navlink href="/about" label="About"></navlink>
      <navlink href="/contact" label="Contact"></navlink>
    </nav>
  </header>
);

export default Header;

2. 基於特徵的結構

以功能或模組分隔組件的結構在功能豐富的項目中很流行。幫助高效管理和擴充功能

src/
└── components/
    ├── authentication/    # Components related to authentication
    │   ├── Login.tsx
    │   ├── Signup.tsx
    │   └── PasswordReset.tsx
    │
    ├── dashboard/         # Components specific to the dashboard
    │   ├── DashboardHeader.tsx
    │   ├── DashboardSidebar.tsx
    │   └── StatsCard.tsx
    │
    ├── userProfile/       # Components for user profile
    │   ├── ProfileHeader.tsx
    │   ├── EditProfileForm.tsx
    │   └── Avatar.tsx
    │
    ├── shared/            # Shared or common components across features
    │   ├── Button.tsx
    │   ├── Modal.tsx
    │   └── ...            # Additional shared components
    │
    └── layout/            # Layout components
        ├── Header.tsx
        ├── Footer.tsx
        └── Sidebar.tsx

例子：

驗證：Login.tsx

import React, { useState } from 'react';
import Button from '../shared/Button';
import FormInput from '../shared/FormInput';

const Login: React.FC = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // Logic for login
  };

  return (
    <div classname="login">
      <h2 id="Login">Login</h2>
      <forminput label="Email" value="{email}" onchange="{setEmail}"></forminput>
      <forminput label="Password" value="{password}" onchange="{setPassword}"></forminput>
      <button label="Login" onclick="{handleLogin}"></button>
    </div>
  );
};

export default Login;

儀表板：StatsCard.tsx

import React from 'react';

interface StatsCardProps {
  title: string;
  value: number;
  icon: React.ReactNode;
}

const StatsCard: React.FC<statscardprops> = ({ title, value, icon }) => (
  <div classname="stats-card">
    <div classname="stats-card-icon">{icon}</div>
    <div classname="stats-card-info">
      <h3 id="title">{title}</h3>
      <p>{value}</p>
    </div>
  </div>
);

export default StatsCard;
</statscardprops>

3. 領域驅動結構

此結構著重於根據項目的領域或有界上下文來組織元件。這使得這種結構適合需要明確域分離的複雜系統

src/
└── components/
    ├── domain/
    │   ├── product/       # Components related to product domain
    │   │   ├── ProductCard.tsx
    │   │   ├── ProductList.tsx
    │   │   └── ProductDetail.tsx
    │   │
    │   ├── cart/          # Components for cart domain
    │   │   ├── CartItem.tsx
    │   │   ├── CartSummary.tsx
    │   │   └── CartIcon.tsx
    │   │
    │   ├── user/          # Components for user domain
    │   │   ├── UserAvatar.tsx
    │   │   ├── UserProfile.tsx
    │   │   └── UserSettings.tsx
    │   │
    │   └── ...            # Additional domain-specific components
    │
    ├── ui/                # UI elements (atoms, molecules, etc.)
    │   ├── atoms/         
    │   ├── molecules/     
    │   └── organisms/     
    │
    └── layout/            # Layout components
        ├── Header.tsx
        ├── Footer.tsx
        └── Sidebar.tsx

例子：

產品：ProductCard.tsx

import React from 'react';

interface ProductCardProps {
  name: string;
  price: number;
  imageUrl: string;
  onAddToCart: () => void;
}

const ProductCard: React.FC<productcardprops> = ({ name, price, imageUrl, onAddToCart }) => (
  <div classname="product-card">
    <img src="%7BimageUrl%7D" alt="{name}" classname="product-card-image">
    <div classname="product-card-info">
      <h3 id="name">{name}</h3>
      <p>${price.toFixed(2)}</p>
      <button onclick="{onAddToCart}">Add to Cart</button>
    </div>
  </div>
);

export default ProductCard;
</productcardprops>

購物車：CartSummary.tsx

import React from 'react';

interface CartSummaryProps {
  totalItems: number;
  totalPrice: number;
}

const CartSummary: React.FC<cartsummary props> = ({ totalItems, totalPrice }) => (
  <div classname="cart-summary">
    <h3 id="Cart-Summary">Cart Summary</h3>
    <p>Total Items: {totalItems}</p>
    <p>Total Price: ${totalPrice.toFixed(2)}</p>
    <button>Checkout</button>
  </div>
);

export default CartSummary;
</cartsummary>

4. 使用 Storybook 進行組件驅動開發 (CDD)

該結構旨在支援跨平台開發。 元件驅動開發 (CDD) 使用 Storybook，它允許您以獨立於主應用程式的格式開發和測試元件

src/
└── components/
    ├── Button/
    │   ├── Button.tsx      # Component implementation
    │   ├── Button.stories.tsx # Storybook stories
    │   ├── Button.test.tsx # Unit tests
    │   └── Button.module.css # Component-specific styles
    │
    ├── Input/
    │   ├── Input.tsx
    │   ├── Input.stories.tsx
    │   ├── Input.test.tsx
    │   └── Input.module.css
    │
    ├── Modal/
    │   ├── Modal.tsx
    │   ├── Modal.stories.tsx
    │   ├── Modal.test.tsx
    │   └── Modal.module.css
    │
    └── ...                # Additional component folders

例子：

按鈕：Button.tsx

import React from 'react';
import styles from './Button.module.css';

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

const Button: React.FC<buttonprops> = ({ label, onClick, variant = 'primary' }) => (
  <button classname="{`${styles.btn}" onclick="{onClick}">
    {label}
  </button>
);

export default Button;
</buttonprops>

按鈕：Button.stories.tsx（故事書）

import React from 'react';
import { Meta, Story } from '@storybook/react';
import Button, { ButtonProps } from './Button';

export default {
  title: 'Components/Button',
  component: Button,
} as Meta;

const Template: Story<buttonprops> = (args) => <button></button>;

export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  onClick: () => console.log('Primary Button Clicked'),
  variant: 'primary',
};

export const Secondary = Template.bind({});
Secondary.args = {
  label: 'Secondary Button',
  onClick: () => console.log('Secondary Button Clicked'),
  variant: 'secondary',
};
</buttonprops>

5. 共享元件庫

在多個團隊一起工作的專案中建立使用通用元件的結構很重要。這種結構強調分離可以在整個專案中重複使用的元件

src/
└── components/
    ├── shared/            # Shared components across the application
    │   ├── Button/
    │   │   ├── Button.tsx
    │   │   └── Button.module.css
    │   │
    │   ├── Modal/
    │   │   ├── Modal.tsx
    │   │   └── Modal.module.css
    │   │
    │   └── ...            # Additional shared components
    │
    ├── featureSpecific/   # Feature-specific components
    │   ├── UserProfile/
    │   │   ├── ProfileHeader.tsx
    │   │   ├── ProfileDetails.tsx
    │   │   └── Avatar.tsx
    │   │
    │   ├── ProductList/
    │   │   ├── ProductCard.tsx
    │   │   └── ProductFilter.tsx
    │   │
    │   └── ...            # Additional feature-specific components
    │
    └── layout/            # Layout components
        ├── Header.tsx
        ├── Footer.tsx
        └── Sidebar.tsx

ตัวอย่าง:

Shared: Modal.tsx

import React from 'react';
import styles from './Modal.module.css';

interface ModalProps {
  title: string;
  isOpen: boolean;
  onClose: () => void;
}

const Modal: React.FC<modalprops> = ({ title, isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div classname="{styles.modalOverlay}">
      <div classname="{styles.modal}">
        <h2 id="title">{title}</h2>
        <button classname="{styles.closeButton}" onclick="{onClose}">
          ×
        </button>
        <div classname="{styles.modalContent}">{children}</div>
      </div>
    </div>
  );
};

export default Modal;
</modalprops>

Feature-Specific: ProfileHeader.tsx

import React from 'react';

interface ProfileHeaderProps {
  name: string;
  bio: string;
  avatarUrl: string;
}

const ProfileHeader: React.FC<profileheaderprops> = ({ name, bio, avatarUrl }) => (
  <div classname="profile-header">
    <img src="%7BavatarUrl%7D" alt="{name}" classname="profile-avatar">
    <h1 id="name">{name}</h1>
    <p>{bio}</p>
  </div>
);

export default ProfileHeader;
</profileheaderprops>

Factors to Consider When Structuring Components

1. Reusability: ควรแยก component ที่สามารถใช้ซ้ำได้ออกจาก component ที่เฉพาะเจาะจงกับฟีเจอร์
2. Maintainability: การจัดโครงสร้างที่ดีช่วยให้การดูแลรักษาและการอัพเดตโปรเจคเป็นไปอย่างราบรื่น
3. Scalability: โครงสร้างที่ดีจะช่วยให้การขยายฟีเจอร์และการเพิ่ม component ใหม่ ๆ เป็นเรื่องง่าย
4. Performance: ใช้เทคนิคที่เหมาะสมในการโหลดและใช้ component เพื่อให้แน่ใจว่าแอปพลิเคชันของคุณมีประสิทธิภาพ

Best Practices for Component Structure

• Single Responsibility Principle: แต่ละ component ควรทำหน้าที่เดียวและทำได้ดี
• Component Naming: ตั้งชื่อ component ให้สื่อความหมายและชัดเจน
• Component Composition: ใช้ composition แทน inheritance เมื่อสร้าง component ใหม่
• Use Prop Types or TypeScript: กำหนด prop types หรือใช้ TypeScript interfaces เพื่อเพิ่มความปลอดภัยในการใช้งาน
• Write Tests: เขียน unit tests สำหรับ component ทุกตัวเพื่อตรวจสอบการทำงาน

ด้วยข้อมูลและแนวทางเหล่านี้ หวังว่าคุณจะสามารถจัดโครงสร้างในโฟลเดอร์ components ของโปรเจคได้อย่างมีประสิทธิภาพและเหมาะสมกับความต้องการของโปรเจคของคุณ!

以上是組織前端專案的元件資料夾的詳細內容。更多資訊請關注PHP中文網其他相關文章！