MERNスタックシリーズ！-jsチュートリアル-php.cn

MERNスタックシリーズ！

Barbara Streisand

リリース： 2024-11-15 04:52:02

オリジナル

788 人が閲覧しました

The MERN stack series !

投稿 5: React を使用したフロントエンドユーザーインターフェイスの構築

ポスト 4 では、Express と Node.js を使用してユーザーデータの CRUD 操作を処理する RESTful API を開発しました。次に、React を使用してフロントエンド UI を作成します。これにより、ユーザーはバックエンドと通信する対話型インターフェイスを通じてデータを表示、追加、更新、削除できるようになります。

1.フロントエンドプロジェクトのセットアップ

まず、MERN スタックプロジェクト内でフロントエンドのセットアップの準備ができていることを確認しましょう。

フロントエンドフォルダーに移動し、HTTP リクエストを処理するために Axios をインストールします。

  cd frontend
  npm install axios

ログイン後にコピー

Axios を使用すると、Express API にリクエストを簡単に送信できるようになります。

2.基本的な React コンポーネントの作成

ユーザーを管理するためのコンポーネントを作成します。ユーザーをリストするためのメインコンポーネントと、ユーザーを追加または編集するためのフォームコンポーネントです。

コンポーネントフォルダーを整理する

src 内に、次のファイルを含むコンポーネントフォルダーを作成します。

UserList.js - ユーザーをリストする
UserForm.js - ユーザーの作成と編集用

ユーザーリストコンポーネント

UserList はバックエンドからユーザーデータを取得し、リストに表示します。次のコードを UserList.js に追加します:

// src/components/UserList.js
import React, { useState, useEffect } from "react";
import axios from "axios";

const UserList = ({ onEdit, onDelete }) => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await axios.get("/api/users");
        setUsers(response.data);
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    };
    fetchUsers();
  }, []);

  return (
    <div>
      <h2>User List</h2>
      <ul>
        {users.map(user => (
          <li key={user._id}>
            {user.name} - {user.email}
            <button onClick={() => onEdit(user)}>Edit</button>
            <button onClick={() => onDelete(user._id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

ログイン後にコピー

ユーザーフォームコンポーネント

UserForm コンポーネントはユーザーの作成と更新を処理します。

// src/components/UserForm.js
import React, { useState, useEffect } from "react";
import axios from "axios";

const UserForm = ({ selectedUser, onSave }) => {
  const [formData, setFormData] = useState({ name: "", email: "", password: "" });

  useEffect(() => {
    if (selectedUser) {
      setFormData(selectedUser);
    }
  }, [selectedUser]);

  const handleChange = e => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async e => {
    e.preventDefault();
    try {
      if (selectedUser) {
        await axios.put(`/api/users/${selectedUser._id}`, formData);
      } else {
        await axios.post("/api/users", formData);
      }
      onSave();
      setFormData({ name: "", email: "", password: "" });
    } catch (error) {
      console.error("Error saving user:", error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} placeholder="Name" required />
      <input name="email" value={formData.email} onChange={handleChange} placeholder="Email" required />
      <input name="password" value={formData.password} onChange={handleChange} placeholder="Password" required />
      <button type="submit">{selectedUser ? "Update User" : "Add User"}</button>
    </form>
  );
};

export default UserForm;

ログイン後にコピー

3.すべてをアプリコンポーネントにまとめる

App.js では、UserList と UserForm を組み合わせてユーザーのリストを表示し、ユーザーの追加/更新を処理します。

// src/App.js
import React, { useState } from "react";
import UserList from "./components/UserList";
import UserForm from "./components/UserForm";
import axios from "axios";

const App = () => {
  const [selectedUser, setSelectedUser] = useState(null);

  const handleEdit = user => setSelectedUser(user);

  const handleDelete = async userId => {
    try {
      await axios.delete(`/api/users/${userId}`);
      window.location.reload();
    } catch (error) {
      console.error("Error deleting user:", error);
    }
  };

  const handleSave = () => {
    setSelectedUser(null);
    window.location.reload();
  };

  return (
    <div>
      <h1>Manage Users</h1>
      <UserForm selectedUser={selectedUser} onSave={handleSave} />
      <UserList onEdit={handleEdit} onDelete={handleDelete} />
    </div>
  );
};

export default App;

ログイン後にコピー