Some people here seem to have a hard time understanding that React !== DOM
React is descriptive. It creates a virtual tree and tells how that tree should be changed.
What that tree renders into is a completely different problem. On the web, it renders into HTML. On your phone (ReactNative), it renders into native GUI. In ink, it uses a render engine to concat and output the text results (it's a little more complex than that as it uses Yoga[0] today).
At a high level though, you create a tree of nested objects. Each has a handful of special properties (children which contains an array of child objects being the most interesting to users). The rest of the properties are used to interface with the rendering engine by passing it configuration and (usually) event functions it can call when something happens.
That tree of objects gets passed to the rendering engine which turns the tree into some kind of output (DOM, Canvas, WebGL, Ink, etc)[0].
When something happens (an external event, a timer, event from the render engine, etc), your code potentially changes the object tree. React then walks that tree and uses a few shortcuts to quickly detect what has changed. Instead of re-rendering everything, it can give a list of things that have changed and what the new values are. The render engine then decides how to make those changes happen and the cycle repeats.
In addition to the excellent "Didact" article that explains how to _build_ React and its internals, I have an extensive "Guide to React Rendering Behavior" post that explains the user-visible behavior and mental model of rendering:
One way to look at React is as an open loop desired state system, where you have a declarative way (js/jsx) of describing what you want to render and the reconciler figures out what operations to do (in the DOM), ideally in an effective way. But you could swap out the render target to other things. I wrote about it some time ago https://branislavjenco.github.io/desired-state-systems/
React is descriptive. It creates a virtual tree and tells how that tree should be changed.
What that tree renders into is a completely different problem. On the web, it renders into HTML. On your phone (ReactNative), it renders into native GUI. In ink, it uses a render engine to concat and output the text results (it's a little more complex than that as it uses Yoga[0] today).
[0] https://www.yogalayout.dev/