RealWorld React FSD 项目教程

RealWorld React FSD 项目教程

realworld-react-fsd A social blogging site powered by React, Zustand, React-Query / Effector on FSD (Feature-Sliced Design) architectural methodology. 项目地址: https://gitcode.com/gh_mirrors/re/realworld-react-fsd

1. 项目介绍

RealWorld React FSD 是一个基于 React、Zustand 和 React-Query 构建的社交博客网站，采用了 FSD（Feature-Sliced Design）架构方法论。该项目是一个 RealWorld 示例应用，展示了如何使用现代前端技术栈实现一个功能齐全的社交博客平台。

主要功能

• 用户认证：通过 JWT 实现用户登录、注册和注销功能。
• 用户管理：支持用户信息的创建、读取和更新。
• 文章管理：支持文章的创建、读取、更新和删除。
• 评论管理：支持文章评论的创建、读取和删除。
• 分页功能：支持文章列表的分页展示。
• 标签功能：支持按标签筛选文章。

2. 项目快速启动

2.1 环境准备

确保你已经安装了 Node.js 和 Yarn。如果没有安装，请先安装：

• Node.js
• Yarn

2.2 克隆项目

git clone https://github.com/yurisldk/realworld-react-fsd.git
cd realworld-react-fsd

2.3 安装依赖

yarn install

2.4 启动开发服务器

yarn dev

启动后，访问 http://localhost:3000 即可查看应用。

2.5 构建生产版本

yarn build

构建完成后，生成的文件将位于 dist 目录中。

3. 应用案例和最佳实践

3.1 用户认证

在 src/features/auth 目录下，你可以找到用户认证相关的代码。通过 JWT 实现用户登录和注册功能，并将 token 存储在 localStorage 中。

3.2 文章管理

在 src/features/articles 目录下，你可以找到文章管理相关的代码。通过 React-Query 实现文章的 CRUD 操作，并使用 Zustand 管理全局状态。

3.3 评论功能

在 src/features/comments 目录下，你可以找到评论管理相关的代码。通过 React-Query 实现评论的 CRD 操作，并使用 Zustand 管理评论状态。

4. 典型生态项目

4.1 React

React 是一个用于构建用户界面的 JavaScript 库，广泛用于构建单页应用（SPA）。

4.2 Zustand

Zustand 是一个轻量级的状态管理库，适用于 React 应用。它提供了简单易用的 API，帮助开发者管理全局状态。

4.3 React-Query

React-Query 是一个用于管理 React 应用中的数据获取、缓存和更新的库。它提供了强大的 API，帮助开发者轻松处理异步数据。

4.4 Feature-Sliced Design

Feature-Sliced Design 是一种前端架构方法论，强调按功能模块划分代码结构，提高代码的可维护性和可扩展性。

通过以上模块的介绍和实践，你可以快速上手并深入理解 RealWorld React FSD 项目。

realworld-react-fsd A social blogging site powered by React, Zustand, React-Query / Effector on FSD (Feature-Sliced Design) architectural methodology. 项目地址: https://gitcode.com/gh_mirrors/re/realworld-react-fsd