className und htmlFor

In HTML gibst du einem Element mit dem Attribut class eine Klasse. In JSX heißt es className:

<p className="hauptact">Nachtzüge, 20:00</p>

Warum ein anderer Name? JSX wird zu JavaScript, und die Attribute werden zu einem Objekt: { className: "hauptact", children: "Nachtzüge, 20:00" }. React verwendet die Namen, die JavaScript für Elemente hat, und in JavaScript heißt die Klasse eines Elements element.className, weil class ein Wort ist, das JavaScript für sich reserviert. Auf der Seite ist es ein gewöhnliches class-Attribut, und das CSS in style.css funktioniert, wie du es kennst.

Dasselbe gilt für das Attribut for eines label, das sagt, zu welchem Feld das Label gehört. for ist in JavaScript eine Schleife, deshalb heißt es in JSX htmlFor:

<label htmlFor="email">E-Mail</label>
<input id="email" />

Wenn du trotzdem class oder for schreibst, sieht die Seite meistens richtig aus, weil React sie an den Browser weitergibt. Aber die Konsole zeigt eine Warnung:

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

Sieh sie als Fehler an und behebe ihn: In JSX heißen die Namen className und htmlFor.