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


はじめに

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

環境

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

事前準備

早速TypeScriptReactを動かすための環境を作成していきます.

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/にアクセスしてみましょう.

React

おわりに

TypeScriptReactを動かす環境ができたので,これから早速触っていこうと思います!