React bindings for Raj
npm install raj-react
import React from 'react'
import ReactDom from 'react-dom'
import { program } from 'raj-react'
const helloProgram = {
init: [{ text: 'Hello world' }],
update (message, state) {
return [state]
},
view (state, dispatch) {
return <p>{state.text}</p>
}
}
const App = program(React.Component, props => helloProgram)
const root = document.getElementById('app')
ReactDom.render(<App />, root)
program(Component, props => ({ init, update, view })): Component
Component
: a React Component classprops
: the React componentprops
init
: the initial state and optional effectupdate(message, state)
: return the new state and optional effectview(state, dispatch)
: return the React view
The raj-react
package exports a single function which takes a React component class and a function which receives the component's props
and returns a Raj program { init, update, view }
triplet; returns a React component.
The raj-react
package wraps the raj
runtime and integrates within an existing React component tree. The root program is the entry point that meets the runtime. Most often, an app needs raj-react
once. All child programs' view
methods may return React components with no boilerplate required.
Yes, raj-react
works with both web and React Native components. In the above example, react-dom
renders a web page component.
The raj-react
package returns a React Component that works with ReactDOMServer
.