如何使导入在javascript中工作？

我正试图使用本教程将手风琴添加到我的网站：

我按照他们的指示安装了软件包。然后我将他们的代码放入一个名为accordion.js的文件中，并使用src将其放入html中

下面是accordion.js中的代码，但是我得到了导入行的错误标识符。知道出了什么问题吗

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

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';

const Example = () => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Simple title</h3>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Complex title</h3>
                <div>With a bit of description</div>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

ReactDOM.render(<Example />, document.querySelector('[data-mount]'));

从“React”导入React；
从“react dom”导入react dom；
进口{
手风琴，
手风琴项目，
手风琴项目名称，
手风琴体，
}来自“手风琴”；
//演示样式，请参阅下面的“样式”部分，了解一些使用说明。
导入“react-accessible-accordion/dist/fancy-example.css”；
常量示例=（）=>(
简单标题
身体内容

复杂标题
略作描述
身体内容

);
ReactDOM.render（，document.querySelector（'[data mount]'）；

知道出了什么问题吗

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

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

// Demo styles, see 'Styles' section below for some notes on use.
import 'react-accessible-accordion/dist/fancy-example.css';

const Example = () => (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Simple title</h3>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
        <AccordionItem>
            <AccordionItemTitle>
                <h3>Complex title</h3>
                <div>With a bit of description</div>
            </AccordionItemTitle>
            <AccordionItemBody>
                <p>Body content</p>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
);

ReactDOM.render(<Example />, document.querySelector('[data-mount]'));

您可以使用src将其放入HTML中

---

该模块被标记为React组件，您应该

将其导入应用程序，而不是常规HTML文档。
尝试从“React-accessible accordion”以
导入*方式导入然后访问元素，如
Acc.Accordion
等，从控制台输入错误。