How to Convert HTML UI Components into React Components

Converting HTML to React is mostly mechanical, but there are traps. Here's the complete checklist:

1. ✅ `class` → `className` 2. ✅ `for` (on labels) → `htmlFor` 3. ✅ `onclick` → `onClick` (camelCase all event handlers) 4. ✅ Self-close void elements: `<input>` → `<input />`, `<br>` → `<br />` 5. ✅ Inline styles: string `style="color:red"` → object `style={{ color: 'red' }}` 6. ✅ Comments: `<!-- -->` → `{/* */}` 7. ✅ Wrap everything in one parent element (or `<>` Fragment) 8. ✅ `tabindex` → `tabIndex` 9. ✅ `maxlength` → `maxLength` 10. ✅ Extract repeated markup into loops using `.map()`

This is the most common and most essential conversion:

HTML:

<button class="btn btn-primary btn-lg">
  Launch App
</button>

React:

<button className="btn btn-primary btn-lg">
  Launch App
</button>

For conditional classes, React developers use template literals or the `clsx` library:

import clsx from 'clsx';

<button className={clsx('btn', {
  'btn-primary': variant === 'primary',
  'btn-ghost': variant === 'ghost',
  'btn-sm': size === 'sm',
  'btn-disabled': disabled
})}>
  Launch App
</button>

HTML inline styles are strings. React inline styles are JavaScript objects with camelCase property names:

HTML:

<div style="background-color: #6C63FF; border-radius: 12px; padding: 20px 24px;">
  Content
</div>

React:

<div style={{
  backgroundColor: '#6C63FF',
  borderRadius: '12px',
  padding: '20px 24px'
}}>
  Content
</div>

The conversion rules: - Hyphenated properties → camelCase (`background-color` → `backgroundColor`) - Values are strings (quoted) except for unitless numbers - `font-size: 16px` → `fontSize: '16px'` (string) but `opacity: 0.5` → `opacity: 0.5` (number)

HTML event attributes are lowercase strings. React events are camelCase function references:

HTML:

<button onclick="handleClick()" onmouseenter="showTooltip()">
  Click Me
</button>

React:

<button onClick={handleClick} onMouseEnter={showTooltip}>
  Click Me
</button>

For inline handlers, don't call the function — pass a reference or wrap in an arrow function:

{/* Wrong — this runs on render, not on click */}
<button onClick={handleClick()}>Click</button>

{/* Correct — passes the function reference */}
<button onClick={handleClick}>Click</button>

{/* If you need to pass arguments */}
<button onClick={() => handleClick(itemId)}>Click</button>

The final step — turn hardcoded values into props so the component can be reused:

Before (hardcoded HTML):

<div class="alert alert-error">
  <svg class="alert-icon">...</svg>
  <p>Your session has expired. Please log in again.</p>
</div>

After (flexible React component):

function Alert({ type = 'info', message, icon }) {
  const icons = {
    info: <InfoIcon />,
    error: <ErrorIcon />,
    success: <CheckIcon />,
    warning: <WarningIcon />,
  };

  return (
    <div className={`alert alert--${type}`}>
      {icons[type]}
      <p>{message}</p>
    </div>
  );
}

// Usage:
<Alert type="error" message="Your session has expired. Please log in again." />
<Alert type="success" message="Profile updated successfully!" />

One component now covers all four alert states with clean, prop-driven markup. This is the core of component thinking: identify what varies, make it a prop.

UIXplor's built-in playground makes this even easier. When you find a component you like:

1. Click Details on any component in a collection 2. Switch to the React or Next.js tab 3. The conversion is done automatically — `class` → `className`, wrapped in a component 4. Click Open in Playground to edit the React version live in your browser 5. Copy the final code or download it

This workflow takes what would be a 10-minute manual conversion and makes it instantaneous. The project structure shown on each component's detail page also tells you exactly where to put the files in your React or Next.js project.