MENU
  1. ホーム
  2. プログラミング言語
  3. React
  4. CodePenで「React × TypeScript」を行うための最低限の設定（注意点あり）

CodePenで「React × TypeScript」を行うための最低限の設定（注意点あり）

React TypeScript

CodePenで React × TypeScript のアプリケーションを試すための最低限のセッティングをご紹介します。

CodePen自体のセッティングが済んでいることが前提ですので、お済みでない方はまずアカウントの作成を行いましょう。

セッティング方法や、そもそもCodePenって何？などについてはこちらを参考にすると良いかと思います。

こんな人におすすめ！

・CodePenで気軽に React × TypeScript を試してみたい方

目次

やり方

STEP
TypeScriptの設定

新規作成後、右上の「Settings」を選択する。

するとこのような設定画面が表示されます。

「JavaScript Preprocesser」の項目を「TypeScript」にします。

STEP
Reactの設定

引き続き設定画面の「Add External Scripts/Pens」の項目に「react」と入力。

すると候補が表示されますので、

  1. react
  2. react-dom

の順番で追加します。

順番逆にするとエラーが発生してしまうので注意です！

最終的にこのような設定画面になればOKです。

右下の「Save & Close」をクリックして設定を保存しましょう。

STEP
最低限のコードを記入

HTML・JSの欄それぞれに下記のコードを追記します。

HTML

<div class="container"></div>

JS

const { Component, useState, useEffect, useContext, createContext } = React;

export default function App() {
  return (
    <>
      <h2>hoge</h2>
    </>
  )
}

ReactDOM.render(<App />, document.querySelector(".container"));

このように hoge と表示されれば成功です！

お疲れ様でした！

まとめ

簡単ではありますが、React × TypeScript の環境をCodePen上に構築する方法でした。

ご覧いただきありがとうございました！

案件、ありますか？

「メインの仕事があるけれど、週1、2日だけできる仕事ないかな、、、」

「ある程度スキルが身に付いてはきたけど、そのスキルを活用できる場が欲しい」

なんて悩みが以前はありました。

自分で仕事を探しに行くのも大事ですが、蛇の道は蛇。その道の人に頼むことで、自分だけでは見つからないような案件に携わることができます。

IT PRO パートナーズでは、簡単に無料でアカウントを登録でき、さらにはエージェントさんに希望の働き方・案件の種類を提示することでお仕事を紹介してくれます！

登録自体も非常に簡単で、「エージェントさんとの面談を希望する」という欄にチェックをするだけで、エージェントさんから直接連絡をいただくことができます。

驚くほど簡単で正直拍子抜けしてしまいました笑

もしお仕事探しに困っておりましたら、一度登録し案件を眺めてみることをおすすめします！

React TypeScript
CodePen React TypeScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

yamama72のアバター yamama72

勤めていた設計会社を退社し、フリーランスとして活動しています
また、趣味で主にpyhonを用いて機械学習を行なっています！
現在競艇の予測モデルの開発中です。

関連記事

コメント

コメント一覧 （1件）

コメントする

目次