首页 前端知识 react框架,使用vite和nextjs构建react项目

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

2024-09-08 02:09:49 前端知识 前端哥 430 59 我要收藏

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

最终结果展示

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17853.html
标签
评论
发布的文章

数据持久化(Json)

2024-09-28 23:09:01

JSON Gate 开源项目教程

2024-09-28 23:09:00

【C 】Ubuntu安装jsoncpp

2024-09-28 23:09:58

http请求json

2024-09-28 23:09:58

JSON 格式详解

2024-09-28 23:09:53

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!