Reactアプリケーションでライブサーバーを使用できない理由は何ですか?

Question

ライブサーバーを使用して React アプリケーションを提供できないことはわかっています。つまり、js がバンドルされて HTML ファイルにリンクされている場合でも、ファイルを静的に開いた場合、React コードはレンダリングされません。

静的サーバーと動的サーバーについて学びましたが、React はすべてクライアント上で行われるため、webpack、vite、または単純な Express サーバーを使用してアプリを提供するのは機能するのに、ライブ サーバー経由では機能しない理由がわかりません。 、また手動で開いて操作することはできません。

違いは何ですか?

Answer 1

違いは、JavaScript コードがブラウザーでどのように実行されるかです。 Webpack 開発サーバー、Express サーバー、またはその他のタイプのサーバーを通じて React アプリケーションを提供する場合、JavaScript コードは Web ページのコンテキストで実行され、DOM とすべての Web API にアクセスします。 ただし、HTML ファイルを静的に開くと、JavaScript コードは

分離環境

で実行され、Web API へのアクセスは 制限付きになります。これが、DOM と Web API に依存する React コードを手動で開いた場合に機能しない理由です。

Webpack

、vite、express は、React の実行に必要なすべての API とサービスを備えた 動的環境 を提供します。これは、アプリケーションを HTTP 経由で Web ページとして提供することによって行われ、ブラウザによってロードされて実行されます。