Skip to content

Instantly share code, notes, and snippets.

@mason-stewart
Last active January 2, 2016 08:09
Show Gist options
  • Save mason-stewart/8275087 to your computer and use it in GitHub Desktop.
Save mason-stewart/8275087 to your computer and use it in GitHub Desktop.
Using React 0.8.0. This throws an JSX compilation error on line 23 of app.jsx for some reason?
/** @jsx React.DOM */
'use strict';
var data = {
message: 'Dumb Dumb',
text: "green",
color: "green"
}
var HelloWorld = React.createClass({
getInitialState: function() {
return this.props.data;
},
goodbye: function(event) {
this.setState({message: 'Goodbye World.'});
},
updateColor: function(event) {
this.setState({color: event.target.value, text: event.target.value})
console.log('cool, this.state.color is',this.state.color)
},
render: function() {
return (
<div>
<h1 onClick={this.goodbye}>{this.state.message}</h1>
<input onChange={this.updateColor} value={this.state.color}/>
<Button data={this.state} />
</div>
);
}
});
React.renderComponent(
<HelloWorld data={data}/>,
document.getElementById('app')
);
/** @jsx React.DOM */
'use strict';
var Button = React.createClass({
render: function(){
return (
<a className="button" href="#" style={{background: this.props.data.color}}>{this.props.data.text}</a>
)
}
})
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>react versus</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
<!-- build:js scripts/vendor/react-with-addons.min.js -->
<script src="bower_components/react/react-with-addons.js"></script>
<!-- endbuild -->
</head>
<body>
<div id="app"></div>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/app.js -->
<script src="scripts/button.js"></script>
<script src="scripts/app.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment