README.md

Documentation

• Getting Started
  • Installation
  • Commands
  • Connected Components
• Concepts
  • Stores
  • Actions
  • Events
  • Routing
  • Stateful Components
  • Manage document head
  • Forms

Installation

yarn add zefir react react-dom mobx mobx-react

./node_modules/zefir/dist/bin/zefir init

Commands

• zefir dev - run your project in dev mode. Accessible via http://localhost:3000
• zefir build - create production ready build
• zefir start - serve your build
• zefir init - bootstrap project structure

Connected Components

Connected Component is component infused with zefir magic:

• has access to stores, services & router
• observe stores for changes and rerender only when needed
• handles init property as place for side-effects and actions
• with form property you can easily build your form fields
• it can become stateful component with actions, events and state properties

To connect component, use connect function:

import {connect} from 'zefir/utils'

const Hello = ({router}) => (
  <div>World. Location: {router.route.match.href}</div>
)

export default connect(Hello)