Make sure you pip install TurboGears2, dukpy, tgext.webassets and kajiki before trying this.
react.js and react-dom.js can be downloaded from https://cdnjs.com/libraries/react/15.3.2
Make sure you put react.js, react-dom.js and HelloWorld.jsx into a statics directory.
| # -*- coding: utf-8 -*- | |
| import kajiki | |
| from tg import AppConfig | |
| from tg import TGController | |
| from tg import expose | |
| from tg import app_globals | |
| CONTENT = kajiki.XMLTemplate(u'''<html> | |
| <head> | |
| </head> | |
| <body> | |
| <div id="component">Hello!</div> | |
| <script py:for="m in bundle_js.urls()" src="$m"></script> | |
| <script> | |
| ReactDOM.render( | |
| React.createElement(HelloWorld.HelloWorld, {'name': 'YourName :)'}, null), | |
| document.getElementById('component') | |
| ); | |
| </script> | |
| </body> | |
| </html> | |
| ''', mode='html5') | |
| class RootController(TGController): | |
| @expose() | |
| def index(self): | |
| return CONTENT(dict( | |
| bundle_js=app_globals.webassets['bundle.js'] | |
| )).render() | |
| config = AppConfig(minimal=True, root_controller=RootController()) | |
| config.serve_static = True | |
| config.paths['static_files'] = 'statics' | |
| from webassets.filter import register_filter | |
| from dukpy.webassets import BabelJSX | |
| register_filter(BabelJSX) | |
| import tgext.webassets as wa | |
| wa.plugme( | |
| config, | |
| options={ | |
| 'babel_modules_loader': 'umd' | |
| }, | |
| bundles={ | |
| 'bundle.js': wa.Bundle( | |
| 'react.js', | |
| 'react-dom.js', | |
| wa.Bundle( | |
| 'HelloWorld.jsx', | |
| filters='babeljsx', | |
| ), | |
| filters='rjsmin', | |
| output='assets/bundle.js' | |
| ) | |
| } | |
| ) | |
| application = config.make_wsgi_app() | |
| from wsgiref.simple_server import make_server | |
| print("Serving on port 8080...") | |
| httpd = make_server('', 8080, application) | |
| httpd.serve_forever() | |
| export class HelloWorld extends React.Component { | |
| render() { | |
| return ( | |
| <div className="helloworld"> | |
| Hello {this.props.name} | |
| </div> | |
| ); | |
| } | |
| } |