72 Matching Annotations
  1. Mar 2023
  2. Feb 2023
  3. Nov 2022
  4. Sep 2022
    1. 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.

    2. 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.

    3. 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.

    4. 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
  5. Jan 2022
  6. Nov 2020
    1. 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.

    1. 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.
  7. Oct 2020
    1. (which is ironic since he made the decision to support JSX in eslint)
    2. 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
    3. 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
    4. Furthermore, JSX encourages bad non-dry code. Having seen a lot of JSX over the past few months, its encourages copypasta coding.
    5. Supporting JSX out of the box is the engineering equivalent of Mozilla supporting DRM out of the box in FireFox.
    6. 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.
    7. 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.
    8. 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.

    9. 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.
    10. Don't think so; template strings solve the problem JSX tries to tackle without forking the language.
    1. 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.
    2. 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).

    3. 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...

    1. 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.
    1. TypeScript provides you with the ability to use something other than React with JSX in a type safe manner.
    1. 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.
    2. 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.
  8. mdxjs.com mdxjs.com
    1. 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.
    2. Powerful: MDX blends markdown and JSX syntax to fit perfectly in JSX-based projects.
    1. 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.
    2. JSX is an XML-like syntax extension to EcmaScript (https://facebook.github.io/jsx/). It is not a language or runtime.
    3. JSX is an XML-like syntax extension to EcmaScript (https://facebook.github.io/jsx/).
    1. Remember even though the syntax is almost identical, there are significant differences between how Solid's JSX works and a library like React.
  9. Sep 2020
    1. This package exposes an hyperscript compatible function: h(tag, properties, ...children) which returns a svelte component.
    1. 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.

  10. Jul 2020
  11. Nov 2019
    1. 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}
      • )) }
      }

    1. 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!

    2. 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')

  12. Oct 2019
    1. MDX is a superset of Markdown. It allows you to write JSX inside markdown. This includes importing and rendering React components!
  13. Oct 2018
  14. Sep 2018
  15. Feb 2016
  16. Jan 2016
  17. Oct 2015
    1. 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.