Notes on JSX

Note: This post is a details-post for the post: Learning web app development through free online tutorials – Organized Notes and Log, https://raviswdev.blogspot.com/2024/03/learning-web-app-development-through.html .

To get quick idea of JSX (Java Script XML as per https://www.w3schools.com/react/react_jsx.asp, also described as JavaScript syntax Extension): Introducing JSX, https://legacy.reactjs.org/docs/introducing-jsx.html .

Seems to be nice top-level view of JSX from the creator of JSX: https://facebook.github.io/jsx/ . Note that JSX is not limited to React. From the above link: “JSX is an XML-like syntax extension to ECMAScript without any defined semantics. It’s NOT intended to be implemented by engines or browsers. It’s NOT a proposal to incorporate JSX into the ECMAScript spec itself. It’s intended to be used by various preprocessors (transpilers) to transform these tokens into standard ECMAScript.”

Also, it seems that React can be used without JSX but it is easier to do React apps using JSX. 

Great short video on JSX: ReactJS Tutorial – 8 – JSX, https://www.youtube.com/watch?v=7fPXI_MnBOY , 11 min. 24 secs. In most of the ‘ReactJS Tutorial – n – xxx’ videos, I used 1.5 Playback speed and could understand the video at that speed.

https://react.dev/learn/javascript-in-jsx-with-curly-braces is a good page on how to use JSX in React. It mentions the "only" two ways to use curly braces inside JSX.