https://github.com/andrejewski/raj-react

React bindings for Raj
https://github.com/andrejewski/raj-react

react react-native runtime

Last synced: 10 months ago
JSON representation

React bindings for Raj

• Host: GitHub
• URL: https://github.com/andrejewski/raj-react
• Owner: andrejewski
• License: mit
• Created: 2017-09-09T17:05:38.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-05-11T17:22:23.000Z (over 5 years ago)
• Last Synced: 2025-04-05T00:02:39.502Z (10 months ago)
• Topics: react, react-native, runtime
• Language: JavaScript
• Size: 157 KB
• Stars: 9
• Watchers: 2
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Raj React

> React bindings for [Raj](https://github.com/andrejewski/raj)

```sh

npm install raj-react

```

[![npm](https://img.shields.io/npm/v/raj-react.svg)](https://www.npmjs.com/package/raj-react)

[![Build Status](https://travis-ci.org/andrejewski/raj-react.svg?branch=master)](https://travis-ci.org/andrejewski/raj-react)

[![Greenkeeper badge](https://badges.greenkeeper.io/andrejewski/raj-react.svg)](https://greenkeeper.io/)

## Usage

```js

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 
{state.text}

  }

}


const App = program(React.Component, props => helloProgram)

const root = document.getElementById('app')

ReactDom.render(, 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`](https://facebook.github.io/react/docs/react-dom-server.html).