DEV Community

Cover image for Preparing a React course in public - modifying the DOM with Vanilla Js
Manuel Artero Anguita 🟨
Manuel Artero Anguita 🟨

Posted on

1

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;

Screenshot of a blank console where we have added a heading to the empty body

(this is the code from the screenshot)

const el = document.createElement('h1')
el.textContent = 'Hello'
document.body.appendChild(el)
Enter fullscreen mode Exit fullscreen mode

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...>
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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 💛.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more