Skip to content
This repository has been archived by the owner on Nov 5, 2022. It is now read-only.

Latest commit

 

History

History
51 lines (42 loc) · 1.38 KB

cyclejs-react.md

File metadata and controls

51 lines (42 loc) · 1.38 KB

Install dependencies:

npm install react react-dom react-helmet @cycle/react @cycle/react-dom xstream 

Add a Django view:

from django.shortcuts import render

def cycle_react_view(request):
    return render(request, 'template.js', context={
        'title': 'Django Cycle React SSR',
        'count': 0
    })

Export the root component converted to React component:

import { Stream } from 'xstream'
import { h, makeComponent } from '@cycle/react'
import { h1, button, div, title } from '@cycle/react-dom'
import { Helmet } from 'react-helmet'

const main = sources => {
    const increments = sources.react.select('increment').events('click').mapTo(1)
    const decrements = sources.react.select('decrement').events('click').mapTo(-1)
    const counts = sources.react.props().map(props =>
        Stream.merge(increments, decrements).fold((acc, n) => acc + n, props.count)
    ).flatten()
    const views = Stream.combine(sources.react.props(), counts).map(([props, count]) =>
        div([
            h(Helmet, [
                title([props.title])
            ]),
            h1('Count ' + count),
            button({ sel: 'increment' }, '+'),
            button({ sel: 'decrement' }, '-'),
        ])
    )
    return {
        react: views
    }
}

export default makeComponent(main /*, drivers */)