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

最新推荐文章于 2024-10-19 12:38:51 发布

I_am_shy

最新推荐文章于 2024-10-19 12:38:51 发布

阅读量2.6k

点赞数 16

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/I_am_shy/article/details/140163186

版权

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 install
 npm 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>
  )
}

最终结果展示