CODEWITHSUNDEEP
javascripthtmlreactjs
SMARTTOM
SMARTTOM

Reputation: 1

Cannot render the react component

https://www.youtube.com/watch?v=NyZzRSTZQ2Y I follow this video to open an HTML file and JS file in VSC. but I can't render the js file on the web.The hi I am tom hi is not appear on the web.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>Random Quote Machine</title>
</head>
<body>
<div id="app"></div>

<script type="text/babel" src="./index.js"> </script>
</body>
</html>

index.js

function App(){
return(
<div> hi I am tom hi </div>
);
}


ReactDom.render(<App/>,document.getElementById("app"))

Upvotes: 0

Views: 98

Answers (1)

Abhishek Jain
Abhishek Jain

Reputation: 897

Update the last line in index.js to:

ReactDOM.render(<App/>,document.getElementById("app"))

and it'll work.

Explanation:

  • What was wrong in your index.js? Ans: ReactDOM is an object which is imported from react library to handle the rendering the component. In your code you were accessing ReactDom, note the caps are different, you were referring to ReactDom instead of ReactDOM.

Remember that JavaScript is a case-sensitive language.

Upvotes: 2

Related Questions