【環境構築】Reactのプロジェクト作成&起動方法について〜npm・yarn & JavaScript・TypeScript〜 #React

背景

フロントエンド開発でモダンなフレームワークとして有名なReactがあります。
Reactのプロジェクトを作成&起動する際にはパッケージマネージャーであるnpmかyarnを使用することが多くあります。
パッケージマネージャーごとに起動コマンドは異なりますが、記事によってはコマンドがごちゃ混ぜで紹介されている記事も散見されました。
また、DockerでReactの環境構築方法を紹介している記事もたくさんありましたが、DockerfileにReactのプロジェクトの起動コマンドが記載されており、初見ではよくわからない記事が多くありました。
そこで、Reactプロジェクトの起動&作成はDocekrの内部に入ってから行う方法をベースに、それぞれのパッケージマネージャーごとのReactの起動方法を整理して紹介したいと思います。
記事の文章量が多くなりすぎるので、実際のやり方は別記事を作成していますので、そちらを参照してください。この記事は、Reactの起動方法について整理して理解することを目的に執筆しています。

Reactのプロジェクトを作成する際には、create-react-appというコマンドを使用するのが一般的です。
このcreate-react-appコマンドを使用して、Reactのプロジェクトを作成する際に、雛形としてプログラムの言語をJavaScriptかTypeScriptに設定することができます。
正確には、デフォルトではJavaScriptでプロジェクトが作成され、コマンドにオプションをつけることで、TypeScriptでプロジェクトを作成することができます。
以上を踏まえると、「Reactのプロジェクトの起動＆作成方法」は以下の4パターンになります。
1. npmを使用するパターン
  1. npmでJavaScriptを使用してReactプロジェクトを作成する方法
  2. npmでTypeScriptを使用してReactプロジェクトを作成する方法
2. yarnを使用するパターン
  1. yarnでJavaScriptを使用してReactプロジェクトを作成する方法
  2. yarnでTypeScriptを使用してReactプロジェクトを作成する方法
上記の実際の構築方法については、リンク先の別記事を参考ください。（リンクがない記事は現在作成中です）

Reactのプロジェクトの方法を4つ紹介しましたが、実際に使用するのはTypeScriptでプロジェクトを作成する2つの方法だと思います。
TypeScriptとJavaScriptの大きな違いは、静的型付けの有無（JavaScriptに静的型付け機能を追加したのがTypeScript）ですが、基本的に型が決まっている方が、スクリプトは安定して挙動しますし、複数人で開発する時にも間違いが少なくなります。
上記のような背景から、基本的に現状新しくフロントの開発を行う際は、TypeScriptを使用するのが無難であるため、TypeScriptを使用する方法しか使わないようにした方が良いと考えています。