【TypeScript】初心者がReactの環境を整える

はじめに

はじめに，本記事で筆者が使用している環境についてまとめます．

環境

PC	MacBook Pro (16-inch, 2019)
OS	Monterey
CPU	2.3 GHz 8コアIntel Core i9
メモリ	16GB
brew	3.4.4

事前準備

早速TypeScriptでReactを動かすための環境を作成していきます．

node.jsのインストール

まずこちらからnode.jsをダウンロードして，指示に従いインストールします．
インストールできたら，以下のコマンドでバージョンを確認してみましょう．

terminal

node -v
# v14.16.0

yarnのインストール (任意)

下記のコマンドでyarnをインストールします．

terminal

brew install yarn --ignore-dependencies

インストールしたら以下のコマンドでバージョンを確認してみましょう．

terminal

yarn -v
# 1.22.18

--ignore-dependenciesをつけておくと、複数nodeの依存関係を無視させることができるみたいです．

Reactアプリケーションの作成

以下のコマンドでReactアプリケーションを作成します．

terminal

npx create-react-app ${Project Name} --template typescript

コマンドを実行すると以下のディレクトリやファイルが作成されます．

terminal

${ROOT}
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts
└── tsconfig.json

アプリケーションの実行

以下のコマンドでアプリケーションを実行します．

terminal

npm start
# yarn start  # yarnを使う場合

実行したらhttp://localhost:3000/にアクセスしてみましょう．

おわりに

TypeScriptでReactを動かす環境ができたので，これから早速触っていこうと思います！