JSX is a stellar invention, even with React out of the picture.

  • Regular javascript scoping rules apply; if it’s in scope, you can include it in the template.
  • Regular javascript logic applies; no need to re-invent ‘if’ and ‘else’ in yet another templating language.
  • Template rendering errors are just regular javascript exceptions, with full stack traces.
  • If you’re using static typing, your templates are now type-safe too!
  • With this approach, you have to decide at build-time what pragma the JSX code should be transpiled to use. So — if you want a function that renders html on the server, and that renders to a DOM node on the client, it’s going to take a little more work.
  • JSX also transpiles <MyComponent> and <mycomponent> differently, based on the capitalization of the component name. So a production-ready version of this would need to account for both of those types.
  • There are also plenty of opportunities for ...children to contain nested arrays, which can be tricky to loop over.
  • We also need to think about Fragment support, which now even has its own special <> </> syntax in jsx.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store