earl-react

    0.1.1 • Public • Published

    earl-react

    earl-react defines a set of macros to ease development with the React framework.

    What follows is the todo list example from React's homepage, rewritten with Earl Grey and earl-react:

    script.eg:

    require:
       earl-react as React
       /browser -> document
    
    require-macros:
       earl-react ->
          %, component
    
    component TodoList:
       render() =
          ul % enumerate(@props.items) each {i, item} ->
             li %
                key = i + item
                item
    
    component TodoApp:
       get-initial-state() =
          {items = {}, text = ""}
       render() =
          div %
             h3 % "TODO"
             TodoList % items = @state.items
             form %
                on-submit(e) =
                   e.prevent-default()
                   @set-state with {
                      items = @state.items.concat({@state.text})
                      text = ""
                   }
                input %
                   value = @state.text
                   on-change(e) =
                      @set-state with {text = e.target.value}
                button % 'Add #{@state.items.length + 1}'
    
    document.onload(e) =
       mount-node = document.get-element-by-id("mount")
       React.render(TodoApp %, mount-node)
    

    Then you can compile with browserify and earlify:

    browserify -t earlify script.eg > bundle.js
    

    Then include bundle.js on a page with some div with id "mount".

    Install

    npm i earl-react

    DownloadsWeekly Downloads

    6

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar