react-development-patterns

React Development Patterns

React 18+ patterns for building modern, accessible, type-safe user interfaces.

When to Use

• Building React components with TypeScript
• Designing UI wireframes and user flows
• Implementing state management
• Creating API service layers
• Writing accessible frontend code

Component Patterns

Basic Component

import { FC } from 'react';

interface {Component}Props {
  title: string;
  variant?: 'primary' | 'secondary';
  disabled?: boolean;
  onClick?: () => void;
}

export const {Component}: FC<{Component}Props> = ({
  title,
  variant = 'primary',
  disabled = false,
  onClick,
}) => {
  return (
    <button
      className={`btn btn-${variant}`}
      disabled={disabled}
      onClick={onClick}
    >
      {title}
    </button>
  );
};

Data Fetching Component

import { FC } from 'react';
import { useQuery } from '@tanstack/react-query';
import { {entity}Service } from '@/services/{entity}Service';
import type { {Entity}Dto } from '@/types';

interface {Entity}ListProps {
  onSelect: (entity: {Entity}Dto) => void;
}

export const {Entity}List: FC<{Entity}ListProps> = ({ onSelect }) => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['{entities}'],
    queryFn: {entity}Service.getAll,
  });

  if (isLoading) return <Skeleton count={5} />;
  if (error) return <ErrorMessage error={error} />;
  if (!data?.length) return <EmptyState message="No items found" />;

  return (
    <ul role="list" aria-label="{Entity} list">
      {data.map((entity) => (
        <{Entity}Card
          key={entity.id}
          entity={entity}
          onClick={() => onSelect(entity)}
        />
      ))}
    </ul>
  );
};

API Service Pattern

import { api } from '@/lib/api';
import type { {Entity}Dto, Create{Entity}Dto, PagedResult } from '@/types';

export const {entity}Service = {
  getAll: async (params?: { skip?: number; take?: number }): Promise<PagedResult<{Entity}Dto>> => {
    const response = await api.get('/api/app/{entities}', { params });
    return response.data;
  },

  getById: async (id: string): Promise<{Entity}Dto> => {
    const response = await api.get(`/api/app/{entities}/${id}`);
    return response.data;
  },

  create: async (data: Create{Entity}Dto): Promise<{Entity}Dto> => {
    const response = await api.post('/api/app/{entities}', data);
    return response.data;
  },

  update: async (id: string, data: Partial<Create{Entity}Dto>): Promise<{Entity}Dto> => {
    const response = await api.put(`/api/app/{entities}/${id}`, data);
    return response.data;
  },

  delete: async (id: string): Promise<void> => {
    await api.delete(`/api/app/{entities}/${id}`);
  },
};