Skip to content

Instantly share code, notes, and snippets.

@proudlygeek
Last active August 29, 2015 14:15
Show Gist options
  • Select an option

  • Save proudlygeek/a356d3841e4caf8edc20 to your computer and use it in GitHub Desktop.

Select an option

Save proudlygeek/a356d3841e4caf8edc20 to your computer and use it in GitHub Desktop.
test-injection
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/jsx" src="main.js"></script>
</body>
</html>
'use strict';
var Hello = React.createClass({
render: function() {
return (this.props.name !== '')
? (<div> Hello {this.props.name}!</div>)
: (<div> Hey, tell me your name :( </div>)
}
});
var App = React.createClass({
getInitialState: function() {
return {
name: 'world'
};
},
onChange: function(e) {
var value = e.target.value;
this.setState({name: value});
},
render: function() {
return (
<div>
<input type="text" onChange={this.onChange} value={this.state.name} />
<Hello name={this.state.name} />
</div>
);
}
})
React.render(<App />, document.getElementById('main'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment