https://github.com/breuleux/earl-react

Earl Grey macros for React
https://github.com/breuleux/earl-react

Last synced: about 1 month ago
JSON representation

Earl Grey macros for React

• Host: GitHub
• URL: https://github.com/breuleux/earl-react
• Owner: breuleux
• License: mit
• Created: 2015-04-30T00:37:56.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2017-02-13T08:21:55.000Z (over 8 years ago)
• Last Synced: 2025-02-04T09:03:12.382Z (4 months ago)
• Size: 6.84 KB
• Stars: 5
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        

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](http://earl-grey.io) 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".