【React】Windowsでの環境構築手順。～ typescript版～

今回の記事はWindows環境にtypescriptベースのReact開発環境を構築する手順に関してご紹介します。最近の流行りである、Reactを用いて開発を行おうと考えている方は是非参考に、開発環境を構築してみてください。

WindowsでtypescriptベースのReact開発環境構築流れ

今回のメインテーマとなるReact環境構築ですが、下記手順で環境構築を行います。

順番にご紹介していきます。

まずは下記URLより「node.js」をインストールします。こちらはReactを動かすうえで必要です。

推奨版（今回は16.15.0）をダウンロードします。ここは皆さんが環境構築する段階での推奨版で問題ないです。

インストーラーがダウンロードされるので、そちらをクリックし、メッセージ通りに何も変更せずにインストールしましょう。

Finishの表示が出るまで進めばインストール完了です。

コマンドラインなどで下記コマンドを押下し、バージョンが表示されればOKです。

node --version
v16.15.0

次はVSCodeのインストールに進みます。

VSCodeのインストールも簡単です。下記URLより最新版をインストールしましょう。

こちらもnodeと同様メッセージボックスが表示されるのですべて何も変更せずに進んでください。

インストール完了後VSCodeが無事開けます。

ではVSCodeが開かれている前提で話を進めます。

VSCodeのターミナルを開き、Reactプロジェクトを配置するフォルダまで移動します。その後下記コマンドを実行します。

npx create-react-app --template typescript SampleApp

SampleAppというReactプロジェクトができます。これでいつでも開発できる環境になりました。

では、最後にVSCodeに開発用に拡張機能を追加します。

拡張機能は必須ではないですが、開発を行う上で追加しておくと便利です。というかするのが普通です。下記は必須で追加しておきましょう。

では最後に、上記までの工程で作成したReactプロジェクトを起動してみましょう。

まずは、作成したアプリのフォルダにVSCodeのターミナルで進みます。

cd SampleApp

次に下記でReactプロジェクトを起動します。

npm start

下記画面がブラウザで開かれ、下記画面が表示されるはずです。

これで、開発環境としては構築完了です。では今回の記事は以上です。ほかにもtypescriptベースのReact関連の記事を記載しているので気になる方は是非参考にしてみてください。