-
-
Save cem2ran/9be3dd3499566302d5ae to your computer and use it in GitHub Desktop.
| import React from 'react' | |
| import ReactDOM from 'react-dom' | |
| const Hello = ({name}) => <h1>Hello {name}!</h1> | |
| ReactDOM.render( | |
| <Hello name={"vjeux"}/>, | |
| document.body.appendChild(document.createElement("div")) | |
| ) |
| <!DOCTYPE html> | |
| <script src="https://jspm.io/system@0.19.js"></script> | |
| <script> | |
| System.config({ | |
| transpiler: 'babel', // or 'traceur' or 'typescript' | |
| babelOptions: {} // or traceurOptions or typescriptOptions | |
| }); | |
| System.import('./main.js'); | |
| </script> |
You don't even need to create a file locally http://kolodny.github.io/quick-gist/#https://gist.githubusercontent.com/cem2ran/9be3dd3499566302d5ae/raw/dd54280398353e9993ac0e8c413b09ec1c663d32/main.js
Works in plunker aswell.....
http://plnkr.co/edit/9OULZz?p=preview
...so should work on most of those things, jsbin, fiddle, woteva
This is sweet as guys, thanks heaps!!!
Dont know how jspm works and dont have to care, love it when its like that. So many tools you have to know how to use them to use them, this was nice.
EDIT:
And here it is using mobservable!....
http://plnkr.co/edit/kkMydOqkPlmd8dXk1gtf?p=preview
...wow, that makes me happy.
I encountered one thing I had to learn for this.
When trying to import mobservable using import mobservable from 'npm:mobservable'; everything was fine, but when trying to import mobservable-react that way it complained it couldnt find mobservable.
This is because in the source for mobservable-react it imports with mobservable and not npm:mobservable like jspm needs.
So to fix that you need to create an alias for it in the map part of you config when you init jspm. You can see how easy it is to do that by looking at the html of the above example.
Hope that helps anyone else looking to use jspm without reading the docs ;P
EDIT:
And heres the bigger mobservable example...
http://plnkr.co/edit/rVs5yE?p=preview
...doing that one really highlighted why jspm is awesome. All mobservables examples are using specific scripts just to get it working online on jsfiddle, some of which is no longer supported. So when I made it use jspm and npm stuff a few things didnt work as they where using outdated stuff, now its using the latest from the npm, so the online stuff is now the same as your local code....nice.
This is very convenient, thank you very much. Out of curiosity: Is there a way to use CommonJS here instead of ES2015 modules?
@frostney, that shouldn't be a problem.
@kolodny: nice! I went a little further: https://react-play.surge.sh
You don't even need to have a server running! Just double-click on react.html. Initial load can be slow, but everything should be cached moving on.