Web DevelopmentNổi bật

React TypeScript Component Guide

Nguyen Van A

Lead Developer

15 tháng 1, 202515-01

1,240 lượt xem1k

#React#TypeScript#Frontend#Component

React TypeScript Component Guide

React và TypeScript là combo hoàn hảo cho phát triển ứng dụng web hiện đại.

Tạo Component cơ bản

Dưới đây là ví dụ về một Button component đơn giản:

TypeScript

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
}

export const Button: React.FC<ButtonProps> = ({ 
  children, 
  onClick, 
  variant = 'primary',
  disabled = false 
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {children}
    </button>
  );
};

React Component Structure

Props với Union Types

TypeScript cho phép bạn định nghĩa props một cách chính xác:

TypeScript

type Status = 'loading' | 'success' | 'error' | 'idle';

interface StatusProps {
  status: Status;
  message?: string;
}

const StatusIndicator: React.FC<StatusProps> = ({ status, message }) => {
  const getStatusColor = () => {
    switch(status) {
      case 'loading': return 'text-blue-600';
      case 'success': return 'text-green-600';
      case 'error': return 'text-red-600';
      default: return 'text-gray-600';
    }
  };

  return (
    <div className={`flex items-center ${getStatusColor()}`}>
      {message && <span>{message}</span>}
    </div>
  );
};