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:
And you can contribute with:
- Answer my question in this thread about problems in this app. :wink:
- Report existing bugs and issues.
- Add some documentation or comments.
- 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#L31What 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 replacerenderFixed() {
byrenderFixed = ()=>{
?
-
@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.
-
@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); };
-
@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
andbinding
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 returnError: 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 toIcons
and change my import to./demo/Icons/Index.jsx
all things works well. IsIcon
has a special or reserved word in ES6 or OnsenUI 2 ? :hushed:
-
@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!