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

react框架，使用vite和nextjs构建react项目

news 2025/9/16 8:29:41

react框架

        React 是一个用于构建用户界面(UI)的 JavaScript 库,它的本质作用是使用js动态的构建html页面，react的设计初衷就是为了更方便快捷的构建页面，官方并没有规定如何进行路由和数据获取，要构建一个完整的react项目，我们需要借助一些其他的工具或者整合了react的框架，

这里推荐使用2种方式搭建react项目：

  • vite，react router，react
    • 启动速度快，打包体积小，适合小型项目
  • next.js 
    • Next.js 是一个用于构建全栈 Web 应用程序的 React 框架，它既可以构建页面，也能搭建后台，可以很便捷的实现ssr服务端渲染，适合大型的项目

 使用vite和react router 搭建react

vite官网：Vite | 下一代的前端工具链 (vitejs.cn)

react router官网：Home v6.24.1 | React Router

在命令行中输入命令

npm create vite@latest

输入项目名称，选择react框架

语言可以选择js或者ts，演示使用的是ts

之后再输入下面提示的3个命令

 cd my-react npm installnpm run dev进入项目文件夹
安装依赖
启动项目

执行完npm install 后目录下会多一个node_modules文件夹，

此时就可以启动项目了

 

成功启动了react项目，

在这个基础上，再来使用react router搭建路由

npm install react-router-dom

可以再package.json中查看路由的安装，

在src下新建3个文件夹，并在文件夹下新建page.tsx(page.jsx)文件

// my:
export default function my() {return(<div>my</div>)
}// home:
export default function home() {return(<div>home</div>)
}// about:
export default function about() {return(<div>about</div>)
}

添加一些基本内容

在main.tsx中配置路由

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'import { createBrowserRouter, RouterProvider} from 'react-router-dom'
import Home from './home/page.tsx'
import About from './about/page.tsx'
import My from './my/page.tsx'const router = createBrowserRouter([{path: '/',element: <App/>,children:[{path: '',element: <Home/> ,},{path: '/about',element: <About/>,},{path: '/my',element: <My/>,}]},
])ReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode><RouterProvider router={router}></RouterProvider></React.StrictMode>,
)

App.tsx中设置跳转，

import { Link ,Outlet} from "react-router-dom"function App() {return (<><nav><Link to='/'>home </Link><Link to='/about'>about </Link><Link to='/my'>my </Link></nav><Outlet></Outlet></>)
}export default App

注意：以上将默认的样式（引入的css）去掉了，同时要保证App组件在RouterProvide内部，oulet是路由出口，组件页面的内容在这里展示

启动项目查看页面

 

这样就完成了路由配置

使用next.js搭建react项目

构建nextjs框架使用npx命令

npx create-next-app@latest

npx的特点，npx是包执行器，它可以获取任意环境的包，而npm是包管理器，只能安装本地的包，一般是通过下载到本地在安装包

输入项目名称后一路回车即可，采用官方的默认配置

这里要注意的就是这个App Router，这是官方的默认路由措施，

安装完成后查看项目目录，核心文件就是这两个文件

进入项目文件夹，启动项目

npm run dev

 

成功启动了项目，可以看到花费的时间是比较长的，

然后开始来配置路由，nextjs的路由是比较特殊的，它不需要去配置路径和声明路由，以文件名称作为路由

        next.js采用的是自动路由措施，以src下app文件夹为根路径自动配置路由，也就是说，在创建组件的时候路由就自动生成了

  • layout.tsx 页面容器
  • page.tsx 页面内容
  • 文件夹的名称是路由路径，
    • 一般的名称 --- about => /about
    • 特殊的名称
      • --- [id] => /${id} 动态的路径，传递id参数 ,这种方式需要使用客户端跳转 "use client"
      • --- _parmas => 不会被解析成路由路径，变成服务器端组件，虚拟节点，由服务端生成后传递给客户端

  • "use client" ：客户端组件，在next.js中组件默认为服务端组件

以下展示了一个路由结构， 

 layout.tsx：根容器，

import type { Metadata } from "next";
import "./globals.css";
import Nav from "./_nav/Nav";export const metadata: Metadata = {title: "Create Next App",description: "Generated by create next app",
};export default function RootLayout({children,
}: Readonly<{children: React.ReactNode;
}>) {return (<html lang="en"><body><Nav></Nav>{children}{/* 路由出口 */}</body></html>);
}

page.tsx：根页面

import React from "react";export default function Home() {// React 并不强制使用 JSX，也可以使用原生的 JavaScript// jsx/tsx语法// return (//   <>//     <div className="box-content h-32 w-32 p-4 border-4">//       <h1>Home</h1>//     </div>//   </>// );// 原生js/ts语法return React.createElement('div',{ className: 'box-content h-32 w-32 p-4 border-4' },React.createElement('h1',null,'Home'),'');
}

more/page.tsx:

import React from "react";export default function () {return (<div><h1>More</h1></div>)
}

_nav/Nav.tsx:

import Link from "next/link"export default function () {return(<div><Link href="/">home</Link><Link href="/about">about</Link><Link href="/more">more</Link><hr /></div>)
}

about/layout.tsx:

import Nav from "./_nav/Nav"export default function ({ children }: Readonly<{ children: React.ReactNode }>) {return (<><Nav></Nav><h2 className="">二级路由容器</h2><div>{children /*子路由内容 */}</div></>)
}

about/page.tsx:


export default function () {return(<div className="h-32 w-32 bg-red-500 text-white flex justify-center items-center"><h1>About</h1></div>)
}

about/_nav/Nav.tsx:

import Link from "next/link"export default function () {return(<div><Link href="/about/list">list</Link><Link href="/about/100">100</Link><hr /></div>)
}

about/list/page.tsx:


export default function () {return(<div><ul><li>list#1</li><li>list#2</li><li>list#3</li></ul></div>)
}

about/[id]/page.tsx:

"use client" //客户端跳转，不会像服务端请求页面
import { useParams } from "next/navigation"export default function () {const { id } = useParams()// console.log(id)return(<div><div>id --- {id}</div></div>)
}

最终结果展示

以上就是关于next.js项目的基本搭建过程

相关文章：

react框架，使用vite和nextjs构建react项目

react框架 React 是一个用于构建用户界面(UI)的 JavaScript 库,它的本质作用是使用js动态的构建html页面&#xff0c;react的设计初衷就是为了更方便快捷的构建页面&#xff0c;官方并没有规定如何进行路由和数据获取&#xff0c;要构建一个完整的react项目&#xff0c;我们需要…...

编程日记 2024/7/5 7:42:40

Games101学习笔记 Lecture16 Ray Tracing 4 (Monte Carlo Path Tracing)

Lecture16 Ray Tracing 4 (Monte Carlo Path Tracing 一、蒙特卡洛积分 Monte Carlo Integration二、路径追踪 Path tracing1.Whitted-Style Ray Tracings Problems2.只考虑直接光照时3.考虑全局光照①考虑物体的反射光②俄罗斯轮盘赌 RR &#xff08;得到正确shade函数&#x…...

编程日记 2024/7/5 7:41:39

数据结构概念

文章目录 1. 概念 2. 数据结构和算法的关系 3. 内存 4. 数据的逻辑结构 5. 数据的存储结构 1. 顺序存储结构 2. 链式存储结构 3. 索引存储结构 4. 散列存储结构 6. 数据的运算 1. 概念 定义1&#xff08;宏观&#xff09;&#xff1a; 数据结构是为了高效访问数据而…...

编程日记 2024/7/5 7:40:38

Windows 下载安装ffmpeg

下载地址 https://ffmpeg.org/download.html 测试 管理员方式打开控制台&#xff0c;输入ffmpeg测试 配置环境变量...

编程日记 2024/7/5 7:39:36

Java AI 编程助手

Java AI 编程助手是指利用人工智能技术来增强和优化Java开发过程中的各种任务和活动。它可以涵盖从代码生成和分析到测试和优化的多个方面&#xff0c;帮助开发人员提高生产效率、降低错误率&#xff0c;并优化代码质量和性能。 ### 功能和特点 1. **智能代码生成和建议**&am…...

编程日记 2024/7/5 7:38:35

day10：01集合

1 作用 Python中的集合&#xff08;Set&#xff09;是一个无序的、不包含重复元素的容器。它主要用于去重、成员测试、以及执行数学上的集合运算&#xff08;如并集、交集、差集和对称差集&#xff09;等操作。集合的内部实现通常基于哈希表&#xff0c;这提供了快速的成员测试…...

编程日记 2024/7/5 7:37:34

03浅谈提示工程、RAG和微调

03浅谈提示工程、RAG和微调 提示词Prompt Prompt&#xff08;提示词&#xff09;是指在使用大模型时&#xff0c;向模型提供的一些指令或问题。这些指令作为模型的输入&#xff0c;引导模型产生所需要的输出。例如&#xff0c;在生成文本时&#xff0c;Prompt可能是一个问题或…...

编程日记 2024/7/5 7:36:32

硅纪元视角 | AI纳米机器人突破癌症治疗，精准打击肿瘤细胞

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…...

编程日记 2024/7/5 7:35:31

刷代码随想录有感（125）：动态规划——最长公共子序列

题干&#xff1a; 代码&#xff1a; class Solution { public:int longestCommonSubsequence(string text1, string text2) {vector<vector<int>>dp(text1.size() 1, vector<int>(text2.size() 1, 0));for(int i 1; i < text1.size(); i){for(int j …...

编程日记 2024/7/5 7:33:29

Linux和mysql中的基础知识

cpu读取的指令大部分在内存中&#xff08;不考虑缓存&#xff09; 任何程序在运行之前都的加入到内存。 eip->pc指针&#xff0c;指明当前指令在什么位置。 代码大概率是从上往下执行的&#xff0c;基于这样的基本理论。既可以将一部分指令加载到CPU对应的缓存中&#xf…...

编程日记 2024/7/5 7:32:28

ArcGIS Pro SDK （七）编辑 12 编辑模版

ArcGIS Pro SDK &#xff08;七&#xff09;编辑 12 编辑模版 文章目录 ArcGIS Pro SDK &#xff08;七&#xff09;编辑 12 编辑模版1 在图层上按名称查找编辑模板2 查找属于独立表的表模板3 当前模板4 更改模板的默认编辑工具5 隐藏或显示模板上的编辑工具6 使用图层创建新模…...

编程日记 2024/7/5 7:31:27

数据结构底层之HashMap(面经篇1)

1 . 讲一下hashmap的数据结构 HashMap是一种基于哈希表实现的数据结构&#xff0c;通常用于关联键值对&#xff0c;其中键是唯一的&#xff0c;而值可以重复。在Java中&#xff0c;HashMap是java.util.Map接口的一个实现&#xff0c;它提供了快速的查找、插入和删除操作。 数据…...

编程日记 2024/7/5 7:30:26

昇思学习打卡-6-基于MindSpore的GPT2文本摘要

第一次近距离接触GPT&#xff0c;了解了tokenizers这个分词库&#xff0c;感觉NLP和CV对比起来&#xff0c;处理流程基本一致&#xff0c;都是数据集加载和处理&#xff0c;模型构建、选择学习率、模型训练&#xff0c;进而可以使用模型进行推理。 不同的是&#xff0c;NLP可能…...

编程日记 2024/7/5 7:28:24

代码随想录算法训练营第2天|LeetCode977，209，59

977.有序数组平方 题目链接&#xff1a; 977. 有序数组的平方 - 力扣&#xff08;LeetCode&#xff09; 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a; 双指针法经典题目 | LeetCode&#xff1a;977.有序数组的平方_哔哩哔哩_bilibili 第一想法 暴力算法肯定是先将元素…...

编程日记 2024/7/5 7:27:23

Web前端开发——HTML快速入门

HTML&#xff1a;控制网页的结构CSS&#xff1a;控制网页的表现 一、什么是HTML、CSS &#xff08;1&#xff09;HTML &#xff08;HyperText Markup Languaqe&#xff1a;超文本标记语言&#xff09; 超文本&#xff1a;超越了文本的限制&#xff0c;比普通文本更强大。除了…...

编程日记 2024/7/5 7:26:22

浅谈http协议及常见的面试题

1、浅谈http协议 HTTP&#xff08;Hypertext Transfer Protocol&#xff09;超文本传输协议&#xff0c;是互联网上应用最为广泛的一种网络协议&#xff0c;所有的WWW文件都必须遵守这个标准。它是基于TCP/IP通信协议来传递数据&#xff08;HTML文件、图片文件、查询结果等&am…...

编程日记 2024/7/5 7:25:21

LabVIEW自动探头外观检测

开发了一套基于LabVIEW的软件系统&#xff0c;结合视觉检测技术&#xff0c;实现探头及连接器外观的自动检测。通过使用高分辨率工业相机、光源和机械手臂&#xff0c;系统能够自动定位并检测探头表面的细微缺陷&#xff0c;如划痕、残胶、异色、杂物等。系统支持多种探头形态&…...

编程日记 2024/7/5 7:23:19

搏击与防卫笔记

文章目录 降龙十八掌 咏春个人防身笔记防卫直拳应对耳光防卫摆拳坐马冲拳 本来想以武术为标题的&#xff0c;想了想武术这个标题太大太深&#xff0c;自己连一知半解都算不上&#xff0c;就谢为搏击与防卫吧。 每个男孩都有个武侠梦&#xff0c;独步江湖&#xff0c;仗剑走天涯…...

编程日记 2024/7/5 7:22:18

泰国内部安全行动司令部数据泄露

BreachForums 论坛的一名成员宣布发生一起重大数据泄露事件&#xff0c;涉及泰国内部安全行动司令部 (ISOC)&#xff0c;该机构被称为泰国皇家武装部队的政治部门。 目前&#xff0c;我们无法准确确认此次泄露的真实性&#xff0c;因为该组织尚未在其网站上发布有关该事件的任…...

编程日记 2024/7/5 7:21:17

MATLAB算法实战应用案例精讲-【数模应用】分层聚类（附MATLAB、python和R语言代码实现）

目录 前言 几个高频面试题目 什么情况下选择分层聚类，什么情况下选择K-mean聚类呢？两种模型的好坏如何比较？ 算法原理 SPSSAU 案例分析 SPSSPRO 1、作用 2、输入输出描述 3、案例示例 4、案例数据 5、案例操作 6、输出结果分析 7、注意事项 8、模型理论 分层…...

编程日记 2024/7/5 7:20:16

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/7/16 16:51:12

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/9/15 5:15:34

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/9/15 18:35:09

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/9/13 3:49:22

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/9/9 14:48:35

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/9/9 14:49:22

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/8/22 5:05:32

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/8/14 14:59:56

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/9/3 11:05:35

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2025/9/7 19:10:42