I am not getting hello world as an output. Can anyone tell me what i am missing , its a basic code , got an output in a different way using createElement function. I am new to react.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
</head>
<body>
<div id="react-app"></div>
<script src=".14.0-rc1/react.js"></script>
<script src=".14.0-rc1/react-dom.js"></script>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox>,target);
</script>
</body>
</html>
I am not getting hello world as an output. Can anyone tell me what i am missing , its a basic code , got an output in a different way using createElement function. I am new to react.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
</head>
<body>
<div id="react-app"></div>
<script src="https://cdn.jsdelivr/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr/react/0.14.0-rc1/react-dom.js"></script>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox>,target);
</script>
</body>
</html>
-
Try this
ReactDOM.render(<StoryBox />,target)- notice closing the ponent off – StudioTime Commented Jul 5, 2017 at 7:00
4 Answers
Reset to default 9Do these changes:
1. Include babel standalone script to transform your jsx, put the cdn links in the head part, script:
<script src="https://cdnjs.cloudflare./ajax/libs/babel-standalone/6.24.0/babel.js"></script>
2. Instead of storyBox use StoryBox (capital S), check this answer for reason.
3. You forgot to close, here: <storyBox>, use this: <StoryBox />.
4. Instead of Div use div.
Check the working snippet:
<!DOCTYPE html>
<html>
<head>
<title>My First App</title>
<script src="https://cdn.jsdelivr/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr/react/0.14.0-rc1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/babel-standalone/6.24.0/babel.js"></script>
</head>
<body>
<div id="react-app"></div>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox/>,target)
</script>
</body>
</html>You need to add babel as well, to transform your jsx into es5. Here is the sample code. NOTE: your cdn for react was throwing error so I have used other cdn.
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg./react@latest/dist/react.js"></script>
<script src="https://unpkg./react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg./[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
P.S. If you want to try react using npm packages here is a simple github repository to start with.
You need to include a JSXTransformer in order to be able to execute raw JSX. Try running the code below:
<div id="react-app">
</div>
<script src="https://cdn.jsdelivr/react/0.14.0-rc1/react.js"></script>
<script src="https://cdn.jsdelivr/react/0.14.0-rc1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<script type="text/jsx">
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div> );
}
}
ReactDOM.render(<StoryBox />, document.getElementById('react-app'))
</script>
You need to add JSX self-closing tag /> - when there is no children.
replace this line:
ReactDOM.render(<StoryBox>,target)
to
ReactDOM.render(<StoryBox />,target)
See working code:
class StoryBox extends React.Component{
render(){
return(<div> Hello World </div>);
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<StoryBox />,target)<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="react-app"></div>