冒頭

Aさん:「まずは公式Tutorial見ましょうね。」
Bさん:「動画学習しましょうね。」

あなた: 「はい！がんばります！」

って飲み込むの疲れますよね。

今回は、「ちょっとReact気になってるよ。」という人向けの記事です。
簡単に試せる（遊べる）方法を紹介したいと思います。

題して、「Reactで世界時計やってみよう ~ with CodePen」 です。
ハードルめちゃくちゃ低いです。

前提

CodePenのアカウント登録（もしかすると登録せずにできたかも。）
時差の概念を知っている

サンプルコード

とりあえず動くものをお見せします。4カ国の世界時計です。
デジタルです。

See the Pen World Clock by Kazuya Umeki (@qykyopig-the-sans) on CodePen.

手順（解説込み）

1. CodePenにログイン。新しくPenを追加。

2. React環境のSetup。

ReactのPackageを使用できるように環境をセットアップします。

1. まずは歯車マークを押下

2. JSタブ内で必要な設定を行う。

JavaScript Preprocessorという項目があります。
Babelを選択してください。
Add External Scripts/Pensの検索窓からreactとreact-domを入力。
それぞれサジェストがでてきますのでクリック。

画像のようになればOK。

これでReact環境のセットアップが完了です。

3. HTMLとCSSを書きます。

1. HTML

ID属性だけ指定します。

index.html

<div id="root"></div>

2. CSS

好みに合わせてCSSを設定します。

index.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

h2 {
  text-align: center;
  font-size: 16px;
}

4. JavaScriptを書きます。

ここではあまり詳しく解説しません。あくまでもサンプルコードとして参考にしてください。

もちろんDebugもできます。エディタやブラウザで開発する時同様にconsole等で確認できますよ。

index.js

console.log(zone);

遊びポイント

#2. React環境のSetup。で紹介した方法を使って、npmやCDNが提供するライブラリを導入することができます。
コーディングやフロントエンドの実装を始める前に、簡単な概念実証（Proof of Concept）に使えそうですよね。

まとめ

今回はCodePenを利用してReact環境を構築し、簡単な世界時計を作成してみました。