Server side react rendering on Phoenix.
Inspired by reactjs/react-rails
- Add
{:react_phoenix, github: "increments/react_phoenix"}
to your deps inmix.exs
. - Import
ReactPhoenix.Utils
and callreact_component
page_view.ex
defmodule YourApp.PageView do
use HelloPhoenix.Web, :view
import ReactPhoenix.Utils
end
page.eex
<%= react_component("HelloComponent", %{propA: 1, propB: 2}) %>
# => <div data-react-class="Hello" data-react-props='{\"a\":1}'></div>
if react_compoent's option, prerender: true
, ReactPhoenix compiles react component in server side.
# Eval javascript at application boot
ReactPhoenix.JSContext.load_javascript """
var Hello = React.createClass({render: function(){return React.createElement('div', {}, "hello")}})
"""
# or load_file
ReactPhoenix.JSContext.load_file "components.js" # expect precompiled javascripts
...
```elixir
<%= react_component("Hello", %{}, prerender: true) %>
# => <div data-react-class="Hello" data-react-props='{}'>hello</div>
npm install @mizchi/react-ssr-mounter --save
let {initComponents} = require('@mizchi/react-ssr-mounter');
// register save reference name with server side resolver.
window.Hello = React.createClass({
render(){return <div><h1>hello</h1></div>;}
});
window.addEventListener("load", () => {
var components = initComponents();
});
You can take over server side state if it can.
- react_compoent prerender: false
- react_compoent prerender: true
- Add an example
- Use v8 context pool
- .js renderer
- .jsx renderer
- .jade renderer for react-jade
- Cache by filename
- Reload renderer when template files change
Chris McCord and his phoenix_haml project for bootstraping the react_phoenix project.