Useful with ReactJS?

[thearabbit]

Now I tried to use React JS. Useful for React such as render, helper, ...???

[dr-dimitru]

Hello @thearabbit ,

Not sure, haven't tested it with React. I believe there is react specific router, have you checked it?

[thearabbit]

I think that Flow Router easy than React Router in Meteor.

[dr-dimitru]

@thearabbit

If you found a way to use it with React, or know what we need to update to support it - please leave here examples or submit a PR to docs.

I believe community will be appreciated for it :)

[crapthings]

@thearabbit

use react komposer to wrap reactive data source https://github.com/arunoda/react-komposer

use react mounter to render dom https://github.com/kadirahq/react-mounter

const Nav = () => <ul>
  <li>
    <a href='/'>home</a>
  </li>

  <li>
    <a href='/about'>about</a>
  </li>
</ul>

const Layout = ({ children }) => <div>
  <Nav />
  {children()}
</div>

const Main = ({ text }) => <div>
  <h1>{text}</h1>
</div>

const About = () => <div>about</div>

FlowRouter.route('/', {
  action() {
    Mount(<Layout />, {
      children: () => <Main text='hello kitty' />
    })
  }
})

FlowRouter.route('/about', {
  action() {
    Mount(<Layout />, {
      children: () => <About />
    })
  }
})

and i think we can make helper as reactive function to work with react @dr-dimitru

but react router is something good too.

[dr-dimitru]

Hi @crapthings ,

Great suggestion to add a helper for React, but I have no experience with React. Could you point me to the right direction, or send a PR?

[neooleg]

Could you point me to the right direction

Flow-Router SSR works with React fine -- https://github.com/kadirahq/react-mounter#server-side-rendering-ssr

[dr-dimitru]

@neooleg

1. SSR for server rendering only, isn't it?
2. What kind of helper will help to use React with FR? (What this helper will do?)

[neooleg]

@dr-dimitru

1. It was tested with ssr branch (btw, on which React SSR works as well), thus I share this with you.
2. react-mounter exactly.

If there is not enough info about React and FR you can check example https://github.com/kadira-samples/meteor-data-and-react

Hopefully, this will be useful.

[neooleg]

BTW, initially I assumed you extended SSR abilities of FR as well in this fork. This would be amazing! Now I see that it's only about client side FR.

[crapthings]

@dr-dimitru

i think we should move helper as function, and make them reactive with FlowRouter.current()?

then warp function for blaze, and export helper function for react ?

[dr-dimitru]

@neooleg no, no SSR for now. The reason for this react-layout is stale now, while SSR is mentioned as still experimental, and already stale as well.

We have targeted for stability and production-ready code at this rep.

Anyways, I'm reopening this thread, to think more about this in the future.

More explanation about how you have used SSR and what for, - is highly appreciated.

[crapthings]

helper should work with stateless component and class component ?

[dr-dimitru]

Hello @crapthings ,

Your sample above looks pretty solid to me, I guess if it works, there is no need for a helper.

i think we should move helper as function

Didn't get it...

then warp function for blaze

So, you're looking for React + Blaze combination? (I guess I misunderstood it)

[crapthings]

@dr-dimitru

sorry about my english and writing skill.

i mean we can't use blaze helper directly on react component.

let me try to write some example. wait.

[dr-dimitru]

@crapthings waiting for it. Hope it's something what can be implemented quickly, - I'm about to release an update

[crapthings]

maybe

make a hoc fn that avoid write these everytime or make a minimal react komposer

i don't know

function track(reactiveMapper) {
  return (props, onData, env) => {
    let trackerCleanup = null
    const handler = Tracker.nonreactive(() => {
      return Tracker.autorun(() => {
        trackerCleanup = reactiveMapper(props, onData, env)
      })
    })

    return () => {
      if(typeof trackerCleanup === 'function') trackerCleanup()
      return handler.stop()
    }
  }
}

function flowRouterCurrent(props, onData) {
  route = FlowRouter.current()
  onData(null, { route })
}

https://github.com/crapthings/flow-router-active-react/blob/master/client/main.js

use FlowRouter.go('/') to see reactive

FlowRouter.go('/')
FlowRouter.go('/about')
FlowRouter.go('/')

[dr-dimitru]

@crapthings thanks a lot. Hope I get it right, could you take a look on - https://github.com/VeliovGroup/flow-router/commit/47097c8ef458dcfb176e72e7a7b6161bce98ebae and https://github.com/VeliovGroup/flow-router/commit/4b74ab753bd615ff146baba26b9294a58070f9c1

So it will be something like:

const ReactContainer = compose(FlowRouter.track(FlowRouter.mapper))(Element);
// or even shorter:
const ReactContainer = compose(FlowRouter.trackMapper())(Element);

[dr-dimitru]

@crapthings isn't it better to also pass props and env to React Container? like this:

{
  mapper(props, onData, env) {
    onData(null, { route: this.current(), props, env });
  }
}

[dr-dimitru]

@crapthings published as v3.1.1

Let me know if it works for you. Feel free to send PR to update the docs.

[dr-dimitru]

@therabbit , @crapthings ,

Is this solved? Can we close this one?

[thearabbit]

Yes it work fine.

[dr-dimitru]

Hi @crapthings @neooleg ,

Could you please drop some thoughts about SSR at #10 ? Thank you.