Skip to content

Instantly share code, notes, and snippets.

@sky4git

sky4git/index.html

Created February 28, 2016 00:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sky4git/d0978a0cb329b80396bb to your computer and use it in GitHub Desktop.
Save sky4git/d0978a0cb329b80396bb to your computer and use it in GitHub Desktop.
Download ZIP
A sample React app - Dynamic Box
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>dynamic Width Example!</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel" src='main.js'></script>
</head>
<body>
<div id="example"></div>
</body>
</html>
Raw
main.js
//* DynamicBox
var DynamicBox = React.createClass({
getInitialState: function(){
// var dwidth;
return { dwidth:'100', dheight:'100' };
},
handleWidthChange: function(event){
// console.log(event.target.value);
return this.setState({dwidth: event.target.value });
},
handleHeightChange: function(event){
console.log(event.target.value);
return this.setState({dheight: event.target.value });
},
render: function(){
var dwidth = this.state.dwidth;
var dheight = this.state.dheight;
//console.log(dwidth+ '' + dheight);
var divStyle = {
border: '1px solid #f00',
width: dwidth+'px',
height: dheight+'px'
};
return(
<div>
<p> Section width : <input type="number" min='100' max='1000' value={dwidth} onChange={this.handleWidthChange} /></p>
<p> Section height : <input type="number" min='100' max='500' value={dheight} onChange={this.handleHeightChange} /></p>
<div style={divStyle}/>
</div>
);
}
});
ReactDOM.render(
<DynamicBox />,
document.getElementById('example')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment