Hello Zero 开源项目教程

Hello Zero 开源项目教程

hello-zero 项目地址: https://gitcode.com/gh_mirrors/he/hello-zero

1. 项目介绍

Hello Zero 是一个开源项目，它是一个基于 React 的应用程序示例，展示了如何使用 Zero 进行前端数据管理和后端服务。Zero 是一个用于构建现代化、实时、可扩展的应用程序的工具，它提供了数据同步、实时更新和简化开发流程的功能。

2. 项目快速启动

环境准备

• PostgreSQL 数据库，并确保开启 Write-Ahead Logging (WAL)。
• 设置环境变量，包括数据库连接字符串、认证密钥等。

安装依赖

npm i

启动服务

1. 启动 PostgreSQL 数据库服务。
2. 在一个终端运行 Zero 缓存服务器：

npx zero-cache

3. 在另一个终端运行 React 开发服务器（具体命令取决于你的 React 应用设置）：

npm run dev

初始化 Zero 客户端

在你的应用入口文件中设置 Zero 提供者：

import { Zero } from '@rocicorp/zero';
import { ZeroProvider } from '@rocicorp/zero/react';
import { schema } from './schema';

const z = new Zero({
  userID: 'your-user-id',
  auth: 'your-auth-token',
  server: import.meta.env.VITE_PUBLIC_SERVER,
  schema,
});

createRoot(document.getElementById('root')!).render(
  <ZeroProvider zero={z}>
    <App />
  </ZeroProvider>
);

3. 应用案例和最佳实践

使用 Zero 进行数据查询

在你的 React 组件中，你可以使用 useQuery 钩子来查询数据：

import { useQuery, useZero } from '@rocicorp/zero/react';
import { Schema } from './schema';

const UsersPage = () => {
  const z = useZero<Schema>();
  const users = useQuery(z.query.user);

  if (!users) {
    return null;
  }

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

实现认证

项目示例中包含了基于 JWT 的认证。你可以在 api/index.ts 文件中找到一个使用 Hono 实现的认证示例。

4. 典型生态项目

Zero 可以与多种前端框架和后端服务配合使用，以下是一些典型的生态项目：

• React: 使用 Zero 实现响应式数据管理。
• Vue: 结合 Vue.js 构建实时应用。
• Node.js: 在 Node.js 应用中集成 Zero 服务端功能。

这些只是 Zero 生态的一部分，社区中还有更多项目和插件可供探索和集成。

hello-zero 项目地址: https://gitcode.com/gh_mirrors/he/hello-zero