Problems inserting my html code into App.js - html

Question

I made my frontend for a ecommerce site project and wanted to insert my made html code into my React project. When copy and pasting my code into App.js i got multiple problems and errors which are actually really simple problems but the normal fix won't do it.
My tag connects with my closing div tag and so my open div tag has no closing tag no more.
Ive added some pictures with their errors to make it easier to see.
function App() {
return (
<div className="header">
<div className="container">
<div className="navbar">
<a href="index.html" class="logo">
<h1 style="font-size: 30px;">FLOWERPOWER!<br/>WWW.FLOWERPOWER.NL</h1>
</a>
<nav>
<ul id="MenuItems">
<li>Home</li>
<li>Producten</li>
<li>Tips</li>
<li>Over ons</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
<img src="images/cart.png" width="30px" height="30px"/>
<img src="images/menu.png" class="menu-icon" onclick="menutoggle()"/>
</div>
<div className="row">
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br/>
Bezorging in heel Nederland<p/>
Kies uit! →
</div>
<div className="col-2">
<img src="images/banner.png"/>
</div>
</div>
</div>
</div>
<div className="categorieen">
<div className="small-container">
<h2 className="title" style="font-size: 50px"> Boeket van de maand</h2>
<div className="row">
<div className="col-3">
<img src="images/featuredbloem.jpg"/>
</div>
</div>
</div>
</div>
<div className="small-container">
<h2 className="title" style="font-size: 50px">Featured product</h2>
<div className="row">
<div className="col-4">
<a href="producten/passievol-details.html">
<img src="images/bloem1.png"/></a>
<h4>Passievol</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 79,95</p>
</div>
<div className="col-4">
<a href="producten/welkompasen-details.html">
<img src="images/bloem2.png"/></a>
<h4>Welkom Pasen</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 19,95</p>
</div>
<div className="col-4">
<a href="producten/vrolijkpasen-details.html">
<img src="images/bloem3.png"/></a>
<h4>Vrolijk Pasen</h4>
<div className="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 29,95</p>
</div>
<div className="col-4">
<a href="producten/eindelijkvoorjaar-details.html">
<img src="images/bloem4.jpg"/></a>
<h4>Eindelijk voorjaar</h4>
<div class="rating">
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="fas fa-star"></i>
<i className="far fa-star"></i>
</div>
<p>vanaf $ 24,95</p>
</div>
</div>
</div>
<div className="footer">
<div className="container">
<div className="row">
<div className="footer-col-1">
<h3>FLOWERPOWER</h3>
<ul>
<li>Over Ons</li>
<li>Contact</li>
<li>Tips</li>
<li>Lorum</li>
<li>Lorum</li>
<li>Lorum</li>
</ul>
</div>
<div className="footer-col-2">
<h3>Zakelijk</h3>
<ul>
<li>Lorum</li>
<li>Lorum</li>
<li>Lorum</li>
</ul>
</div>
</div>
</div>
</div>
<div className="brands">
<div className="small-container">
<div className="row">
<div className="col-5">
<img src="images/logo-ideal.png"/>
</div>
<div className="col-5">
<img src="images/logo-paypal.png"/>
</div>
<div className="col-5">
<img src="images/logo-americanexpress.png"/>
</div>
<div className="col-5">
<img src="images/logo-visa.png"/>
</div>
</div>
<p className="copyright">Copyright © 2021 FLOWERPOWER! - flowerpower.nl Alle rechten voorbehouden.</p>
</div>
</div>
</div>
);
}
export default App;

Answer 1

Your screenshots shows 1 potential error.
You Misplaced closing tag for p element on line 28 screenshot 1
<p> .... <p/>
It should read
<p> .... </p>
Edit:
Your code has 2 issues,
unbalanced div tags,
style props
1st Issue:: Replace this block of code
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
Bezorging in heel Nederland<p />
Kies uit! →
</div>
<div className="col-2">
<img src="images/banner.png" />
</div>
</div>
</div>
with this
<div className="col-2">
<h1>Koop uw feestboeketten hier!</h1>
<p>Ma-za voor 14 uur besteld? Zelfde dag bezorgd,<br />
Bezorging in heel Nederland</p>
Kies uit! →
<div className="col-2">
<img src="images/banner.png" />
</div>
</div>
</div>
2nd Issue:: React style tags acceps an object, and not string
<div style={{fontSize:'20px}}></div>

Answer 2

I think the problem is coming from the fact that, the <div className="header"> ... </div> and <div className="brands"> ... </div> are not all wrapped within a single fragment in the return function. If you correct your code to:
...
function App() {
return(
<>
<div className="header"> ... </div>
<div className="brands"> ... </div>
</>
);
}
export default App;
The error will disappear. Also note that, I have replaced class="" attribute with className="".
Hope the answer is helpful.

Answer 3

React intellisense is getting mad due to you having "class". You need to rename it to className. (this is true for all JSX elements, such as div, a, p, etc...)