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.

Temel fikir basittir: 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. Bütün bir sayfa just bileşenlerin içindeki bileşenlerden oluşur.

Bir component hiç de korkutucu değildir: ekranda görünmesi gereken şeyi return eden bir JavaScript function’dır:

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 senin için zaten yazılmış first React component.

Yapman gerekenler:

App.jsx dosyasını oku: bu, JSX döndüren bir function.
Run düğmesine bas.
Sağdaki önizlemede component’in döndürdüğü içeriğin render edilmesini izle.

React döngüsünün tamamı budur: bir component JSX returns ve React bunu ekrana yerleştirir. Bir sonraki dersten itibaren JSX’i kendin yazarsın.

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>