className и htmlFor

В HTML класс элементу задают атрибутом class. В JSX он называется className:

<p className="headliner">Ночные поезда, 20:00</p>

Почему имя другое? JSX превращается в JavaScript, а атрибуты — в объект: { className: "headliner", children: "Ночные поезда, 20:00" }. React берёт имена, которые JavaScript использует для элементов, а в JavaScript класс элемента — это element.className, потому что class — слово, которое JavaScript зарезервировал для себя. На странице это обычный атрибут class, и CSS из style.css работает так, как вы привыкли.

То же касается атрибута for у label, который говорит, к какому полю относится подпись. for в JavaScript — это цикл, поэтому в JSX он называется htmlFor:

<label htmlFor="email">Почта</label>
<input id="email" />

Если вы всё же напишете class или for, страница обычно выглядит правильно, потому что React передаёт их браузеру. Но консоль покажет предупреждение:

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

Считайте это ошибкой и исправляйте: в JSX эти имена — className и htmlFor.