Preparing a React course in public - modifying the DOM with Vanilla Js

I love Vanilla JavaScript.

It feels so pure.
Back to basics. No layers of complexity.
Just, «these functions are the browser's API; that's it, that's what you can do».

Nothing more, nothing else.

In the next exercise, my goal is for my class to understand that each framework, each library - React, Vue, Angular, Next, Nuxt - essentially wraps and adds layers to the browser's API.

Before diving into the code, I'll take a step back to review what the browser is...
Like, ok it's a program... that renders HTML, CSS, and executes JavaScript.

«Executes JavaScript» 🤔

We are going to open a blank, raw, console;

(this is the code from the screenshot)

const el = document.createElement('h1')
el.textContent = 'Hello'
document.body.appendChild(el)

First Exercise

Our starting point was a raw HTML (zero Js) rendering n <article />

       <article class="card">
          <h2>Hulk</h2>
          <img
              src="https://marvelcdb.com//bundles/cards/01050.png"
              alt="Hulk"
          />
        </article>
        ...
        <article...>

Our goal is to create these elements dynamically using document.createElement()

➡️ this is the function we need to implement:

/**
 * @param {object} props
 * @param {{ code: string; name: string; image: string; }} props.cardInfo
 */
function Card(props) {
  const { cardInfo } = props;
  // TODO
}

Next: solution to the Vanilla JS exercise.

Cover image created by leonardo.ai; prompt: «Renaissance-era professor in a steampunk-style starting a fight. adorned with intricate, mechanical details.»; 3D Animation-Style.

Thanks for reading 💛.