React + MobX + Electron + Node.js + MongoDB 全棧項目開發實踐（零）

緣起

又來給本身挖坑了。

不久前在知乎讀到一篇文章，講如何激勵本身天天進步。連接 （好像不是這個）

幾年前作出一款產品，直到去年文章還有更新。

如今各類各樣自我管理、打卡的 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。