我编写的React组件返回9个语法错误，是什么原因导致的？

核心错误原因 #

• 本地CSS文件导入未加相对路径前缀./，import "searchbar.css"会被打包工具识别为第三方模块导入，触发模块缺失错误
• JSX语法不允许使用原生class属性指定样式类，必须替换为React专属的className属性
• JSX要求所有单标签必须显式自闭合，你的<input>标签未加闭合标记，直接导致JSX解析失败，触发你遇到的"declaration or statement expected"等语法类报错
• 若该组件为默认导出供其他文件调用，需要在export后加default关键字，否则其他文件导入时会触发导出不存在错误

修正后完整代码 #

import React from "react";
import "./searchbar.css";

// 若需要使用命名导出而非默认导出，删除default关键字即可
export default class SearchBar extends React.Component {
    render() {
        return (
            <div className="className">
                <input placeholder="Enter A Song, Album, or Artist" />
                <button className="className">SEARCH</button>
            </div>
        );
    }
}

内容的提问来源于stack exchange，提问作者Toshhken