[英]React 'Hello World' Is not Loaded
I am extremely new to React as this is my First Lesson. 我对React非常陌生,因为这是我的第一课。 Following is my code:
以下是我的代码:
index.html: index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<meta charset="UTF-8">
<title>Hello World with React</title>
</head>
<body>
<div id= "react-container"></div>
<script src="index.js"></script>
</body>
</html>
index.js: index.js:
const title = React.createElement(
'h1'
{id: 'title', className: 'header'},
'Hello World'
)
ReactDOM.render(
title,
document.getElementById('react-container')
)
However, nothing is rendered in the browser. 但是,浏览器中没有任何内容。 Both the script and the Html page is in the same folder.
脚本和HTML页面都在同一文件夹中。 There must be a very simple mistake, so please anyone help me on this?
肯定有一个非常简单的错误,所以请有人帮助我吗? Thanks for your time!
谢谢你的时间!
You're missing a ,
after your 'h1'
在您的
'h1'
之后,您缺少,
const title = React.createElement( 'h1', { id: 'title', className: 'header' }, 'Hello World' ) ReactDOM.render( title, document.getElementById('react-container') ) /**/
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react-container"></div>
You are just missing a comma in createElement
. 您只是在
createElement
缺少逗号。 The syntax being 语法是
React.createElement(component, props, ...children)
const title = React.createElement( 'h1', { id: 'title', className: 'header' }, 'Hello World' ) ReactDOM.render( title, document.getElementById('react-container') )
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="react-container"></div>
Good luck with React! 用React祝你好运!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script 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="root"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); </script> <!-- Note: this page is a great way to try React but it's not suitable for production. It slowly compiles JSX with Babel in the browser and uses a large development build of React. To set up a production-ready React build environment, follow these instructions: * https://reactjs.org/docs/add-react-to-a-new-app.html * https://reactjs.org/docs/add-react-to-an-existing-app.html You can also use React without JSX, in which case you can remove Babel: * https://reactjs.org/docs/react-without-jsx.html * https://reactjs.org/docs/cdn-links.html --> </body> </html>
there is not ,
after the hi
string. 没有
,
后hi
字符串。 put it 把它
const title = React.createElement(
'h1',
{id: 'title', className: 'header'},
'Hello World'
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.