CodePenでReact+TypeScript

React CodePen TypeScript

はじめに

JavaScriptの勉強にCodePenでデモとソースコードを並べてみながら色々やってみるのは生産性が高い。 React本家のチュートリアルでも盛んに使っている。

これをTypeScriptにしてみたので備忘です。

デモとソースコード

手順

  1. 設定でTypeScriptにする。
  2. 設定でCDNでreactとreact-domを指定する。
  3. Htmlは<div class="container"></div>と一行書く。
  4. JS (TypeScript) の最後の行にReactDOM.render(<App />, document.querySelector(".container"));と書く。
  5. Templateとしてsaveすれば、次回からは最下行のUse This Templateが使える。
  6. JS (TypeScript) の一行目に import React とか入れるとエラーになる。const { Component, useState, useEffect, useContext, createContext } = React; とか書く。今回のデモとソースコードでは使っていない。

逆にこのソースコードからローカルのプロジェクトを作る場合は一行目に必要な部品をimportするだけで良い。

便利だね!!!!

以上