使用 Mirage 开发 React 组件

直接在您的 React 组件中模拟 API 端点，这样您就可以在没有任何后端服务的情况下继续本地开发。

步骤 1: 安装 Mirage

首先，确保您已将 Mirage 添加到您的项目中

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

步骤 2: alongside your networking code 创建一个服务器

在组件文件中，从 Mirage 导入 Server，创建一个服务器，并开始模拟您的代码所需的 API 端点

// src/App.js
import React, { useState, useEffect } from "react"
import { createServer } from "miragejs"

let server = createServer()
server.get("/api/users", { users: [{ id: 1, name: "Bob" }] })

export default function App() {
  let [users, setUsers] = useState([])

  useEffect(() => {
    fetch("/api/users")
      .then((res) => res.json())
      .then((json) => {
        setUsers(json.users)
      })
  }, [])

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

您现在可以继续开发您的 React 组件，并使用 Mirage 在开发过程中模拟您的后端 API 端点。

阅读 路由处理程序指南 以了解有关编写路由处理程序的更多信息。

准备好跨多个组件共享您的模拟代码了吗？查看有关 在开发和测试之间共享服务器 的指南。