以前のブログで React と Node.js を紹介しました。さあ、これらを組み合わせて、さらにエキサイティングなもの、つまりシンプルなフルスタック アプリケーションを構(gòu)築しましょう。フルスタック アプリは、複數(shù)のデータベースと複雑な構(gòu)造を備えた大規(guī)模なプロジェクトのみに適していると思われるかもしれません。概念的にはその通りですが、実際には、フルスタック アプリケーションは、基本的なバックエンドを備えた小さなフロントエンドと同じくらい単純になります。それでは、分解して、React と Node.js を使用してフルスタック アプリを作成するのがいかに簡単かを見てみましょう。

ステップ 1: Node.js と Express を使用したバックエンド

バックエンドを作成することから始めましょう。 Express をサーバーとして使用し、シンプルな JSON メッセージ応答をフロントエンドに送信します。

1. Express をインストールします: 開始するには、まずターミナルで次のコマンドを?qū)g行して Express をインストールします。

   npm install express

1. サーバーを作成します: 次に、挨拶メッセージを返す単純なルートを備えたサーバーを作成しましょう。

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

説明:

• Express モジュールをインポートし、express() を使用してそのインスタンスを作成します。
• 挨拶メッセージを含む JSON オブジェクトで応答する?yún)g純な GET ルートを /greet に設(shè)定します。
• ポート 3000 でサーバーを起動すると、サーバーが実行中であることがコンソールに記録されます。

ステップ 2: React を使用したフロントエンド

それでは、React を使用してフロントエンドを作成しましょう。 useState と useEffect の 2 つのフックを使用して、バックエンドからデータを取得します。

1. React アプリを作成します: React アプリをまだセットアップしていない場合は、次のコマンドを?qū)g行して create-react-app を使用して React アプリを作成できます。

   npx create-react-app my-fullstack-app
   cd my-fullstack-app

1. フロントエンド コードを記述します: 次に、バックエンドからデータを取得して表示するように App.js ファイルを変更しましょう。

   import { useState, useEffect } from 'react';

   export function App() {
     const [response, setResponse] = useState(null);

     useEffect(() => {
       const controller = new AbortController();
       // This is used to abort the fetch request if the component is unmounted
       const fetchData = async () => {
         try {
           const response = await fetch('http://localhost:3000/greet', {
             signal: controller.signal,
           });

           if (!response.ok) throw new Error("Couldn't fetch data");

           const data = await response.json();
           setResponse(data.message); // Corrected the response property here
         } catch (error) {
           console.error(error);
         }
       };

       fetchData();

       // Clean up function to abort the fetch request if needed
       return () => controller.abort();
     }, []); 

     return (
       <div>
         {response ? <p>{response}</p> : <p>Loading...</p>}
       </div>
     );
   }

説明:

• useState は、バックエンドからの応答データを保持するために使用されます。
• useEffect は、コンポーネントのマウント時(shí)にフェッチ リクエストをトリガーするために使用されます。
• fetch() API を使用して http://localhost:3000/greet にリクエストを送信し、応答を処理します。フェッチが成功すると、バックエンドからのメッセージで応答狀態(tài)を更新します。
• リクエストの進(jìn)行中はコンポーネントにレスポンスが表示され、「Loading...」と表示されます。

ステップ 3: アプリを?qū)g行する

1. バックエンドを開始します: バックエンド フォルダー (server.js ファイルがある場所) で、次のコマンドを?qū)g行します。

   npm install express

1. フロントエンドを開始します: フロントエンド フォルダー (React アプリが配置されている場所) で、次を?qū)g行します。

   const express = require('express'); 

   const app = express();
   const PORT = 3000;

   app.get('/greet', (req, res) => {
     res.status(200).json({ message: "Zee here..." });
   });

   app.listen(PORT, () => console.log(`Server is running at http://localhost:${PORT}`)); 

次に、ブラウザを開いて http://localhost:3000 にアクセスします。バックエンドから取得された簡単なメッセージが表示され、「Zee here...」と表示されます。

結(jié)論

それで終わりです! React と Express を使用して、シンプルなフルスタック アプリケーションを作成しました。これは素晴らしいスタートであり、この基盤を使用して、より複雑なアプリケーションを拡張および構(gòu)築できます。コーディングを楽しんでください!

重要なポイント:

• フルスタック アプリケーションは複雑である必要はありません。単純なフロントエンドとバックエンドはフルスタックとみなすことができます。
• React の useState フックと useEffect フックは、バックエンド API からデータをフェッチするのに最適です。
• Express は、バックエンド API を構(gòu)築するためのシンプルで強(qiáng)力なフレームワークです。

以上がReact と Node.js を使用したシンプルなフルスタック アプリケーションの作成の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。