4 ms·
Show HN: ReactJS with JSX without bundling or transpiling
source: https://codesandbox.io/s/dikoh?file=/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<div id="main"></div>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" data-presets="react" data-type="module">
import {
ChakraProvider,
Box,
Text
} from "https://cdn.skypack.dev/@chakra-ui/react";
import React, { useRef } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
const MyText = ({ color, ...props }) => {
return <Text fontWeight="bold" as="span" {...props} />;
};
function Foo() {
return (
<div>
Foo
</div>
);
}
function App() {
return (
<Box>
Hello <MyText>Skypack</MyText>
<Foo/>
</Box>
);
}
ReactDOM.render(
<ChakraProvider>
<App />
</ChakraProvider>,
document.getElementById("main")
);
</script>
</body>
</html>
- deleted 5y ago[deleted]
- andrewstuart 5y agoI thought this might be interesting to people because it's no longer necessary to use a transpiler or bundler. Instead, just use es6 modules loaded from skypack. Save the above code to index.html and load it in a browser.
- tehbeard 5y agoYou literally import a transpiler on the page.... What the hell do you think Babel is? All you've done is shift the work from once at build time to every. Single. Time anyone loads the page on their phone/tablet/pc...
- andrewstuart 5y agoYou miss the point - note the dynamic module loading of imports.
- nsonha 5y agousing a nonstandard script type (babel, data-type bla bla), mind blowing!
- tehbeard 5y agoHow do I miss the point? You said no transpiling! And I pointed out how you have in be. > Dynamic module loading ...a feature of browsers since 2017/2018? Of which numerous blog posts have discussed the merits of tree shaking and bundling post-ESM to strike a balance of minimal file size / network requests and cache thrashing on updates, Vs. One copypasta text dump with zero depth... You copy pasted junk, ironically with no transformative process on your part..
- brundolf 5y agoCharitably, it could be nice for prototyping I'm going to assume you already know this shouldn't be done in production If you wanted something like this in production, then yes you could probably use modules and skip bundling these days, but skipping bundling != skipping transpiling. Instead, transpile your separate source modules into separate ES modules and ship those.
- tehbeard 5y agoWith HTTP/2 server push faltering in production and the real world... it's still best to bundle, but just down to your direct dependencies and with tree shaking (i.e. react and it's deps become one file, react-dom another, and any common deps between the two become a third "common-vendor.js" file). and while you're at it, it's not much more effort to take the ESM "evergreen" version, and dump a SystemJS IE11 / "legacy" bundle if needed for a project.
- acemarke 5y agoYou've got a link to `@babel/standalone/babel.min.js` and a `<script type="text/babel">`. Are those not being used at all? Because that's definitely "transpiling", just not with an external tool. Did you start this file by copy-pasting the React single-file HTML template from the "Getting Started" page?
- __ryan__ 5y agoYep, Babel is transpiling that script tag. This is a cool pattern, useful for testing and whatnot, but nothing new and not recommended for production. Another example of this pattern is Paper.js & PaperScript [0] [0] http://paperjs.org/tutorials/getting-started/paperscript-interoperability/ http://paperjs.org/tutorials/getting-started/paperscript-int...
- mokanfar 5y ago>not recommended for production. Rhetorical question: What percent of use cases is it not recommended for use in production?
- tehbeard 5y agoThe only use case babel in browser I can think of is either interactive tutorial/learning for end users on browser features or React JSX (to snuff out the whole getting a dev-env. setup), and interactive playgrounds like storybook.js to allow someone to compose a mockup, again without a git clone / do_x() / add / commit / push.
- brundolf 5y agoFun fact: the very first time I heard about React and JSX, at a conference in 2014 or 2015, this is actually how it was presented. The presenter created a script tag with type="text/jsx" and jumped right in. I assume that was the official way to use it at the time; I got the impression they expected it to become a web standard eventually. JS transpiling and bundling weren't really a common thing yet, as far as I know. Of course we know how that story ended. It's dramatically more efficient to build ahead of time (lacking any kind of native support). Still, part of me misses the days when it was normal to just open an HTML file and start hacking. Maybe one day we'll get native templating of some kind in the browser. It kind of amazes me that we haven't yet.
- cosmotic 5y agoOnly 119 requests, 970KB and 2.5s to load Hello world?
- andrewstuart 5y agoThe point of this post is not JSX. The point of this post is to pay attention to the es6 import module loading which is now natively supported in browsers.
- __ryan__ 5y ago> The point of this post is not JSX. > Show HN: ReactJS with JSX without bundling or transpiling The title of the post does mention jsx without transpiling and does not mention es6 modules. ES6 modules are a great feature. If you’re still using a transpiler which could have abstracted that away, it’s a poor example of using them.
- exelib 5y agoPlease stop polluting our planet! There is no one advantage of this technique, but only disadvantages: - It transpiles. Your claim is misleading and incorrect. - On your local machine it doesn't make any difference. It's not faster. - It has huge impact on the visitors. It transpiles every single visit. Every. It consumes power, burn energy through the window. - It's slow. It's incredible slow and with every module it gets slower. Try it on a low-end mobile. Not on your shiny new iphone. BTW, if you want unbundled and fast, look at snowpack or like.