React と Node.js を使用して効率的なサーバーサイドアプリケーションを構築する方法-jsチュートリアル-php.cn

React と Node.js を使用して効率的なサーバーサイドアプリケーションを構築する方法

WBOY

リリース： 2023-09-28 11:09:29

オリジナル

962 人が閲覧しました

React と Node.js を使用して効率的なサーバーサイドアプリケーションを構築する方法

近年、React と Node.js は、次の分野で非常に人気が高まっています。フロントエンド開発技術。 React はインタラクティブなユーザーインターフェイスの構築に役立つ効率的なフロントエンドフレームワークであり、Node.js は効率的なサーバーサイドアプリケーションを簡単に構築できるイベント駆動型の開発プラットフォームです。 React と Node.js を組み合わせることで、より効率的で強力なサーバーサイドアプリケーションを構築できます。

この記事では、React と Node.js を使用して効率的なサーバーサイドアプリケーションを構築する方法を検討し、いくつかの具体的なコード例を示します。

ステップ 1: プロジェクト構造を作成する

まず、サーバー側アプリケーションを構築するための新しいプロジェクトを作成する必要があります。 Create React App や Webpack など、使い慣れたプロジェクト構築ツールを使用できます。

プロジェクトのルートディレクトリに、server という名前の新しいフォルダーを作成します。サーバーフォルダーに、サーバー側コードのエントリファイルとして、index.js という名前の新しいファイルを作成します。

ステップ 2: 基本サーバーを構築する

index.js ファイルで、基本サーバーを構築するために必要なモジュールをいくつかインポートする必要があります。 Express.js を使用すると、簡単なサーバーをすばやく構築できます。

まず、Express.js をインストールする必要があります。ターミナルでサーバーフォルダーに移動し、次のコマンドを実行します。

npm install express

ログイン後にコピー

次に、index.js ファイルに必要なモジュールをインポートします。

const express = require('express');

// 创建Express实例
const app = express();

// 定义端口号
const port = 3000;

// 定义默认路由
app.get('/', (req, res) => {
  res.send('Hello, world!');
});

// 监听端口
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

ログイン後にコピー

このコードは、単純な Express サーバーを作成します。そしてルートルート上で単純なテキスト応答を返しました。ブラウザで http://localhost:3000 にアクセスすると、結果を表示できます。

ステップ 3: React コンポーネントの導入

基本的なサーバーができたので、React コンポーネントを導入し、サーバーにレンダリングします。

まず、React と ReactDOM をインストールする必要があります。ターミナルでプロジェクトのルートディレクトリに移動し、次のコマンドを実行します。

npm install react react-dom

ログイン後にコピー

次に、index.js ファイルに必要なモジュールをインポートします。

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

// 创建Express实例
const app = express();

// 定义端口号
const port = 3000;

// 引入React组件
const App = require('./src/App');

// 定义默认路由
app.get('/', (req, res) => {
  // 将React组件渲染为HTML字符串
  const html = ReactDOMServer.renderToString(React.createElement(App));

  // 将HTML字符串发送给浏览器
  res.send(html);
});

// 监听端口
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

ログイン後にコピー

このコードでは、次のコードを導入します。 App コンポーネントを作成し、ReactDOMServer の renderToString メソッドを使用して HTML 文字列にレンダリングします。次に、この HTML 文字列をブラウザに送信して、サーバーでレンダリングできるようにします。

ステップ 4: サーバー側レンダリングの最適化

前のステップでは、React コンポーネントをサーバーに正常にレンダリングしました。ただし、このようなサーバー側レンダリングは React のクライアント側レンダリング機能を利用しないため、理想的ではありません。

サーバー側のレンダリングを最適化するために、React のハイドレーションメソッドを使用できます。ブラウザでは、ReactDOM.render メソッドを使用してコンポーネントを DOM にレンダリングし、その過程でサーバー側でレンダリングされた HTML と比較します。

index.js ファイルでは、サーバー側のレンダリングコードにいくつかの変更を加える必要があります:

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const ReactDOM = require('react-dom');

// 创建Express实例
const app = express();

// 定义端口号
const port = 3000;

// 引入React组件
const App = require('./src/App');

// 定义默认路由
app.get('/', (req, res) => {
  // 将React组件渲染为HTML字符串
  const html = ReactDOMServer.renderToString(React.createElement(App));

  // 将HTML字符串发送给浏览器
  res.send(`
    <html>
      <head>
        <title>Server-side Rendering</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

// 监听端口
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

ログイン後にコピー

上記のコードでは、必要な JavaScript ファイルへのリンクを含む HTML コードを追加します。クライアント側のレンダリング用。このように、Reactはブラウザ上でサーバー側で描画されたHTMLの構造とクライアント側で描画されたJavaScriptコードを比較し、更新が必要な部分のみを更新することで描画効率を向上させます。

ステップ 5: ビルドとデプロイ

これで、React と Node.js を使用して効率的なサーバーサイドアプリケーションを構築するための基本的な手順が完了しました。次に、構築してデプロイする必要があります。

まず、React アプリケーションを構築する必要があります。ターミナルで、プロジェクトのルートディレクトリに移動し、次のコマンドを実行します。

npm run build

ログイン後にコピー

次に、サーバーコードを運用環境にデプロイする必要があります。クラウドサーバーでもローカルサーバーでも、使い慣れた任意のサーバーにデプロイすることを選択できます。

最後に、サーバーを起動し、ブラウザーでサーバー URL にアクセスして、サーバー側の React アプリケーションの効率的なレンダリング効果を確認します。

概要

React と Node.js を使用して効率的なサーバー側アプリケーションを構築すると、React のクライアント側レンダリング機能と Node.js の強力なパフォーマンスを組み合わせて、アプリケーションのレンダリング効率を向上させることができます。そしてユーザーエクスペリエンス。この記事の導入を通じて、基本的なサーバーを構築して React コンポーネントを導入する方法、およびハイドレーションメソッドを使用してサーバー側のレンダリングを最適化する方法を学びました。

もちろん、これは React と Node.js を使用して効率的なサーバーサイドアプリケーションを構築するための単なる導入ステップにすぎません。実際のアプリケーションでは、ルーティング、データベース接続、ID 認証などの他の要素も考慮する必要がある場合があります。この記事が、React と Node.js を使用したサーバーサイドアプリケーション開発をすぐに開始し、アプリケーションのパフォーマンスとユーザーエクスペリエンスを向上させるのに役立つことを願っています。

以上がReact と Node.js を使用して効率的なサーバーサイドアプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。