Django + React + TypeScript 项目教程

Django + React + TypeScript 项目教程

django-react-typescript This is a non-opinionated Django + React boilerplate built with great development experience and easy deployment in mind. 项目地址: https://gitcode.com/gh_mirrors/dj/django-react-typescript

1. 项目介绍

django-react-typescript 是一个非意见性的 Django 5 + React 18 样板项目，旨在提供出色的开发体验和易于部署的特性。该项目结合了 Django 的后端强大功能和 React 的前端灵活性，使用 TypeScript 进行类型安全开发。无论是快速启动博客、个人作品集网站，还是更复杂的应用程序，该项目都能满足需求。

2. 项目快速启动

2.1 环境准备

在开始之前，请确保您的机器上已安装以下工具：

• pnpm
• Poetry

2.2 克隆项目

首先，克隆项目到本地：

git clone https://github.com/marcelovicentegc/django-react-typescript.git
cd django-react-typescript

2.3 安装依赖

安装前端和后端的依赖：

pnpm run bootstrap

2.4 配置数据库

您需要一个 Postgres 数据库实例。无论是本地还是远程数据库，只需确保在 .env 文件中配置正确的凭据。

如果您想使用 Docker + Docker Compose 启动本地 Postgres 实例，可以使用以下命令：

pnpm run dev:db:up

2.5 运行项目

启动项目：

pnpm dev

或者，如果您已经设置了 Docker Compose 数据库：

pnpm dev:full

默认情况下，前端应用将在 localhost:4000 运行，后端应用将在 localhost:8000 运行。

3. 应用案例和最佳实践

3.1 博客系统

使用 django-react-typescript 可以快速搭建一个博客系统。Django 提供强大的后台管理功能，React 提供灵活的前端展示，TypeScript 确保代码的类型安全。

3.2 个人作品集网站

对于个人开发者或设计师，可以使用该项目搭建一个展示个人作品的网站。Django 可以管理作品数据，React 可以实现动态展示效果。

3.3 复杂应用

对于需要内容管理系统（CMS）的复杂应用，该项目同样适用。Django 的模型和视图可以处理复杂的数据逻辑，React 的前端组件可以实现丰富的用户交互。

4. 典型生态项目

4.1 Django Rest Framework

Django Rest Framework 是 Django 的一个强大扩展，用于构建 Web API。该项目中已经集成了 Django Rest Framework，方便开发者快速构建 RESTful API。

4.2 Tailwind CSS

Tailwind CSS 是一个实用优先的 CSS 框架，该项目中已经集成了 Tailwind CSS，方便开发者快速构建美观的界面。

4.3 Sentry

Sentry 是一个开源的错误跟踪工具，该项目中已经集成了 Sentry，方便开发者监控和调试应用中的错误。

通过以上模块的介绍和快速启动指南，您可以快速上手并使用 django-react-typescript 项目进行开发。

django-react-typescript This is a non-opinionated Django + React boilerplate built with great development experience and easy deployment in mind. 项目地址: https://gitcode.com/gh_mirrors/dj/django-react-typescript