Skip to content

Instantly share code, notes, and snippets.

@m1sta

m1sta/babel-app.js Secret

Created March 5, 2023 10:12
Show Gist options
  • Save m1sta/63c9525297092df8ac78c85d31477c52 to your computer and use it in GitHub Desktop.
Save m1sta/63c9525297092df8ac78c85d31477c52 to your computer and use it in GitHub Desktop.
Download ZIP
Using import with babel standalone
Raw
babel-app.js
"use strict";
function App() {
return (
<div>
<strong>app.js</strong> is loaded<br/>
<SubComponent />
</div>
)
}
ReactDOM.render(<App />, document.getElementById("root-react"));
Raw
babel-module.js
"use strict";
class SubComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<span> SubComponent-is-working </span>
)
}
}
Raw
babel.htm
<script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js" crossorigin></script>
<body>
<div id="root-react"></div>
</body>
<script type="text/babel" src="babel-module.js"></script>
<script type="text/babel" src="babel-app.js"></script>
@ConradSollitt
Copy link

This version will work with jsxLoader if you put the main file babel-app.js inline on the page and have the modules loaded from outside it. I'll reply more in the main issue that you opened.

<script src="https://unpkg.com/react@16.13.1/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/jsxLoader.min.js"></script>
<div id="root-react"></div>
<script type="text/babel" src="babel-module.jsx"></script>
<script type="text/babel">
    "use strict";

    function App() {
        return (
            <div>
                <strong>app.js</strong> is loaded<br/>
                <SubComponent />
            </div>
        )
    }

    ReactDOM.render(<App />, document.getElementById("root-react"))        
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment