React.js runtime for Teal
Teal-react is an alternative to JSX that allows you to use Teal to define your components' style and markup.
Usage
For each component you want to render using Teal create a .tl
file with
the same name as the react component and place it right next to the .js
file.
Then delegate the rendering to Teal like this:
// MyComponent.jsvar React = ; moduleexports = React
Accessing members, props and state
By default teal-react exposes the component's state, props and members as
variables. Since they are all placed in the same scope, state
variables will
shadow props
with the same name which in turn will shadow members.
In the rare case that you have both a state and prop with the same name you can
still access either of them using $state.foo
or $props.foo
.
You can override this default behaviour by adding a getRenderContext
method
to your component.
If you want to keep on using the default behaviour and just need to expose some
additional vars you can implement getRenderState
instead. The properties
returned by this method get mixed into the default render context and will
shadow everything else.
Getting started
First install via npm:
npm i --save teal teal-react teal-browserify
Note: You might also want to install teal-instant to add live-reload support.
The following example uses Teal as express view engine. You could also use Teal
to generate static HTML pages, but for now lets stick to express and create
a server.js
file:
var express = var teal = var app = var tl = tltltl app app
The next thing we need is a view that renders the surrounding page which will
load the React app. Therefore we create /views/main.tl
:
!doctype html html head title "Teal-React" // link the generated stylesheet body div id="app" // create a browserify bundle script src=
And finally /views/app.js
…
var React = var App = React React
… as well as /views/app.tl
:
h1 color: teal; "Hello " $world
License
The MIT License (MIT)
Copyright (c) 2014 Felix Gnass
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.