React Playground

Kod parçacıklarını yazın, çalıştırın ve paylaşın. Kurulum gerekmez.

ÖnizlemeOtomatik ?nizleme

Konsol

Konsol çıktısı burada görünecek.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <button className="counter" onClick={() => setCount(count + 1)}>
            {label}: {count}
        </button>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Try useState']);
    const [text, setText] = useState('');

    const addTask = () => {
        if (!text.trim()) return;
        setTasks([...tasks, text.trim()]);
        console.log('Added:', text.trim());
        setText('');
    };

    return (
        <main className="app">
            <h1>Hello, React!</h1>
            <Counter label="Clicks" />
            <div className="row">
                <input
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && addTask()}
                    placeholder="Add a task"
                />
                <button onClick={addTask}>Add</button>
            </div>
            <ul>
                {tasks.map((task, i) => (
                    <li key={i}>{task}</li>
                ))}
            </ul>
        </main>
    );
}

React kodunu online yazın, anında sonucu görün

Ücretsiz bir online React playground. App.jsx dosyasını düzenleyin, yazmayı bıraktıktan kısa bir süre sonra yandaki önizleme yeniden render edilir: bileşenler, props, useState, useEffect ve diğer tüm hook'lar gerçek bir uygulamadaki gibi çalışır. npm install, Vite projesi ya da başlatılacak yerel bir sunucu yoktur.

JSX kodunuz tarayıcınızda esbuild ile React 19 için derlenir. Coddy'nin React derslerindeki canlı önizlemeyi çalıştıran derleme de budur. Proje, bir Vite uygulaması gibi düzenlenmiş dört dosyadan oluşur: App.jsx, styles.css, main.jsx ve index.html. Hiçbir şey sunucuya gönderilmez, bu yüzden önizleme yazdıklarınıza ayak uydurur.

Bu React playground'u kullanışlı yapan nedir

Canlı önizleme: yazmayı bıraktıktan kısa bir süre sonra uygulama yeniden derlenir ve render edilir. Yenile düğmesi (ya da Ctrl+Enter) uygulamayı sıfırdan yeniden bağlayarak durumunu sıfırlar.
Tüm hook'larıyla gerçek React 19: useState, useEffect, useReducer, useRef, useContext, useMemo ve kendi özel hook'larınız.
Derleme hataları, önizlemenin yerinde açılan okunaklı bir hata sayfasında dosyayı, satırı ve sütunu gösterir. Eksik bir süslü parantez hiçbir zaman boş bir ekran bırakmaz.
Önizlemenin altındaki konsol, bileşenlerinizden gelen console.log çıktılarını, uyarıları ve çalışma zamanı hatalarını gösterir.
Kodunuz siz yazarken tarayıcınıza kaydedilir. Önizlemeyi yeni bir sekmede açabilir ya da herhangi bir dosyayı kopyalayıp indirerek gerçek bir projeye taşıyabilirsiniz.

React playground'da neler yapabilirsiniz

Bir yapılacaklar listesi: kontrollü bir <input>, liste için useState ve her görev için bir key ile bir <li> render eden .map().
useState ile temizleme fonksiyonlu useEffect kullanımının nasıl davrandığını görmek için bir sayaç ya da zamanlayıcı.
Birbiriyle iletişim kuran bileşenler: durumu bir üst bileşene taşıyın, değerleri ve callback'leri props olarak aşağı aktarın.
createContext ve useContext ile yapılmış, stilleri styles.css dosyasından gelen bir tema değiştirici.

Online React playground hakkında sık sorulan sorular

Online React playground ücretsiz mi?

Evet. Ücretsizdir ve kayıt gerektirmez: sayfayı açın, kodu düzenleyin, önizleme güncellenir.

React'i burada çalıştırmak için Node.js, npm ya da Vite gerekir mi?

Hayır. JSX tarayıcınızda derlenir ve React önizlemede zaten yüklüdür. Bu yüzden Node.js kurmanız, npm create vite çalıştırmanız ya da bir geliştirme sunucusu başlatmanız gerekmez. Windows, macOS, Linux ya da Chromebook üzerindeki her modern tarayıcıda çalışır.

npm paketlerini içe aktarabilir miyim?

react ve react-dom/client paketlerini, ayrıca kendi dosyalarınızı import App from './App.jsx' gibi göreli bir yolla içe aktarabilirsiniz. React Router ya da Axios gibi diğer npm paketleri kullanılamaz. Bu yüzden playground, bağımlılıkları olan eksiksiz bir uygulamadan çok bileşenler, hook'lar ve durum yönetimi için uygundur.

Bu, React Compiler mı?

Hayır. React Compiler, bileşenlerinize otomatik olarak memoization ekleyen bir derleme eklentisidir. Burada derlemek, JSX'i JavaScript'e dönüştürmek anlamına gelir. Bunu, önizlemenin kodu çalıştırabilmesi için esbuild tarayıcınızda yapar. İnsanlar çoğu zaman React kodu çalıştıracak bir yer ararken online React derleyicisi diye arar, bu sayfa da tam olarak bunu sunar.

Playground'u denedikten sonra React'i nasıl öğrenirim?

Örnek uygulamayı değiştirin ve önizlemede neler olduğunu izleyin. Düzenli bir yol istediğinizde, Coddy'nin React kursu JSX, bileşenler, props, durum, olaylar ve hook'ları aynı canlı önizlemeyle kısa derslerde öğretir, ardından Next.js ile devam eder.