React と Node.js を使用して高パフォーマンスのフルスタック アプリケーションを構築する方法
はじめに:
Web アプリケーションの開発では、高パフォーマンスのフルスタック アプリケーションを構築します。フルスタック アプリケーションのパフォーマンス アプリケーションの重要性はますます高まっています。 React と Node.js は、人気のあるフロントエンドおよびバックエンド テクノロジとして、フルスタック開発で広く使用されています。この記事では、React と Node.js を使用して高パフォーマンスのフルスタック アプリケーションを構築する方法を紹介し、具体的なコード例を示します。
1. 基本的なプロジェクト フレームワークを構築する
プロジェクト ディレクトリを作成する: まず、プロジェクト ディレクトリを作成し、新しい Node.js プロジェクトを初期化する必要があります。これは、次のコマンドを使用して実行できます:
mkdir my-app cd my-app npm init -y
React と関連する依存関係をインストールします: プロジェクト ディレクトリで次のコマンドを実行して、React と関連する依存関係をインストールします:
npm install react react-dom react-scripts
React コンポーネントの作成: App.js という名前のファイルを作成し、次のコードを追加します:
import React from 'react'; function App() { return (); } export default App;Hello, World!
エントリ ファイルの作成:index.js という名前のファイルを作成し、次のコードを追加します次のコード:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root') );
React App
npm start
const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello, World!'); }); const port = 5000; app.listen(port, () => { console.log(`Server listening on port ${port}`); });
npm install express
node server.js
import React, { useState, useEffect } from 'react'; function App() { const [message, setMessage] = useState(''); useEffect(() => { fetch('/api') .then((response) => response.text()) .then((data) => setMessage(data)); }, []); return (); } export default App;{message}
Node.js サーバーを変更します:server.js のコードを次のように変更します:
const express = require('express'); const app = express(); app.get('/api', (req, res) => { res.send('Hello, World from API!'); }); const port = 5000; app.listen(port, () => { console.log(`Server listening on port ${port}`); });
以上がReact と Node.js を使用して高性能のフルスタック アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。