FullStack React - 快速启动的代码示例

你好，程序员！

本文精选了一系列FullStack React 示例，这些示例远不止是模板。所有提及的产品都支持 JWT 令牌身份验证、数据库（SQLite 或 Mongo）以及采用 Node.js、Flask 和 Django 等不同技术提供的 API 后端服务器。您可以从 Github 下载开源的全栈入门套件，并将其用于业余爱好和商业产品。

感谢阅读！ - 内容由管理仪表板提供。

• （新）Django React - 带有 Django 后端的全栈示例
• （免费）React Node JS Berry - 全栈 React 示例
• （免费）React Node JS Datta Able - 全栈 React 示例
• （免费）React Firebase Datta Able - 开源示例
• React Node JS Datta PRO - 高级全栈 React 示例
• React Firebase Datta PRO - 商业项目

上述产品可以与多个后端一起使用和组合，因为 API 接口对所有服务器都是通用的：

• （免费）Node JS API - Typescript / SQLite / TypeORM
• （免费）Django API - 简单的 JWT API 服务器
• （免费）Flask API - 简单的 JWT API 服务器
• Node JS API PRO - 具有更多功能和 MongoDB / Mongoose 作为数据库接口、Typescript 和 Docker 脚本。

Django React数据可用

开源全栈种子项目，采用 React 和 Django 编写，并基于现代设计。Django React代码库已配置 SQLite 数据库、API（通过DRF 实现）以及基于 JWT 令牌的身份验证流程。Datta Able是一个开源React 仪表板，拥有丰富多彩的现代设计。

• Django React - 产品页面
• Django React Datta PRO - 高级版本

全栈 React Berry

Berry 是一款使用 Material-UI 构建的创意 React 仪表板。它旨在通过高度可定制且功能丰富的页面，提供最佳的用户体验。它是一个彻底颠覆性的 React 仪表板模板，拥有简单直观的响应式设计，如同在视网膜屏幕或笔记本电脑上一样流畅显示。该产品附带简单的 JWT 身份验证流程：登录/注册/注销。

• React Node JS Berry - 产品页面
• React Node JS Berry - 在线演示

全栈 React 数据可用

Datta Able 是一款开源的 React 仪表板，提供丰富多彩的现代设计。Datta Able React Free 是市面上风格最独特的 React Free 管理模板，远胜于市面上所有其他管理模板。它拥有功能丰富的页面和组件，并完全以开发人员为中心。该产品提供简单的 JWT 身份验证流程：登录/注册/注销。

• React Node JS Datta Able - 产品页面
• React Node JS Datta Able - 在线演示

全栈 React Firebase Datta

此开源示例附带Firebase集成和通过 Google 的社交登录。

• React Firebase Datta Able - 产品页面
• React Firebase Datta Able - 现场演示

全栈 React Datta PRO

Datta Able 是一款高级 React 仪表板，提供丰富多彩的现代设计。Datta Able React PRO 是市面上风格最独特的 React 免费管理模板，远胜于市面上所有其他管理模板。它拥有功能丰富的页面和组件，并完全以开发人员为中心。

• React Nodejs Datta Able PRO - 产品页面
• React Nodejs Datta Able PRO - 在线演示

React Firebase Datta PRO

该商业产品使用与之前的示例相同的高级设计，并且代码库通过 Google 提供支持的社交登录，当然由 Firebase 提供支持。

• React Firebase Datta PRO - 产品页面
• React Firebase Datta PRO - 在线演示

如前所述，所有上述示例都配置为与统一的简单 API 接口进行通信，该接口共享管理简单 JWT 身份验证所需的所有操作：

• API：登录/注销/注册
• editUser- 允许更新用户相关信息

为了使本文真正有用，我们可以使用项目README提供的信息构建 Node JS API 服务器。

步骤＃1 - 克隆源

$ git clone https://github.com/app-generator/api-server-nodejs.git
$ cd api-server-nodejs

步骤＃2 - 使用 NPM 或 Yarn 安装模块

$ npm i
// OR
$ yarn

步骤＃3 - 通过 TypeORM 运行 SQLite 迁移

$ yarn typeorm migration:run

步骤＃4 - 启动 API 服务器（开发模式）

$ npm dev
// OR
$ yarn dev

此时，API 服务器应该已启动并运行，我们可以使用 POSTMAN 或提到的 React Samples 来获得完整的全栈体验。

感谢阅读！如需更多资源和支持，请访问：

• 开源仪表板- 由 AppSeed 提供
• 免费React 仪表盘- Dev.to 上发布的精选列表