How to run SystemJS/React demo locally with JSX?

I'm following this video tutorial at the moment and I'm stuck with the simple HelloWorld App. At the time position 12m:31s is where I'm stuck it should show HelloWorld but it doesn't.

The App is using SystemJs, React and JSX.

To create the app do these steps in your terminal (node and jspm required):

npm init (enter to all)
jspm init (enter to almost all, except use babel)
jspm install fetch=npm:whatwg-fetch
jspm install react
create an app sub-folder create main.js and copy my code into it
create index.html into root dir.
Then run it with serve

I think the problem is my local server. I'm running it with nodejs http-server and I think the JSX is not transpiled to JS. Also the mentioned serve server is not working.

I'm getting this error message in the browser console:

Potentially unhandled rejection [3] SyntaxError: Error loading "app/main"
[...] Unexpected token <

How do I make it work?

Here is my code, exactly the code from the video (it doesn't run here because no js files added):

//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>

Solution

i have no idea specifically about this tutorial, but JSX needs to have the JSX transpiler included before your JSX files are loaded. it then looks for any script tags that have type="text/jsx" to compile to regular JavaScript.

It sound's like this tutorial may have complicated this matter.