I'm getting started with React and I'm trying to start with the basics. This is my code:
index.html
<!DOCTYPE html >
<html>
<head>
<meta charset="UTF-8" />
<title>index</title>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script type="text/babel" src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="index.js" type = "text/babel "></script>
</head>
<body>
<div id = 'try'></div>
<script type= "text/babel">
const element = <Welcome />;
ReactDOM.render(
element,
document.getElementById('try')
);
</script>
</body>
</html>
index.js
class Welcome extends React.Component {
render(){
return <h1> hello</h1>;
};
};
It is supposed to show me "hello" on index.html
, but the page is still blank. Where is the error?
pd: also tried using "text/jsx" instead of "text/babel"
Try this code, this should work:
class Welcome extends React.Component {
render(){
return <h1> hello</h1>;
};
};
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="try"></div>
<script type="text/babel">
const element = <Welcome/>;
ReactDOM.render(element, document.getElementById("try"));
</script>
</body>
</html>