Compiler React Online

Tulis, jalankan, dan bagikan potongan kode. Tanpa setup.

PratinjauPratinjau otomatis

Konsol

Output konsol muncul di sini.

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>
    );
}

Jalankan kode React JS online dan lihat hasil render-nya

Compiler dan playground React online gratis. Edit App.jsx dan pratinjau di sampingnya dirender ulang sesaat setelah kamu berhenti mengetik: komponen, props, useState, useEffect, dan setiap hook lainnya berfungsi seperti di aplikasi sungguhan. Tidak ada npm install, tidak ada proyek Vite, dan tidak ada server lokal yang perlu dijalankan.

JSX-mu dikompilasi di browsermu dengan esbuild, build yang sama dengan yang menjalankan pratinjau langsung di pelajaran React Coddy, untuk React 19. Proyeknya terdiri dari empat file, disusun seperti aplikasi Vite: App.jsx, styles.css, main.jsx, dan index.html. Tidak ada yang dikirim ke server, jadi pratinjaunya bisa mengikuti kecepatan ketikanmu.

Kenapa compiler React online ini berguna

Pratinjau langsung: aplikasinya dibangun ulang dan dirender ulang sesaat setelah kamu berhenti mengetik, dan tombol refresh (atau Ctrl+Enter) memasangnya ulang dari nol untuk mereset state-nya.
React 19 sungguhan dengan semua hook: useState, useEffect, useReducer, useRef, useContext, useMemo, dan custom hook buatanmu sendiri.
Error build menunjuk file, baris, dan kolomnya, di halaman error yang mudah dibaca di tempat pratinjau, jadi kurung kurawal yang hilang tidak pernah meninggalkan layar kosong.
Konsol di bawah pratinjau menampilkan console.log, peringatan, dan error runtime dari komponen-komponenmu.
Kodemu disimpan di browser saat kamu mengetik. Buka pratinjau di tab baru, atau salin dan unduh file mana pun untuk memindahkannya ke proyek sungguhan.

Yang bisa kamu buat di compiler React online

Daftar tugas: <input> yang terkontrol, useState untuk daftarnya, dan .map() yang merender satu <li> per tugas dengan key.
Counter atau timer, untuk melihat bagaimana useState dan useEffect dengan fungsi cleanup berperilaku.
Komponen yang saling berkomunikasi: angkat state ke komponen induk dan teruskan nilai serta callback ke bawah sebagai props.
Pengganti tema dengan createContext dan useContext, diberi gaya dari styles.css.

FAQ compiler React online

Apakah compiler React online ini gratis?

Ya. Gratis tanpa daftar: buka halamannya, edit kodenya, dan pratinjaunya diperbarui.

Apakah aku perlu Node.js, npm, atau Vite untuk menjalankan React di sini?

Tidak. JSX dikompilasi di browsermu dan React sudah dimuat di pratinjau, jadi kamu tidak perlu menginstal Node.js, menjalankan npm create vite, atau memulai dev server. Browser modern apa pun bisa dipakai, di Windows, macOS, Linux, atau Chromebook.

Bisakah aku mengimpor package npm?

Kamu bisa mengimpor react dan react-dom/client, serta file-mu sendiri dengan path relatif seperti import App from './App.jsx'. Package npm lain seperti React Router atau Axios tidak tersedia, jadi playground ini paling cocok untuk komponen, hook, dan state, bukan aplikasi lengkap dengan dependensi.

Apakah ini React Compiler?

Bukan. React Compiler adalah plugin build yang menambahkan memoization ke komponenmu secara otomatis. Di sini, compile berarti mengubah JSX menjadi JavaScript, yang dilakukan esbuild di browsermu supaya pratinjaunya bisa menjalankannya. Orang sering mencari compiler React online padahal maksudnya tempat untuk menjalankan kode React, dan itulah halaman ini.

Bagaimana cara belajar React setelah mencoba compiler ini?

Ubah aplikasi contohnya dan lihat apa yang terjadi di pratinjau. Saat kamu ingin jalur yang terstruktur, kursus React Coddy mengajarkan JSX, komponen, props, state, event, dan hook dalam pelajaran singkat dengan pratinjau langsung yang sama, lalu berlanjut ke Next.js.