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.js
var React = require('react');

module.exports = React.createClass({

  // your component's logic ...

  // render with Teal
  render: require('./MyComponent.tl')  
})

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 = require('express')
var teal = require('teal')

var app = express()
var tl = teal()

tl.use('teal-browserify')
tl.use('teal-react')
tl.use('teal-express', app)

app.get('/', function(req, res) {
  res.render('main')
})

app.listen(3000)

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
    stylesheet()
  }
  body {
    div {
      id="app"
    }
    // create a browserify bundle
    script { src=bundle('./app.js') }
  }
}

And finally /views/app.js …

var React = require('react')

var App = React.createClass({

  getInitalState: function() {
    return { hello: 'world' }
  },

  render: require('./app.tl')
})

React.renderComponent(App, document.getElementById('app'))

… 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.