Created
December 28, 2015 01:10
-
-
Save cem2ran/9be3dd3499566302d5ae to your computer and use it in GitHub Desktop.
React Getting Started - How it should be!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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")) | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<script src="https://jspm.io/[email protected]"></script> | |
<script> | |
System.config({ | |
transpiler: 'babel', // or 'traceur' or 'typescript' | |
babelOptions: {} // or traceurOptions or typescriptOptions | |
}); | |
System.import('./main.js'); | |
</script> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 notnpm: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.