2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【初心者必見】React × TypeScript 超かんたん環境構築

Posted at

Vite を使ってサクッと React × TypeScript の開発環境を作りましょう!
※Windowsで環境構築を行っています

✅ 対象者

  • JavaScriptの基礎を勉強した人
  • Reactの環境構築がよくわからない人
  • TypeScriptにも興味がある人

1. 前提条件

以下のソフトがインストールされていることを前提とします。

  • Node.js(公式サイト)(推奨:18以上)
  • npm(Node.jsをインストールすれば同時に使える)
  • ターミナル(コマンドライン)
  • エディタ(例:Visual Studio Codeが使いやすい)

※バージョン確認するといいかも(npm -v node -v)

2. プロジェクトの作成

まずはプロジェクトを作成しましょう。
Visual Studio Codeでターミナルを開き、開発用のフォルダ(例:dev)に移動します。

PS C:\Users\ユーザ名\Desktop\dev

その状態で以下のコマンドを実行します。

npm create vite@latest

実行すると、対話形式でいくつか質問されます。

  • プロジェクト名:my-react-app(好きな名前でOK)
  • フレームワーク:React
  • バリアント:TypeScript

以上が完了したら念のため今いるフォルダを確認しておきましょう。

cd プロジェクト名

最後にフォルダを開きます。

code .

3. 依存パッケージのインストール

プロジェクトのディレクトリに移動したら、依存パッケージをインストールします。

npm install

完成です:blush:

📝 お疲れさまでした!

ここまで読んでいただき、ありがとうございました!
一緒に開発頑張っていきましょう!!!

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?