HTML Template to React JSX

Admin

5 days ago

You have to convert your html code to JSX, there are online tools for this you can google it.

https://transform.tools/html-to-jsx

https://codebeautify.org/html-to-jsx-converter

1. Convert HTML to JSX

React uses JSX, so you need to adjust the HTML code to adhere to JSX syntax rules.

2. JSX Conversion

Replace class with className.
Self-close tags like <img> and <input />.
Ensure attributes (like alt, src) are enclosed in quotes.
Wrap the outermost element in a <React.Fragment> or <div> (if not already enclosed in a single root element).

3. Header.js Code

Here’s the converted JSX (Example):

import React from 'react';
import { Link } from 'react-router-dom'; // Assuming you're using React Router for navigation.

const Header = () => {
  return (
    <header className="header-section">
      <div className="container container-cus">
        <div className="header-container">
          {/* Logo */}
          <Link to="/" className="logo-top">
            <img src="images/logos/APC-(RK).svg" height="50px" alt="Logo" />
          </Link>

          <div className="nav-search-header">
            {/* Menu Icon for Mobile */}
            <i className="fas fa-bars menu-icon"></i>

            {/* Navbar */}
            <nav className="custom-navbar">
              <ul>
                <li className="drp">
                  <a href="#">
                    Home <i className="fas fa-angle-down"></i>
                  </a>
                  <ul className="drp-menu">
                    <li>
                      <Link to="/">Home v1</Link>
                    </li>
                    <li>
                      <Link to="/home-v2">Home v2</Link>
                    </li>
                  </ul>
                </li>
                <li className="drp">
                  <a href="#">
                    Solutions <i className="fas fa-angle-down"></i>
                  </a>
                  <ul className="drp-menu">
                    <li>
                      <Link to="/product-list">AI & Deep Learning Workstations</Link>
                    </li>
                    <li>
                      <Link to="/product-list">AI & Deep Learning Servers</Link>
                    </li>
                    <li>
                      <Link to="/product-list">Data Science</Link>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#">Components</a>
                </li>
                <li>
                  <a href="#">Build it Yourself</a>
                </li>
                <li>
                  <Link to="/blog">Blog</Link>
                </li>
                <li>
                  <Link to="/contact-us">Contact Us</Link>
                </li>
              </ul>
            </nav>

            {/* Search */}
            <div className="header-search">
              <i className="fas fa-search header-search-icon"></i>
            </div>

            {/* Cart */}
            <a href="#" className="btn-comm gradient btn-cart">
              <img src="images/cart.png" alt="Cart" />
            </a>
          </div>
        </div>
      </div>

      {/* Search Input */}
      <div className="header-search-inputGrp">
        <div className="container container-cus header-search-container">
          <form>
            <div className="header-search-inputGrpInn">
              <input type="text" className="form-control" placeholder="Search..." />
              <button className="btn-comm">
                <i className="fas fa-search"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </header>
  );
};

export default Header;

import React from 'react';

import { Link } from 'react-router-dom'; // Assuming you're using React Router for navigation.

const Header = () => {

return (

{/* Logo */}

</Link>

{/* Menu Icon for Mobile */}

{/* Navbar */}

<ul>

Home <i className="fas fa-angle-down"></i>

</a>

<li>

</li>

<li>

</li>

</ul>

</li>

Solutions <i className="fas fa-angle-down"></i>

</a>

<li>

<Link to="/product-list">AI & Deep Learning Workstations</Link>

</li>

<li>

<Link to="/product-list">AI & Deep Learning Servers</Link>

</li>

<li>

<Link to="/product-list">Data Science</Link>

</li>

</ul>

</li>

<li>

<a href="#">Components</a>

</li>

<li>

<a href="#">Build it Yourself</a>

</li>

<li>

</li>

<li>

<Link to="/contact-us">Contact Us</Link>

</li>

</ul>

</nav>

{/* Search */}

</div>

{/* Cart */}

</a>

</div>

{/* Search Input */}

<form>

</button>

</div>

</form>

</div>

</header>

);

};

export default Header;