美文网首页
React Hooks + TypeScript 做个仿 Mac

React Hooks + TypeScript 做个仿 Mac

作者: 不讨喜的大雄 | 来源:发表于2020-05-29 23:52 被阅读0次

项目初衷

0 做个有特点的前端项目,而 MacOS 系统桌面可以实现的东西太多了

1 工作中主要技术栈为 vue2.x,想通过项目实践 react 的学习(hooks 熟练了,react 和 vue3.0 都间接拿下了)

2 熟悉并实践 TypeScript

附属

我的电脑其实不是 macOS 系统,所以注定只能低仿。但这不影响我学习 macOS 如 dock 的炫酷效果的实现及达到上述初衷的目的。

通过该 教程 修改了我的桌面,作为参考

主要软件 mydockfinder

开发环境搭建

直接使用 create-react-app with typescript 来快速搭建

yarn create-react-app my-app --typescript

引入 sass 为 css 预处理

yarn add node-sass

设置背景图片

删除所有不必要的文件及代码后, 我使用上面教程中获取的文件中的 sierra-4K.jpg 作为 App 界面背景

// App.scss
.App {
  min-width: 1500px;
  background: url(../assets/image/sierra-4K.jpg) center/100% no-repeat;
}

效果如下

使用 Github 自动化部署

Create React App 官方文档提供的部署到 github 的方法有问题

我使用了 GitHub Actions 代替 参考

在 package.json 内添加 homepage

格式:https://{yourGithubName}.github.io/{yourRepositoryName}

// package.json
// ...
  ,
  "homepage": "https://adashuai5.github.io/my-desktop"
}
// ...

新建项目文件 .github/workflows/ci.yml

name: my-desktop
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master

      - name: Build and Deploy
        uses: JamesIves/github-pages-deploy-action@master
        env:
          ACCESS_TOKEN: ${{ secrets.MY_WINDOW }}
          BRANCH: gh-pages
          FOLDER: build
          BUILD_SCRIPT: npm install && npm run build

这里的 ACCESS_TOKEN 是在 Github repo 中 Settings 栏下设置的 Secrets

做好这些,在你每次 push 后 Github 就会自动运行 Actions 形成工作流了

等你的 push 成功,即可打开 Settings,找到 Github Pages

选择 gh-pages branch 此时会出现如上图所示项目浏览链接,如我这个项目 my-desktop

另外,该项目 代码,欢迎 watch 和 star。

小结

至此,项目流程算是走了一遍。

目前该项目已完成 dock,简单设置,基础计算器,基础画板等功能,即使是这些已有功能也有很多需要完善的地方。

后续我会慢慢优化,并在相应模块代码优化到一定程度时不定时更新系列文章。🍮

相关文章

  • React Hooks + TypeScript 做个仿 Mac

    项目初衷 0 做个有特点的前端项目,而 MacOS 系统桌面可以实现的东西太多了 1 工作中主要技术栈为 vue2...

  • React Hooks + TypeScript 做个仿 Mac

    这是我的项目记录系列文章第四篇,上一篇 主要介绍了 Dock 弹框等的实现,同时提到了此次主角 drawing 画...

  • React Hooks + TypeScript 做个仿 Mac

    这是我的项目记录系列文章第三篇,目前项目进度有些停滞,主要是最近其他事情比较多加懒,于是我强行让自己在这几天对点击...

  • React Hooks + TypeScript 做个仿 Mac

    这是我的项目记录系列文章第二篇,在上一篇我简单介绍了项目的初衷和流程等。现在这个项目已经做了一段时间,对 Hook...

  • 翻译:在 React Hooks 中使用 Typescript

    在 React Hooks 中使用 Typescript 小记 最近在关注 Typescript 和 react ...

  • React Hooks

    React Hooks Hooks其实就是有状态的函数式组件。 React Hooks让React的成本降低了很多...

  • react-hooks

    前置 学习面试视频 总结react hooks react-hooks react-hooks为函数组件提供了一些...

  • React Hooks

    前言 React Conf 2018 上 React 提出了关于 React Hooks 的提案,Hooks 作为...

  • 5分钟简单了解React-Hooks

    首先附上官网正文?:React Hooks Hooks are a new addition in React 1...

  • react-hooks

    react-hooks react-hooks 是react16.8以后,react新增的钩子API,目的是增加代...

网友评论

      本文标题:React Hooks + TypeScript 做个仿 Mac

      本文链接:https://www.haomeiwen.com/subject/ytwgahtx.html