React アプリケーションの Node.js バックエンドのセットアップ

React フロントエンドと Node.js バックエンドを組み合わせるのは、フルスタック Web アプリケーションを構築するための一般的で強力なセットアップです。 Node.js はサーバーサイド開発のための堅牢な環境を提供し、API、認証、データベース操作を効果的に処理できるようにします。このガイドでは、React アプリケーションの Node.js バックエンドのセットアップについて説明します。

前提条件
始める前に、以下がインストールされていることを確認してください:

• Node.js:nodejs.org からダウンロードします。
• npm または Yarn: Node.js にバンドルされています。
• JavaScript、React、Node.js の基本的な理解

ステップ 1: Node.js バックエンドを初期化する

1.新しいディレクトリを作成します:

mkdir react-node-app
cd react-node-app

2. Node.js プロジェクトを初期化します:

npm init -y 

これにより、デフォルト設定で package.json ファイルが生成されます。

3. Express.js をインストールします:
Express は、Node.js アプリケーションを構築するための軽量フレームワークです。

npm install express

ステップ 2: Express サーバーをセットアップする

1. Index.js ファイルを作成します:
プロジェクト ディレクトリに、index.js.

2.基本的なサーバー コードを作成します:

const express = require('express');  
const app = express();  
const PORT = 5000;  

app.get('/', (req, res) => {  
    res.send('Backend is running!');  
});  

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

3.サーバーを実行します:
次のコマンドでサーバーを起動します:

node index.js  

ブラウザで http://localhost:5000 にアクセスして、応答を確認します。

ステップ 3: React フロントエンドを接続する

1. React アプリを作成します:
同じディレクトリで、create-react-app または Vite を使用してフロントエンドをセットアップします。

npx create-react-app client  
cd client  

2. React アプリを実行します:
React 開発サーバーを起動します:

npm start

React アプリは http://localhost:3000 で実行されます。

ステップ 4: API 呼び出し用のプロキシを構成する

React から Node.js バックエンドに API リクエストを行うには、React アプリでプロキシを構成します。

1. package.json にプロキシを追加します:
React アプリの package.json に次の内容を追加します:

"proxy": "http://localhost:5000"

2. React で API 呼び出しを行う:
例: Node.js サーバーからデータを取得します。

import React, { useEffect, useState } from 'react';  

function App() {  
    const [message, setMessage] = useState('');  

    useEffect(() => {  
        fetch('/')  
            .then((res) => res.text())  
            .then((data) => setMessage(data));  
    }, []);  

    return <div>{message}</div>;  
}  

export default App; 

ステップ 5: API エンドポイントを追加する

カスタム API エンドポイントでバックエンドを強化します。

1. Index.js を更新します:

app.get('/api/data', (req, res) => {  
    res.json({ message: 'Hello from the backend!' });  
}); 

2. React を更新してデータを取得します:

useEffect(() => {  
    fetch('/api/data')  
        .then((res) => res.json())  
        .then((data) => setMessage(data.message));  
}, []);

ステップ 6: データベースに接続する (オプション)

バックエンドをより動的にするには、MongoDB などのデータベースに接続します。

1. MongoDB ドライバーまたは Mongoose をインストールします:

mkdir react-node-app
cd react-node-app

2.データベース接続のセットアップ:
Index.js ファイルを更新します:

npm init -y 

ステップ 7: アプリケーションをデプロイする

1. Heroku にバックエンドをデプロイするか、レンダリングします:

• Node.js バックエンドのホストには Heroku や Render などのプラットフォームを使用します。

2. React を Vercel または Netlify にデプロイします:

• Vercel や Netlify などのプラットフォームは、React アプリのデプロイに最適です。

結論
React アプリケーション用に Node.js バックエンドをセットアップすると、堅牢なフルスタック開発環境が提供されます。このガイドに従うことで、スケーラブルでパフォーマンスの高い Web アプリケーションを構築するための強固な基盤が得られます。バックエンドを配置すると、アプリケーションを拡張して、認証、リアルタイム更新、データベース統合などの機能を組み込むことができます。

コーディングを開始して、フルスタック プロジェクトを実現しましょう! ?

以上がReact アプリケーションの Node.js バックエンドのセットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。