Ulaşım
- Adres:Batıkent Mh. 8910 Sk. 6. Etap 1H No: 18 Yeni Toki Eyyübiye / Şanlıurfa (Yeni Alım Satım Karşısı)
- Telefon:0 (545) 528 88 93
- eMail: info@alestaweb.com
SolidJS 2.0 beta aşamasında! React'e güçlü bir alternatif olan SolidJS, fine-grained reaktivite, sıfır sanal DOM ve async-first mimarisiyle 2026'nın en hızlı JavaScript UI kütüphanesi olmaya devam ediyor. Bu rehberde sıfırdan başlayarak öğrenin.
SolidJS, Ryan Carniato tarafından geliştirilen, sanal DOM kullanmayan, fine-grained reaktivite modeline dayanan bir JavaScript UI kütüphanesidir. React'in JSX sözdizimini kullanır, ancak çalışma prensibi tamamen farklıdır.
| Özellik | Değer |
|---|---|
| Sanal DOM | ❌ Yok (doğrudan DOM güncellemesi) |
| Bundle boyutu | ~7KB (React ~45KB) |
| JSX desteği | ✅ (derleme zamanında dönüştürülür) |
| TypeScript | ✅ Tam destek |
| Full-stack framework | SolidStart (Next.js alternatifi) |
Görünüşte benzer ama çok farklı çalışırlar:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
// Her state değişiminde TÜM component yeniden render edilir
console.log('Render!');
return (
<button onClick={() => setCount(count + 1)}>
Sayı: {count}
</button>
);
}import { createSignal } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
// Component SADECE BİR KEZ çalışır!
// Sadece {count()} kısmı DOM'da güncellenir
console.log('Sadece bir kez!');
return (
<button onClick={() => setCount(count() + 1)}>
Sayı: {count()}
</button>
);
}SolidJS 2.0 beta, async-first yaklaşımıyla büyük bir mimari değişiklik sunuyor:
# create-solid ile scaffolding
npx create-solid my-app
# Sorular:
# ? Is this a SolidStart project? → No (sadece SolidJS)
# ? TypeScript? → Yes
# ? Template? → bare
cd my-app
npm install
npm run dev# Vite ile
npm install solid-js
npm install -D vite-plugin-solid
# vite.config.ts
import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
export default defineConfig({
plugins: [solid()]
});localhost:3000 adresinde SolidJS uygulamanız çalışır.import { createSignal, createMemo, createEffect } from 'solid-js';
function App() {
// createSignal — reaktif değer
const [isim, setIsim] = createSignal('Ahmet');
const [yas, setYas] = createSignal(25);
// createMemo — türetilmiş reaktif değer (React useMemo gibi ama otomatik)
const bilgi = createMemo(() => `${isim()}, ${yas()} yaşında`);
// createEffect — yan etkiler (React useEffect gibi ama dep array YOK)
createEffect(() => {
console.log('İsim değişti:', isim()); // isim() okunduğunda otomatik takip
});
return (
<div>
<p>{bilgi()}</p>
<input
value={isim()}
onInput={(e) => setIsim(e.target.value)}
/>
</div>
);
}createEffect içinde hangi sinyaller okunursa otomatik olarak onları takip eder. React'teki useEffect'in dependency array'ini manuel girme hatası burada yoktur.import { createAsync, cache } from '@solidjs/router';
import { Suspense } from 'solid-js';
// Önbelleklenmiş veri fetcher
const kullaniciGetir = cache(async (id: number) => {
const res = await fetch(`/api/users/${id}`);
return res.json();
}, 'kullanici');
function KullaniciProfili(props: { id: number }) {
// createAsync: async fonksiyonu sinyale dönüştürür
const kullanici = createAsync(() => kullaniciGetir(props.id));
return (
<Suspense fallback={<p>Yükleniyor...</p>}>
<div>
<h2>{kullanici()?.name}</h2>
<p>{kullanici()?.email}</p>
</div>
</Suspense>
);
}SolidStart, SolidJS'in Next.js/Nuxt karşılığıdır. Server-side rendering, file-based routing ve server functions içerir.
npx create-solid my-app
# ? Is this a SolidStart project? → YES
npm install
npm run devimport { action, redirect } from '@solidjs/router';
// Sunucuda çalışan fonksiyon
const kullaniciEkle = action(async (form: FormData) => {
'use server'; // Bu satır: sunucuda çalış
const isim = form.get('isim');
await db.insert({ isim });
return redirect('/kullanicilar');
});
function KullaniciFormu() {
return (
<form action={kullaniciEkle} method="post">
<input name="isim" placeholder="Ad" />
<button type="submit">Ekle</button>
</form>
);
}JS Framework Benchmark'larına göre SolidJS, vanilla JavaScript'e yakın performans sunar:
| Framework | Performans Skoru |
|---|---|
| Vanilla JS | 1.00 (baz) |
| SolidJS 2.0 | 1.04 |
| Svelte 5 | 1.12 |
| Vue 3 Vapor | 1.21 |
| React 19 | 1.58 |
SolidJS 2.0'ı seçin eğer:
Faydalı Linkler:
© 2026 AlestaWeb - Tüm hakları saklıdır.
