- Mar 2023
-
stackoverflow.com stackoverflow.com
- Feb 2023
-
twitter.com twitter.com
Tags
Annotators
URL
-
-
www.builder.io www.builder.io
Tags
Annotators
URL
-
-
svelte.dev svelte.devSvelte1
-
- Nov 2022
-
Tags
Annotators
URL
-
-
css-tricks.com css-tricks.com
Tags
Annotators
URL
-
-
kabartolo.github.io kabartolo.github.io
-
-
- Sep 2022
-
legacy.reactjs.org legacy.reactjs.org
-
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.
JSX Prevents Injection 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.
Threat it more like JS than HTML when it comes to conventions. Keep it camelCase.
-
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
Like SCSS for CSS, JSX is just a better way to write for React.
-
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
Tags
Annotators
URL
-
- Jan 2022
-
thoughtspile.github.io thoughtspile.github.io
Tags
Annotators
URL
-
- Nov 2020
-
colinhacks.com colinhacks.com
-
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.
Colin has perhaps found an alternative to jsx, getting js content into md files.
-
-
github.com github.com
-
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.
-
- Oct 2020
-
-
(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.
What does "isolated" mean in this case? Is it a different sense than how isolated is usually used in programming context?
What does "computationally pure" mean? Sounds like a bit of a vague weasel word, but this is an honest question of curiosity and wanting to understand/learn.
-
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.
Tags
- encourages the wrong thing
- DRM
- differences
- react-hyperscript
- javascript
- duplication
- out of the box
- good analogy
- JSX
- reuse existing language constructs
- too useful to give up
- controversial
- making it easy to do the right thing
- commit fully / go all in
- template language vs. reusing existing language constructs
- decoupled
- bad combination/mixture/hybrid/frankenstein
- it's just _
- template language: bad: by not reusing existing language constructs; forced to reinvent equivalents which are inferior and unfamiliar
- comparison with:
- isolation (programming)
- equivalent
- good point
- separation of concerns
- React
- purity
- hyperscript
- supporting something/feature
- making it easy for later refactoring
- not:
- javascript: tagged template literals
- Turing complete
- making it easy to do the wrong thing
- hybrid/mixture
- making it too easy to do the wrong thing
- JavaScript
- irony
- missing out on the benefits of something
- copy and paste
- forking
- analogy
- copy and paste programming
Annotators
URL
-
-
www.npmjs.com www.npmjs.comhyperx1
-
This module is similar to JSX, but provided as a standards-compliant ES6 tagged template string function.
-
-
github.com github.com
-
const { getByRole } = render(<input bind_value={text}>)
Directly compare to: https://hyp.is/T2NGMA5ZEeu2k6dW8hBd9g/github.com/kenoxa/svelte-htm
-
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).
Tags
- description
- Svelte: events
- definition
- good example
- svelte-jsx
- limitations leading to workarounds
- differences
- -like
- equivalent/analogous/alternative ways to do something between 2 libraries/languages/etc.
- React
- hyperscript
- JSX
- React: events
- Svelte
- javascript: tagged template literals
- naming convention
- conversion (transform)
- standard
- comparison with:
Annotators
URL
-
-
github.com github.com
-
github.com github.com
-
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.
-
-
github.com github.com
-
Hyperscript syntax for React.js markup
-
-
2ality.com 2ality.com
-
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.
-
trusktr herman willems • 2 years ago Haha. Maybe React should focus on a template-string syntax and follow standards (and provide options for pre-compiling in Webpack, etc).
-
To suggest template literals cover the level of abstraction that JSX has to offer is just dumb. They're great and all, but c'mon now...
-
-
gist.github.com gist.github.com
-
-
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.
-
-
facebook.github.io facebook.github.io
-
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.
Tags
- leverage the fact that tooling already exists
- exceptions to the rule
- verbose/noisy
- good point
- JSX
- non-standard
- ECMAScript standard
- undermine
- benefiting from shared tooling that can be reused
- javascript: tagged template literals
- why invent a new syntax?
- divergence
- assumptions
- DSL
- substantial
- syntax noise
- computing: history
Annotators
URL
-
-
basarat.gitbook.io basarat.gitbook.io
-
TypeScript provides you with the ability to use something other than React with JSX in a type safe manner.
Tags
Annotators
URL
-
-
medium.com medium.com
-
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.
-
-
github.com github.com
-
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/).
-
-
github.com github.com
-
Remember even though the syntax is almost identical, there are significant differences between how Solid's JSX works and a library like React.
Tags
Annotators
URL
-
-
levelup.gitconnected.com levelup.gitconnected.com
-
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.
-
- Sep 2020
-
github.com github.com
-
Proposes a syntax similar to JSX.
My question would instead be, why not just use JSX for Svelte templates?
-
Compared to JSX it looks way better (IMO)
-
-
github.com github.com
-
Write svelte components in jsx.
-
-
github.com github.com
-
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.
JSX is a syntax reminiscent of HTML which compiles to JavaScript. It makes it easier to compose an app with JSX than it is with functions.
-
- Jul 2020
-
legacy.reactjs.org legacy.reactjs.org
-
a syntax extension to JavaScript
Tags
Annotators
URL
-
- Nov 2019
-
dev.to dev.to
-
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.
render() {
-
{ languages.map(item => (
- {item} )) }
-
-
legacy.reactjs.org legacy.reactjs.org
-
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>
This is important for bug prevention and fixing!
-
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 the 'why' explanation on why a capital letter is required with user-defined components. In other words - passed as string or as the type to React.createElement():
React.createElement(MyComp) vs React.createElement('div')
Tags
Annotators
URL
-
-
-
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.
-
- Oct 2019
-
www.gatsbyjs.org www.gatsbyjs.org
-
MDX is a superset of Markdown. It allows you to write JSX inside markdown. This includes importing and rendering React components!
-
- Oct 2018
- Sep 2018
-
codeburst.io codeburst.io
Tags
Annotators
URL
-
-
codeburst.io codeburst.io
Tags
Annotators
URL
-
-
bentaylor2.github.io bentaylor2.github.io
- Feb 2016
-
www.jasonformat.com www.jasonformat.com
-
- Jan 2016
-
-
Very useful article on why JSX is better than yet-another-templating-language
-
- Oct 2015
-
-
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.
This is a great explanation of why JSX is not a templating engine, which it is often mistaken for.
-