缘起

又来给自己挖坑了。

不久前在知乎读到一篇文章，讲如何激励自己每天进步。链接 （好像不是这个）

几年前做出一款产品，直到去年文章还有更新。

现在各种各样自我管理、打卡的 App 也不少了。有一些新点子，一边做一边规划一边修改吧。欢迎大佬们提建议~

技术

选这些纯粹是为了想学习一下。一边读文档一边开发吧。

因为想学学 Electron，所以决定开发桌面端版本，现在在 Ubuntu 和 Mac 上测试过可以用。

一切从创建一个 SPA 开始

创建 App

在 Github 上建了个 Repo 之后克隆到本地，然后使用 create-react-app 在同目录中创建了 React 应用。

git clone [your repo link]

create-react-app ./repo-name

code repo-name/

然后就在 VS Code 里开心地开发啦

最开始的结构

列出一些主要文件：

src/
  App.js
  App.css
  index.js

最开始仅仅是修改 App.js。三个按钮一个显示框，使用了 antd 的一些组件。

// App.js
import React, { Component } from 'react';
import './App.css';
import { Row, Button, Icon } from 'antd';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      score: 0
    }
    this.increase = this.increase.bind(this)
    this.decrease = this.decrease.bind(this)
  }

  increase(){
    this.setState({
      score: this.state.score + 1
    })
  }

  decrease(){
    this.setState({
      score: this.state.score - 1
    })
    console.log(this.state.score)
  }

  render() {
    return (
      <div className="App">
        <Row>
          <Button className="operation" onClick={this.increase}>
            <Icon type="plus" />
          </Button>
        </Row>
        <Row>
          <Button className="operation" onClick={this.decrease}>
            <Icon type="minus" />
          </Button>
        </Row>
        <div className="score">
          <h2>{this.state.score}</h2>
        </div>
      </div>
    );
  }
}

export default App;

下一篇主要加上 LocalStorage。