Chapter 06

【番外編】CodeSandbox.ioを使ってお手軽ハンズオン!

ここまでご覧いただき、ありがとうございます。

皆さんの中には、学んだ内容を実際に手を動かして試してみたいと思われる方がいらっしゃるかもしれません。あるいは既にお手元の環境でReactコンポーネントを作った方もいらっしゃるかもしれませんね。

このチャプターでは、そんな皆さんのために**『CodeSandbox.io』を使って手軽にReact環境を試す**方法をお伝えします。

(本講座は「まずざっくりと全体像を把握すること」を念頭においていますので、ざっと読むだけでももちろんOKです。)

CodeSandbox.ioとは

https://codesandbox.io/

ご存知の方も多いかもしれませんが、『CodeSandbox.io』はブラウザで様々な開発環境を再現できるサービスです。

基本無料も嬉しいポイントです。

次のチャプターからはいよいよ、実際のプロジェクトでもスタンダードな『関数コンポーネント』を学びます。

『CodeSandbox.io』でReactのテンプレートを作成することで、面倒な環境構築を飛ばして、いきなりReactをお試しいただくことが可能です!

Reactテンプレートを利用する

以下の簡単な手順で『CodeSandbox.io』上でReact開発環境を作成できます。

  1. https://codesandbox.io/ にアクセス
  2. 会員登録・ログインを済ませる
  3. 『Create Sandbox』から新規作成
  4. Reactの公式テンプレートを選択する

作成が完了すると、コードと実行結果が表示されます。

手を動かしながら本講座を進めたい場合は、ぜひ活用をご検討ください。