Menyusun folder komponen projek Frontend-tutorial js-php.cn

Organizing the Frontend project

Struktur folder komponen projek Frontend adalah penting. Kerana ia menjadikan pembangunan dan penyelenggaraan projek lebih mudah. Terutamanya apabila berurusan dengan komponen yang besar atau kompleks, penyusunan folder membantu memastikan kod anda teratur dan lebih mudah dicari dan difahami

Berikut ialah struktur folder. komponen dalam pelbagai format biasa digunakan dalam projek dibangunkan menggunakan Next.js dan TypeScript:

1. Struktur Reka Bentuk Atom

Reka Bentuk Atom ialah konsep reka bentuk yang membahagikan komponen mengikut kerumitan dan fungsinya. Ia dibahagikan kepada 5 peringkat: Atom, Molekul, Organisma, Templat dan Halaman.

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

Salin selepas log masuk

contoh:

Atom: Butang.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={disabled} className="btn">
    {label}
  </button>
);

export default Button;

Salin selepas log masuk

Molekul: 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} />
    <Input value={value} onChange={onChange} />
  </div>
);

export default FormInput;

Salin selepas log masuk

Organisma: Header.tsx

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

const Header: React.FC = () => (
  <header className="header">
    <Logo />
    <nav>
      <NavLink href="/" label="Home" />
      <NavLink href="/about" label="About" />
      <NavLink href="/contact" label="Contact" />
    </nav>
  </header>
);

export default Header;

Salin selepas log masuk

2. Struktur Berasaskan Ciri

Struktur yang memisahkan komponen mengikut ciri atau modul adalah popular dalam projek yang kaya dengan ciri. Membantu mengurus dan mengembangkan ciri dengan cekap

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

Salin selepas log masuk

contoh:

Pengesahan: Log masuk.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>Login</h2>
      <FormInput label="Email" value={email} onChange={setEmail} />
      <FormInput label="Password" value={password} onChange={setPassword} />
      <Button label="Login" onClick={handleLogin} />
    </div>
  );
};

export default Login;

Salin selepas log masuk

Papan pemuka: 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>{title}</h3>
      <p>{value}</p>
    </div>
  </div>
);

export default StatsCard;

Salin selepas log masuk

3. Struktur Dipacu Domain

Struktur ini memfokuskan pada penyusunan komponen mengikut domain atau konteks terhad projek anda. Ini menjadikan struktur ini sesuai untuk sistem kompleks yang memerlukan pemisahan domain yang jelas

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

Salin selepas log masuk

contoh:

Produk: 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={imageUrl} alt={name} className="product-card-image" />
    <div className="product-card-info">
      <h3>{name}</h3>
      <p>${price.toFixed(2)}</p>
      <button onClick={onAddToCart}>Add to Cart</button>
    </div>
  </div>
);

export default ProductCard;

Salin selepas log masuk

Troli: 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>Cart Summary</h3>
    <p>Total Items: {totalItems}</p>
    <p>Total Price: ${totalPrice.toFixed(2)}</p>
    <button>Checkout</button>
  </div>
);

export default CartSummary;

Salin selepas log masuk

4. Pembangunan Dipacu Komponen (CDD) dengan Buku Cerita

Struktur ini direka bentuk untuk menyokong pembangunan merentas platform. Pembangunan Dipacu Komponen (CDD) menggunakan Buku Cerita yang membolehkan anda membangun dan menguji komponen dalam format yang berasingan daripada aplikasi utama

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

Salin selepas log masuk

contoh:

Butang: 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} ${styles[variant]}`} onClick={onClick}>
    {label}
  </button>
);

export default Button;

Salin selepas log masuk

Butang: Button.stories.tsx (Buku Cerita)

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 {...args} />;

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',
};

Salin selepas log masuk

5. Perpustakaan Komponen Dikongsi

Dalam projek di mana beberapa pasukan bekerjasama Mewujudkan struktur yang menggunakan komponen biasa adalah penting. Struktur ini menekankan pengasingan komponen yang boleh digunakan semula sepanjang projek

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

Salin selepas log masuk

ตัวอย่าง:

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>{title}</h2>
        <button className={styles.closeButton} onClick={onClose}>
          &times;
        </button>
        <div className={styles.modalContent}>{children}</div>
      </div>
    </div>
  );
};

export default Modal;

Salin selepas log masuk

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={avatarUrl} alt={name} className="profile-avatar" />
    <h1>{name}</h1>
    <p>{bio}</p>
  </div>
);

export default ProfileHeader;

Salin selepas log masuk

Factors to Consider When Structuring Components

Reusability: ควรแยก component ที่สามารถใช้ซ้ำได้ออกจาก component ที่เฉพาะเจาะจงกับฟีเจอร์
Maintainability: การจัดโครงสร้างที่ดีช่วยให้การดูแลรักษาและการอัพเดตโปรเจคเป็นไปอย่างราบรื่น
Scalability: โครงสร้างที่ดีจะช่วยให้การขยายฟีเจอร์และการเพิ่ม component ใหม่ ๆ เป็นเรื่องง่าย
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 ของโปรเจคได้อย่างมีประสิทธิภาพและเหมาะสมกับความต้องการของโปรเจคของคุณ!

Atas ialah kandungan terperinci Menyusun folder komponen projek Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!