Skip to content

Instantly share code, notes, and snippets.

@RyanAtViceSoftware
Last active July 18, 2019 18:09
Show Gist options
  • Save RyanAtViceSoftware/8312dcf44f5d583b3425 to your computer and use it in GitHub Desktop.
Save RyanAtViceSoftware/8312dcf44f5d583b3425 to your computer and use it in GitHub Desktop.
Hello React - composite components - composing components with behavior - working solution. JsFiddle: http://jsfiddle.net/gh/gist/library/pure/8312dcf44f5d583b3425
<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"/>
var HelloMessage = React.createClass({
render: function() {
return <h2>{this.props.message}</h2>;
}
});
var TextBox = React.createClass({
getInitialState: function() {
return { isEditing: false }
},
update: function() {
this.props.update(this.refs.messageTextBox.value);
this.setState(
{
isEditing: false
});
},
edit: function() {
this.setState({ isEditing: true});
},
render: function() {
return (
<div>
{this.props.label}<br/>
<input type='text' ref='messageTextBox' disabled={!this.state.isEditing}/>
{
this.state.isEditing ?
<button onClick={this.update}>Update</button>
:
<button onClick={this.edit}>Edit</button>
}
</div>
);
}
});
var HelloReact = React.createClass({
getInitialState: function () {
return { firstName: '', lastName: ''}
},
update: function(key, value) {
var newState = {};
newState[key] = value;
this.setState(newState);
},
render: function() {
return (
<div>
<HelloMessage
message={'Hello ' + this.state.firstName + ' ' + this.state.lastName}>
</HelloMessage>
<TextBox label='First Name' update={this.update.bind(null, 'firstName')}>
</TextBox>
<TextBox label='Last Name'
update={this.update.bind(null, 'lastName')}>
</TextBox>
</div>
);
}
});
ReactDOM.render(
<HelloReact/>,
document.getElementById('view'));
name: ReactJs example by Ryan Vice - www.ViceSoftware.com
description: Hello React - composite components - composing components with behavior - working solution.
authors:
- Ryan Vice
resources:
normalize_css: no
wrap: h
panel_js: 3
panel_css: 0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment