React'ten Taşıma
Carats bilinçli olarak React'e yakındır; bu yüzden bileşen kodunun çoğu doğrudan taşınır. Aşağıdaki farklar, bir taşımayı gerçekten bozanlardır.
| Kavram | React | Carats |
|---|---|---|
| Çalışma Zamanı | React, React DOM ve sanal bir DOM | Yalnızca JJSX; bileşenler HTML döndüren fonksiyonlardır |
| Durum | useState bileşeni yeniden işler | use bir değer saklar; DOM elle güncellenir |
| Etkiler | Bağımlılık dizisiyle useEffect | afterMount (yüklemeden sonra) veya beforeMount (anında), bağımlılık yok |
| Olay İşleyicileri | <button onClick={fn}> | Bir hook geri çağrısının içinde addEventListener |
| Yönlendirme | Layout'ları ve iç içe rotaları olan bir dosya sistemi yönlendiricisi | Bir defineFacets haritası; bir layout içe aktarılarak birleştirilir |
| Sunucu Verisi | Sayfada getServerSideProps | Rota başına bir culet ve bir Burnish sarmalayıcısı |
| Belge Başlığı | next/head veya framework metadata dışa aktarımı | Bir fonksiyon bileşeni içinde this.head |
| Bileşen Meta verisi | Component.displayName, memo ve context | Bileşende defaultProps; context veya memo yok |
| Stil | CSS-in-JS veya yardımcı sınıflar | Paylaşılan tasarım token'larını içe aktaran kapsamlı SASS |
| Tipler | Dosya başına içe aktarılan arayüzler | src/dto'dan gelen global DTO arayüzleri |
Olay İşleyicileri
Olay modeli, bir taşımayı en sık bozan değişikliktir; bu yüzden konuda kesin olmakta fayda var.
// React
<button onClick={() => setOpen(!open)}>Toggle</button>
<input value={query} onChange={(e) => setQuery(e.target.value)} />
// Carats
import { use, afterMount } from '@carats/hooks';
export default function Toggle() {
const open = use(false);
afterMount(() => {
const button = document.getElementById('toggle');
const stop = open.subscribe((value) => {
button?.setAttribute('aria-expanded', String(value));
});
const onClick = () => open.set(!open.get());
button?.addEventListener('click', onClick);
return () => {
stop();
button?.removeEventListener('click', onClick);
};
});
return <button id="toggle" aria-expanded="false">Toggle</button>;
}
Durum
`useState` yerine `use` gelir ve React'in kendiliğinden işleyeceği her işleme açık bir DOM yazımına dönüşür. Bileşene yerel olan durum ruhen değişmez: bileşenin en üst düzeyinde `use` çağırın, `get` ile okuyun, `set` ile yazın.
Yönlendirme
Dosya sistemi yönlendiricisi tek bir nesneye çöker. Her rota `defineFacets` içinde bir girdi olur ve iç içe layout'lar açık bir içe aktarıma dönüşür. Facet nesnesi paylaşıldığı için ona eklenmemiş bir rota hem istemciden hem sunucudan eksiktir; bu da bir hata sınıfının tamamını ortadan kaldırır.
Sunucu Verisi
`getServerSideProps` bir culet olur ve sayfa burnished olur. Fonksiyon imzası aynı şekli korur: istek girer, veri çıkar.
// React / Next.js
export async function getServerSideProps({ params }) {
return { props: { symbol: params.symbol } };
}
// Carats
export default culet<TradeData>('/trade/:symbol', async (req) => {
return { symbol: req.params.symbol.toUpperCase() };
});
// Carats page
export default Burnish<TradeData>(function (data) {
return <h1>{data.symbol}</h1>;
});
Belge Başlığı
Bir metadata dışa aktarımı `this.head` olur ve `this`'in var olması için bileşenin bir `function` bildirimi olması gerekir. Hâlihazırda ok fonksiyonu olan bir bileşen ok olarak kalabilir; bunun bedeli head etiketlerine katkıda bulunmamasıdır.
Stil
CSS-in-JS'in karşılığı yoktur. Her bileşen bir SASS dosyası içe aktarır, o dosya tasarım token'ları için `base.sass` dosyasını içe aktarır ve token'lar bu tek global stil dosyasının en üst düzeyinde yaşar.
Taşıma Kontrol Listesi
- react, react-dom ve yalnızca React'e ait her bağımlılığı silin.
- Olay özniteliklerini bir afterMount veya beforeMount geri çağrısının içinde addEventListener ile değiştirin.
- Her dosya tabanlı rotayı facet haritasında bir girdiye dönüştürün ve paylaşılan layout'u açıkça içe aktarın.
- getServerSideProps gövdelerini culet'lere taşıyın ve sayfayı Burnish ile sarın.
- useState'i use'a taşıyın ve yeniden işlemenin yaptığı elle DOM güncellemesini ekleyin.
- head dışa aktarımını bir fonksiyon bileşeninde this.head'e taşıyın.
- CSS-in-JS'i, her bileşenin içe aktardığı SASS dosyalarıyla değiştirin.