İlk Bileşeniniz

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

İlk bileşeninizi yazma zamanı. App.jsx dosyasına bakın. JSX döndüren bir fonksiyondur:

export default function App() {
    return (
        <div>

        </div>
    );
}

Şu anda boş bir <div> döndürüyor, bu nedenle önizleme boş görünür. İçine koyduğunuz her türlü JSX işlenir (başlıklar, paragraflar, düğmeler, her şey):

<h1 id="title">Hello, React!</h1>

id özniteliğine dikkat edin: Tıpkı HTML'de olduğu gibi çalışır ve testlerimiz öğelerinizi bulmak için id'leri kullanır. Diğer iki dosya uygulamanın altyapısını oluşturur: index.html uygulamaya ev sahipliği yapar ve main.jsx, App bileşenini sayfaya bağlar. Bunlar kilitlidir. Çalışacağınız yer App.jsx dosyasıdır.

Görev

Başlangıç

Uygulamanızın dünyayı selamlamasını sağlayın.

App.jsx içindeki <div> elemanının içine id="title" olan bir <h1> ekleyin.
Metni tam olarak Hello, React! olmalıdır.

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>