将React.js文件关联到HTML时遭遇CORS错误，请求解决

一、CORS跨域错误的解决 #

直接双击HTML文件用file://协议打开时，浏览器出于安全限制，会阻止Babel加载本地的test.js文件，这就是你遇到的CORS报错。解决办法是用本地HTTP服务器运行项目：

• 用VSCode的Live Server插件：右键HTML文件选择"Open with Live Server"，会自动在http://localhost:xxxx启动服务
• 用Node.js的http-server：先全局安装npm install -g http-server，然后在项目目录运行http-server，访问提示的地址
• 用Python：Python3运行python -m http.server，Python2运行python -m SimpleHTTPServer，访问http://localhost:8000

二、React代码的错误修正 #

你的test.js里存在React基础用法错误：

• 你定义的component是一个React元素，不是组件，不能用<component />的方式渲染，直接传入ReactDOM.render即可
• 如果要写成组件形式，组件名必须首字母大写（React的约定，用来区分组件和普通HTML标签）

修正后的test.js（直接渲染元素）： #

const component = <h1>Hello World</h1>
ReactDOM.render(component, document.getElementById("react-container"));

或者改成标准组件写法： #

// 组件名首字母大写
const Component = () => <h1>Hello World</h1>
ReactDOM.render(<Component />, document.getElementById("react-container"));

完成以上两步后，页面就能正常显示"Hello World"了。

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