Jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader.
In my last post, I walked through the process of setting up webpack for react development. This time I’ll show an alternative with jspm that come with few advantages:
- Write code and run it without a building step.
- Babel comes with JSPM.
- Easily installs React component.
- ES6 modules support other extensions other then .js (like .jsx)
If you were just looking for a quick and minimal starter setup, go ahead and fork my jspm-react starter kit, otherwise continue reading as I’ll walk you trough that setup.
Initialize jspm for the project
Add jsx to extend the es6 module loader to support .jsx files
Pull react and react-dom via jspm
That’s it, no configuration needed, jspm will do its magic for us. We can now just require and use react to build … ***
A simple app
It doesn’t do much, apart rendering a header on the page using react-dom. It has react and react-dom as dependencies ,and use ES6 and JSX syntax.
Note: Instead of relying on React.createClass, we rely on the ES6 classes syntax. We can now require the app from a HTML file:
That’s it, just load the html in the browser and enjoy!
Some jspm extras.
Jspm doesn’t come with a dev-server as the one you can find in webpack. No worry, you can quickly install the jspm-server and have it serve your app within seconds live reload included!
Make sure to set the System trace property to true from the html file to enable live reloading via web sockets.
To help you kickstart your development with react using JSPM fork the jspm-react starter kit