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。