一旦は実行できるようになった最初のReactアプリケーション"hello-world"ですが、実行する時には何やらバックエンドでウニュウニュ動いてますね。
これって何を実行しているんでしょうかね。
探ってみたいと思います。

yarn startは何をしている？

それでは実行時のコンソール出力を見てみましょう。
前回同様にメッセージに括弧付きの番号"()"を付けてから１つ１つ確認していきます。

yarn_start

satom@W1007018N182 MINGW64 ~/src/react-app/hello-world (master)

(1)
$ yarn start

(2)
yarn run v1.22.4

(3)
$ react-scripts start
i ｢wds｣: Project is running at http://192.168.3.8/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from C:\Users\satom\src\react-app\hello-world\public
i ｢wds｣: 404s will fallback to /

(4)
Starting the development server...
Compiled successfully!

(5)
You can now view hello-world in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.3.8:3000

(6)
Note that the development build is not optimized.
To create a production build, use yarn build.

(1) React開発サーバーの実行

単純に、yarnからReact開発サーバーを実行しています。内部的には(3)で説明している通りreact-script startが実行されています。
何故yarn startが```react-script start``になるのかは、別の記事で説明しますね。

(2) 実行したyarnコマンドのバージョン

単純なので割愛します。

(3) React開発サーバー（webpack-dev-server）起動時のステータス表示

内部的には"webpack-dev-server"(wds)という、フロントエンド開発時に使用できるWEBサーバーが起動しているようです。

参考までに、公式のwebpack-dev-serverの情報はこちらです。
https://github.com/webpack/docs/wiki/webpack-dev-server

複数メッセージが表示されていますが、開発サーバー起動時以下の内容をコンソールに出力しています。

wds実行時のURLを通知
webapckにより生成されたコンテンツのURL
webpackに存在しない静的コンテンツのURL
404エラー発生時はエラーとせずに"/"へフォールバックする

このように設定されるのは分かりました。ですが、これってどこで指定されているんでしょうね。これも別の記事で確認結果を書きたいと思います。
今は先に進みましょう。

と、その前に、webpackというキーワードが気になりますので、少しだけ調べてみました。

webpackとは

クライアント側のパッケージツールでした。私たちが作成したJavaScriptファイル（jsファイル）から参照している他のjsファイルやcssファイルやimageファイルをまるっと１つのjsファイルにまとめるためのJavaScriptライブラリです。（イメージファイルはbase64に符号化されて保存されるようです）
これを使うメリットは、

ネットワークトラフィックの負荷を軽減
レンダリングが高速化
モジュール管理が容易

デメリットは、CSSやイメージもパックされるので、デザイナーとの協業で苦労するようです。
とりあえず調べた内容をザックリ紹介しましたが、詳細は別の記事で書きたいと思います。

(4) WDSの起動

先ほど説明したwdsがここで起動されています。

(5) ReactアプリケーションへのアクセスURL

起動したReactアプリケーションにアクセスするためのローカルURLとネットワークURLが表示されます。
ただ、便利なことにwdsが実行されると、デフォルトブラウザが自動起動され、ここに表示されたURLにアクセスしてくれます。

(6) ビルドオプションの注意書き

最後に、開発用ビルドなので最適化されていないよーって通知してくれてます。
最終的に別環境にデプロイする時はyarn buildを使う事で配布用パッケージという形で生成されるようです。

以降の記事では、作成されたReactアプリケーションのプロジェクトファイルを１つ１つ確認していきたいと思います。Reactアプリケーションというのがどのようなファイル構成になっており、どのような原理で動作しているのか、あまり深く入りすぎず、理解できる程度の深度で追ってみたいと思います！