javascript - Reactjs意外的令牌错误

Question

这是我下面的代码，当我尝试在 localhost 上运行它时，什么也没有出现，并且在控制台中显示“未捕获的语法错误：意外的令牌 <”。（排队 ”

    const { render }=ReactDOM

    const style={
        backgroundColor:'orange',
        color:'white',
        fontFamily:'verdana'
    }



    render(
        <h1 id='title'
        className='header'
        style={style}>
        Hello World
        </h1>,
        document.getElementById('react-container')
    )

我检查了几次，但无法弄清楚我做错了什么。有一个 index.html 文件和 index.js 文件，上面是 index.js 文件中的代码

Answer 1

您必须导入 react 才能使用 JSX。

尝试将此添加到代码的顶部：

import React from 'react';

Answer 2

在一切之前，您必须将react依赖安装到您的项目中。在您的计算机中安装 nodejs，然后在终端中，转到您的项目目录并运行npm init. 回答问题后，仍然在您的项目文件夹中，您需要运行npm install --save react react-dom

然后，您的最终index.js代码必须如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

const style={
        backgroundColor:'orange',
        color:'white',
        fontFamily:'verdana'
    }

ReactDOM.render(<h1 id='title'
        className='header'
        style={style}>
        Hello World
        </h1>, document.getElementById('react-container'));