4 ms·

JSX is NOT just HTML and JavaScript! If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div

by dsego 9y ago

JSX is NOT just HTML and JavaScript! If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className="">. It's not even just javascript, or I would be able to write a simple if-else statement. JSX is a DSL, a minimal one, but still. I mean, you could say it's even worse, because those subtle differences can cost you hours of looking for mistakes.

pitaj 9y ago
It is Javascript, but JSX brackets only allow an expression within them. Conditionals are statements in JS, so you have to wrap them in an IIFE or a `do`-expression.
hobofan 9y ago
> If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className=""> In case you don't know (and I also didn't until recently), those namings come from the HTML DOM Javascript API, and not from React. So having that naming in React+JSX is more a consequence of operating on that abstraction level, than a quirky decision of the React developers.
- dsego 9y ago
  Well, if you're being pedantic, DOM is not HTML.
mlsarecmg 9y ago
> If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className=""> for and class are reserved statements, hence htmlFor and className are the official api names, in other words they belong to the actual web-api spec, there's nothing arbitrary about it: https://developer.mozilla.org/en-US/docs/Web/API/Element/className https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl... If you really dislike it, you can still use class and for: https://github.com/insin/babel-plugin-react-html-attrs https://github.com/insin/babel-plugin-react-html-attrs > or I would be able to write a simple if-else statement {} evaluates to a ternary. You can use if, according to the spec that's what do expressions are there for. do { if (condition) <div>yes</div> else <h>nope</h> } Though most would probably prefer the following for stylistic reasons: condition ? <div>yes</div> : <h>nope</h> > because those subtle differences can cost you hours of looking for mistakes These two things are explained in a single sentence, every tutorial eases you into it, the first thing that comes up once JSX is mentioned.
- dsego 9y ago
  for and class are not reserved in HTML, they are in JS, but why would that matter for JSX?
  - mlsarecmg 9y ago
    const { for, class } = this.props Will crash. It's just a bit inconvenient (and inconsistent for beginners) having to write: const { for: forHtml, class: className } = this.props Some react-like libs do allow it, but the dom api takes offcial precedence, so it's all fine. It's just that HTML in general was made without taking all the things into account we demand of it today. It wasn't even made for imperative inflating, so the dom-api faced the same troubles.

by dsego 9y ago

pitaj 9y ago

It is Javascript, but JSX brackets only allow an expression within them. Conditionals are statements in JS, so you have to wrap them in an IIFE or a `do`-expression.

hobofan 9y ago

> If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className=""> In case you don't know (and I also didn't until recently), those namings come from the HTML DOM Javascript API, and not from React. So having that naming in React+JSX is more a consequence of operating on that abstraction level, than a quirky decision of the React developers.

dsego 9y ago
Well, if you're being pedantic, DOM is not HTML.

mlsarecmg 9y ago

> If it was just html I could write <label for=""> and not <label htmlFor="">, I could write <div class=""> instead of <div className=""> for and class are reserved statements, hence htmlFor and className are the official api names, in other words they belong to the actual web-api spec, there's nothing arbitrary about it: https://developer.mozilla.org/en-US/docs/Web/API/Element/className https://developer.mozilla.org/en-US/docs/Web/API/Element/cla... https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelEl... If you really dislike it, you can still use class and for: https://github.com/insin/babel-plugin-react-html-attrs https://github.com/insin/babel-plugin-react-html-attrs > or I would be able to write a simple if-else statement {} evaluates to a ternary. You can use if, according to the spec that's what do expressions are there for. do { if (condition) <div>yes</div> else <h>nope</h> } Though most would probably prefer the following for stylistic reasons: condition ? <div>yes</div> : <h>nope</h> > because those subtle differences can cost you hours of looking for mistakes These two things are explained in a single sentence, every tutorial eases you into it, the first thing that comes up once JSX is mentioned.

dsego 9y ago
for and class are not reserved in HTML, they are in JS, but why would that matter for JSX?
- mlsarecmg 9y ago
  const { for, class } = this.props Will crash. It's just a bit inconvenient (and inconsistent for beginners) having to write: const { for: forHtml, class: className } = this.props Some react-like libs do allow it, but the dom api takes offcial precedence, so it's all fine. It's just that HTML in general was made without taking all the things into account we demand of it today. It wasn't even made for imperative inflating, so the dom-api faced the same troubles.