OnsenUI 2 React with Meteor.js Demo App



  • 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:
    0_1471355354866_Screen Shot 2016-08-16 at 18.18.21.png

    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.


  • 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



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



  • @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.


  • Onsen UI

    @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()}
    


  • @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);
        };
    

  • Onsen UI

    @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.



  • @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)



  • 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.



  • 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:


  • Onsen UI

    @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!