teact

Teact

It's better than cjsx.

Build React element trees by composing functions.
You get full javascript control flow, and minimal boilerplate. It's also quite simple, just a thin wrapper around React.createElement like JSX.

Usage

{crel} = require 'teact'

crel 'div', '#root.container', ->
  unless props.signedIn
    crel 'button', onClick: handleOnClick, 'Sign In'
  crel.text 'Welcome!'

Transforms into:

React.createElement('div',
  {id: root, className: 'container'}, [
    (props.signedIn ? React.createElement('button',
      {onClick: handleOnClick}, 'Sign In'
    ) : null)
    'Welcome!'
  ]
)

Use it from your component's render method:

{Component} = require 'react'
{crel} = require 'teact'

class Widget extends Component
  render: ->
    crel 'div', className: 'foo', ->
      crel 'div', 'bar'

Or in a stateless component:

module.exports = (props) ->
  crel 'div', className: 'foo', ->
    crel 'div', 'bar'

Nesting Components

crel is just a thin wrapper around React.createElement, so you can pass it components instead of crel names:

class DooDad extends Component
  render: ->
    crel 'div', className: 'doodad', =>
      crel 'span', @props.children

class Widget extends Component
  handleFiddle: =>
    # ...

  render: ->
    crel 'div', className: 'foo', =>
      crel DooDad, onFiddled: @handleFiddle, =>
        crel 'div', "I'm passed to DooDad.props.children"

Sugar Syntax

Teact exports bound functions for elements, giving you options for terser syntax if you're into that:

T = require 'teact'

T.div 'div', className: 'foo', ->
  T.text 'Blah!'

or the Teacup / CoffeeCup signatures:

{div, text} = require 'teact'

div 'div', '.foo', ->
  text 'Blah!'

Legacy

Markaby begat CoffeeKup begat CoffeeCup and DryKup which begat Teacup which begat React.

Contributing

$ git clone https://github.com/hurrymaplad/teact && cd teact
$ npm install
$ npm test