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 を編集すると、入力を止めた少し後に隣のプレビューが再レンダリングされます。コンポーネント、props、useState、useEffect などのフックは、実際のアプリと同じように動きます。npm install も、Viteのプロジェクトも、ローカルサーバーの起動も必要ありません。

JSXはブラウザ内でesbuildによりReact 19向けにコンパイルされます。これはCoddyのReactレッスンでライブプレビューを動かしているのと同じビルドです。プロジェクトはViteアプリと同じ構成の4つのファイル、App.jsx、styles.css、main.jsx、index.html でできています。サーバーには何も送信されないため、プレビューは入力にしっかり追いつきます。

このReactプレイグラウンドでできること

ライブプレビュー: 入力を止めた少し後にアプリが再ビルドされ、再レンダリングされます。更新ボタン(またはCtrl+Enter)を押すと、アプリを最初からマウントし直して状態をリセットします。
すべてのフックが使える本物のReact 19: useState、useEffect、useReducer、useRef、useContext、useMemo、そして自作のカスタムフック。
ビルドエラーは、プレビューの位置に表示される読みやすいエラーページでファイル、行、列を示します。波括弧を閉じ忘れても、真っ白な画面になることはありません。
プレビューの下のコンソールに、コンポーネントからの console.log、警告、実行時エラーが表示されます。
コードは入力するたびにブラウザに保存されます。プレビューを新しいタブで開いたり、ファイルをコピーやダウンロードして実際のプロジェクトに移したりできます。

Reactプレイグラウンドで作れるもの

ToDoリスト: 制御された <input>、リスト用の useState、タスクごとに key 付きの <li> を描画する .map()。
カウンターやタイマー: useState と、クリーンアップ関数を持つ useEffect の動きを確かめられます。
互いにやり取りするコンポーネント: stateを親コンポーネントに持ち上げ、値やコールバックをpropsとして子に渡します。
createContext と useContext を使い、styles.css でスタイルを付けたテーマ切り替え。

オンラインReactプレイグラウンドのよくある質問

オンラインReactプレイグラウンドは無料ですか?

はい。無料で、登録も不要です。ページを開いてコードを編集すれば、プレビューが更新されます。

ここでReactを動かすのにNode.js、npm、Viteは必要ですか?

いいえ。JSXはブラウザ内でコンパイルされ、Reactはプレビューに読み込み済みなので、Node.jsのインストールも、npm create vite の実行も、開発サーバーの起動も必要ありません。Windows、macOS、Linux、Chromebookのどれでも、最新のブラウザがあれば動きます。

npmパッケージをインポートできますか?

react と react-dom/client、そして import App from './App.jsx' のような相対パスで自分のファイルをインポートできます。React RouterやAxiosなど、その他のnpmパッケージは使えません。そのため、依存関係のある本格的なアプリよりも、コンポーネント、フック、stateを試すのに向いています。

これはReact Compilerですか?

いいえ。React Compilerは、コンポーネントに自動でメモ化を加えるビルドプラグインです。ここでのコンパイルとは、JSXをJavaScriptに変換することで、プレビューで実行できるようにesbuildがブラウザ内で行います。Reactのコードを実行できる場所を探して「React オンラインコンパイラ」と検索する人は多く、このページはまさにその場所です。

プレイグラウンドを試した後、Reactをどう学べばいいですか?

サンプルアプリを書き換えて、プレビューで何が起きるかを見てみましょう。体系的に学びたくなったら、CoddyのReactコースで、JSX、コンポーネント、props、state、イベント、フックを、同じライブプレビュー付きの短いレッスンで学べます。その後はNext.jsに進みます。