Trình biên dịch React online

Viết, chạy và chia sẻ đoạn code. Không cần thiết lập.

Xem trướcTự động xem trước

Console

Đầu ra console sẽ hiện ở đây.

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

Chạy code React JS online và xem nó hiển thị

Trình biên dịch và playground React online miễn phí. Sửa App.jsx và khung xem trước bên cạnh sẽ render lại ngay khi bạn ngừng gõ: component, props, useState, useEffect và mọi hook khác đều hoạt động như trong một ứng dụng thật. Không cần npm install, không cần dự án Vite và không phải khởi động máy chủ trên máy.

JSX được biên dịch ngay trong trình duyệt bằng esbuild, cùng bản build chạy khung xem trước trực tiếp trong các bài học React của Coddy, trên React 19. Dự án gồm bốn tệp, sắp xếp giống một ứng dụng Vite: App.jsx, styles.css, main.jsx và index.html. Không có gì được gửi lên máy chủ, nên khung xem trước theo kịp tốc độ gõ của bạn.

Điều gì làm trình biên dịch React online này hữu ích

Xem trước trực tiếp: ứng dụng build và render lại ngay khi bạn ngừng gõ, còn nút làm mới (hoặc Ctrl+Enter) mount lại từ đầu để đặt lại state.
React 19 thật với mọi hook: useState, useEffect, useReducer, useRef, useContext, useMemo và cả custom hook của riêng bạn.
Lỗi build chỉ rõ tệp, dòng và cột, trong một trang lỗi dễ đọc ở chỗ khung xem trước, nên thiếu một dấu ngoặc cũng không để lại màn hình trắng.
Một console bên dưới khung xem trước hiển thị console.log, cảnh báo và lỗi runtime từ các component của bạn.
Code được lưu trong trình duyệt khi bạn gõ. Mở khung xem trước trong tab mới, hoặc sao chép và tải xuống bất kỳ tệp nào để đưa vào một dự án thật.

Bạn có thể làm gì trong trình biên dịch React online

Danh sách việc cần làm: một <input> được kiểm soát, useState cho danh sách và .map() render một <li> cho mỗi việc, kèm key.
Bộ đếm hoặc đồng hồ hẹn giờ, để xem useState và useEffect có hàm cleanup hoạt động ra sao.
Các component trao đổi với nhau: đưa state lên component cha và truyền giá trị cùng callback xuống qua props.
Nút đổi giao diện sáng tối với createContext và useContext, định kiểu trong styles.css.

Câu hỏi thường gặp về trình biên dịch React online

Trình biên dịch React online có miễn phí không?

Có. Hoàn toàn miễn phí, không cần đăng ký: mở trang, sửa code và khung xem trước tự cập nhật.

Tôi có cần Node.js, npm hay Vite để chạy React ở đây không?

Không. JSX được biên dịch ngay trong trình duyệt và React đã được nạp sẵn trong khung xem trước, nên bạn không cần cài Node.js, chạy npm create vite hay khởi động máy chủ dev. Trình duyệt hiện đại nào cũng dùng được, trên Windows, macOS, Linux hay Chromebook.

Tôi có import được package npm không?

Bạn có thể import react và react-dom/client, cùng các tệp của bạn bằng đường dẫn tương đối như import App from './App.jsx'. Các package npm khác như React Router hay Axios không có sẵn, nên playground hợp nhất với component, hook và state, chứ không phải một ứng dụng đầy đủ có nhiều dependency.

Đây có phải React Compiler không?

Không. React Compiler là một plugin build tự động thêm memoization vào component. Ở đây, biên dịch nghĩa là chuyển JSX thành JavaScript, việc mà esbuild làm ngay trong trình duyệt để khung xem trước chạy được. Nhiều người tìm "trình biên dịch React online" khi thật ra cần một nơi để chạy code React, và trang này chính là nơi đó.

Thử xong thì học React tiếp như thế nào?

Sửa ứng dụng mẫu và xem điều gì thay đổi trong khung xem trước. Khi muốn học theo lộ trình, khóa học React của Coddy dạy JSX, component, props, state, sự kiện và hook qua các bài học ngắn với cùng kiểu xem trước trực tiếp, rồi chuyển sang Next.js.