Trying to open the below files with Chrome and it is blank. What am I doing wrong? I am trying to link the js file and use it to display an h1 but for some reason can not wrap my head around it.
Only two files
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>
main.js
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
setInterval(tick, 1000);
1.) first thing first babel script tag is not opened and closed properly.
script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
it should be like below:
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
2.) you also need to specify type babel in your script which have JSX/react code:
<script type="text/babel" src="">
3.) (Imp.) Your Any react Component must start with a Capital letter. I have used the function as react component to render which returns the JSX code. and kept the RenderDOM out of the React component. if I have to refactor your code:
function Tick() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
}
ReactDOM.render(
<Tick />,
document.getElementById('root')
);