React hooks 1:项目启动与配置

55 阅读1分钟

项目配置

next.js

tailwind.js

Next.js

Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能,无需任何配置。

初始化项目

npx create-next-app

  • typescript
  • tailwind css
  • no src
  • app router, not pages router

使用

启动

注意使用高版本node: 19.8.1

  • yarn install
  • yarn dev 修改代码后可以自动刷新 (如果yarn start要配合build使用)
  • http://localhost:3000/

app router

默认情况下app文件夹下的layout和page.tsx对应于用户的/根路径

当需要新增路径时,在app内新增相应文件夹与page.tsx文件,路径会访问到page.tsx导出的组件。

image.png

需要注意,app文件夹下默认认为是server component,普通的前端组件需要标注 use client,标识组件为client component.

tailwind css

只需书写 HTML 代码,无需书写 CSS,即可快速构建美观的网站。本质上是一个工具集,包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等原子工具类,可以组合使用并直接在 HTML 代码上实现任何 UI 设计。