node package manager

korat

Korat

Tiny tool for react/react-native with pure functions. no closing tags, no braces.

Made by coffeescript. but it is useful with javascript.

It's just a thin wrapper around React.createElement like JSX.

but more simple and concise. fun with the Korat! Build Status NPM version

Installation

$ npm install korat --save

Usage

in React

React = require 'react'
{ Component } = React
= require 'korat'
 
class App extends Component
  constructor: (props)->
    super props
    @state =
      newTodo: ""
  render: ->
    k 'div',
      k 'h2''Todos'
      k 'ul',
        k 'li'key: v"#{v}. Task" for v in [0..5]
      k NewTodotodo: @state.newTodo
      k 'button',
        onClick: (e)-> @addNewTodo
 
class NewTodo extends Component
  constructor: (props)->
    super props
    @state =
      todo: props.todo
  render: ->
    k 'div',
      k 'label''for': 'addTodo''Add Todo'
      k 'input',
        id: 'addTodo',
        type: 'text',
        value: @props.todo
        onChange: (e)->
          @props.todo = e.target.value
ReactDOM.render k(App),
  document.getElementById 'container'

in React-Native

React = require 'react'
{Component} = React
{
  StyleSheet
  Text
  View
} = require 'react-native'
= require 'korat'
class App extends Component
  render: ->
    k Viewstyle: styles.container,
      k Text"Open up main.js to start working on your app."
      k View,
        k Textkey:v"#{v}number" for v in [1..5]
styles = StyleSheet.create
  container:
    flex: 1
    backgroundColor: '#fff'
    alignItems: 'center'
    justifyContent: 'center'

Thanks to

@jungheelee