React Nedir?

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

React, kullanıcı arayüzleri oluşturmak için dünyanın en popüler kütüphanesidir. Facebook, Netflix, Airbnb: her gün kullandığın web'in etkileşimli bölümleri onunla oluşturulmuştur.

Büyük fikir basit: tek bir dev sayfa yazmak yerine, bileşenler adı verilen küçük, yeniden kullanılabilir parçalar oluşturursun. Bir düğme bir bileşendir. Bir profil kartı bir bileşendir. Tüm bir sayfa, bileşenlerin içindeki bileşenlerden ibarettir.

Bir bileşen korkulacak bir şey değildir: ekranda görünmesi gereken şeyi döndüren bir JavaScript işlevidir:

function App() {
    return <h1>Hello, React!</h1>;
}

JavaScript içindeki HTML’e benzeyen şeye JSX adı verilir. Ekranı, mantığın bulunduğu yerde tanımlamana olanak tanır. React, bileşenlerinin döndürdüğü şeyi alır ve gerçek sayfayı senkronize tutar. Ne istediğini tanımlarsın; React, tarayıcıyı nasıl güncelleyeceğini bulur.

Bu kursta küçük bir React uygulamasının ana bileşeni olan App.jsx dosyasını düzenleyeceksin. Sağdaki önizleme, yazdıkça uygulamanı canlı olarak gösterir. Bir şeyler oluşturalım.

Görev

Başlangıç

İşte sizin için önceden yazılmış ilk React bileşeniniz.

Yapmanız gerekenler:

App.jsx dosyasını okuyun: JSX döndüren bir işlevdir.
Çalıştır düğmesine basın.
Sağdaki önizlemede, bileşenin döndürdüğü içeriğin nasıl oluşturulduğunu izleyin.

React döngüsünün tamamı bundan ibarettir: bir bileşen JSX döndürür ve React bunu ekrana yerleştirir. Bir sonraki dersten itibaren JSX'i kendiniz yazacaksınız.

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>