React Demo 01-Happy Clicker

410 阅读1分钟

react hooks自2019年1月发布以来已经过去快一年了,苦于没有练手项目吗?在这里我将为大家分享一些简单易懂的hook实战demo,后面的demo复杂度会慢慢增加。

Happy Clicker

一个简单的计数器,可以'加一','减一'和'重置'

难易程度: ⭐

在线预览

源码地址

快速开始

  1. 克隆仓库
git clone git@github.com:tangweikun/happy-clicker.git
  1. 安装依赖包
cd happy-clicker
yarn | npm install
  1. 本地运行
yarn start | npm run start
  1. 在浏览器中打开http://localhost:3000查看效果

依赖库

library version
react 16.11.0
react-dom 16.11.0
react-scripts 3.2.0
gh-pages 2.1.1

部署到 Github Pages

  1. 添加 homepagepackage.json
"homepage": "https://myusername.github.io/my-app",
  1. 安装 gh-pages
yarn add gh-pages
  1. package.json中添加部署脚本
"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
  1. 执行 yarn deploy
yarn deploy
  1. 打开https://myusername.github.io/my-app查看效果