How to Convert HTML to React Component

Writing code in React for over the years has taught me one thing. You don’t always have to start from scratch.

Often, you already have a beautiful HTML template or a legacy web page. You just need to bring it into the modern React ecosystem.

In this guide, I will show you exactly how to convert HTML to a React component. I’ll share the methods I use in my daily professional work.

Difference Between HTML and JSX

Before we jump into the code, you need to know that React doesn’t use standard HTML. It uses JSX (JavaScript XML).

JSX looks like HTML, but it has a few strict rules that will break your app if you ignore them.

In my experience, the most common mistakes happen with attribute names and self-closing tags.

Key Changes You Must Make:

• class to className: In React, class is a reserved keyword in JavaScript. You must use className.
• for to htmlFor: Similarly, for is reserved, so use htmlFor for form labels.
• Self-closing tags: Tags like <img>, <br>, and <input> must be closed with a slash, like <img />.
• Style attribute: You cannot use a string for styles. It must be a JavaScript object.

Method 1: Manual Conversion (Best for Small Components)

When I have a small snippet, like a pricing card or a navigation bar, I prefer manual conversion.

It gives me full control over the structure and allows me to spot potential bugs early.

Let’s take a look at a real-world example: a Product Card for a US-based e-commerce store.

The Original HTML Code:

<div class="product-card">
    <img src="https://example.com/iphone.jpg" alt="iPhone 15">
    <h2>iPhone 15 Pro</h2>
    <p>Price: $999</p>
    <button onclick="addToCart()">Buy Now</button>
</div>

The Converted React Component:

import React from 'react';

const ProductCard = () => {
  const addToCart = () => {
    alert('Added to your US Shopping Cart!');
  };

  return (
    <div className="product-card">
      <img src="https://example.com/iphone.jpg" alt="iPhone 15" />
      <h2>iPhone 15 Pro</h2>
      <p>Price: $999</p>
      <button onClick={addToCart}>Buy Now</button>
    </div>
  );
};

export default ProductCard;

You can refer to the screenshot below to see the output.

I changed class to className, closed the img tag, and updated onclick to the React-style onClick.

Method 2: Handle Dynamic HTML with dangerouslySetInnerHTML

Sometimes, you might receive raw HTML strings from an API or a CMS like WordPress.

In these cases, you can’t manually convert every string. React provides a property called dangerouslySetInnerHTML.

I use this sparingly because it can expose your site to XSS (Cross-Site Scripting) attacks.

Here is how I safely implement it using a sample “Newsletter Signup” confirmation from a US marketing tool.

The React Code with Sanitization:

import React from 'react';

const NewsletterFeedback = () => {
  // Assume this HTML string comes from an external API
  const rawHTML = "<strong>Success!</strong> Your subscription for <em>US Tech Weekly</em> is confirmed.";

  return (
    <div className="alert-box">
      {/* Warning: Always sanitize HTML before using this. 
        I recommend using a library like DOMPurify.
      */}
      <div dangerouslySetInnerHTML={{ __html: rawHTML }} />
    </div>
  );
};

export default NewsletterFeedback;

You can refer to the screenshot below to see the output.

This method is fast, but I always remind my team to use it only when the source is trusted.

Method 3: Use html-react-parser (The Pro Approach)

If you need to convert a large amount of HTML and still want to manipulate it as React elements, this is the way to go.

The html-react-parser library converts an HTML string into actual React elements without using dangerouslySetInnerHTML.

I find this extremely useful when I need to replace specific tags with custom React components.

Full Example Code:

First, install the package: npm install html-react-parser

Then, use it in your component:

import React from 'react';
import parse from 'html-react-parser';

const BlogContent = () => {
  const htmlString = `
    <div class="container">
      <h1>Investing in the US Stock Market</h1>
      <p>Learn how to trade on the NYSE and NASDAQ.</p>
      <a href="/guides/trading" class="btn">Read More</a>
    </div>
  `;

  // We can even replace the <a> tag with a custom React Link
  const options = {
    replace: (domNode) => {
      if (domNode.name === 'a') {
        return <button className="custom-btn">Click to View Guide</button>;
      }
    }
  };

  return (
    <div className="post-wrapper">
      {parse(htmlString, options)}
    </div>
  );
};

export default BlogContent;

You can refer to the screenshot below to see the output.

This method gives you the flexibility of a parser with the power of React’s component logic.

Tips for Ranking Your React Pages on Google

Converting the code is only half the battle. If you want your React components to rank high, you must focus on SEO.

I have built many high-traffic sites in the US, and these three tips always work for me:

1. Use Semantic HTML

Even inside JSX, use <header>, <main>, <footer>, and <article>. Search engines love clear structures.

2. Optimize for Core Web Vitals

React apps can sometimes be heavy. Use lazy loading for images and components to keep your “Largest Contentful Paint” (LCP) score green.

3. Server-Side Rendering (SSR)

If SEO is your main goal, consider using frameworks like Next.js. It renders your React components into HTML on the server.

Common Issues to Avoid

Throughout my career, I’ve seen senior developers trip over these simple things.

One major issue is the style attribute. In HTML, you write style=”color: red; font-size: 20px;”.

In React, you must write it as an object: style={{ color: ‘red’, fontSize: ’20px’ }}.

Also, never forget to add a key prop when you are converting a list of HTML elements into a React loop.

Converting HTML to React doesn’t have to be a headache. Once you understand the JSX rules, it becomes second nature.

I hope this guide helps you move your projects to React faster and with fewer bugs.

If you are working on a large-scale US application, I recommend the library approach for efficiency.

For smaller components, stick to the manual method to keep your bundle size small.

You may also like to read:

• Check if a React Component is Mounted
• React Component State Management
• Build a React HTML Editor Component
• How to Build a React Carousel Component

Bijay Kumar

I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.

enjoysharepoint.com/