React和CSS设计克隆FiverrUI学习报告

React和CSS设计克隆 Fiverr应用程序 | React UI

首先，这个课程只有UI设计，没有涉及到数据库等相关知识，所以UI内容是完全固定的。我大致地学习了这个课程，因为课程后面的内容比较固定，而且基本只是重复地抄代码，所以我决定做个总结报告来结束这次简单的项目学习。

准备工作

安装vite，通过之前的学习我们可以了解到vite和webpack都是脚手架，用于对项目进行打包，然后在微服务器上显示。原因是浏览器无法识别如React中的jsx文件类型，只能识别html css js这些文件，所以需要使用脚手架。
- yarn create vite
- yarn vite
- cd
- yarn
- yarn dev
git clone --single-branch -b "分支名称" 链接 .这里教程里从github上clone了仓库分支里的内容。
- “--single-branch“：这个选项告诉 Git 只克隆指定的单一分支，而不是所有的分支。默认情况下，git clone 会克隆所有的分支和标签，--single-branch 可以让你只下载当前指定的分支，从而节省时间和空间。
- “-b "分支名称"“：-b 是 --branch 的简写。这个选项用于指定要克隆的分支的名称。"分支名称" 是你要克隆的分支的名字。如果这个分支在远程仓库中不存在，命令会失败。
- “链接”：这是远程仓库的 URL 链接。例如，它可以是一个 HTTP(S) 链接、SSH 链接或者其他 Git 支持的 URL。
- “.”：这个点 . 表示将仓库克隆到当前目录。如果你省略这个点，Git 会在当前目录下创建一个以远程仓库名为名的新目录，并将仓库克隆到这个新目录中。
创建src目录下的pages，在里面新建需要的页面；创建组件components，在里面创建需要使用的组件。
这里教程里使用的不是css，而是scss，这也是我第一次了解到。安装使用包管理器yarn或npm，这个过程就不写在这里了。SCSS 在 CSS 的基础上增加了许多强大的功能，旨在使样式表的编写更加高效、可维护和组织化。使用 SCSS，你可以利用变量、嵌套、混入、继承等功能，使得样式表更加灵活和动态。至于详细的部分询问AI即可。
使用eslint，帮助检查错误（虽然我用的时候全都是麻烦。。）

组件编写

众所周知，多次使用的代码块需要抽出形成组件以便复用。

Navbar作为页面的上面固定部分
Outlet作为内容部分（这不是组件）
Footer作为页脚

之后还有许多组件需要编写，此处就不一一列举。

在滑动Slide组件里，教程里引入了一个import Slider from "infinite-react-carousel";使用其中的滑动条。

资源放置在根目录下public文件夹。

UI编写

按照div分块的思想，先把内容按层次写出，之后再加上css样式进行调整。

需要变化的地方需要使用usestate和经典的三目运算符，或者是{}把内容括起来进行判断。

教程里制作的网页不是响应式的，使用单位都是px，如果要制作响应式的应该不使用px。

新了解到的css样式有挺多，具体用法还是查询AI。

gap：用于在flex布局中调整间距
object-fit：用于调整图片

路由Router

在App.jsx中，引入如下代码

import {
  createBrowserRouter,
  RouterProvider,
  Outlet
} from "react-router-dom";

function App() {

  const Layout = () => {
    return(
      <div className="app">
        <Navbar/>
        <Outlet/>
        <Footer/>
      </div>
    )
  }

  const router = createBrowserRouter([
    {
      path:"/",
      element:<Layout/>,
      children:[
        {
          path:"/",
          element:<Home/>
        },
        {
          path:"/gigs",
          element:<Gigs/>
        },
        {
          path:"/gig/:id",
          element:<Gig/>
        }
      ]
    },
  ]);

  return (
    <div>
      <RouterProvider router={router} />
    </div>
  )
}