An elegant, flexible DSL for React for use with CoffeeScript (and maybe other languages)
# Alias it as whatever you want (maybe _ or $?)E = ReactScript or require "react-script": ->E ".message"class: if @propsauthor is you then "from-you"E ".info"style: float: "right""From "E "span.author"@propsauthor" at "E "span.time"@propstimeE "p.body"@propstextif @propsfileTransfersE ".transfers""Sent files:"E "ul.files"for transfer in @propsfileTransfersE "li"E "a"href: transferdownloadLinkdownload: transferfileNametransferfileNamemessage = E Messageauthor: "John"time: "5:47 PM"text: "Hello world!"fileTransfers:fileName: "virus.exe"downloadLink: "#"ReactDOMrender messagedocumentbody
By simply supporting arrays and ignoring nully values, it works with all forms of conditionals and comprehensions.
All the functionality of classnames is built in. Just provide any class, classes, className, classNames or classList. All those properties are treated the same and can be a single class name, a single string with multiple class names, an object where the keys are the class names and the values are whether they should be present, or an array of any of the preceding. Nully values are ignored, allowing for conditionals.
The whole library tries to be pretty flexible.
You can specify
either as e.g.
data: size: 1.337/
aria: pressed: true.
role attribute is just
Check out the specs for more details.
If you find something that doesn't work as you'd hope, feel free to open an issue.
npm i react-script --save
ReactScript as something short such as
E to use as a DSL.
var E = ReactScript; // or require("react-script");
- hyperscript (generates HTML)
- react-hyperscript (hyperscript for React)
- virtual-hyperscript (hyperscript for virtual-dom)
- zorium (framework for virtual-dom)
- hyper ("React.js wrapper for CoffeeScript", part library, part transformer)
- coffee-react (JSX for CoffeeScript (plus related projects))
- react-no-jsx (uses arrays rather than function calls; not enough CoffeeScript)