Reactの勉強をしたいと思ったとしても、環境の準備に色々と手間がかかっていたらやる気がなくなってしまうでしょう。その途中でエラーが出たり、nodeのバージョンが古いなどと警告が出たりしても萎えてしまいます。 そこで使ってみたいのがCodeSandboxです。オンラインでReactの記述と実行ができるプレイグラウンドです。

CodeSandboxの使い方

メイン画面です。中央のペインでコードを編集できます。

編集内容はすぐに反映されます。

別なファイルを開いて編集できます。

シェアするための設定画面です。

CodeSandboxはJSFiddleに代表されるようなオンラインでのJavaScript開発環境のReact版と言えます。書いたコードを他の人と共有したり、GitHubなどからオンラインデモとしてリンクしたりすると言った使い方もできそうです。

CodeSandboxはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

CodeSandbox: Online playground for React CompuIves/codesandbox-client: An online code editor tailored for web application development ?️