React.js

Fundamentals

In essence react decribes a state, and react-dom provides the translation from abstraction to platform.

// import React from 'react'
const reactElement = {
  type: 'a',
  props: {
    href: 'https://wikipedia.org/',
  },
  children: 'Read more on Wikipedia',
};

// import { createRoot } from 'react-dom/client';
function render(reactElement, containerDOMElement) {
  const el = document.createElement(reactElement.type);
  el.append(reactElement.children)

  for (const prop in reactElement.props) {
    el.setAttribute(prop, reactElement.props[prop]);
  }

  containerDOMElement.append(el)
}

const containerDOMElement = document.querySelector('#root');
render(reactElement, containerDOMElement);

References