Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Getting Started - How it should be!
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>
@cem2ran

This comment has been minimized.

Copy link
Owner Author

commented Dec 28, 2015

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.

@PAEz

This comment has been minimized.

Copy link

commented Dec 30, 2015

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.

@frostney

This comment has been minimized.

Copy link

commented Dec 31, 2015

This is very convenient, thank you very much. Out of curiosity: Is there a way to use CommonJS here instead of ES2015 modules?

@cem2ran

This comment has been minimized.

Copy link
Owner Author

commented Jan 3, 2016

@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
You can’t perform that action at this time.