Bir Web Sitesine React Eklemek

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

React, aşamalı olarak benimsenmesi için en baştan tasarlandı, ve ihtiyacınız kadar az veya daha fazla React kullanabilirsiniz. Belki de varolan bir sayfaya sadece 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 yapım aracı olmadan sadece birkaç satır kod ile web sitenizin küçük bir bölümüne React’ı deneyin. Daha sonra içeriğini aşamalı olarak genişletebilir veya birkaç dinamik araca dahil edebilirsiniz.


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 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 konteynerınız 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'ı 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@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/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');
ReactDOM.render(e(LikeButton), domContainer);

Bu iki kod satırı ilk adımda HTML’e eklediğimiz <div>‘i bulur ve ardından içinde React bileşeni “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, sayfanın React destekli bölümleri birbirinden izole edilirken çoğunlukla kullanışlıdır. Bunun yerine React kodunun içinde bileşen kompozisyonu kullanmak daha kolaydır.

İpucu: Üretim İç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’ın 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@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/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’ı 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 oynayabileceğiniz JSX ile ö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 önişlemcisi 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:

  1. Adım 1: npm init -y komutunu çalıştır (başarısız olursa, bu düzeltmeye bakınız.)
  2. 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 is not a typo — it’s a package runner tool that comes with npm 5.2+.

If you see an error message saying “You have mistakenly installed the babel package”, you might have missed the previous step. Perform it in the same folder, and then try again.

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 dosya 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ı istiyorsanız, 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!