【环境搭建】关于创建和启动React项目的方法 – npm·yarn和JavaScript·TypeScript

背景

• フロントエンド開発でモダンなフレームワークとして有名なReactがあります。

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

目标

npmとyarnでReactでのプロジェクトを作成&起動の種類を知る。

关于如何启动和创建React项目的方法

Reactのプロジェクトを作成する際には、create-react-appというコマンドを使用するのが一般的です。
このcreate-react-appコマンドを使用して、Reactのプロジェクトを作成する際に、雛形としてプログラムの言語をJavaScriptかTypeScriptに設定することができます。
正確には、デフォルトではJavaScriptでプロジェクトが作成され、コマンドにオプションをつけることで、TypeScriptでプロジェクトを作成することができます。
以上を踏まえると、「Reactのプロジェクトの起動＆作成方法」は以下の4パターンになります。

npmを使用するパターン

npmでJavaScriptを使用してReactプロジェクトを作成する方法
npmでTypeScriptを使用してReactプロジェクトを作成する方法

yarnを使用するパターン

yarnでJavaScriptを使用してReactプロジェクトを作成する方法
yarnでTypeScriptを使用してReactプロジェクトを作成する方法

上記の実際の構築方法については、リンク先の別記事を参考ください。（リンクがない記事は現在作成中です）

最终选择何种方法来使用呢？

Reactのプロジェクトの方法を4つ紹介しましたが、実際に使用するのはTypeScriptでプロジェクトを作成する2つの方法だと思います。

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

请参考以下资料
请参考下列来源
以下是一些参考资料
以下资料可供参考
请参考下述资料

个人博客