React Online Playground
Bu React online playground'u, bileşenlerinizi tarayıcınızda çalıştırır. App.jsx'i düzenleyin, uygulama siz yazdıkça güncellensin; şablonda React 18 ve Tailwind CSS hazır, npm paketleri bir tık uzakta. Kurulum gerekmez, başlamak için hesap da gerekmez; kaydetmek ve paylaşmak için giriş yapın. Playcode'un ücretsiz kod araçları olan Playcode Classic'in bir parçasıdır.
Ücretsiz. Başlamak için hesap gerekmez.

Bileşeni düzenleyin. Uygulama da güncellensin.
Önizleme, siz yazdıktan bir an sonra yeniden oluşturulur. Her düzenleme uygulamayı yeniden yükler; bu yüzden state'i sıfırlanır.

Kullandığınız stack ile başlayın
- ReactJSX, hook'lar ve Tailwind CSS.Açın
- React ve TypeScriptSiz yazdıkça kontrol edilen tipli bileşenler.Açın
- Redux ToolkitSlice'lardan oluşan bir store.Açın
- MobXGözlemlenebilir state.Açın
- Framer MotionBirkaç satırda animasyon.Açın
- MUIMaterial bileşenleri.Açın
npm'den import edin.
Bir paketi import edin, sürümünü seçin ve yükleyin.
.jsx dosyanız mı var?
Bir dosyaya yapıştırın ve index.jsx'ten render edin.
Uygulamanın sunucuya ihtiyacı olduğunda
Playground tarayıcınızda çalışır: sunucu, Next.js ya da React Native yok. Bir uygulamanın backend'e, veritabanına ve kendi alan adına ihtiyacı olduğunda onu Playcode AI oluşturur, Playcode Cloud çalıştırır; bunun için ücretli bir plan gerekir.

Playcode Classic'in bir parçası
Playcode, 2016'da tarayıcıda çalışan bir kodlama ortamı olarak başladı. Bu playground, bugün Playcode Classic adını verdiğimiz ücretsiz kod araçlarından biri.
Playcode bugün, web siteleri ve uygulamalar oluşturup çalıştırmak için bir AI platformu.

Sık sorulan sorular
Bu online React editörü ücretsiz mi?
Evet. Yazmak ve önizlemek ücretsizdir, hesap gerektirmez. Ücretsiz bir hesapla herkese açık ya da özel en fazla üç proje kaydedebilirsiniz; özel alan adı için ücretli bir plan gerekir, AI sohbeti de kredi harcar.
Hangi React sürümünü kullanıyor?
Her şablonda React 18.3.1. Sürüm package.json'dan gelir.
React kodunu hiçbir şey kurmadan online çalıştırabilir miyim?
Evet. Playground, tarayıcınızda çalışan bir React sandbox'u. Bir React online compiler olarak da iş görür: bir bileşen yazın, siz yazdıkça render edilsin. Kurmanız gereken bir proje yok.
JSX ve TypeScript destekleniyor mu?
Evet. .jsx ve .tsx dosyaları önizlemede derlenir; React ve TypeScript şablonu da siz yazdıkça tiplerinizi kontrol eder.
npm paketlerini kullanabilir miyim?
Evet. Bir paketi import edin, sürümünü seçip yükleyin ya da Paketler panelinden ekleyin.
Hot reload var mı?
Uygulama siz yazdıkça güncellenir, ancak her düzenleme onu yeniden yükler; bu yüzden state sıfırdan başlar. Fast Refresh henüz yok.
Tailwind CSS ya da CSS Modules kullanabilir miyim?
Tailwind CSS şablonda hazır. CSS Modules, .module.css dosyaları olarak çalışır; .module.scss henüz desteklenmiyor.
Burada Next.js ya da React Native ile geliştirebilir miyim?
Hayır. Playground, React'i tarayıcınızda çalıştırır. Sunucusu ve veritabanı olan bir uygulamayı Playcode AI oluşturur, Playcode Cloud çalıştırır; bunun için ücretli bir plan gerekir.
.jsx dosyası açabilir miyim?
Evet. React şablonunda bir dosyaya yapıştırın ve index.jsx'ten render edin.
Playground'umu paylaşabilir miyim?
Evet. Giriş yapın ve projeyi kaydedin. Projenin Paylaş sekmesinde “Bağlantıya sahip herkes” ayarını “Görüntüleyebilir” yapın, ardından bağlantıyı kopyalayın.
Bu playground Playcode'un bir parçası mı?
Evet. Bu playground, Playcode'un ücretsiz kod araçları olan Playcode Classic'in bir parçası. Playcode, 2016'da tarayıcıda çalışan bir kodlama ortamı olarak başladı. Bugün ise web siteleri ve uygulamalar oluşturup çalıştırmak için bir AI platformu.
Diğer ücretsiz kod araçları
- JavaScript Playground
Canlı önizlemeyle HTML, CSS ve JavaScript.
- TypeScript Playground
Canlı bir sayfada TypeScript.
- Vue Playground
Tek dosyalık bileşenler, canlı.
- Tailwind Playground
Utility sınıfları, anında önizleme.
- JavaScript Compiler
JavaScript çalıştırın, konsolu okuyun.
Bir bileşen yazın. Çalışmasını izleyin.
