Bir Web Sitesine React Eklemek – 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 varolan 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 ... -->
<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'i yükle. -->
<!-- Not: yayınlama için hazırlanırken,  "development.js" yi "production.min.js" ile değiştirin -->
<!-- React bileşenimizi yükleyin. -->
İ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.
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 ...
Bu iki 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.
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:
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.
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:
İsteğe bağlı: React’i JSX ile deneyin
// Bir "Like" <button>'u göster
Bunun yerine, React’te JSX kullanma seçeneği de mevcuttur:
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:
Ş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
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 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.
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!