Var Olan Bir Projeye React Eklemek
Mevcut projenize biraz etkileşim eklemek istiyorsanız, onu React’te yeniden yazmak zorunda değilsiniz. React’i mevcut yığınınıza ekleyin ve etkileşimli React bileşenlerini istediğiniz yerde render edin.
Mevcut web sitenizin tüm alt yolu için React kullanımı
Diyelim ki example.com’da başka bir sunucu teknolojisi (Rails gibi) ile oluşturulmuş mevcut bir web uygulamanız var ve example.com/some-app/ ile başlayan tüm rotaları tamamen React ile oluşturmak istiyorsunuz.
Kurulumu şu şekilde yapmanızı öneririz:
- React tabanlı kütüphanelerden birini kullanarak uygulamanızın React bölümünü oluşturun.
- Kütüphanenizin yapılandırılmasında base path olarak
/some-app’i belirtin. (şu şekilde: Next.js, Gatsby). /some-app/altındaki tüm isteklerin React uygulamanız tarafından işlenmesi için sunucunuzu veya bir proxy’yi yapılandırın.
Bu, uygulamanızın React bölümünün bu kütüphanelerde oluşturulmuş en iyi uygulamalardan yararlanabilmesini sağlar.
Birçok React tabanlı kütüphaneler, ön ve arka yüz geliştirmede kullanılabilir ve React uygulamanızın sunucudan yararlanmasına izin verir. Ancak, sunucuda JavaScript çalıştıramasanız veya istemeseniz bile aynı yaklaşımı kullanabilirsiniz. Bu durumda HTML/CSS/JS dışa aktarımını (Next.js için next export çıktısı, Gatsby için varsayılan) bunun yerine /some-app/ konumunda sunun.
Mevcut sayfanızın bir bölümü için React kullanımı
Diyelim ki başka bir teknoloji (Rails gibi bir sunucu veya Backbone gibi bir istemci) ile oluşturulmuş mevcut bir sayfanız var ve o sayfada bir yerde etkileşimli React bileşenleri render etmek istiyorsunuz. Bu, React’i entegre etmenin yaygın bir yoludur - aslında, Meta’daki çoğu React kullanımı yıllarca bu şekilde görünüyordu!
Bunu iki adımda yapabilirsiniz:
- JSX syntax’inizi kullanmanıza, kodunuzu
import/exportsyntax’i ile modüllere ayırmanıza ve npm paket kayıt defterinden paketleri (örneğin, React) kullanmanıza izin veren bir JavaScript ortamı kurun. - React bileşenlerinizi sayfada görmek istediğiniz yerde render edin.
Kesin yaklaşımınız, mevcut sayfa kurulumunuza bağlıdır, bu nedenle bazı ayrıntılara göz atalım.
1. Adım: Modüler bir JavaScript ortamı kurun
Modüler bir JavaScript ortamı, tüm kodunuzu tek bir dosyaya yazmak yerine, React bileşenlerinizi ayrı ayrı dosyalara yazmanıza olanak tanır. Ayrıca, diğer geliştiriciler tarafından npm kayıt defterinde yayınlanan tüm harika paketleri, React’in kendisi de dahil olmak üzere kullanmanızı sağlar! Bunu nasıl yapacağınız mevcut kurulumunuza bağlıdır:
-
Uygulamanız zaten
importifadelerini kullanan dosyalara bölünmüşse, mevcut kurulumunuzu kullanmayı deneyin. JS kodunuza<div />yazmanın bir syntax hatasına neden olup olmadığını kontrol edin. Bir syntax hatasına neden olursa, JavaScript kodunuzu Babel ile dönüştürmeniz, ve JSX kullanmak için Babel React ön ayarını etkinleştirmeniz gerekebilir. -
Uygulamanızın JavaScript modüllerini derlemek için mevcut bir kurulumu yoksa, Vite ile kurun. Vite topluluğu, Rails, Django ve Laravel dahil olmak üzere backend kütüphaneleri ile birçok entegrasyonu sürdürür. Backend kütüphaneniz listelenmemişse, Vite yapılarını arka ucunuzla manuel olarak entegre etmek için bu kılavuzu izleyin.
Kurulumunuzun çalışıp çalışmadığını kontrol etmek için proje klasörünüzde şu komutu çalıştırın:
Ardından, ana JavaScript dosyanızın en üstüne şu kod satırlarını ekleyin (buna index.js veya main.js adı verilebilir):
import { createRoot } from 'react-dom/client'; // Var olan HTM içeriğini temizleyin document.body.innerHTML = '<div id="app"></div>'; // Bunun yerine React bileşeninizi render edin const root = createRoot(document.getElementById('app')); root.render(<h1>Hello, world</h1>);
Sayfanızın tüm içeriği “Merhaba dünya!” ile değiştirildiyse, her şey yolunda gitti! Okumaya devam edin.
2. Adım: React bileşenlerini sayfanın herhangi bir yerinde render edin
Önceki adımda, bu kodu ana dosyanızın en üstüne koyarsnız:
import { createRoot } from 'react-dom/client';
// Var olan HTM içeriğini temizleyin
document.body.innerHTML = '<div id="app"></div>';
// Bunun yerine React bileşeninizi render edin
const root = createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);Tabii ki, aslında mevcut HTML içeriğini temizlemek istemezsiniz!
Bu kodu silin.
Bunun yerine, muhtemelen React bileşenlerinizi HTML’nizin belirli yerlerinde oluşturmak istiyorsunuz. HTML sayfanızı (veya onu oluşturan sunucu şablonlarını) açın ve herhangi bir etikete benzersiz bir id niteliği ekleyin, örneğin:
<!-- ... html'inizin herhangi bir yeri ... -->
<nav id="navigation"></nav>
<!-- ... daha fazla html ... -->Bu, document.getElementById ile o HTML öğesini bulmanızı ve içinde kendi React bileşeninizi render edebilmeniz için onu createRoot'a geçirmenizi sağlar:
import { createRoot } from 'react-dom/client'; function NavigationBar() { // YAPILACAK: Bir navigasyon barı oluşturun return <h1>Hello from React!</h1>; } const domNode = document.getElementById('navigation'); const root = createRoot(domNode); root.render(<NavigationBar />);
index.html'deki orijinal HTML içeriğinin nasıl korunduğuna dikkat edin, ancak kendi NavigationBar React bileşeniniz artık HTML’nizden <nav id="navigation"> içinde görünüyor. React bileşenlerini mevcut bir HTML sayfasında render etme hakkında daha fazla bilgi edinmek için createRoot dökümantasyonunu okuyun.
Mevcut bir projede React’i kullandığınızda, küçük etkileşimli bileşenlerle (butonlar gibi) başlamak ve ardından, sonunda tüm sayfanız React ile oluşturulana kadar yavaş yavaş “yukarı doğru ilerlemeye” devam etmek yaygındır. Bu noktaya ulaşırsanız, React’ten en iyi şekilde yararlanmak için hemen ardından bir bir React kütüphanesine geçmenizi öneririz.
React Native’i mevcut bir yerel mobil uygulamada kullanma
React Native ayrıca mevcut yerel uygulamalara kademeli olarak entegre edilebilir. Android (Java veya Kotlin) veya iOS (Objective-C veya Swift) için mevcut bir yerel uygulamanız varsa, ona bir React Native ekranı eklemek için bu kılavuzu inceleyin.