DEV Community

Discussion on: React Props complete guide for beginners

peerreynders profile image
peerreynders

React to help us write the same code in HTML

As another commenter already pointed out to you:

  • JSX represents React Components, not HTML.

Forget about the other details with regards to JSX. However referring to JSX as HTML is problematic especially in "teaching mode" as it perpetuates the wrong mental model.

JSX lets you declaratively compose React components. That's all there is to it.

Thread Thread
suchintan profile image
SUCHINTAN DAS Author

Peerreynders, I think you haven't read the whole sentence that I had written. I would request you to please read the whole thing as communication gap does create a lot of confusions.

In the whole line I said "JSX is actually an extension provided by React to help us write the same code in HTML and in the backdoor it changes all the stuffs to JavaScript" . I am not referring JSX as HTML, I pointed out the fact here that JSX is an extension that is provided by React to help developers write the same format of code as HTML into JavaScript with minimal changes.

Thread Thread
peerreynders profile image
peerreynders • Edited on

I may understand what you mean but I'm convinced that your target audience is not going to come away with the same understanding.

write the same format of code as HTML

That phrasing alone is enough to establish a false equivalence between JSX and HTML. And to some degree it's only valid as long as you are talking about React's DOM element components. User components compose those DOM components. Container components may only compose User components without adding any additional DOM components. Providers have no equivalence in the DOM at all.

JSX is what makes React declarative. HTML happens to be declarative. JSX is XML. Both XML and HTML derived from SGML.

  • JSX composes React Components
  • HTML composes markup from HTML elements

The fact that a component's position in the component tree is linked to the position of the rendered content in the DOM tree is a leaky abstraction.


React's entire premise is to reuse React components in React Native. React Native is all components and JSX; no HTML, no DOM;

Thread Thread
suchintan profile image
SUCHINTAN DAS Author

Thanks peerreynders for the feedback. Yes, there a case that people take away a wrong concept by misunderstanding this line. I will edit this line on the blog so that atleast no misconception is spread.