冒頭
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環境を構築し、簡単な世界時計を作成してみました。