React と Node.js を使用したシンプルなフルスタック アプリケーションの作成

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

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

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

1. Express をインストールします: 開始するには、まずターミナルで次のコマンドを実行して 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 オブジェクトで応答する単純な GET ルートを /greet に設定します。
• ポート 3000 でサーバーを起動すると、サーバーが実行中であることがコンソールに記録されます。

---

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

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

1. React アプリを作成します: React アプリをまだセットアップしていない場合は、次のコマンドを実行して 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 は、コンポーネントのマウント時にフェッチ リクエストをトリガーするために使用されます。
• fetch() API を使用して http://localhost:3000/greet にリクエストを送信し、応答を処理します。フェッチが成功すると、バックエンドからのメッセージで応答状態を更新します。
• リクエストの進行中はコンポーネントにレスポンスが表示され、「Loading...」と表示されます。

---

ステップ 3: アプリを実行する

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

   npm install express

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

   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...」と表示されます。

---

結論

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

---

重要なポイント:

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

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