Vanilla JS
const adviceEl = document.querySelector(".advice");
const btnEl = document.querySelector(".btn");
const countEl = document.querySelector(".count");
const getAdvice = async function () {
const res = await fetch("https://api.adviceslip.com/advice");
const data = await res.json();
// Updating values
advice = data.slip.advice;
count = count + 1;
// Manually updating DOM elements
countEl.textContent = count;
adviceEl.textContent = advice;
};
// Setting initial values
let count = 0;
let advice;
getAdvice();
// Attaching an event listener
btnEl.addEventListener("click", getAdvice);
We need to Manually Select DOM elements ( which require a class or ID in HTML). While in react we don’t need any of them
React JS
We can see that a lot of things manually on Vanilla Js and on react it happens automatically. and also Js in charge everything on react but it is still the HTML on Vanilla.