测试JSX时JSFiddle提示“未闭合正则表达式”错误，求原因

嘿，这个问题我之前折腾过，其实是两个关键点导致的：

1. 核心原因：JSFiddle默认不支持JSX语法 #

JSX是React专属的扩展语法，浏览器本身根本认不出来，得靠Babel转成普通JS才能运行。但JSFiddle默认的JavaScript面板是用原生JS解析的，当它看到你写的<combobox />时，会把那个<符号错误当成正则表达式的开头（解析器在这个上下文里跑偏了），结果找遍代码也没看到对应的闭合/，就直接抛出“未闭合正则表达式”的报错了。

2. 额外的组件命名小坑（不解决的话组件也不会显示） #

你写的组件名combobox是小写开头的，React有个严格的约定：自定义组件必须大写开头，小写的会被当成原生HTML标签处理，到时候它会去渲染一个不存在的<combobox>标签，根本不会调用你的组件。

解决办法&修正后的代码 #

第一步：调整JSFiddle的语法设置 #

在JSFiddle的JavaScript面板顶部，找到语言选择下拉框（默认显示"JavaScript"），改成JavaScript + Babel，这样它就会自动帮你转译JSX代码了。

第二步：修正组件名和代码 #

把组件名改成大写开头的Combobox，修正后的代码如下：

const Combobox = () => ( <div id="box"> working </div> ); 
ReactDOM.render(<Combobox />, document.querySelector("#app"));

这样再运行，代码就能正常渲染出内容啦～

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