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
classwithclassName. - 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):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | 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; |