Bir Web Sitesine React Eklemek

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

İhtiyacınız kadar az veya daha fazla React kullanın.

React, baştan sona aşamalı olarak benimsenmesi için tasarlandı. React’i ihtiyacınız kadar az veya daha fazla kullanabilirsiniz. Belki de sadece var olan bir sayfaya biraz “interaktif parçalar” eklemek istiyorsunuz. React bileşenleri bunu yapmak için harika bir yoldur.

Web sitelerinin çoğu, tek sayfalı uygulamalar değildir ve olması da gerekmez. Hiçbir kurulum aracı olmadan sadece birkaç satır kod ile web sitenizin küçük bir bölümünde React’i deneyin. Daha sonra içeriğini aşamalı olarak genişletebilir veya sadece birkaç dinamik bileşen olarak tutabilirsiniz.

Bir Dakikada React Ekleyin
İsteğe bağlı: JSX ile React’i deneyin (ek pakete gerek yok!)

Bir Dakikada React Eklemek

Bu bölümde, mevcut bir HTML sayfasına nasıl React bileşeni ekleneceğini göstereceğiz. Kendi web sitenizle birlikte takip edebilir veya pratik yapmak için boş bir HTML dosyası oluşturabilirsiniz.

Karmaşık bir araç veya yükleme gereksinimi olmayacak. Bu bölümü tamamlamak için sadece bir internet bağlantısına ve bir dakikanıza ihtiyacınız var.

İsteğe bağlı: Tüm örneği indirin (2KB sıkıştırılmış)

Adım 1: HTML koduna bir Div Ekleme

İlk önce, düzenlemek istediğiniz HTML sayfasını açın. React ile bir şey görüntülemek istediğiniz yeri işaretlemek için boş bir <div> etiketi ekleyin. Örneğin:

<!-- ... mevcut HTML ... -->

<div id="like_button_container"></div>
<!-- ... mevcut HTML ... -->

Bu <div>‘e özgün bir id HTML özelliği verdik. Bu id, daha sonra JavaScript kodundan bu <div>‘i bulmamıza ve içinde bir React bileşeni göstermemize izin verir.

İpucu

<body> etiketinin içinde herhangi bir yere böyle bir <div> yerleştirebilirsiniz. Tek bir sayfada istediğiniz kadar bağımsız DOM konteyneriniz olabilir. Bunlar genellikle boştur. React, DOM konteynerlerinin içindeki mevcut tüm içeriği değiştirir.

Adım 2: Script Etiketlerini Ekleyin

Daha sonra, </body> etiketini kapatmadan hemen önce HTML sayfasına üç <script> etiketi ekleyin:

  <!-- ... diğer HTML ... -->

  <!-- React'i yükle. -->
  <!-- Not: yayınlama için hazırlanırken, "development.js" yi "production.min.js" ile değiştirin -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- React bileşenimizi yükleyin. -->
  <script src="like_button.js"></script>
</body>

İlk iki etiket React’i yükler. Üçüncüsü, bileşen kodunuzu yükleyecektir.

Adım 3: Bir React Bileşeni Oluşturun

HTML sayfanızın yanına like_button.js adlı bir dosya oluşturun.

Bu başlangıç kodunu açın ve oluşturduğunuz dosyaya yapıştırın.

İpucu

Bu kod, LikeButton adı verilen bir React bileşenini tanımlar. Henüz anlamadıysanız endişelenmeyin. React’in yapı taşlarını daha sonra uygulamalı eğitim ve ana kavramlar rehberinde ele alacağız. Şimdilik sadece ekranda gösterelim!

Başlangıç kodundan sonra, like_button.js‘in en altına iki satır ekleyin :

// ... yapıştırdığınız başlangıç kodu ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

Bu üç kod satırı ilk adımda HTML’e eklediğimiz <div>‘i bulur ve ardından içinde React bileşeni olan “Beğen” düğmesini gösterir.

Bu kadar!

Dördüncü adım yok. Web sitenize ilk React bileşenini eklediniz bile.

React’i entegre etmekle ilgili daha fazla İpucu için sonraki bölümlere göz atın.

Örnek kaynak kodunun tamamını görüntüleyin

Tüm örneği indirin (2KB sıkıştırılmış)

İpucu: Bir Bileşeni Yeniden Kullanma

Genellikle, HTML sayfasındaki React bileşenlerini birden fazla yerde görüntülemek isteyebilirsiniz. “Like” düğmesini üç kez görüntüleyen ve bazı verileri ona ileten bir örnek:

Örnek kaynak kodunun tamamını görüntüleyin

Tüm örneği indirin (2KB sıkıştırılmış)

Not

Bu strateji çoğunlukla, sayfanın React destekli bölümleri birbirinden izole edilirken kullanışlıdır. Bunun yerine React kodunun içinde bileşen kompozisyonu kullanmak daha kolaydır.

İpucu: Canlı Ortam İçin JavaScript’i Küçültün

Web sitenizi yayına almadan önce, küçültülmemiş JavaScript’in sayfanızı kullanıcılarınız için önemli ölçüde yavaşlatabileceğine dikkat edin.

Uygulama komut dosyalarını küçültürseniz ve yayınlamaya hazır hale getirilen HTML’in de React’in production.min.js içinde biten sürümlerini yüklediğinden emin olursanız siteniz yayına hazır olur:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

JavaScript dosyalarınız için bir küçültme adımınız yoksa ayarlamanın bir yolu budur.

İsteğe bağlı: React’i JSX ile deneyin

Yukarıdaki örneklerde, yalnızca tarayıcılar tarafından doğal olarak desteklenen özelliklere itibar ettik. Bu yüzden React’e ne göstereceğini söylemek için bir JavaScript fonksiyon çağrısı kullandık:

const e = React.createElement;

// Bir "Like" <button>'u göster
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

Bunun yerine, React’te JSX kullanma seçeneği de mevcuttur:

// Bir "Like" <button>'u göster
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

Bu iki kod parçacığı eşdeğerdir. JSX tamamen isteğe bağlı olsa da, hem React’i hem de diğer kütüphaneleri kullanan birçok kişi, kullanıcı arayüzü kodu yazmak için JSX’i yararlı bulmaktadır.

Bu çevrimiçi dönüştürücüyü kullanarak JSX ile oynayabilirsiniz.

JSX’i hızlıca deneyin

JSX’i projenizde denemenin en hızlı yolu, bu <script> etiketini sayfanıza eklemektir:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Şimdi JSX’i, herhangi bir <script> etikete type="text/babel" niteligini ekleyerek kullanabilirsiniz. İşte indirebileceğiniz ve JSX ile oynayabileceğiniz örnek bir HTML dosyası.

Bu yaklaşım, öğrenmek ve basit demolar oluşturmak için iyidir. Ancak, web sitenizi yavaşlatır ve uygulamayı yayınlamaya uygun değildir. İlerlemeye hazır olduğunuzda, bu yeni <script> etiketi ve eklediğiniz type="text/babel" özelliklerini kaldırın. Bunun yerine, bir sonraki bölümde tüm <script> etiketlerinizi otomatik olarak dönüştürmek için bir JSX ön-işleyici kuracaksınız.

Bir projeye JSX ekleme

Bir projeye JSX eklemek, bir paketleyici veya geliştirme sunucusu gibi karmaşık araçlar gerektirmez. Temel olarak, JSX eklemek bir CSS ön işleyicisi eklemek gibi bir şeydir. Tek gereksinim, bilgisayarınızda Node.js‘in yüklü olması.

Terminal içinde proje klasörünüze gidin ve şu iki komutu yapıştırın:

Adım 1: npm init -y komutunu çalıştır (başarısız olursa, bu düzeltmeye bakınız.)
Step 2: npm install babel-cli@6 babel-preset-react-app@3 komutunu çalıştır

İpucu

Burada sadece JSX ön-işleyici yüklemek için npm kullanıyoruz; başka hiçbir şey için buna ihtiyacınız olmayacak. Hem React hem de uygulama kodu, <script> etiketi olarak değişiklik yapılmadan kalabilir.

Tebrikler! Projenize bir yayına hazır JSX kurulumu eklediniz bile.

JSX Ön-işleyicisini Çalıştırın

src adında bir klasör oluşturun ve bu terminal komutunu çalıştırın:

npx babel --watch src --out-dir . --presets react-app/prod

Not

npx bir harf hatası değildir. npm 5.2+ ile birlikte gelen bir paket çalıştırma aracıdır..

Eğer “You have mistakenly installed the babel package” şeklinde bir hata mesajı görürseniz, bir önceki adımı atlamış olabilirsiniz. Aynı klasör altında adımı uygulayıp tekrar deneyin.

Bitmesini beklemeyin — bu komut JSX için otomatik bir izleyici başlatır.

Şimdi JSX başlangıç kodu ile src/like_button.js adlı bir dosya oluşturursanız, izleyici tarayıcıya uygun sade JavaScript koduyla oluşturulmuş bir önişlenmiş like_button.js dosyası oluşturur. Kaynak dosyayı JSX ile düzenlediğinizde, dönüştürme otomatik olarak yeniden çalıştırılır.

Bu aynı zamanda eski tarayıcılarda çökme konusunda endişelenmeden, sınıflar (classes) gibi modern JavaScript sözdizimi özelliklerini kullanmanızı sağlar. Az önce kullandığımız araca Babel denir ve bu dokümantasyondan daha fazla bilgi edinebilirsiniz.

Yapı araçlarıyla rahat edeceğinizi fark ederseniz ve onların sizin için daha fazlasını yapmalarını isterseniz, bir sonraki bölümde en popüler ve ulaşılabilir araç serilerinden bazıları açıklanmaktadır. Yapı araçlarını istemiyorsanız bu script etiketleri de yeterli olacaktır!

Bu sayfayı yararlı buldun mu?Bu sayfayı düzenle