Is there a working example available for a tabbar?
(where each tab has its own Component/Page)

I’ve used Angular 1 , React-native, ReactJS.
Vue.js syntax is silky compared to those. Love it!

I can’t get this set up correctly.
Toolbar (above tabbar) and Footer (beneath tabbar) stay hidden under the Tabbar pages.

Is there a way to fix this?

render() {
    return (
      <Page>
        <Toolbar inline>
          <div className="left"><BackButton>Back</BackButton></div>
          <div className="center">{'Skill' + this.props.skill.skillNr}</div>
        </Toolbar>
        <Tabbar
          index={this.state.index}
          position='top'
          onPreChange={({index}) => this.setState({index})}
          renderTabs={this.renderTabs.bind(this)}
        />
        <Footer />
      </Page>
    );
  }

I don’t understand why this.props.skill.skillNr is not rendering in OnsenUI.
There seems to be some kind of timing problem.
I’m using phonegap-template-react-hot-loader as a template for my project.

Reactjs constructor with console.log(…

console.log in the browser

this.props.skill.skillNr referenced in <Page><Toolbar…

result in the app

Ah, found it. isSwipeable={false} makes the scrollbar work perfectly.

  return (
      <Splitter>
        <SplitterSide
          isSwipeable={false}>

Thanks, unordered list works well except not with the Splitter (sidebar navigation) as the outer component of the app.
Is there a way to disable the Splitter on certain pages?
Or should I set the Navigator (stacked navigation) as outer component and then add the splitter on pages where I need them?

(index.html)

 <Splitter>
        <SplitterSide
          side='left'
          collapse={true}
          isOpen={this.state.isOpen}
          onClose={this.hide.bind(this)}
          isSwipeable={true}>
          <Page>
            Menu content
          </Page>
        </SplitterSide>
        <SplitterContent>
          <Navigator initialRoute={{component: Skills}}
                     renderPage={this.renderPage}/>
        </SplitterContent>
      </Splitter>

I understand that using React with the online tool is not possible.

I’ve set up a blank project with Local CLI but what I still don’t understand is how to add js libraries.
Normally I would config webpack with babel to compile react, es6, css, ui libraries etc., but Monaca is already running a webpack instance. How do I solve this?

I’m trying to build a project from scratch (no framework) with a blank template.
Then I’m attaching JS Components React and material-ui.

Should this work out of the box?
I don’t see how the components loader is going to kick in.

Should I add something my self?
Are there any examples how to build custom projects with various JS components?

generated index.html

imported react as a JSComponent

I see you can add css components with the Monaca online tool.
However my project is set up with Reactjs. which excludes using the online tool.

I can only use the Monaca CLI for builds etc., but I can’t see how to add/remove JS/CSS components.

@beebase I did a new install. Seems to work now.

monaca preview: All icons display fine.
monaca debug: All icons appear as placeholders with a cross.

Any ideas?

OnsenUI 2 with Reactjs