ホームページ >ウェブフロントエンド >jsチュートリアル >React と Node.js を使用して効率的なサーバーサイド アプリケーションを構築する方法
React と Node.js を使用して効率的なサーバーサイド アプリケーションを構築する方法
- WBOYオリジナル
- 2023-09-28 11:09:291005ブラウズ
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 サイトの他の関連記事を参照してください。