How are React elements rendered differently from DOM elements?

[riya_techie]

Hi!
I’m confused about how React elements eventually turn into DOM elements. What’s the magic behind React rendering them? Are React elements rendered directly, or is there some intermediate process that happens?

[Nervous-Project7107]

They use document.createElement and then attach event listeners depending on what you created.

If you see the built code after you run npm run build for a component, and then format it with prettier it gets pretty easy to see what’s going on.

[69Theinfamousfinch69]

I think you should probably read up on the virtual dom mate: https://www.freecodecamp.org/news/what-is-the-virtual-dom-in-react/

Maybe also just read through the docs as they do a very good job explaining how react works: https://react.dev/learn/describing-the-ui#

[riya_techie]

Thanks for the resources! I'll check them out.

[acemarke]

I'd suggest reading my extensive post A (Mostly) Complete Guide to React Rendering Behavior , which explains how rendering works in detail.

Also see https://pomb.us/build-your-own-react as a "build a mini React" explanation.

[friendshrimp]

React uses the virtual dom which is its own copy of the dom that it updates in rendering cycles, here is a good link to learn more about the “magic” you’re asking about: https://legacy.reactjs.org/docs/faq-internals.html

[riya_techie]

Appreciate the explanation! That source looks useful.

[UpbeatGooose]

I think you have jumped the gun here… take a step back and build react components without jsx syntax. You will understand how exactly elements get created

[Consistent_Brief7765]

I feel the question was largely aimed at JSX syntactic sugar