JSX, HTML Değildir

Coddy'nin React Journey'sinin Temeller bölümünün bir parçası — ders 4 / 42.

JSX, HTML gibi görünür ancak JavaScript içinde yer alır ve bu durum sürekli karşılaşacağınız birkaç küçük farkı zorunlu kılar:

1. class yerine className. class, JavaScript'te rezerve edilmiş bir sözcük olduğundan JSX bu özniteliği yeniden adlandırır:

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

2. Her etiket kapanmalıdır. HTML <br> ve <input> etiketlerini tolere eder; JSX etmez. Kendi kendini kapatan etiketler /> ile biter:

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

3. camelCase öznitelikler. Çok kelimeli öznitelikler camelCase haline gelir: onclick → onClick, tabindex → tabIndex. Olaylar konusuna geldiğimizde onClick yapısını bolca kullanacaksınız.

Görev

Başlangıç

Aşağıdaki paragrafın JSX yöntemine uygun bir CSS sınıfına ihtiyacı var.

Paragrafa notice CSS sınıfını verin (unutmayın: JSX class öznitelik adını kullanmaz).
Bunun id değerini ve metnini değiştirmeden tutun.

Kendin dene

<!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>