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

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

news 2025/7/7 8:28:40

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

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

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

编程新知 2025/6/15 17:37:51

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/7/5 13:53:37

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/7/6 14:29:40

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/7/7 0:36:37

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/6 8:41:46

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/6/26 3:44:44

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/7/7 7:46:02

QT： `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

编程新知 2025/7/4 23:39:05

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2025/7/4 18:26:36

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

编程新知 2025/7/6 12:01:31