3. Getting started with React bindings

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Getting started with React bindings

  • D

    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>
    0
  • D

    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.

    0