• What is the nature of JSX and how does it relate to JS?
  1. JSX is a syntactic extension of JavaScript that is close to the template language, but has full JavaScript capabilities.
  2. JSX will compile to react.createElement (), and react.createElement () will return a JS object called “React Element”.
  3. Compiling is done by Babel. Babel allows us to translate this code into ES5 code that most older browsers will recognize. Babel also has the ability to translate JSX syntax into JavaScript code

  • Why JSX? What are the consequences of not using it?
  1. JSX syntactic sugar allows front-end developers to create virtual DOM using htML-like tag syntax that we are most familiar with, reducing learning costs while improving r&d efficiency and experience.
  2. The rendering logic of a page or component should be kept in line with other UI logic: event bindings, changes in rendered content after state changes
  3. Provides visual AIDS and allows React to display more useful error and warning messages.
  • What is the functional module behind JSX, and what does this functional module do?

  1. The JSX tag is converted to a react. createElement call via Babel

  2. Format the data with React. CreateElement.

  3. ReactElement “assembles” the parameters passed into the Element object according to certain specifications, forming a virtual Dom

  4. Render to the actual DO on the page via reactdom.render.

Refer to the essay on meditation