andyyxw / cans

🍻 A framework for building React MobX application

A framework for building React MobX application.

quick start

import cans, { inject } from 'cans'
import { BrowserRouter, Route } from 'cans/router'

const app = cans()

// model
app.model({
  namespace: 'counter',
  state: {
    count: 0
  },
  actions: {
    incr() {
      this.count += 1
    },
    decr() {
      this.count -= 1
    }
  },
  computed: {
    content() {
      return `Count: ${this.count}`
    }
  }
})

// view
const Counter = inject(({ models })) => {
  return (
    <div>
      <span>{models.counter.content}</span>
      <button onClick={models.counter.incr}>+</button>
      <button onClick={models.counter.decr}>-</button>
    </div>
  )
}

// router
const route = () => (
  <BrowserRouter>
    <Route path='/' component={Counter} />
  </BrowserRouter>
)
app.route(route)

// mount the app
app.start(document.querySelector('#root'))

Documents

• Document

Posts

• cans: A framework for building React MobX application

• Building CRUD in a few minutes with cans and antd

Plugins

• cans-plugin-http HTTP (axios) plugin for cans
• cans-plugin-modal-store cans plugin for creating modal stores

Examples

• cans-example-dashboard

👀 See more examples in cans-example

Build

$ yarn

$ yarn test # unit-test

$ yarn run example # run example

See Also

• React-Router
• MobX

License

MIT License