AWo*_*olf 5 javascript reactjs systemjs react-jsx
我目前正在关注这个视频教程，但我坚持使用简单的 HelloWorld 应用程序。在时间位置12m:31s是我卡住的地方它应该显示HelloWorld但它没有。
该应用程序使用 SystemJs、React 和 JSX。
要创建应用程序，请在终端中执行以下步骤（需要节点和 jspm）：
npm init（enter对所有人）jspm init（enter几乎所有人，除了使用 babel）jspm install fetch=npm:whatwg-fetchjspm install reactmain.js并将我的代码复制到其中index.html到根目录。我认为问题是我的本地服务器。我用 nodejs 运行它，http-server我认为 JSX 没有转换为 JS。也提到的serve服务器不工作。
我在浏览器控制台中收到此错误消息：
Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <
我如何使它工作？
这是我的代码，正是视频中的代码（它不会在这里运行，因为没有添加 js 文件）：
Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <
//app/main.js
import 'fetch';
import React from 'react';
console.log('Hello world');
class HelloWorld extends React.Component {
render() {
return <p>hello world</p>;
}
}
React.render(<HelloWorld />, document.body);当我在浏览器上处理 es6+react 演示时遇到类似的问题，最后弄清楚
<!doctype html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.12/system.js"></script>
<script>
SystemJS.config({
baseURL:'https://unpkg.com/',
defaultExtension: true,
meta: {
'*.jsx': {
'babelOptions': {
react: true
}
}
},
map: {
'plugin-babel': 'systemjs-plugin-babel@latest/plugin-babel.js',
'systemjs-babel-build': 'systemjs-plugin-babel@latest/systemjs-babel-browser.js',
'react': 'react@15.3.2/dist/react.min.js',
'react-dom': 'react-dom@15.3.2/dist/react-dom.min.js'
},
transpiler: 'plugin-babel'
});
SystemJS.import('./comp-a.jsx').then(function (m) {
console.log(m);
});
</script>
我对本教程不太了解，但 JSX 需要在加载 JSX 文件之前包含 JSX 转译器。然后它会查找任何具有 type="text/jsx" 的脚本标记以编译为常规 JavaScript。
听起来这个教程可能让这个问题变得复杂了。
| 归档时间： |
|
| 查看次数： |
3879 次 |
| 最近记录： |