Monaca Onsen UI Discord Chat Github Repo

Getting started with React bindings



  • In the guide it says you can just include the scripts like this

    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="onsenui.js"></script>
    <script src="react-onsenui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
    

    but where do I get react.js, react-dom.js, onsenui.js, react-onsenui.js?

    npm install onsenui react-onsenui --save
    

    gives me nodemodules but I can’t find the files listed in the guide.

    I would like to avoid using Browserify or Webpack.

    Is there just a CDN with all the files somewhere? I’ve tried this but I get JS errors before the example app starts up

        <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    
        <!-- Don't use this in production: -->
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
        <script src="https://unpkg.com/react-onsenui@1.11.3/dist/react-onsenui.js"></script>
    


  • Ok I gave in and looked into using Browserify. Turns out I can get what I want with just this

    var React = require('react');
    var ReactDOM = require('react-dom');
    var ons = require('onsenui');
    var Ons = require('react-onsenui');
    
    window.React = React;
    window.ReactDOM = ReactDOM;
    window.ons = ons;
    window.Ons = Ons;
    

    and then include the bundle.js and carry on just using javascript.