className and htmlFor

In HTML, you give an element a class with the attribute class. In JSX, it's className:

<p className="headliner">Night Trains, 20:00</p>

Why another name? JSX turns into JavaScript, and the attributes into an object: { className: "headliner", children: "Night Trains, 20:00" }. React uses the names that JavaScript has for elements, and in JavaScript, an element's class is element.className, because class is a word that JavaScript keeps for itself. On the page, it's an ordinary class attribute, and the CSS in style.css works as you know it.

The same goes for the attribute for of a label, which says which field the label belongs to. for is a loop in JavaScript, so in JSX, it's htmlFor:

<label htmlFor="email">Email</label>
<input id="email" />

If you write class or for anyway, the page usually looks right, because React passes them on to the browser. But the console shows a warning:

Invalid DOM property `class`. Did you mean `className`?

Take it as a mistake and fix it: in JSX, the names are className and htmlFor.