By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

Warning: Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex.

After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both

Using Next's special getStaticProps hook and glorious dynamic imports, it's trivial to import a Markdown file and pass its contents into your React components as a prop. This achieves the holy grail I was searching for: the ability to easily mix React and Markdown.

The success of JSX has proved that the second curly is unnecessary. Moreover, a lot of people — particularly those who have been exposed to React — have a visceral negative reaction to double curlies, many of them assuming that it brings with it all the limitations of crusty old languages like Mustache and Handlebars, where you can't use arbitrary JavaScript in expressions.

(which is ironic since he made the decision to support JSX in eslint)

just saying that if you're going to try to go with a markup approach, at least go all the way, instead of the frankenstein that is JSX

mixing the turing complete of javascript with the markup of HTML eliminates the readability of JSX so that it is actually harder to parse than a solution like hyperscript

Furthermore, JSX encourages bad non-dry code. Having seen a lot of JSX over the past few months, its encourages copypasta coding.

Supporting JSX out of the box is the engineering equivalent of Mozilla supporting DRM out of the box in FireFox.

hyperscript is much simpler to refactor and DRY up your code than with JSX, because, being vanilla javascript, its easier to work with variable assignment, loops and conditionals.

I'm personally open to any other solutions, especially in how we might be able to untie from React, but, for now, inline-XML markup (JSX) is OK with me.

However, as a developer that uses JSX, I find it too useful/concise to give up in the name of syntax purity, especially when I know that what it translates to is still very isolated and computationally pure.

The second issue is that React's JSX uses className to denote the class property on an element, whereas Deku uses class. Therefor JSX written for Deku will always error when linted by standard.

Don't think so; template strings solve the problem JSX tries to tackle without forking the language.

This module is similar to JSX, but provided as a standards-compliant ES6 tagged template string function.

const { getByRole } = render(<input bind_value={text}>)

svelte-htm - Hyperscript Tagged Markup for svelte; a jsx-like syntax using Tagged Templates

For event listeners we support the standard jsx naming convention onEventname (this is converted to on:eventname in svelte) as well.

jsx currently does not allow to use : in attribute/property names. As a workaround every : can be replaced be _ (for example bind_value is converted to bind:value for svelte).

Additionally, if we ever want to standardize more of JSX we need to start moving away from some of the more esoteric legacy behaviors of React.

Hyperscript syntax for React.js markup

Facebook’s React has an optional language extension that enables you to embed HTML inside JavaScript. This extension can make your code more concise, but it also breaks compatibility with the rest of the JavaScript ecosystem. ECMAScript 6 will have template strings [1], which enable you to implement JSX (or something close to it) inside the language.

The problem is that the since both the JSX transpiler and the traceur compiler are actually parsing the full javascript AST, they would have to mutually agree on the syntax extensions you use: traceur can't parse the faux-xml syntax JSX adds, and JSX can't parse the async or await keywords, for example, or generator functions.

However, this would lead to further divergence. Tooling that is built around the assumptions imposed by template literals wouldn't work. It would undermine the meaning of template literals. It would be necessary to define how JSX behaves within the rest of the ECMAScript grammar within the template literal anyway.

Template literals work well for long embedded DSLs. Unfortunately the syntax noise is substantial when you exit in and out of embedded arbitrary ECMAScript expressions with identifiers in scope.

TypeScript provides you with the ability to use something other than React with JSX in a type safe manner.

I know that it is the matter of taste and a debatable thing, I find JSX and regular javascript flow operators a lot more readable than any sort of {#blocks} and directives.

Then at some moment I just stumbled upon limitations and inexpressiveness of templates and started to use JSX everywhere — and because JSX was not a typical thing for Vue I switched to React over time. I don’t want to make a step back.

MDX seeks to make writing with Markdown and JSX simpler while being more expressive. Writing is fun again when you combine components, that can even be dynamic or load data, with the simplicity of Markdown for long-form content.

Powerful: MDX blends markdown and JSX syntax to fit perfectly in JSX-based projects.

Arguably, it leans into JSX land—including logic in the templates.

So while Solid's JSX and might resemble React it by no means works like React and there should be no illusions that a JSX library will just work with Solid. Afterall, there are no JSX libraries, as they all work without JSX, only HyperScript or React ones.

JSX is an XML-like syntax extension to EcmaScript (https://facebook.github.io/jsx/). It is not a language or runtime.

JSX is an XML-like syntax extension to EcmaScript (https://facebook.github.io/jsx/).

Remember even though the syntax is almost identical, there are significant differences between how Solid's JSX works and a library like React.

When it all came together it meant supporting most JSX conventions like spreads, refs, forwardRefs, and Components as tags.

In contrast, React apps shun templates and require the developer to create their DOM in Javascript, typically aided with JSX.

Compared to JSX it looks way better (IMO)

Write svelte components in jsx.

This package exposes an hyperscript compatible function: h(tag, properties, ...children) which returns a svelte component.

Q2. What is JSX?JSX is a syntax extension to JavaScript and comes with the full power of JavaScript. JSX produces React “elements”. You can embed any JavaScript expression in JSX by wrapping it in curly braces. After compilation, JSX expressions become regular JavaScript objects. This means that you can use JSX inside of if statements and for loops, assign it to variables, accept it as arguments, and return it from functions. Eventhough React does not require JSX, it is the recommended way of describing our UI in React app.

a syntax extension to JavaScript

whenever there's a lot going on, computers (but mostly humans) will get stuff wrong. In the 6 lines of our component, rendering 2 node types, we change syntaxes from JS to JSX, and back, 8 times! Count them - it's like JS(JSX(JS(JSX(JS))))! This is not the simplest code we can write.

One caveat is that some “falsy” values, such as the 0 number, are still rendered by React. For example, this code will not behave as you might expect because 0 will be printed when props.messages is an empty array: <div> {props.messages.length && <MessageList messages={props.messages} /> } </div> To fix this, make sure that the expression before && is always boolean: <div> {props.messages.length > 0 && <MessageList messages={props.messages} /> } </div>

User-Defined Components Must Be Capitalized When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file. We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

This is a misunderstanding. JSX is not compiled to HTML. It’s compiled to JS, and is only meant to represent the UI your components render to.

MDX is a superset of Markdown. It allows you to write JSX inside markdown. This includes importing and rendering React components!

JSX is Not an HTML Template LanguageThough it looks like it, JSX isn’t a template in the sense that Handlebars and EJS are templates. It’s not a simple token replace and `.innerHTML= foo` dump like so many other tools.