5 ms·

Why can't React do the same?

RNCTX 6y ago
I suppose it could, but there are annoyances with JSX defaults. For instance, Vue provides a method to explicitly declare your template variable delimiter syntax. Last time I looked this was requested of React, but not implemented, someone correct me if I'm wrong on that and it has come along in the last year or two. So.. lets say you wanna put some modern Javascript in some Django templates to make them look spiffy. With Vue you can just declare your delimiter to be `[[` instead of `{{`, (because `{{` conflicts with Django's template variable syntax) with a one-liner setting. I'm sure you could do this in React with a custom parser function (or maybe there's a third party library?) but it's a lot easier when the framework just gives such things to you out of the box. If I do this all over the place and some other guy comes along years from now with no documentation on what he's getting into, he doesn't need to know too much to figure out what's going on and work on it. Right away he'll see "delimiter = [[" at the top of the script block in a template and can grep double brackets in the whole project to get an overview of what's being done.
- shados 6y ago
  React doesn't have templates, so that's a non-issue. JSX is sugar on JavaScript, but it's not a string. So template delimiters don't matter (that is, if you didn't use a build step, then it would be straight javascript functions calls)
  - earthboundkid 6y ago
    That’s the whole point of the discussion: Vue makes it easier to have Django spit out <tr @click=doThing>My data here</tr> and then Vue notices and adds the event listeners. In React, it is very difficult if React has to start with foreign template output because it wants to own the (V)DOM.
    - shados 6y ago
      For sure! I was just pointing out that discussing how easy Vue made it to change the delimiter ala Mustache isn't exactly a benefit vs React, since the whole concept doesn't reall exist there at all.
pricecomstock 6y ago
I'm not sure about React's capability with this, but Vue can very easily run with no build stage. You can load Vue from a CDN and use a couple lines of JS to point it at a DOM element in your app. Then you can write a plain JS Vue object (what goes inside the <script> tags in a .vue file), and all this logic will apply inside the element you pointed it at. You can also write components, although that gets a little clunky without a build stage. This has allowed me to do things like create Vue-based tools in a locked-down corporate environment where I was not able to install Nodejs on my machine.
- bdcravens 6y ago
  React can, but less ergonomically than most developers are used to.
  - HonshinM 6y ago
    Could you comment more on how it's done?
    - pier25 6y ago
      Modern React uses JSX which is then transformed at build time into function calls. You can write those function calls yourself, but it would be a tremendous PITA.
      - lhnz 6y ago
        In this case, you could use `htm`: https://github.com/developit/htm#usage https://github.com/developit/htm#usage
        pier25 6y ago
        Yeah totally. Or even use Preact by the same author which is smaller and faster than React.
        jonquest 6y ago
_jjkk 6y ago
Please someone correct me if I'm wrong. It seems like you can only implement React using the full "modern JS stack", i.e. Node/Webpack/... So if you want to use it on one page, it's a hard sell to set up all that infrastructure (and document it for the team) On some sites I've used Vue.js by simply adding a <script> tag with vue.min.js. On sites already using Gulp or similar, it's pretty simple to incorporate the Vue bundle and use it on one or a few pages.
- jdavis703 6y ago
  There is no need to run NodeJS in production with React. In fact, React doesn’t even require a fancy build system (though for anything more than a toy app you’re tempting fate.)
- manigandham 6y ago
  React can also be used with just script tags. It uses a compiler to turn JSX into a render function (the same as Vue which accepts JSX or HTML) and these compilers are written in JS and can run in the browser. Also modern browsers are much better at supporting JS modules which makes it easier to include other libraries.
- RNCTX 6y ago
  Apparently this is possible: https://shinglyu.com/web/2018/02/08/minimal-react-js-without-a-build-step-updated.html https://shinglyu.com/web/2018/02/08/minimal-react-js-without...
- acemarke 6y ago
  React can be added to a page with just a script tag in the same way as Vue: https://reactjs.org/docs/add-react-to-a-website.html https://reactjs.org/docs/add-react-to-a-website.html Having said that, React is normally used with JSX syntax, which requires a compile step. You _can_ use it with "raw" `React.createElement()` calls, but that's generally unwieldy and almost no one does that. However, there's a very neat library called https://github.com/developit/htm https://github.com/developit/htm , which is an almost-JSX-compatible syntax that uses JS template literal strings, and requires no compile step.
- 6y ago
manigandham 6y ago
React and Vue can both be used directly with script tags, however the biggest difference is that React uses JSX while Vue uses HTML templates (but also supports JSX). 99% of the time, HTML is easier and faster to write, with the built-in directives providing all the functionality you need. More importantly though, HTML can be generated by every single server-side framework, and this makes it very easy to have server-side code from any language stack that becomes interactive using a Vue client-side layer.
- mythrwy 6y ago
  That's exactly right and this is a much underrated capability and I think it's the point being missed by those saying "well if you do XXX you can include React with a script tag too!"

I suppose it could, but there are annoyances with JSX defaults. For instance, Vue provides a method to explicitly declare your template variable delimiter syntax. Last time I looked this was requested of React, but not implemented, someone correct me if I'm wrong on that and it has come along in the last year or two. So.. lets say you wanna put some modern Javascript in some Django templates to make them look spiffy. With Vue you can just declare your delimiter to be `[[` instead of `{{`, (because `{{` conflicts with Django's template variable syntax) with a one-liner setting. I'm sure you could do this in React with a custom parser function (or maybe there's a third party library?) but it's a lot easier when the framework just gives such things to you out of the box. If I do this all over the place and some other guy comes along years from now with no documentation on what he's getting into, he doesn't need to know too much to figure out what's going on and work on it. Right away he'll see "delimiter = [[" at the top of the script block in a template and can grep double brackets in the whole project to get an overview of what's being done.

shados 6y ago
React doesn't have templates, so that's a non-issue. JSX is sugar on JavaScript, but it's not a string. So template delimiters don't matter (that is, if you didn't use a build step, then it would be straight javascript functions calls)
- earthboundkid 6y ago
  That’s the whole point of the discussion: Vue makes it easier to have Django spit out <tr @click=doThing>My data here</tr> and then Vue notices and adds the event listeners. In React, it is very difficult if React has to start with foreign template output because it wants to own the (V)DOM.
  - shados 6y ago
    For sure! I was just pointing out that discussing how easy Vue made it to change the delimiter ala Mustache isn't exactly a benefit vs React, since the whole concept doesn't reall exist there at all.

pricecomstock 6y ago

I'm not sure about React's capability with this, but Vue can very easily run with no build stage. You can load Vue from a CDN and use a couple lines of JS to point it at a DOM element in your app. Then you can write a plain JS Vue object (what goes inside the <script> tags in a .vue file), and all this logic will apply inside the element you pointed it at. You can also write components, although that gets a little clunky without a build stage. This has allowed me to do things like create Vue-based tools in a locked-down corporate environment where I was not able to install Nodejs on my machine.

bdcravens 6y ago
React can, but less ergonomically than most developers are used to.
- HonshinM 6y ago
  Could you comment more on how it's done?
  - pier25 6y ago
    Modern React uses JSX which is then transformed at build time into function calls. You can write those function calls yourself, but it would be a tremendous PITA.
    - lhnz 6y ago
      In this case, you could use `htm`: https://github.com/developit/htm#usage https://github.com/developit/htm#usage
      - pier25 6y ago
        Yeah totally. Or even use Preact by the same author which is smaller and faster than React.
      - jonquest 6y ago

_jjkk 6y ago

Please someone correct me if I'm wrong. It seems like you can only implement React using the full "modern JS stack", i.e. Node/Webpack/... So if you want to use it on one page, it's a hard sell to set up all that infrastructure (and document it for the team) On some sites I've used Vue.js by simply adding a <script> tag with vue.min.js. On sites already using Gulp or similar, it's pretty simple to incorporate the Vue bundle and use it on one or a few pages.

jdavis703 6y ago
There is no need to run NodeJS in production with React. In fact, React doesn’t even require a fancy build system (though for anything more than a toy app you’re tempting fate.)
manigandham 6y ago
React can also be used with just script tags. It uses a compiler to turn JSX into a render function (the same as Vue which accepts JSX or HTML) and these compilers are written in JS and can run in the browser. Also modern browsers are much better at supporting JS modules which makes it easier to include other libraries.
RNCTX 6y ago
Apparently this is possible: https://shinglyu.com/web/2018/02/08/minimal-react-js-without-a-build-step-updated.html https://shinglyu.com/web/2018/02/08/minimal-react-js-without...
acemarke 6y ago
React can be added to a page with just a script tag in the same way as Vue: https://reactjs.org/docs/add-react-to-a-website.html https://reactjs.org/docs/add-react-to-a-website.html Having said that, React is normally used with JSX syntax, which requires a compile step. You _can_ use it with "raw" `React.createElement()` calls, but that's generally unwieldy and almost no one does that. However, there's a very neat library called https://github.com/developit/htm https://github.com/developit/htm , which is an almost-JSX-compatible syntax that uses JS template literal strings, and requires no compile step.
6y ago

manigandham 6y ago

React and Vue can both be used directly with script tags, however the biggest difference is that React uses JSX while Vue uses HTML templates (but also supports JSX). 99% of the time, HTML is easier and faster to write, with the built-in directives providing all the functionality you need. More importantly though, HTML can be generated by every single server-side framework, and this makes it very easy to have server-side code from any language stack that becomes interactive using a Vue client-side layer.

mythrwy 6y ago
That's exactly right and this is a much underrated capability and I think it's the point being missed by those saying "well if you do XXX you can include React with a script tag too!"