【TypeScript】初心者がReactの環境を整える
3762 ワード
はじめに
はじめに，本記事で筆者が使用している環境についてまとめます．
環境
| 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を動かす環境ができたので，これから早速触っていこうと思います！
Author And Source
この問題について(【TypeScript】初心者がReactの環境を整える), 我々は、より多くの情報をここで見つけました https://zenn.dev/a5chin/articles/first_app_react著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol