https://github.com/djyde/cans

🍻 A framework for building React MobX application
https://github.com/djyde/cans

cans choo mobx react

Last synced: 2 days ago
JSON representation

🍻 A framework for building React MobX application

• Host: GitHub
• URL: https://github.com/djyde/cans
• Owner: djyde
• Created: 2017-03-27T09:40:19.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-06-29T13:06:27.000Z (over 7 years ago)
• Last Synced: 2024-04-14T14:16:46.400Z (7 months ago)
• Topics: cans, choo, mobx, react
• Language: JavaScript
• Homepage: http://cans.js.org
• Size: 166 KB
• Stars: 83
• Watchers: 4
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


[![npm](https://img.shields.io/npm/v/cans.svg)](https://www.npmjs.com/package/cans)

[![npm](https://img.shields.io/npm/dm/cans.svg)](https://www.npmjs.com/package/cans)

[![circle](https://circleci.com/gh/djyde/cans.svg?style=shield)](https://circleci.com/gh/djyde/cans)

[![David](https://img.shields.io/david/djyde/cans.svg)]()

A framework for building React MobX application.

## quick start

```js

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 (

    


      {models.counter.content}

      +

      -

    

  )

}


// router

const route = () => (

  

    

  

)

app.route(route)

// mount the app

app.start(document.querySelector('#root'))

```

## Documents

- [Document](http://cans.js.org)

### Posts

- [cans: A framework for building React MobX application](https://medium.com/@djyde/cans-a-framework-for-building-react-mobx-application-78bff88c3b3f)

- [Building CRUD in a few minutes with cans and antd](https://medium.com/@djyde/building-curd-in-a-few-minutes-with-cans-and-antd-ba2b08a3919f)

## Plugins

- [cans-plugin-http](https://github.com/djyde/cans-plugin-http) HTTP (axios) plugin for cans

- [cans-plugin-modal-store](https://github.com/djyde/cans-plugin-modal-store) cans plugin for creating modal stores

## Examples

- [cans-example-dashboard](https://github.com/cansjs/cans-example-dashboard/)

👀 See more examples in [cans-example](https://github.com/djyde/cans-example)

## Build

``` bash

$ yarn

$ yarn test # unit-test

$ yarn run example # run example

```

## See Also

- [React-Router](https://github.com/ReactTraining/react-router)

- [MobX](https://mobxjs.github.io/mobx/)

# License

MIT License