32 ms·

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

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.

edwinvdgraaf 8y ago
Something like this? https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605 https://gist.github.com/gaearon/6668a1f6986742109c00a581ce70...
- wa1987 8y ago
  That’s without JSX. Transpilation is required in order to make use of JSX.
  - whyevenbother 8y ago
    So what? You can use React without JSX.
    - akhilcacharya 8y ago
      Using the createElement structure is more annoying than just doing a es6 template string in Vue.
      - whyevenbother 8y ago
        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).
        goliatone 8y ago
        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...
        shados 8y ago
        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.
  - nicoburns 8y ago
    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.
  - k__ 8y ago
    I wrote a tutorial about this. In this lesson I cover JSX: https://github.com/kay-is/react-from-zero/blob/master/02-jsx.html https://github.com/kay-is/react-from-zero/blob/master/02-jsx...
whyevenbother 8y ago
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.
- tobr 8y ago
  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.
  - whyevenbother 8y ago
    "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?
    - tobr 8y 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.
TAForObvReasons 8y ago
In the docs: https://reactjs.org/docs/react-without-jsx.html 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 https://reactjs.org/docs/react-without-es6.html uses JSX
- Silhouette 8y ago
  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.
  - __s 8y ago
    IE11 is holding out. Mobile Safari is hit & miss
    - Silhouette 8y ago
      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.
  - craigzucchini 8y ago
    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.
- Illniyar 8y ago
  If vue 3.0 uses proxies (as the slides say), then Vue 3 will also now require ES6 features.
gymshoes 8y ago
http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webp...
badestrand 8y ago
This is my mini React template for experiments, including JSX: https://gist.github.com/Badestrand/3609e7c3c88ba47bb9682a4746e513db https://gist.github.com/Badestrand/3609e7c3c88ba47bb9682a474...
- mlevental 8y ago
  ><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/bro... isn't this just a little bit disingenuous
- PacifyFish 8y ago
  Wow, that’s cool! I didn’t know you could do it all in the browser. Hats off to the Babel devs.
namuol 8y ago
You definitely do not need Webpack. Here's a bare-bones React component "editor" with support for JSX: https://codepen.io/namuol/pen/MXJOzy https://codepen.io/namuol/pen/MXJOzy

edwinvdgraaf 8y ago

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

wa1987 8y ago
That’s without JSX. Transpilation is required in order to make use of JSX.
- whyevenbother 8y ago
  So what? You can use React without JSX.
  - akhilcacharya 8y ago
    Using the createElement structure is more annoying than just doing a es6 template string in Vue.
    - whyevenbother 8y ago
      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).
      - goliatone 8y ago
        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...
        shados 8y ago
        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.
- nicoburns 8y ago
  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.
- k__ 8y ago
  I wrote a tutorial about this. In this lesson I cover JSX: https://github.com/kay-is/react-from-zero/blob/master/02-jsx.html https://github.com/kay-is/react-from-zero/blob/master/02-jsx...

whyevenbother 8y ago

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.

tobr 8y ago
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.
- whyevenbother 8y ago
  "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?
  - tobr 8y 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.

TAForObvReasons 8y ago

In the docs: https://reactjs.org/docs/react-without-jsx.html 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 https://reactjs.org/docs/react-without-es6.html uses JSX

Silhouette 8y ago
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.
- __s 8y ago
  IE11 is holding out. Mobile Safari is hit & miss
  - Silhouette 8y ago
    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.
- craigzucchini 8y ago
  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.
Illniyar 8y ago
If vue 3.0 uses proxies (as the slides say), then Vue 3 will also now require ES6 features.

gymshoes 8y ago

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

badestrand 8y ago

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

mlevental 8y ago
><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/bro... isn't this just a little bit disingenuous
PacifyFish 8y ago
Wow, that’s cool! I didn’t know you could do it all in the browser. Hats off to the Babel devs.

namuol 8y ago

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