I am new to programming and I'm learning react. I don't know why the Js files will not link to my html page. I am not getting any errors when I run the code
This is my html page
<html lang="en">
<head>
<link rel="stylesheet" href="card.css">
<title>Digital Business Card</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
This is one of my JS files Main.js
===================================
import React from "react"
export default function Main() {
<div>
<h4>Carlos Hernandez</h4>
<h5>Front End Developer</h5>
<h6>CanningJars.com</h6>
</div>
}
this is another JS file Img.js
import React from "react"
const CheetahPic = new URL("./images/cheetah.png", import.meta.url)
export default function Img() {
return(
<>
<div>
<img src={CheetahPic} />
</div>
</>
)
}
This is another JS file App.js
import React from "react"
import Main from "./components/Main.js"
import Img from "./components/Img.js"
import "./card.css"
export default function App() {
<div className="container">
<Img/>
<Main/>
<Footer/>
</div>
}
This is another JS file indez.js
import React from "react"
import ReactDOM from "react-dom"
import App from "./components/App.js"
ReactDOM.render(<App />, document.getElementById("root"))
CodePudding user response：
Have you tried removing type="module" from your HTML Page?
As said by another user in a similar thread here: "In a module context, variables don't automatically get declared globally."
CodePudding user response：
You said you have a file named indez.js but you are linking index.js maybe it is an simple typo.