https://github.com/georgeosddev/xitrum-react-example
https://github.com/georgeosddev/xitrum-react-example
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/georgeosddev/xitrum-react-example
- Owner: georgeOsdDev
- Created: 2015-01-16T09:08:22.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2020-03-18T10:19:40.000Z (about 5 years ago)
- Last Synced: 2025-01-20T19:32:38.052Z (4 months ago)
- Language: JavaScript
- Size: 1.17 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Xitrum-React-Example
This is a React server side rendering example with Xitrum(Scala).
React is executed with [typesafehub/js-engine](https://github.com/typesafehub/js-engine) on Xitrum.
Javascript code(Saved in `src/resources/react/`) is isomorphic amd work both on client and server.
### How to run:
```sh
cd src/resources
npm install
browserify -t reactify main.js > ../../../public/bundle.js
cd ../../
sbt/sbt run
```
#Server-Side
### Action
ReactIndex.scala
```scala
@GET("react")
class ReactIndex extends Action with ReactRenderer {
override def layout = renderViewNoLayout()
def execute() {
// Properties for React component
val props = Map("msg1" -> "Hello", "msg2" -> "World")
// Create react component
// result html will be saved as reactForView(See also template jade file)
// property will saved as propsForView(See also template jade file)
renderReactView("App", props)
// Respond as xitrum way
respondView()
}
}
```
### Template
ReactIndex.jade
```jade
!!! 5
html
head
meta(content="text/html; charset=utf-8" http-equiv="content-type")
title Xitrum-React
!= currentAction.asInstanceOf[ReactIndex].propsForView
body
!
#{currentAction.asInstanceOf[ReactIndex].reactForView}
script(src={publicUrl("bundle.js")})
```
## Client-Side
main.js(will be browserify and reactify as bundle.js)
```javascript
var React = require('react'),
App = React.createFactory(require('./react/app.jsx'))
// Use exactly same property as server-side did.
// Client side javascript can took over pre-rendered HTML with React Component.
// So React will not re-render DOM, just add event listeners.
var appProps = JSON.parse(document.getElementById('App-props').getAttribute('data-json'));
React.render(App(appProps), document.getElementById("content"));
```
## Rendered HTML
```html
Xitrum-React
App
Hello
World
0
```