当前位置: 首页 > news >正文

React技术栈搭配(全栈)(MERN栈、PERN栈)

文章目录

      • 1. MERN 栈
      • 2. PERN 栈
      • 3. React + Next.js + Node.js
      • 4. JAMstack (JavaScript, APIs, Markup)
      • 5. React + GraphQL + Node.js
      • 6. React Native + Node.js
      • 结论

React作为前端框架已经成为了现代web开发的重要组成部分。在全栈开发中,React通常会与其他技术搭配使用,形成完整的技术栈。让我们来深入探讨一下React全栈开发中的常见技术搭配:

1. MERN 栈

MERN栈是一种流行的全栈JavaScript解决方案,它由以下组件构成:

  • MongoDB:一个面向文档的NoSQL数据库
  • Express.js:一个基于Node.js的web应用框架
  • React:用于构建用户界面的JavaScript库
  • Node.js:一个JavaScript运行时环境

这种组合的优势在于它允许开发者在整个技术栈中使用JavaScript,从而简化了开发过程。想象一下,你可以用同一种语言来编写数据库查询、服务器逻辑和用户界面,这大大降低了学习曲线和开发复杂度。

2. PERN 栈

PERN栈与MERN栈类似,但它用PostgreSQL替换了MongoDB:

  • PostgreSQL:一个强大的关系型数据库
  • Express.js:同上
  • React:同上
  • Node.js:同上

这种组合适合那些需要关系型数据库强大功能的项目。比如,如果你的应用需要处理复杂的数据关系或需要进行事务处理,PostgreSQL可能是更好的选择。

3. React + Next.js + Node.js

这种组合利用了Next.js的服务器端渲染(SSR)能力:

  • React:用于构建用户界面
  • Next.js:一个React框架,提供SSR、静态站点生成等功能
  • Node.js:用于后端服务

Next.js为React应用提供了许多开箱即用的功能,如路由、代码分割等。这种组合特别适合需要优化SEO或首屏加载速度的应用。想象一个电商网站,它需要快速的页面加载和良好的搜索引擎排名,这种技术栈就非常适合。

4. JAMstack (JavaScript, APIs, Markup)

JAMstack不是特定的技术组合,而是一种架构模式:

  • React:用于构建静态网站或单页应用(SPA)
  • Static Site Generators (如Gatsby):用于生成静态HTML文件
  • Headless CMS (如Contentful或Strapi):用于内容管理
  • Serverless Functions:用于处理动态功能

JAMstack的核心理念是预渲染尽可能多的内容,然后通过API动态加载所需数据。这种方法可以带来出色的性能和安全性。想象一个博客平台,大部分内容都是静态的,但评论系统需要动态加载,JAMstack就非常适合这种场景。

5. React + GraphQL + Node.js

这种组合利用了GraphQL的灵活查询能力:

  • React:前端框架
  • Apollo Client:用于在React应用中集成GraphQL
  • GraphQL:一种用于API的查询语言
  • Node.js:后端运行时,通常配合Express.js使用
  • Apollo Server:用于创建GraphQL API

GraphQL允许客户端精确地指定它需要的数据,这可以显著减少过度获取或获取不足的问题。想象你正在开发一个社交媒体应用,不同的页面可能需要用户数据的不同部分。使用GraphQL,你可以为每个页面精确地请求所需的数据,而不是创建多个REST端点或过度获取数据。

6. React Native + Node.js

对于移动应用开发:

  • React Native:用于构建跨平台移动应用
  • Node.js:用于后端服务
  • Express.js:Web应用框架
  • MongoDB 或 PostgreSQL:数据库

这种组合允许开发者使用他们的React和JavaScript技能来构建移动应用。想象你需要为你的web应用开发一个配套的移动应用,使用React Native,你可以重用大部分的业务逻辑和状态管理代码,大大加快开发速度。

结论

选择哪种技术栈取决于项目的具体需求、团队的技能集以及可扩展性考虑。每种组合都有其优势和适用场景。作为一个开发者,理解这些不同的技术栈及其适用情况,可以帮助你为项目做出最佳的技术选择。

在学习这些技术栈时,建议你从一个简单的项目开始,逐步添加复杂性。例如,你可以先用React构建一个简单的TODO应用,然后添加Express后端,再集成数据库。通过这种渐进式的学习方法,你可以更好地理解每个组件在整个应用中的作用。

相关文章:

React技术栈搭配(全栈)(MERN栈、PERN栈)

文章目录 1. MERN 栈2. PERN 栈3. React Next.js Node.js4. JAMstack (JavaScript, APIs, Markup)5. React GraphQL Node.js6. React Native Node.js结论 React作为前端框架已经成为了现代web开发的重要组成部分。在全栈开发中,React通常…...

Linux - 线程池

线程池 什么是池? 池化技术的核心就是"提前准备并重复利用资源". 减少资源创建和销毁的成本. 那么线程池就是提前准备好一些线程, 当有任务来临时, 就可以直接交给这些线程运行, 当线程完成这些任务后, 并不会被销毁, 而是继续等待任务. 那么这些线程在程序运行过程…...

以Python构建ONE FACE管理界面:从基础至进阶的实战探索

一、引言 1.1 研究背景与意义 在人工智能技术蓬勃发展的当下,面部识别技术凭借其独特优势,于安防、金融、智能终端等众多领域广泛应用。在安防领域,可助力监控系统精准识别潜在威胁人员,提升公共安全保障水平;金融行业中,实现刷脸支付、远程开户等便捷服务,优化用户体…...

使用Sum计算Loss和解决梯度累积(Gradient Accumulation)的Bug

使用Sum计算Loss和解决梯度累积的Bug 学习 https://unsloth.ai/blog/gradient:Bugs in LLM Training - Gradient Accumulation Fix 这篇文章的记录。 在深度学习训练过程中,尤其是在大批量(large batch)训练中,如何高…...

mfc操作json示例

首先下载cJSON,加入项目; 构建工程,如果出现, fatal error C1010: unexpected end of file while looking for precompiled head 在cJSON.c文件的头部加入#include "stdafx.h"; 看情况,可能是加到.h或者是.cpp文件的头部,它如果有包含头文件, #include &…...

C语言练习(18)

一个班10个学生的成绩&#xff0c;存放在一个一维数组中&#xff0c;要求找出其中成绩最高的学生成绩和该生的序号。 #include <stdio.h>#define STUDENT_NUM 10 // 定义学生数量int main() {int scores[STUDENT_NUM]; // 定义存储学生成绩的一维数组int i;// 输入10个…...

LeetCode 热题 100_全排列(55_46_中等_C++)(递归(回溯))

LeetCode 热题 100_两数之和&#xff08;55_46&#xff09; 题目描述&#xff1a;输入输出样例&#xff1a;题解&#xff1a;解题思路&#xff1a;思路一&#xff08;递归&#xff08;回溯&#xff09;&#xff09;&#xff1a; 代码实现代码实现&#xff08;思路一&#xff08…...

编译chromium笔记

编译环境&#xff1a; windows10 powershell7.2.24 git 2.47.1 https://storage.googleapis.com/chrome-infra/depot_tools.zip 配置git git config --global user.name "John Doe" git config --global user.email "jdoegmail.com" git config --global …...

PHP语言的数据库编程

PHP语言的数据库编程 引言 随着互联网的发展&#xff0c;动态网站已成为主流&#xff0c;而动态网站的核心就是与数据库进行交互。PHP&#xff08;超文本预处理器&#xff09;是一种流行的开源服务器端脚本语言&#xff0c;被广泛用于Web开发。它以其简单易学和功能强大而受到…...

【PGCCC】PostgreSQL 中表级锁的剖析

本博客解释了 PostgreSQL 中的锁定机制&#xff0c;重点关注数据定义语言 (DDL) 操作所需的表级锁定。 锁定还是解锁的艺术&#xff1f; 人们通常将数据库锁与物理锁进行比较&#xff0c;这甚至可能导致您订购有关锁的历史、波斯锁和撬锁技术的书籍。我们大多数人可能都是通过…...

1.10 自洽性(Self-Consistency):多路径推理的核心力量

自洽性(Self-Consistency):多路径推理的核心力量 随着人工智能尤其是大规模语言模型的不断进化,如何提升其推理能力和决策准确性成为了研究的重点。在这一背景下,**自洽性(Self-Consistency)**作为一种新的推理方法,逐渐展现出其强大的潜力。自洽性方法通过多路径推理…...

【24】Word:小郑-准考证❗

目录 题目 准考证.docx 邮件合并-指定考生生成准考证 Word.docx 表格内容居中表格整体相较于页面居中 考试时一定要做一问保存一问❗ 题目 准考证.docx 插入→表格→将文本转换成表格→✔制表符→确定选中第一列→单击右键→在第一列的右侧插入列→布局→合并单元格&#…...

Linux 信号(Signal)详解

信号&#xff08;Signal&#xff09;是 Linux 系统中用于进程间通信的一种机制。它是一种异步通知&#xff0c;用于通知进程发生了某个事件。信号可以来自内核、其他进程或进程自身。 信号的基本概念 信号的作用&#xff1a; 通知进程发生了某个事件&#xff08;如用户按下 Ct…...

【数据分享】1929-2024年全球站点的逐年最低气温数据(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff01;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2024年全球气象站点…...

app版本控制java后端接口版本管理

java api version 版本控制 java接口版本管理 1 自定义 AppVersionHandleMapping 自定义AppVersionHandleMapping实现RequestMappingHandlerMapping里面的方法 public class AppVersionHandleMapping extends RequestMappingHandlerMapping {Overrideprotected RequestCondit…...

2024年度总结-CSDN

2024年CSDN年度总结 Author&#xff1a;OnceDay Date&#xff1a;2025年1月21日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 文章目录 2024年CSDN年度总结1. 整体回顾2…...

基于python的博客系统设计与实现

摘要&#xff1a;目前&#xff0c;对于信息的获取是十分的重要&#xff0c;我们要做到的不是裹足不前&#xff0c;而是应该主动获取和共享给所有人。博客系统就能够实现信息获取与分享的功能&#xff0c;博主在发表文章后&#xff0c;互联网上的其他用户便可以看到&#xff0c;…...

服务器日志自动上传到阿里云OSS备份

背景 公司服务器磁盘空间有限&#xff0c;只能存近15天日志&#xff0c;但是有时需要查看几个月前的日志&#xff0c;需要将服务器日志定时备份到某个地方&#xff0c;需要查询的时候有地方可查。 针对这个问题&#xff0c;想到3个解决方法&#xff1a; 1、买一个配置比较低…...

优化使用 Flask 构建视频转 GIF 工具

优化使用 Flask 构建视频转 GIF 工具 优化后的项目概述 在优化后的版本中&#xff0c;我们将实现以下功能&#xff1a; 可设置每个 GIF 的帧率和大小&#xff1a;用户可以选择 GIF 的帧率和输出大小。改进的用户界面&#xff1a;使用更现代的设计使界面更美观、整洁。自定义…...

leetcode:511. 游戏玩法分析 I

难度&#xff1a;简单 SQL Schema > Pandas Schema > 活动表 Activity&#xff1a; ----------------------- | Column Name | Type | ----------------------- | player_id | int | | device_id | int | | event_date | date | | games_playe…...

windows git bash 使用zsh 并集成 oh my zsh

参考了 这篇文章 进行配置&#xff0c;记录了自己的踩坑过程&#xff0c;并增加了 zsh-autosuggestions 插件的集成。 主要步骤&#xff1a; 1. git bash 这个就不说了&#xff0c;自己去网上下&#xff0c;windows 使用git时候 命令行基本都有它。 主要也是用它不方便&…...

【Python运维】Python与网络监控:如何编写网络探测与流量分析工具

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 随着互联网技术的快速发展,网络性能的监控与分析成为保障信息系统稳定运行的关键环节。本文深入探讨了如何利用Python语言构建高效的网络探…...

OpenCV相机标定与3D重建(61)处理未校准的立体图像对函数stereoRectifyUncalibrated()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 为未校准的立体相机计算一个校正变换。 cv::stereoRectifyUncalibrated 是 OpenCV 库中的一个函数&#xff0c;用于处理未校准的立体图像对。该函…...

字玩FontPlayer开发笔记12 Vue3撤销重做功能

字玩FontPlayer开发笔记12 Vue3撤销重做功能 字玩FontPlayer是笔者开源的一款字体设计工具&#xff0c;使用Vue3 ElementUI开发&#xff0c;源代码&#xff1a;github | gitee 笔记 撤销重做功能是设计工具必不可少的模块&#xff0c;以前尝试使用成熟的库实现撤销重做功能…...

无人机图传模块:深入理解其工作原理与实际效用

无人机图传模块作为无人机系统的关键组成部分&#xff0c;承担着将无人机拍摄的图像和视频实时传输至地面控制站或接收设备的重任。本文将深入探讨无人机图传模块的工作原理及其在实际应用中的效用&#xff0c;帮助读者更好地理解这一技术的奥秘。 一、无人机图传模块的工作原…...

PDF文件提取开源工具调研总结

概述 PDF是一种日常工作中广泛使用的跨平台文档格式&#xff0c;常常包含丰富的内容&#xff1a;包括文本、图表、表格、公式、图像。在现代信息处理工作流中发挥了重要的作用&#xff0c;尤其是RAG项目中&#xff0c;通过将非结构化数据转化为结构化和可访问的信息&#xff0…...

Linux(Centos 7.6)命令详解:dos2unix

1.命令作用 将Windows格式文件件转换为Unix、Linux格式的文件(也可以转换成其他格式的) 2.命令语法 Usage: dos2unix [options] [file ...] [-n infile outfile ...] 3.参数详解 options: -c, --convmode&#xff0c;转换方式&#xff0c;支持ascii, 7bit, iso, mac,默认…...

梯度提升决策树树(GBDT)公式推导

### 逻辑回归的损失函数 逻辑回归模型用于分类问题&#xff0c;其输出是一个概率值。对于二分类问题&#xff0c;逻辑回归模型的输出可以表示为&#xff1a; \[ P(y 1 | x) \frac{1}{1 e^{-F(x)}} \] 其中 \( F(x) \) 是一个线性组合函数&#xff0c;通常表示为&#xff…...

跨域问题分析及解决方案

1、跨域 指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的&#xff0c;是浏览器对javascript施加的安全限制。 2、同源策略&#xff1a;是指协议&#xff0c;域名&#xff0c;端口都要相同&#xff0c;其中有一个不同都会产生跨域&#xff1b; 3、跨域流程…...

【三国游戏——贪心、排序】

题目 代码 #include <bits/stdc.h> using namespace std; using ll long long; const int N 1e510; int a[N], b[N], c[N]; int w[4][N]; int main() {int n;cin >> n;for(int i 1; i < n; i)cin >> a[i];for(int i 1; i < n; i)cin >> b[i…...

深入理解 Java 的数据类型与运算符

Java学习资料 Java学习资料 Java学习资料 在 Java 编程中&#xff0c;数据类型与运算符是构建程序的基础元素。它们决定了数据在程序中的存储方式以及如何对数据进行各种操作。 一、数据类型 &#xff08;一&#xff09;基本数据类型 整型&#xff1a; 用于存储整数数值&…...

WOA-CNN-GRU-Attention、CNN-GRU-Attention、WOA-CNN-GRU、CNN-GRU四模型对比多变量时序预测

WOA-CNN-GRU-Attention、CNN-GRU-Attention、WOA-CNN-GRU、CNN-GRU四模型对比多变量时序预测 目录 WOA-CNN-GRU-Attention、CNN-GRU-Attention、WOA-CNN-GRU、CNN-GRU四模型对比多变量时序预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 基于WOA-CNN-GRU-Attention、…...

(二叉树)

我们今天就开始引进一个新的数据结构了&#xff1a;我们所熟知的&#xff1a;二叉树&#xff1b; 但是我们在引进二叉树之前我们先了解一下树&#xff1b; 树 树的概念和结构&#xff1a; 树是⼀种⾮线性的数据结构&#xff0c;它是由 n &#xff08; n>0 &#xff09; …...

Linux shell 批量验证端口连通性

脚本 #!/bin/bash # #database check #set -o nounset LOCALIPifconfig | grep inet | head -1 | awk {print $2} | sed s/addr\:// IPLIST192.168.1.99 192.168.1.98 192.168.1.97 PORTLIST81 82 83 84 85 86 check_nc(){ for CHECK_IP in $IPLIST dofor CHECK_PORT in $PORT…...

Java 中实体类与操作类分离

目录 一、为啥要把实体类和操作类分开 二、实体类长啥样&#xff0c;怎么用 三、操作类的使命与实现 四、实战演练&#xff1a;实体类与操作类协同工作 五、拓展思考&#xff1a;这种分离带来的好处与进一步优化 六、总结与展望 家人们&#xff0c;今天我想跟你们唠唠我在…...

创建 pdf 合同模板

创建 pdf 合同模板 一、前言二、模板展示三、制作过程 一、前言 前段时间要求创建“pdf”模板&#xff0c;学会了后感觉虽然简单&#xff0c;但开始也折腾了好久&#xff0c;这里做个记录。 二、模板展示 要创建这样的模板 三、制作过程 新建一个“Word”&#xff0c;这里命…...

【Prometheus】PromQL进阶用法

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

BOBO小火炬全套源码XE修复版2025(火炬天花板二次开发版)

《小火炬全套源码 传奇游戏源码讲解》 小火炬全套源码是一种用于开发经典传奇类游戏的源码包。传奇游戏作为一款经典的多人在线角色扮演游戏&#xff08;MMORPG&#xff09;&#xff0c;有着庞大的用户基础和强大的游戏生态。小火炬全套源码主要提供了从基础架构到核心功能的完…...

【基于无线电的数据通信链】Link 11 仿真测试

〇、废话 Link 11 仿真测试 涉及多个方面&#xff0c;包括信号仿真、协议模拟、数据链路层的仿真以及网络性能评估等。Link 11 是一种基于 HF&#xff08;高频&#xff09; 或 UHF&#xff08;超高频&#xff09; 波段的无线通信协议&#xff0c;主要用于军事通信系统中。为了…...

WPF实战案例 | C# WPF实现计算器源码

WPF实战案例 | C# WPF实现计算器源码 一、设计来源计算器应用程序讲解1.1 主界面1.2 计算界面 二、效果和源码2.1 界面设计&#xff08;XAML&#xff09;2.2 代码逻辑&#xff08;C#&#xff09;2.3 实现步骤总结 源码下载更多优质源码分享 作者&#xff1a;xcLeigh 文章地址&a…...

WebSocket 和 Socket 的区别

一、协议层次和工作方式 1.1 &#xff09;Socket 1.1.1&#xff09;Socket位于传输层&#xff0c;通常使用TCP或UDP协议 1.1.2&#xff09;提供了一个通用的网络编程接口&#xff0c;允许应用程序通过它发送和接收数据 1.1.3&#xff09;一般需要手动管理连接&#xff0c;错…...

Matlab自学笔记四十五:日期时间型和字符、字符串以及double型的相互转换方法

1.说明 在Matlab中&#xff0c;大多数函数都有这样的功能&#xff1a;创建函数本身具有转换的功能&#xff0c;例如double函数&#xff0c;可以创建双精度浮点数&#xff0c;也可以把输入参数转换成双精度浮点数&#xff0c;再例如string&#xff0c;可以创建字符串&#xff0…...

Python基础学习(六)unittest 框架

1.介绍 是 Python自带的单元测试框架 - 自带的, 可以直接使用, 不需要单外安装 - 测试人员&#xff0c;用来做自动化测试, 作为自动化测试的执行框架,即管理和执行用例的 核心要素&#xff1a; TestCase 测试用例, 这个测试用例是 unittest 的组成部分,作用是用来书写真正的…...

Python数据可视化(够用版):懂基础 + 专业的图表抛给Tableau等专业绘图工具

我先说说文章标题中的“够用版”啥意思&#xff0c;为什么这么写。 按照我个人观点&#xff0c;在使用Python进行数据分析时&#xff0c;我们有时候肯定要结合到图表去进行分析&#xff0c;去直观展现数据的规律和特定&#xff0c;那么我们肯定要做一些简单的可视化&#xff0…...

麒麟操作系统服务架构保姆级教程(十三)tomcat环境安装以及LNMT架构

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 之前咱们学习了LNMP架构&#xff0c;但是PHP对于技术来说确实是老掉牙了&#xff0c;PHP的市场占有量越来越少了&#xff0c;我认识一个10年的PHP开发工程师&#xff0c;十年工资从15k到今天的6k&am…...

Docker集成onlyoffice实现预览功能

1.拉取镜像 docker pull onlyoffice/documentserver 2. 数据卷挂载 mkdir -p app/onlyoffice/DocumentServer/logs mkdir -p app/onlyoffice/DocumentServer/data mkdir -p app/onlyoffice/DocumentServer/lib mkdir -p app/onlyoffice/DocumentServer/db 3.运行容器 docker ru…...

Flowable 管理各业务流程:流程设计器 (获取流程模型 XML)、流程部署、启动流程、流程审批、流程挂起和激活、任务分配

文章目录 引言I 表结构主要表前缀及其用途核心表II 流程设计器(Flowable BPMN模型编辑器插件)Flowable-UIvue插件III 流程部署部署步骤例子:根据流程模型ID部署IV 启动流程启动步骤ACT_RE_PROCDEF:流程定义相关信息例子:根据流程 ID 启动流程V 流程审批审批步骤Flowable 审…...

BladeDISC++:Dynamic Shape AI 编译器下的显存优化技术

近年来&#xff0c;随着深度学习技术的迅猛发展&#xff0c;越来越多的模型展现出动态特性&#xff0c;这引发了对动态形状深度学习编译器(Dynamic Shape AI Compiler)的广泛关注。本文将介绍阿里云 PAI 团队近期发布的 BladeDISC项目&#xff0c;探讨在动态场景下如何优化深度…...

FFmpeg常用命令

文章目录 一、 FFmpeg 音视频的处理流程二、FFmpeg 常用命令2.1、查看本机支持的采集设备2.2、 录制视频2.2.1、原始视频2.2.2、编码的视频 2.3、录制音频&#xff1a;2.3.1、原始音频2.3.2、编码的音频 2.4、录制音视频&#xff1a;2.5、文件格式转换&#xff1a;2.6、提取音频…...

http请求开启长连接导致请求偶发失败

问题描述&#xff1a; http长连接的意思是服务器为了调用时减少TCP三次握手开销&#xff0c;会复用之前已经发起的请求&#xff0c;比较适合频繁交互&#xff08;比如数据推送、流水线操作等&#xff09;的场景&#xff0c;但是如果超过服务器配置的连接最大空闲时间&#xff0…...