Question

我目前正在学习React。但是，我在试图让它运行时遇到了很多麻烦。

HTML

＆＃13;

function Person(){
    return (
        <div class="person">
        <h1>Max</h1>
        <p>Your Age: 28</p>
        </div>
    );
}

ReactDOM.render(<Person />, document.querySelector('#p1'));

＆＃13;

.person {
    display: inline-block;
    margin: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 2px #ccc;
    width: 200px;
    padding: 20px;
}

＆＃13;

    <link rel="stylesheet" href="react.css">

</head>
<body>
    
    <!-- He created a div block with a class of person -->    <link rel="stylesheet" href="react.css">

</head>
<body>
    <div id="p1">

    </div>

    <!-- He makes another div -->
    <div class="person">
            <h1>Manu</h1>
            <p>Your Age: 29</p>
        </div>
        
        <script src="react.jsx"></script>

＆＃13;

对不起评论。我觉得我的大多数问题都归结为脚本源。每当我尝试在CodePen（使用Babel）上加载它时，它都可以正常工作。我不确定如何让它运行。如果我在浏览器中运行它，我会看到......

Uncaught SyntaxError: Unexpected token <

我尝试使用来自this site的Babel JS的CDN，但如果我添加此内容并将上述脚本更改为＆＃34;输入=＆＃34; text / bable＆＃34;它甚至不会出现。

感谢您的帮助。

Answer 1

看起来你有2个身体标签;其中一个是头脑。不确定这是不是给你错误，但我恰好注意到了。好像错误消息与流浪'＆lt;'有关某处。

Answer 2

JSX不是标准的JavaScript。你必须通过某种构建步骤（如Babel）来转换它，或者在转换脚本中加载，这样你就可以在浏览器中使用JSX。这可以在几年前使用，但我似乎无法再找到它了。

REACT.jsx未在浏览器中显示

2 个答案: