React 'Hello World' Is not Loaded

Question

I am extremely new to React as this is my First Lesson. Following is my code:

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:

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. There must be a very simple mistake, so please anyone help me on this? Thanks for your time!

Answer 1

You're missing a , after your '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>

Answer 2

You are just missing a comma in 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!

Answer 3

 <!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>

Answer 4

there is not , after the hi string. put it

const title = React.createElement(
    'h1',
    {id: 'title', className: 'header'},
    'Hello World'
    )

React 'Hello World' Is not Loaded

Question

4 answers

solution1
1 2018-03-05 04:32:01

solution2
1 ACCPTED 2018-03-05 04:34:50

solution3
0 2018-03-05 04:30:03

solution4
0 2018-03-05 04:33:47

React 'Hello World' Is not Loaded

Question

4 answers

solution1 1 2018-03-05 04:32:01

solution2 1 ACCPTED 2018-03-05 04:34:50

solution3 0 2018-03-05 04:30:03

solution4 0 2018-03-05 04:33:47

solution1
1 2018-03-05 04:32:01

solution2
1 ACCPTED 2018-03-05 04:34:50

solution3
0 2018-03-05 04:30:03

solution4
0 2018-03-05 04:33:47