Home

Awesome

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

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.