DEV Community

arenasbob2024-cell
arenasbob2024-cell

Posted on • Originally published at viadreams.cc

Converting HTML to React Components: A Practical Guide

#javascript #webdev #react #html

Migrating HTML templates to React? Here's what you need to know about converting HTML to React components.

Key Differences: HTML vs JSX

1. class → className 

// HTML
<div class="container">

// React JSX
<div className="container">
Enter fullscreen mode Exit fullscreen mode

2. for → htmlFor 

// HTML
<label for="email">Email</label>

// React JSX
<label htmlFor="email">Email</label>
Enter fullscreen mode Exit fullscreen mode

3. Inline styles become objects 

// HTML
<div style="background-color: red; font-size: 14px;">

// React JSX
<div style={{ backgroundColor: 'red', fontSize: '14px' }}>
Enter fullscreen mode Exit fullscreen mode

4. Self-closing tags 

// HTML (optional closing)
<img src="photo.jpg">
<br>
<input type="text">

// React JSX (required self-closing)
<img src="photo.jpg" />
<br />
<input type="text" />
Enter fullscreen mode Exit fullscreen mode

5. Event handlers 

// HTML
<button onclick="handleClick()">

// React JSX
<button onClick={handleClick}>
Enter fullscreen mode Exit fullscreen mode

Automated Conversion

For large HTML files, use the free HTML to React Converter to automatically:

  • Convert class to className
  • Convert for to htmlFor
  • Transform inline styles to React objects
  • Fix self-closing tags
  • Rename event handlers to camelCase
  • Wrap output in a functional component

When to Use

  • Migrating legacy HTML templates to React
  • Converting HTML from design tools (Figma HTML export)
  • Porting server-rendered templates to client-side React
  • Converting email templates to React Email components

Related Tools

Top comments (0)