A simple tool for aiding with creating React UIs in parenscript
Hello World (:use parenscript parenscriptx cl-who):
(with-html-output-to-string (stream nil :prologue "<!DOCTYPE html>") (:html (:head (:title "Hello React") (:script :src "https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js") (:script :src "https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js") (:body (:div :id "content") (:script (ps-to-stream stream (defreact *hello-world render (lambda () (htm (:div (+ "Hello " (@ this props name) "!"))))) (chain *React-d-o-m (render (htm (:*hello-world :name "World")) (chain document (get-element-by-id "content"))))))))))
This allows cl-who style elements inside parenscript. The symbol
You must prefix all react class names with an asterisk; parenscript
CamelCaseName so this follows
the convention of initial capital letters for react classes, and
allows for HTML to introduce new element names without needing to
update this library.
defreact is a convenience wrapper for generating "var Foo =
React.createClass(...)" forms; the body is alternating key/value pairs for the
react object that is created.
There is a more full-featured example using hunchentoot; lines starting
used to be the first tutorial on the react home page.