list-view.jsx

import React from 'react'
import * as item from './item'

export const ListView = (store) => () => {
  const [ items, setItems ] = useState([])
  
  useEffect(() => {
    const sub = store.onChanges(items => setItems(items))
    return () => sub()
  }, [ store ])
  
  const add = () => {
    const value = prompt('Name of todo')
    store.add(item.create(value))
  }
  
  return <main>
    <button>Add</button>
    <ul>
      { items.map(item => (
          <li 
              onClick={() => store.complete(item.id)}
              key={item.id}>
              {item.body}
          </li>
      )}
    </ul>
  </main>
}

main.js

import * as crayon from 'crayon'
import * as react from 'crayon/react'
import * as item from './item'
import { ListView } from './list-view'

// Creating store
const store = item.createStore()

// Creating router
const app = crayon.create()
app.use(react.router())

// Using property injection to pass the store into my component
app.path('/', (res, res) => res.mount(ListView(store)))

app.load()