How do I copy a component from a website into React?

What changes between HTML and JSX

JSX looks like HTML but follows JavaScript rules. Markup copied from a page won't compile until you fix a handful of things:

• class becomes className, and for on labels becomes htmlFor.
• Void tags must close: <img> becomes <img />, same for <input>, <br> and <hr>.
• Inline style strings become objects with camelCase keys.
• Hyphenated SVG attributes become camelCase: stroke-width to strokeWidth, fill-rule to fillRule.
• HTML comments become {/* ... */}, and tabindex becomes tabIndex.

// HTML from the page
<div class="card" style="margin-top: 24px"><img src="/a.png"><label for="email">Email</label></div>

// JSX
<div className="card" style={{ marginTop: 24 }}>
  <img src="/a.png" alt="" />
  <label htmlFor="email">Email</label>
</div>

For the markup part alone, the free HTML to JSX converter handles these renames in your browser.

Bringing the styles with it

The JSX is the easy half. The hard half is the CSS, because the site's class names point at stylesheets you don't have. You have three options:

• Tailwind classes on each element. This is the most portable choice if your project already uses Tailwind, since nothing else needs to be imported.
• A CSS module next to the component, with the rules you copied from the Styles pane renamed to local class names.
• Inline styles for a quick prototype. They can't express :hover or media queries, so treat them as temporary.

export default function PlanCard() {
  return (
    <article className="rounded-2xl border border-gray-200 bg-white p-6 shadow-sm">
      <h3 className="text-sm font-semibold text-gray-500">Team</h3>
      <p className="mt-2 text-3xl font-bold text-gray-900">$49</p>
      <button className="mt-6 w-full rounded-lg bg-indigo-600 py-2 text-white hover:bg-indigo-500">
        Start trial
      </button>
    </article>
  );
}

Copy it as React with PickCode

1. Start the picker. Press Alt Shift C on the page with the component.
2. Select the component root. Hover it, use ↑ and ↓ to move to the right parent or child.
3. Switch to React. Open the code panel with Space and press 2 for React (JSX).
4. Paste into a .jsx or .tsx file. You get an exported component with className, closed tags and camelCase SVG attributes. Repeated items (3 or more) come out as an array with .map().
5. Replace content with props. Swap the hard-coded text and images for props and your own assets.

Turn it into a real component

A copied component is a snapshot with the site's text baked in. Before it ships, replace the hard-coded content with props, and turn repeated markup (feature lists, nav links, logos) into an array you map over. Give each mapped item a stable key. Swap any interactive parts, like dropdowns or tabs, for your own state or your UI library, because the page's JavaScript does not come with the markup.

Limits to know

Copied output reflects the styles applied at your current window size plus whatever responsive rules could be read. Rules from cross-origin stylesheets and CSS animations are not captured by PickCode yet. Event handlers, state and data fetching are never part of a copy: you write those.

Questions

Sources

1. React: writing markup with JSX
2. Reddit r/reactjs: convert an HTML file into JSX
3. Reddit r/react: a tool for copying UI into React
4. Chrome DevTools: view and change CSS