https://github.com/acidsound/korat
Generate React(React-native) elements without JSX
https://github.com/acidsound/korat
coffee coffeescript createelement dom react react-native
Last synced: 7 months ago
JSON representation
Generate React(React-native) elements without JSX
- Host: GitHub
- URL: https://github.com/acidsound/korat
- Owner: acidsound
- License: mit
- Created: 2017-03-17T08:25:35.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-05T21:08:24.000Z (almost 7 years ago)
- Last Synced: 2025-03-29T06:05:01.866Z (8 months ago)
- Topics: coffee, coffeescript, createelement, dom, react, react-native
- Language: CoffeeScript
- Homepage:
- Size: 13.7 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://facebook.github.io/react/docs/top-level-api.html#react.createelement) like JSX.
but more simple and concise. fun with the Korat!
[](https://travis-ci.org/acidsound/korat)
[](https://www.npmjs.org/package/korat)
## Installation
```
$ npm install korat --save
```
## Usage
### in React
```coffee
React = require 'react'
{ Component } = React
k = 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 NewTodo, todo: @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
```coffee
React = require 'react'
{Component} = React
{
StyleSheet
Text
View
} = require 'react-native'
k = require 'korat'
class App extends Component
render: ->
k View, style: styles.container,
k Text, "Open up main.js to start working on your app."
k View,
k Text, key:v, "#{v}number" for v in [1..5]
styles = StyleSheet.create
container:
flex: 1
backgroundColor: '#fff'
alignItems: 'center'
justifyContent: 'center'
```
## Thanks to
@jungheelee