react框架，使用vite和nextjs构建react项目
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@latestnpx的特点，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项目的基本搭建过程