React.js in Quick Base
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:
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
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
