Hi Neoan, can you please explain why do you think JSX is magic? (comparing to Vue's magic, i think vue is more magical than jsx) I'm actually planning to write an article about JSX so i wanted to know your thoughts :D
Passionate generalist conquering the web one project at a time. Whether authoring libraries for node, JS, PHP, or Rust, I am always on the lookout for better solutions to common problems.
Location
USA
Work
Lead Developer & Co-founder at corpscrypt, CTO at REtech
I will try:
Vue's markup is valid HTML. In the most primitive form, what Vue does is to create observers for props and data and bind it to HTML. The result is relatively straight forward:
This setup makes the use of .vue-files optional and doesn't even require a development server. One could import Vue via CDN and write components directly in "hard" declaration:
So while there is a lot of magic in Vue, the markup and bindings are pretty straight forward.
React uses JSX (you don't have to use it, BTW, but then React makes little sense). JSX is NOT valid HTML. It cannot render without being compiled. It isn't JavaScript either. The following code snippet is therefore neither valid JS nor HTML markup:
...return<h1>{headline}</h1>
...
Is that bad? No, but it's pure magic, of course. I mean, it has it's own name (JSX) because of that (otherwise it would just be a template)!?
Now, as every React-dev knows, this means that some interpretational oddities arise. For example, we have to use "className" instead of "class" and "onClick" isn't "onclick". But all of that is relatively easy to get used to and not an issue compared to what is offered. What bothered me about React was how state was handled and bound (this got sooo much better with hooks) and that JSX has a very ugly solution to the two most common things in a dynamic template: conditionals and iteration.
Given the following data:
items=[{item:"one"},{item:"two"}]
Let's look at Vue:
...<liv-for="item in item"v-if="item.item != 'one'">{{item.item}}</li>
Passionate generalist conquering the web one project at a time. Whether authoring libraries for node, JS, PHP, or Rust, I am always on the lookout for better solutions to common problems.
Location
USA
Work
Lead Developer & Co-founder at corpscrypt, CTO at REtech
here: (you said "React makes little sense", that's what i'm referring to, JSX is not binded to React elements you can build up any Tree like structures)
Passionate generalist conquering the web one project at a time. Whether authoring libraries for node, JS, PHP, or Rust, I am always on the lookout for better solutions to common problems.
Location
USA
Work
Lead Developer & Co-founder at corpscrypt, CTO at REtech
So, how does it feel? Does it still make sense to use React? Do you think you could actually efficiently read a React app when built like that? What is the remaining advantage over vanilla JS?
My point is: JavaScript is moving to a declarative style. We want a clear separation of view/template and controller/component-logic, even if there is a move towards having these concepts in one file (component based architecture).
So my question was not if it is possible, but if it makes sense. You would certainly use a different solution than React if you couldn't use JSX.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Hi Neoan, can you please explain why do you think JSX is magic? (comparing to Vue's magic, i think vue is more magical than jsx) I'm actually planning to write an article about JSX so i wanted to know your thoughts :D
I will try:
Vue's markup is valid HTML. In the most primitive form, what Vue does is to create observers for props and data and bind it to HTML. The result is relatively straight forward:
This setup makes the use of .vue-files optional and doesn't even require a development server. One could import Vue via CDN and write components directly in "hard" declaration:
So while there is a lot of magic in Vue, the markup and bindings are pretty straight forward.
React uses JSX (you don't have to use it, BTW, but then React makes little sense). JSX is NOT valid HTML. It cannot render without being compiled. It isn't JavaScript either. The following code snippet is therefore neither valid JS nor HTML markup:
Is that bad? No, but it's pure magic, of course. I mean, it has it's own name (JSX) because of that (otherwise it would just be a template)!?
Now, as every React-dev knows, this means that some interpretational oddities arise. For example, we have to use "className" instead of "class" and "onClick" isn't "onclick". But all of that is relatively easy to get used to and not an issue compared to what is offered. What bothered me about React was how state was handled and bound (this got sooo much better with hooks) and that JSX has a very ugly solution to the two most common things in a dynamic template: conditionals and iteration.
Given the following data:
Let's look at Vue:
And JSX:
Looking at the above example: it there more magic in Vue? Yes. But you tell me which is more straight forward and approachable.
Hmm i see, good points, thanks!
one thing, why react makes lesser sense when not using JSX? It's just pretty straightforward createElement calls.
"you don't have to use it, BTW, but then React makes little sense"
Really? Please try writing the following JSX with createElement-calls and surprise me:
And BTW, since we have a template here. Compare the following valid markups:
VueJS
Or even more native and including the complete logic in declarative form:
AlpineJS
here: (you said "React makes little sense", that's what i'm referring to, JSX is not binded to React elements you can build up any Tree like structures)
So, how does it feel? Does it still make sense to use React? Do you think you could actually efficiently read a React app when built like that? What is the remaining advantage over vanilla JS?
My point is: JavaScript is moving to a declarative style. We want a clear separation of view/template and controller/component-logic, even if there is a move towards having these concepts in one file (component based architecture).
So my question was not if it is possible, but if it makes sense. You would certainly use a different solution than React if you couldn't use JSX.