【React学習シリーズ#1】環境構築

はじめに

React初心者が、Next.js×TypeScriptにてWEBアプリケーションを作成する際の個人的な開発メモになります。
1回あたりの文量は少ないですが、少しづつ学んだことをメモに起こしたいと思います。

前提条件

下記、環境については既に構築済の状態から始めます。

環境

各バージョンは以下のとおりです。
エディタは、Visual Studio Codeを使用します。

node -v
v16.16.0

npm --version
8.11.0

npx -v
8.11.0

create-react-app

Reactプロジェクト作成ツールを利用して、プロジェクトを作成します。
今回はTypeScriptを使用する為、--templete typscriptを使用します。

# npx create-react-app{バージョン} {プロジェクト名} --templete typscript
npx create-react-app@latest react-study-project --templete typscript

上記コマンドを実行すると環境が自動で構築されます。

以下が、表示されたら構築完了です。

実際に起動してみます。

# cd {プロジェクト名}
# プロジェクト直下へ移動
cd .\react-study-project\

# 起動
npm run start

無事に見慣れた画面が表示されました！

まとめ

今回は非常に基本的な部分ですが、
create-react-appを使用した環境構築を実施しました。
やはり、コマンド一つで環境が出来るのはすごい便利ですね。
次回以降は、作られた環境の中身を色々と見ていきたいと思います。
また、React hooks等もまだ理解できてない部分も多いので、
番外編として記事にまとめて見たいと思います。