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

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

news 2025/11/4 22:33:04

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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/11/4 2:08:08

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/11/1 10:33:26

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/30 16:13:37

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/10/30 7:28:30

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2025/11/3 14:31:36

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

编程新知 2025/10/24 15:10:51