現時点では、このビデオ チュートリアルに従っていますが、単純な HelloWorld アプリにこだわっています。時間位置12m:31sは、私が立ち往生している場所であり、表示されるはずですが、表示HelloWorld
されません。
アプリは SystemJs、React、JSX を使用しています。
アプリを作成するには、端末で次の手順を実行します (node と jspm が必要です)。
npm init
(enter
全員に)jspm init
(enter
babel を使用する場合を除き、ほぼすべてのユーザーに)jspm install fetch=npm:whatwg-fetch
jspm install react
- アプリのサブフォルダーを作成する
main.js
コードを作成してそこにコピーする index.html
ルートディレクトリに作成します。- 次に、サーブで実行します
問題は私のローカルサーバーだと思います。nodejs で実行していhttp-server
ますが、JSX は JS にトランスパイルされていないと思います。また、上記のserve
サーバーが機能していません。
ブラウザ コンソールに次のエラー メッセージが表示されます。
Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <
どうすれば機能しますか?
これが私のコードです。まさにビデオのコードです(jsファイルが追加されていないため、ここでは実行されません):
//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);
<!-- index.html -->
<!doctype html>
<html>
<head>
<title>First jspm</title>
<script type="text/javascript" src="jspm_packages/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script>
System.import('app/main');
</script>
</head>
<body>
</body>
</html>