Awesome Open Source
Awesome Open Source
logo

npm npm circle David

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

Posts

Plugins

Examples

👀 See more examples in cans-example

Build

$ yarn

$ yarn test # unit-test

$ yarn run example # run example

See Also

License

MIT License


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,351) 
react (5,459) 
mobx (134)