Hacker News Reader

Comment by PacifyFish | Hacker News Reader

Could you paste the simple script tag that makes React work without transpilation? I always thought you needed Webpack (or an equivalent) to transpile JSX into a vanilla js function the browser can interpret.

If you're referring to Create React App, it uses Webpack - just preconfigured so you don't have to fiddle with it before you start building.

View on HN

This is my mini React template for experiments, including JSX: https://gist.github.com/Badestrand/3609e7c3c88ba47bb9682a474...

><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/bro...

isn't this just a little bit disingenuous

Wow, that’s cool! I didn’t know you could do it all in the browser. Hats off to the Babel devs.

No, I meant simply adding a tag and using react directly, in any context. That's how it was originally designed, btw. It wasn't meant only for SPAs when it was conceived, but as an addon to existing websites.

The other comment gives a perfect example and there are a few tutorials (although I do agree not very mainstream) that teach React without JSX/Webpack/Babel/etc.

edit: You are correct that you need transpilation for JSX but you don't need JSX for React. The confusion of JSX/React sounds eerily similar to how newbies confused jQuery for JS.

I don’t think the comparison with JQuery vs JS is at all similar. JSX was created for React, and nearly every time you see React code it’s using JSX. Technically, each of them can be used separately, but it’s a very reasonable impression to consider JSX one of the main features of React.

JS was not created for JQuery, and you can not used JQuery without JS.

"jQuery was created for JS, and nearly every time you see JS code it's using jQuery." Doesn't that sound like something you would hear a few years ago?

Sure, but that’s a linguistic trick. That sentence implies a completely different meaning for the word “for”.

When I say JSX was created for React, I mean that it was created to be a part of the design of React. Meaning they both first came into broader public awareness at the same time, together, and have continued to be promoted as two independent parts of a single system.

In the docs: https://reactjs.org/docs/react-without-jsx.html

Unfortunately it uses ES6 features. There's no ES3/ES5 demo without JSX -- https://reactjs.org/docs/react-without-es6.html uses JSX

Unfortunately it uses ES6 features.

As an aside, is that really a problem these days? All modern browsers now offer comprehensive native ES6 support. Unless you still need to support older platforms like IE or some of the legacy mobile browsers, it's mostly a non-issue.

IE11 is holding out. Mobile Safari is hit & miss

Presumably IE11 will hold out forever, since it's not under meaningful development any more.

What's missing from any recent version of iOS Safari, though? Anything from 10 upwards supports pretty much all of ES6 with very minor exceptions, AFAIK. Even features from more recent versions of ES tend to be supported quite well quite quickly in the era of self-updating "evergreen" browsers.

Like you said, it depends how much you're betting on your JS to work perfectly, and who your intended market is. If all you're doing is hoping for the most optimistic JS runtime (and perfect connectivity, high bandwidth, etc.) and your site is a white screen of death otherwise, then you're not really building a robust piece of software for the web. Of course, that may not be what you're trying to do, then it's a non-issue.

If vue 3.0 uses proxies (as the slides say), then Vue 3 will also now require ES6 features.

You definitely do not need Webpack. Here's a bare-bones React component "editor" with support for JSX: https://codepen.io/namuol/pen/MXJOzy

Something like this? https://gist.github.com/gaearon/6668a1f6986742109c00a581ce70...

That’s without JSX. Transpilation is required in order to make use of JSX.

So what? You can use React without JSX.

Using the createElement structure is more annoying than just doing a es6 template string in Vue.

Moving the goalpost. I'm only pointing the fact that it is possible, and saying it is impossible is false.

Personally, I don't find the function-call format that "annoying", and I think it presents some advantages neither JSX nor template strings have, along with some disadvantages (it's more verbose, like you pointed out).

And I think GP was saying even if possible it seems rather irrelevant. You could use react without JSX but most likely you will not because you would be throwing away the good things about react. Technically you can eat soup using a fork, but you won’t because...

When React was new and compilers/tooling wasn't that good it was pretty common to use it without JSX. JSX is pervasive because the tooling is now first class (and you'll need it if you make a non-trivial app sooner or later...at which point might as well use JSX since its there), but it works perfectly find without. My first couple commercial apps for React didn't use JSX and it was quite usable. There's just a lack of examples on how to do it these days because no one bothers.

The only time when you won't really have access to a tool chain is for quick demos with just an html page and a script tag (if you don't want to pull in babel as a script), but most online tool allow jsx too now anyway.

There's also a babel script that you can drop into a script tag and will transpile stuff in the browser for you if you want JSX.

Not recommended for large projects in production (but then I'd be using webpack or similar for large vue projects too), but it works pretty well (and surprisingly fast) for quick experiments.

I wrote a tutorial about this.

In this lesson I cover JSX:

https://github.com/kay-is/react-from-zero/blob/master/02-jsx...

http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webp...

Reply on news.ycombinator.com