VSCodeのdevcontainerを使ってReact+TypeScript環境を作ってチュートリアルやってみる。

• PJディレクトリ作る。ディレクトリ名は適当に

mkdir react-tutorial && cd react-tutorial

• VSCode開いて上記のディレクトリオープン

• コマンドパレット開いて Remote-Containers:Add ...と打ってEnter
  

• 次に type と打って Node.js & Typescript を選択
  

• バージョン選ぶ。今回はdefaultにした。
  
  このあと追加で必要なパッケージやツールがあればチェックボックスオンにしてインストールする。

• できるとこんな感じ。
  

• devcontainerを起動する。コマンドパレット開いて Reopen in Container を選択し起動。
  

• 再度開く。ターミナルが以下のようになっていればOK。
  

• 次にReact入れる。お約束のコマンド。

npx create-react-app myapp --template typescript

• インストール完了後、一旦開発サーバ立ち上げてみる。

cd myapp && npm start

とりあえず立ち上がった。

そのあと一旦src配下をクリーンアップする。

cd myapp/src
rm -rf *

新たにindex.tsx, index.cssをsrc配下に作成
こちらのcssとjsのソースをそれぞれ index.css と index.tsxにコピペする

ビルドしても下記の通りエラーとなるので解消する。

• renderSquareの引数 i を型定義する。
• index.tsxの冒頭に下記を追加

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

一旦これでエラーは解消される

こちらの章からスタートする

それでも下記のエラーが表示される。

コンポーネントのプロパティを定義する必要があるので定義する。

interface ISquareProps {
    value: number;
}

クラス定義を以下の通り変更すると解消される。

Before

class Square extends React.Component {
    render() {
        return (
            ...
        );
    }
}

After

class Square extends React.Component<ISquareProps, []> {
    render() {
        return (
            ...
        );
    }
}