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 的探索。

发表评论

电子邮件地址不会被公开。 必填项已用*标注