React песочница онлайн

Пишите, запускайте и делитесь фрагментами кода - без установки.

ПредпросмотрАвтопредпросмотр

Консоль

Вывод консоли появится здесь.

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 онлайн и сразу видите результат

Бесплатная онлайн-песочница для React. Редактируйте App.jsx, и превью рядом перерисуется через мгновение после того, как вы перестанете печатать: компоненты, пропсы, useState, useEffect и все остальные хуки работают так же, как в настоящем приложении. Не нужно ни npm install, ни проекта на Vite, ни локального сервера.

Ваш JSX компилируется прямо в браузере с помощью esbuild под React 19. Та же сборка работает в живом превью на уроках React в Coddy. Проект состоит из четырёх файлов и устроен как приложение на Vite: App.jsx, styles.css, main.jsx и index.html. Ничего не отправляется на сервер, поэтому превью успевает за вашим набором.

Чем полезна эта песочница React

Живое превью: приложение пересобирается и перерисовывается через мгновение после того, как вы перестанете печатать, а кнопка обновления (или Ctrl+Enter) монтирует его заново, чтобы сбросить состояние.
Настоящий React 19 со всеми хуками: useState, useEffect, useReducer, useRef, useContext, useMemo и ваши собственные хуки.
Ошибки сборки указывают файл, строку и столбец на понятной странице ошибки вместо превью, так что пропущенная скобка никогда не оставит вас с пустым экраном.
Консоль под превью показывает console.log, предупреждения и ошибки выполнения из ваших компонентов.
Код сохраняется в браузере по мере набора. Откройте превью в новой вкладке или скопируйте и скачайте любой файл, чтобы перенести его в настоящий проект.

Что можно сделать в песочнице React

Список задач: управляемый <input>, useState для списка и .map(), который выводит по одному <li> на задачу с key.
Счётчик или таймер, чтобы увидеть, как ведут себя useState и useEffect с функцией очистки.
Компоненты, которые общаются друг с другом: поднимите состояние в родительский компонент и передавайте значения и колбэки вниз через пропсы.
Переключатель темы на createContext и useContext со стилями из styles.css.

Вопросы об онлайн-песочнице React

Онлайн-песочница React бесплатная?

Да. Она бесплатна и не требует регистрации: откройте страницу, измените код, и превью обновится.

Нужны ли Node.js, npm или Vite, чтобы запускать React здесь?

Нет. JSX компилируется в браузере, а React уже загружен в превью, поэтому не нужно устанавливать Node.js, запускать npm create vite или поднимать сервер разработки. Подойдёт любой современный браузер на Windows, macOS, Linux или Chromebook.

Можно ли импортировать пакеты npm?

Можно импортировать react и react-dom/client, а также свои файлы по относительному пути, например import App from './App.jsx'. Другие пакеты npm, такие как React Router или Axios, недоступны, поэтому песочница лучше подходит для компонентов, хуков и состояния, чем для полноценного приложения с зависимостями.

Это React Compiler?

Нет. React Compiler представляет собой плагин сборки, который автоматически добавляет мемоизацию в ваши компоненты. Здесь компиляция означает превращение JSX в JavaScript: это делает esbuild в вашем браузере, чтобы превью могло выполнить код. Люди часто ищут онлайн-компилятор React, когда им нужно место для запуска кода на React, и эта страница именно такое место.

Как изучать React после песочницы?

Меняйте пример приложения и смотрите, что происходит в превью. Когда захочется системного подхода, курс React от Coddy научит JSX, компонентам, пропсам, состоянию, событиям и хукам в коротких уроках с тем же живым превью, а затем перейдёт к Next.js.