React Base Fiddle (JSX)
Starting point for creating JSFiddles with React. This uses React with Addons.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.2/ReactRouter.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="app"></div>
<script type="text/jsx">
var Router = ReactRouter;
var Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
Link = Router.Link,
RouteHandler = Router.RouteHandler;
var App = React.createClass({
render: function () {
return (
<div>
<ul>
<li><Link to="view2">View2 Countrylist link</Link></li>
</ul>
<RouteHandler {...this.props}/>
</div>
);
}
});
var View1 = React.createClass({
render: function () {
var countryId = this.props.params.countryId;
var testCountry = {
id : countryId,
name : 'testCountry'
};
var props = {
country: testCountry
}
return (
<div>View 1 wrapper: countryId {countryId}
<RouteHandler {...this.props} {...props}/>
</div>
);
}
});
var View2 = React.createClass({
render: function () {
return (
<div>View 2 content: Country list
<ul>
<li><Link params={{ countryId: 13 }} to="view3">Country 13 link</Link></li>
<li><Link params={{ countryId: 14 }} to="view3">Country 14 link</Link></li>
</ul>
</div>
);
}
});
var...