React.js in Quick Base

  • 1
  • 1
  • Question
  • Updated 10 months ago
  • Doesn't Need an Answer
Hello All,

I want to share with you a technique to get your JSX React apps in a Quickbase dbpage.  First, here's the challenge, most people are accustomed to using JSX with React, but JSX is not native JavaScript and must first be transpiled to JavaScript.  This is easily accomplished in a server environment, but how to do this in a dbpage?  The requirement came to me to find a way to make this work without using a server.

The solution is to do transpiling on page load.  This is slower than pretranspiling, but is ultimately necessary if you don't want to use a server.  The alternative would be to upload your transpiled code, which you should definitely do if performance is a concern.  By the way, performance impact for transpiling on load is negligible for small JSX files.

Anyways, here goes:

<head>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js"></script>;
    <script src="https://unpkg.com/react@latest/umd/react.development.js"></script>;
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>;
</head>
<body>
    <script type="text/babel" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy">
        (() => {
            "use strict";
            class Hello extends React.Component {
                render() {
                    return <div>Hello {this.props.name}</div>;
                }
            }
            ReactDOM.render(
                <Hello name='World' />,
                document.getElementById('container')
            );
        })();
    </script>
    <div id="container">
        <!-- This element's contents will be replaced with your component. -->
    </div>
</body>


Note that I am importing babel.  Babel will handle the transpiling for scripts tagged with text/babel.  What is in the script tag above is JSX, not native JavaScript.  Copy and paste this code as-is into a dbpage. It should work without any modification.  Now you can enjoy entering the world of React.

Happy travels!
David Maskasky
Photo of David Maskasky

David Maskasky

  • 160 Points 100 badge 2x thumb

Posted 10 months ago

  • 1
  • 1
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,352 Points 20k badge 2x thumb
I used to transpiile coffeescript in this fashion from a code page.

Then I started using ELM with QuickBsae.

And I can't wait for webassembly to mature so you can use code written in any language in the browser.

With all this goodness why is everyone wasting time arguing about which color to hardcode in the product?
Photo of Ryan

Ryan

  • 10 Points
If slow page loading is a concern for some, I would look into Parcel.js.  It is a very minimalist web application bundler.  It attempts to avoid all of the configuration involved with other bundlers like Webpack, and makes it very easy to just get your project up and running and bundle the files for production.  If you couple that with the "quickbase-cli" tool which allows you to send your bundled files to your Quick Base application via the command line, you're set up with a nice little developer environment that is very easy to configure and use for projects that involved react, ES6, angular etc. 

https://parceljs.org/

https://www.npmjs.com/package/quickbase-cli
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,242 Points 20k badge 2x thumb
Someone just mentioned parceljs in a local meetup so I am going to check that out. Thanks!