Skip to content

Instantly share code, notes, and snippets.

@RyanAtViceSoftware

RyanAtViceSoftware/fiddle.html

Last active December 29, 2017 09:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save RyanAtViceSoftware/82a72b3fbf47902dc4c2 to your computer and use it in GitHub Desktop.
Save RyanAtViceSoftware/82a72b3fbf47902dc4c2 to your computer and use it in GitHub Desktop.
Download ZIP
Hello React - props constraints - How to add constraints to your props to make your component more strongly typed at runtime. JsFiddle: http://jsfiddle.net/gh/gist/library/pure/82a72b3fbf47902dc4c2
Raw
fiddle.html
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<div id="view"/>
Raw
fiddle.js
var HelloReact = React.createClass({
propTypes: {
message: React.PropTypes.string,
number: React.PropTypes.number,
requiredString: React.PropTypes.string.isRequired
},
render: function() {
return (
<div>
<div>Hello React</div>
<div>{this.props.message}</div>
</div>
);
}
});
// Let's redirect warnings to an alert box
console.warn = function (message) {
alert(message);
};
ReactDOM.render(
<HelloReact message='How are you' number='not a number'/>,
document.getElementById('view'));
Raw
fiddle.manifest
name: ReactJs example by Ryan Vice - www.ViceSoftware.com
description: Hello React - props constraints - How to add constraints to your props to make your component more strongly typed at runtime.
authors:
- Ryan Vice
resources:
normalize_css: no
wrap: h
panel_js: 3
panel_css: 0
@lse123
Copy link

lse123 commented Dec 29, 2017

jsfiddle works but not in browser... where is babel library js???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment