tapestry-react

Use React (http://facebook.github.io/react/index.html) together with Tapestry (http://tapestry.apache.org/).

This library provides basic integration for using JSX and CJSX templates with Tapestry.

Usage

`build.gradle`:

respositories {
  jcenter()
}

dependencies {
  runtime 'de.eddyson:tapestry-react:0.2.0'
}

That's it, now you can import modules written in (C)JSX. Just give them the .(c)jsx extension and they will be compiled to JavaScript automatically.
Note: CJSX transformation may not work with React 0.14 features.

`/META-INF/modules/app/react-test.cjsx`:

define ['t5/core/dom', 'react', 'react-dom'], (dom, React, ReactDOM)->
  HelloMessage = React.createClass
    render: -> <div>Hello {this.props.name}</div>
  mountNode = (dom 'example').element
  ReactDOM.render <HelloMessage name="John" />, mountNode
  return

Components

You can also use the ReactComponent component to keep the components' code separate from the page code:

`/META-INF/modules/app/react/HelloMessage.cjsx`:

define ['t5/core/dom', 'react'], (dom, React)->
  React.createClass
    render: -> <div>Hello {this.props.name}</div>

`/org/example/app/pages/ReactDemo.tml`:

<html title="React Demo Index"
	xmlns:t="http://tapestry.apache.org/schema/tapestry_5_4.xsd"
	xmlns:r="tapestry-library:react">
	<div class="row">
		<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
			<r:reactcomponent module="app/react/HelloMessage" name="John"/>
		</div>
	</div>
</html>

Notes

Speeding things up in production

Compiling templates can take some time, especially when using CJSX. Combined with minification, this can quickly lead to Require.js timeouts in production.
To speed things up, you can have the files pre-compiled and minified upon registry startup using https://github.com/eddyson-de/tapestry-minification-cache-warming.

Calling server-side code

You will probably end up having a lot of React components that do not have an associated page class. If this is the case and you find yourself wanting a proper REST API rather than component- or page-level event handlers, have a look at https://github.com/tynamo/tapestry-resteasy.

fkretzer/tapestry-react