React Builder

React Application Builder

Purpose

Build production React applications with clean component architecture, reusable hooks, and optimal performance.

Project Structure

src/
├── components/
│   ├── ui/              # Reusable UI components (Button, Input, Modal)
│   └── features/        # Feature-specific components
├── hooks/               # Custom hooks
├── services/            # API calls
├── stores/              # State management (Zustand)
├── utils/               # Utilities
└── types/               # TypeScript types

Component Patterns

// Compound component pattern
const Select = ({ children, value, onChange }: SelectProps) => {
  return (
    <SelectContext.Provider value={{ value, onChange }}>
      <div className="select-container">{children}</div>
    </SelectContext.Provider>
  );
};

Select.Option = ({ value, children }: OptionProps) => {
  const { value: selected, onChange } = useSelectContext();
  return (
    <div
      role="option"
      aria-selected={selected === value}
      => onChange(value)}
    >
      {children}
    </div>
  );
};

// Usage
<Select value={city}
  <Select.Option value="nyc">New York</Select.Option>
  <Select.Option value="la">Los Angeles</Select.Option>
</Select>

Custom Hooks

// Data fetching hook with caching
function usePost(id: string) {
  const [state, setState] = useState<{
    data: Post | null;
    loading: boolean;
    error: Error | null;
  }>({ data: null, loading: true, error: null });

  useEffect(() => {
    const controller = new AbortController();
    
    api.getPost(id, controller.signal)
      .then(data => setState({ data, loading: false, error: null }))
      .catch(error => {
        if (!controller.signal.aborted) {
          setState({ data: null, loading: false, error });
        }
      });
    
    return () => controller.abort();
  }, [id]);

  return state;
}

Performance

// Memoization
const ExpensiveComponent = memo(({ data }: Props) => {
  const processed = useMemo(() => processData(data), [data]);
  const handleClick = useCallback(() => doSomething(data), [data]);
  return <div
});

// Lazy loading
const HeavyChart = lazy(() => import('./HeavyChart'));

<Suspense fallback={<ChartSkeleton />}>
  <HeavyChart data={data} />
</Suspense>

Outputs

1. Component library structure
2. Custom hooks for data fetching, forms, auth
3. State management setup (Zustand/React Query)
4. Performance optimization patterns
5. Testing setup with React Testing Library