React online

Pisz, uruchamiaj i udostępniaj fragmenty kodu bez żadnej konfiguracji.

PodglądAutomatyczny podgląd

Konsola

Tutaj pojawi się wynik z konsoli.

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

Uruchamiaj kod React JS online i patrz, jak się renderuje

Darmowy kompilator i edytor React online. Edytujesz App.jsx, a podgląd obok renderuje się ponownie chwilę po tym, jak przestajesz pisać: komponenty, propsy, useState, useEffect i wszystkie inne hooki działają tak jak w prawdziwej aplikacji. Bez npm install, bez projektu Vite i bez uruchamiania lokalnego serwera.

Twój JSX jest kompilowany w przeglądarce przez esbuild, tak samo jak podgląd na żywo w lekcjach React w Coddy, z użyciem React 19. Projekt ma cztery pliki ułożone jak w aplikacji Vite: App.jsx, styles.css, main.jsx i index.html. Nic nie jest wysyłane na serwer, więc podgląd nadąża za twoim pisaniem.

Dlaczego ten kompilator React online się przydaje

Podgląd na żywo: aplikacja buduje się i renderuje ponownie chwilę po tym, jak przestajesz pisać, a przycisk odświeżania (albo Ctrl+Enter) montuje ją od zera, żeby zresetować jej stan.
Prawdziwy React 19 ze wszystkimi hookami: useState, useEffect, useReducer, useRef, useContext, useMemo i twoimi własnymi hookami.
Błędy budowania wskazują plik, linię i kolumnę na czytelnej stronie błędu w miejscu podglądu, więc brakujący nawias nigdy nie zostawi pustego ekranu.
Konsola pod podglądem pokazuje console.log, ostrzeżenia i błędy czasu działania z twoich komponentów.
Twój kod zapisuje się w przeglądarce w trakcie pisania. Otwórz podgląd w nowej karcie albo skopiuj i pobierz dowolny plik, żeby przenieść go do prawdziwego projektu.

Co możesz zbudować w kompilatorze React online

Listę zadań: kontrolowane <input>, useState dla listy i .map() renderujące jeden <li> na zadanie z key.
Licznik albo stoper, żeby zobaczyć, jak zachowują się useState i useEffect z funkcją czyszczącą.
Komponenty, które się ze sobą komunikują: przenieś stan do rodzica i przekazuj wartości oraz callbacki w dół jako propsy.
Przełącznik motywu z createContext i useContext, ostylowany w styles.css.

Kompilator React online: najczęstsze pytania

Czy kompilator React online jest darmowy?

Tak. Jest darmowy i bez rejestracji: otwierasz stronę, edytujesz kod, a podgląd się aktualizuje.

Czy potrzebuję Node.js, npm albo Vite, żeby uruchomić tu React?

Nie. JSX kompiluje się w przeglądarce, a React jest już załadowany w podglądzie, więc nie instalujesz Node.js, nie uruchamiasz npm create vite ani serwera deweloperskiego. Działa każda nowoczesna przeglądarka na Windowsie, macOS, Linuksie czy Chromebooku.

Czy mogę importować pakiety npm?

Możesz importować react i react-dom/client oraz własne pliki przez ścieżkę względną, na przykład import App from './App.jsx'. Inne pakiety npm, takie jak React Router czy Axios, nie są dostępne, więc edytor najlepiej sprawdza się przy komponentach, hookach i stanie, a nie przy pełnej aplikacji z zależnościami.

Czy to jest React Compiler?

Nie. React Compiler to wtyczka do budowania, która automatycznie dodaje memoizację do komponentów. Tutaj kompilacja oznacza zamianę JSX na JavaScript, którą esbuild wykonuje w przeglądarce, żeby podgląd mógł uruchomić kod. Ludzie często szukają kompilatora React online, gdy chodzi im o miejsce do uruchamiania kodu React, i właśnie tym jest ta strona.

Jak uczyć się Reacta po wypróbowaniu kompilatora?

Zmieniaj przykładową aplikację i patrz, co dzieje się w podglądzie. Gdy zechcesz uporządkowanej ścieżki, kurs React w Coddy uczy JSX, komponentów, propsów, stanu, zdarzeń i hooków w krótkich lekcjach z tym samym podglądem na żywo, a potem przechodzi do Next.js.