React bindings for Raj
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.gitignore
.travis.yml
LICENSE
README.md
package.json

README.md

Raj React

React bindings for Raj

npm install raj-react

npm Build Status Greenkeeper badge

Usage

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)

Documentation

program(Component, props => ({ init, update, view })): Component

  • Component: a React Component class
  • props: the React component props
  • init: the initial state and optional effect
  • update(message, state): return the new state and optional effect
  • view(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.

Questions

Where to use raj-react?

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.

Does this work with React Native?

Yes, raj-react works with both web and React Native components. In the above example, react-dom renders a web page component.

Server-side rendering?

The raj-react package returns a React Component that works with ReactDOMServer.