React と Express を使用してフルスタック JavaScript アプリケーションを構築する方法

React と Express を使用してフルスタック JavaScript アプリケーションを構築する方法

はじめに:
React と Express は現在非常に人気のある JavaScript フレームワークであり、フロントエンドとバックエンド アプリケーションをそれぞれ構築します。この記事では、React と Express を使用してフルスタック JavaScript アプリケーションを構築する方法を紹介します。シンプルな TodoList アプリケーションを構築する方法を段階的に説明し、具体的なコード例を示します。

1. 準備
始める前に、必要なツールと環境を準備する必要があります:

1. Node.js と npm: Node がインストールされていることを確認します。 js と npm (Node.js のパッケージ マネージャー) については、次のようにコマンド ラインからそれらが正常にインストールされたかどうかを確認できます。

   node -v
   npm -v

2. プロジェクト フォルダーを作成します: 作業ディレクトリ内に作成します。フルスタック アプリケーション コードを保存するための新しいフォルダー。

2. バックエンドの構築

1. プロジェクトの初期化: プロジェクト フォルダーでコマンド ラインを開き、次のコマンドを実行して新しいノードを初期化します。 js プロジェクト :

   npm init -y

   これにより、プロジェクト関連の情報と依存パッケージを記録するためのデフォルトの package.json ファイルが作成されます。

2. Express とその他の依存関係をインストールする: コマンド ラインで次のコマンドを実行して、Express とその他の必要な依存関係をインストールします:

   npm install express body-parser cors --save

   ここでは、Express と body-parser をインストールしました。 cors は、HTTP リクエストとクロスドメインリクエストを処理するために使用されます。

3. Express サーバーの作成: プロジェクト フォルダーのルート ディレクトリに新しい JavaScript ファイルを作成し、server.js という名前を付けます。 server.js を開いて次のコンテンツを追加します:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(cors());

const PORT = process.env.PORT || 5000;

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

このコードでは、まず必要な依存関係パッケージを導入し、次に Express インスタンスを作成し、いくつかのミドルウェアをセットアップします。最後に、指定されたポート (デフォルトは 5000) で待機します。

4. ルーティングと API を追加します: server.js の編集を続け、既存のコードの下に次のコンテンツを追加します:

let todos = [];

app.get('/api/todos', (req, res) => {
  res.json(todos);
});

app.post('/api/todos', (req, res) => {
  const { todo } = req.body;
  todos.push(todo);
  res.json(todos);
});

このコード定義があります。ルートは 2 つあり、1 つはすべての Todo アイテムを取得するルート、もう 1 つは新しい Todo アイテムを追加するルートです。単純な配列 todos を使用して、すべての todo 項目を保存します。

5. サーバーを起動します。 コマンド ラインで次のコマンドを実行して、Express サーバーを起動します。

   node server.js

   すべてが正常であれば、コマンド ライン Server is running on port XXXX プロンプトは、サーバーが正常に起動したことを示します。

3. フロントエンドの構築

1. React アプリケーションを作成します: プロジェクト フォルダーに戻り、コマンド ラインで次のコマンドを実行して、新しい React アプリケーションを作成します:

   npx create-react-app client

   これにより、プロジェクト フォルダーの下に

   client という名前の新しいフォルダーが作成され、React フロントエンド アプリケーション コードが保存されます。

React コンポーネントの編集: 作成したばかりの
2. client/src/App.js ファイルを開き、その中のコードを次の内容に置き換えます:

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

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");

  useEffect(() => {
    fetch("/api/todos")
      .then(res => res.json())
      .then(data => setTodos(data));
  }, []);

  const handleInputChange = e => {
    setNewTodo(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    const todo = { todo: newTodo };

    fetch("/api/todos", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(todo)
    })
      .then(res => res.json())
      .then(data => setTodos(data))
      .catch(err => console.log(err));

    setNewTodo("");
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input value={newTodo} onChange={handleInputChange} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

このコードは、ToDo リストを表示するために使用される React 関数コンポーネント

App を定義します。このコンポーネントは、2 つの React フック (useState と useEffect) を使用して、コンポーネントの状態と副作用を処理します。 fetch 関数を使用して HTTP リクエストを送信し、データを取得します。

3. React アプリケーションを起動します。プロジェクト フォルダーの下のコマンド ラインを開き、

   client フォルダーに入り、次のコマンドを実行して React 開発サーバーを起動します。 ##

   npm start

   すべてがうまくいけば、ブラウザにシンプルな TodoList アプリケーションが表示され、新しい Todo アイテムを追加できます。

結論:

この記事の手順を通じて、React と Express を併用してシンプルなフルスタック JavaScript アプリケーションを構築することに成功しました。編集機能や削除機能の追加、データの保存にデータベースを使用するなど、ニーズに応じてアプリケーションの機能をさらに拡張できます。フルスタック開発を行うことで、フロントエンド技術とバックエンド技術の利点を同時に発揮し、開発効率を向上させることができます。

以上がReact と Express を使用してフルスタック JavaScript アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。