Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
463 views
in Technique[技术] by (71.8m points)

reactjs - ReactDOM not rendering the simple h1 element

So I have been learning my first lecture on React, and playing around with my code to understand how it works, But In code-pen my code is running, but in VS code it's not.

Here's the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Basic-React</title>
</head>
<body>
    <div id="root">not rendered</div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script>
        // Your custom js code goes here
        const App = () => {
            return React.createElement(
                "div",
                {},
                React.createElement("h1",{}, "Adopt-me")
            )
        }

        ReactDOM.render(<h1>Karan</h1>, document.getElementById('root'))
        // ReactDOM.render(React.createElement(App), document.getElementById("root"))
    </script>
</body>
</html>

My ReacDOM.render call is giving an error on the browser as : index.html:25 Uncaught SyntaxError: Unexpected token '<'

But if run this code in codepen or say proper react-package installation with node, It's running Why?

question from:https://stackoverflow.com/questions/65840918/reactdom-not-rendering-the-simple-h1-element

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
"

Your script tag that you embeded in your html is running native javascript. You need jsx support in order to write something like

<h1>Karan</h1>

in javascript. Use babel to transform jsx into javascript.

"

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...