Minimal project setup for TypeScript + JSPM + SystemJS + React.
You will need typescript≥1.8.0, jspm≥0.17-beta and typings≥0.6.8.
-
run
jspm init(baseURL=empty, transpiler=TypeScript, defaults for other stuff) -
run
jspm install react react-dom -
add to jspm.config.js:
@@ -6,6 +6,18 @@ SystemJS.config({ ], transpiler: "plugin-typescript", + meta: { + "*.tsx": { + loader: "plugin-typescript" + }, + "*.ts": { + loader: "plugin-typescript" + } + }, + typescriptOptions: { + typeCheck: true, + tsconfig: true + }, map: { "plugin-typescript": "github:frankwallis/plugin-typescript@4.0.1", "process": "github:jspm/nodelibs-process@0.2.0-alpha",
-
create tsconfig.json:
{ "compilerOptions": { "module": "system", "target": "es5", "noImplicitAny": true, "sourceMap": true, "jsx": "react" }, "files": [ "src/app.tsx", "typings/browser.d.ts" ] } -
create src/app.tsx
import * as React from 'react'; import * as ReactDOM from 'react-dom'; type GUIProps = { greetTarget: string }; type GUIState = { time: Date }; class GUI extends React.Component<GUIProps, GUIState> { constructor(props: GUIProps) { super(props); // must set initial state in constructor this.state = {time: new Date()}; setInterval(() => this.setState({time: new Date()}), 1000); } render() { return <div> Hello {this.props.greetTarget}! It is {this.state.time.toString()}. </div>; } } ReactDOM.render(<GUI greetTarget="World" />, document.querySelector("#root"));
-
create index.html
<!doctype html> <meta charset="utf-8"> <title>Minimal Example</title> <div id=root>Loading...</div> <script src="jspm_packages/system.js"></script> <script src="jspm.browser.js"></script> <script src="jspm.config.js"></script> <script>System.import("src/app.tsx")</script>
-
run
typings install --save --ambient reactand... react-dom
Now run a webserver with python3 -m http.server and open http://localhost:8000. You should see "Hello World" and the time displayed.