OnsenUI 2 React with Meteor.js Demo App

[cyclops24]

Hi guys,
I start using OnsenUI 2 React version in Meteor.js after see @Fran-Diox OnsenUI Meteor ToDo App repo.
I create new project and start using all OnsenUI 2 components in Meteor.js 1.3+ and try to make a complete demo apps based on https://onsen.io/v2/docs/react/ demos, but I’m very new in React, OnsenUI and ES6 so I create this issue to ask my questions in this journey and then when it’s complete I can introduce this in News & Announcements category of forum for Meteor.js developer. I think it’s very interesting for other Meteor mobile developers like me. :wink:

My project address is: https://github.com/MeteorDemoApps/OnsenUI2React-demo
This is app screen shot:

And you can contribute with:

1. Answer my question in this thread about problems in this app. :wink:
2. Report existing bugs and issues.
3. Add some documentation or comments.
4. Submit pull request.

[cyclops24]

My first issue (Issue #1) is that I don’t know why but my Floating action button component click event not working. You can see it here: https://github.com/MeteorDemoApps/OnsenUI2React-demo/blob/master/imports/ui/demo/FAB/Index.jsx#L31

What is the problem. I exactly do same thing as https://onsen.io/v2/docs/react/fab.html

[dagatsoin]

I think it is because renderFixed is not bound to the instance.
Could you try to replace renderFixed() {by renderFixed = ()=>{?

[cyclops24]

@dagatsoin First thanks for your attention. I convert my renderFix based on your note like this:

renderFixed = () => {
    return (
        <Fab ripple
            style={{backgroundColor: ons.platform.isIOS() ? '#4282cc' : null}}
            onClick={this.handleClick}
            position='bottom right'>
            <Icon icon='md-face' />
        </Fab>
    );
};

but It return below error on server console:

imports/ui/demo/FAB/Index.jsx:20:4: /imports/ui/demo/FAB/Index.jsx: Missing class properties transform.

line 20 is renderFixed definition.

[Fran Diox]

@cyclops24 Not sure if that syntax is correct. Change lines #41 and #42 with the following.

Try this in ES5:

    renderToolbar={this.renderToolbar.bind(this)}
    renderFixed={this.renderFixed.bind(this)}

Or ES6:

    renderToolbar={() => this.renderToolbar()}
    renderFixed={() => this.renderFixed()}

[cyclops24]

@Fran-Diox Thanks man. Yehhhh :+1: it’s worked. So now with arrow function I haven’t need constructor and bind like below? it’s true?

    constructor(props) {
        super(props);

        this.renderToolbar = this.renderToolbar.bind(this);
        this.handleClick = this.handleClick.bind(this);
    };

[Fran Diox]

@cyclops24 I think that’s not doing anything at all, you can safely remove it :sweat_smile:
Bindings in JavaScript are a bit tricky sometimes.

[cyclops24]

@Fran-Diox Thanks man. I know this and binding finally kill me one day. :wink:
I fixed that and add your name to contributors for small thanks.

---

I find this article useful about arrow function vs bind: http://www.2ality.com/2016/02/arrow-functions-vs-bind.html (maybe useful for others like me)

[cyclops24]

My next issue, Issue #2 is that I don’t know why but when I add import demoIconIndex from './demo/Icon/Index.jsx'; to my TOC component, my app return Error: Cannot find module './demo/Icon/Index.jsx' and break at all but this file exist in same path.
I also double check anything.

[cyclops24]

Guys I did a lot of test and find that if Icon word exist in path app breaks but If I rename file to Icons and change my import to ./demo/Icons/Index.jsx all things works well. Is Icon has a special or reserved word in ES6 or OnsenUI 2 ? :hushed:

[Fran Diox]

@cyclops24 I don’t think so :sweat_smile: No idea why it doesn’t work with Icon. By the way, I just released a blog post about Meteor + Onsen UI. Let’s see if more devs join us :smile:
You can comment if you want and add a link to your app!