JSX to nie HTML

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 4 z 42.

JSX wygląda jak HTML, ale znajduje się wewnątrz JavaScriptu, co wiąże się z kilkoma drobnymi różnicami, z którymi będziesz się często spotykać:

1. className zamiast class. class jest słowem zastrzeżonym w JavaScript, dlatego JSX zmienia nazwę atrybutu:

<p className="warning">Careful!</p>

2. Każdy znacznik musi być zamknięty. HTML wybacza <br> i <input>; JSX nie. Znaczniki samozamykające kończą się na />:

<input id="name" />
<br />

3. Atrybuty zapisane w camelCase. Atrybuty składające się z wielu słów zapisuje się w camelCase: onclick → onClick, tabindex → tabIndex. Będziesz często używać onClick, gdy przejdziemy do zdarzeń.

Wyzwanie

Początkujący

Akapit poniżej wymaga klasy CSS, dodanej w sposób właściwy dla JSX.

Przypisz akapitowi klasę CSS notice (pamiętaj: JSX nie używa nazwy atrybutu class).
Pozostaw jego identyfikator i tekst bez zmian.

Spróbuj swoich sił

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>