<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script type="text/javascript" src="//fb.me/react-with-addons-0.14.0.js"></script>
<script type="text/javascript" src="//fb.me/react-dom-0.14.0.js"></script>
<script type="text/javascript" src="//requirejs.org/docs/release/2.1.20/minified/require.js"></script>
<script type="text/javascript" src="https://jspm.io/system@0.18.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import('./app.jsx');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Файл config.js
/*global System */
'use strict';
/* if you need any specific jspm config place it here */
System.config({
transpiler: 'babel',
packages: {
'./': {defaultExtension: false}
},
map: {
//'react': 'npm:react@0.13'
}
});
Файл app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import FancyButton from './fancyButton.jsx';
var HelloPage = React.createClass({
doSomething: function(btn){
alert("You got it, boss! From button " + btn);
},
render: function() {
return (
<div>
<div className="jumbotron">
<div className="container">
<h1>Hello, React!</h1>
</div>
</div>
<div className="container">
<FancyButton btn="1" clickHandler={ this.doSomething }/>
<FancyButton btn="2" clickHandler={ this.doSomething }/>
</div>
</div>
);
}
});
ReactDOM.render(
<HelloPage />,
document.getElementById("app")
)
Файл fancyButton.jsx
import React from 'react';
export default class FancyButton extends React.Component {
render() {
const btn = this.props.btn;
return (
<div className="well">
<button onClick={() => this.props.clickHandler(btn)}>Click Me!</button>
<p className="pull-right">
Button { btn }
</p>
</div>
);
}
}
Комментариев нет:
Отправить комментарий