I am trying to get started with ReactJS and I have watched a beginners Pluralsight course. I seem to be falling at the first hurdle followin what the tutor is doing. Here is my HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple React app no JSS</title>
<script src="index.js" ></script>
<script type="module">
import React from
"https://esm.sh/[email protected]/?dev"
import ReactDOMClient from
"https://esm.sh/[email protected]/client/?dev"
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Here is my Javascript (index.js):
window.onload = () => {
const rootElement=document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);
const ints = [1,2,3]
const childrenElements = [];
childrenElements.push(
React.createElement("li", { key:ints[0] }, ints[0])
);
childrenElements.push(
React.createElement("li", { key:ints[1] }, ints[1])
);
childrenElements.push(
React.createElement("li", { key:ints[2] }, ints[2])
);
root.render(childrenElements);
}
Nothing is displayed, which is not the case for the tutor. If I inspect console after pressing F12, then I see this:
If I manually browse (using a web browser) to https://esm.sh/[email protected]/?dev or https://esm.sh/[email protected]/client/?dev then I see content so I beliece they are valid.