Skip to content

Instantly share code, notes, and snippets.

@biglovisa
Created December 16, 2015 18:50
Show Gist options
  • Save biglovisa/c0d4e394ac8c2d7e2002 to your computer and use it in GitHub Desktop.
Save biglovisa/c0d4e394ac8c2d7e2002 to your computer and use it in GitHub Desktop.
react sample code
///// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(<HelloWorld name='Meeka' />, document.getElementById('container'));
///// HelloWorld.js
import React from 'react';
import Buttons from './Buttons';
export default React.createClass({
getInitialState() {
return { counter: 0 }
},
handleButtonClick(number) {
let newNumber = this.state.counter + number;
this.setState({ counter: newNumber });
},
render() {
console.log('props in HW', this.props);
console.log('props in HW', this.props);
return (
<div>
<h1>Hello, {this.props.name}!</h1>
<h1>Counter: {this.state.counter}</h1>
<Buttons handleClickInButtons={this.handleButtonClick} counter={this.state.counter} />
</div>
);
},
});
///// Buttons.js
import React from 'react';
export default React.createClass({
handleClick(number) {
console.log('number', number);
this.props.handleClickInButtons(number);
},
render() {
console.log('props in Buttons', this.props);
console.log('state in Buttons', this.state);
return (
<div>
<button onClick={this.handleClick.bind(this, 5)}>Add 5</button>
<button onClick={this.handleClick.bind(this, 10)}>Add 10</button>
<button onClick={this.handleClick.bind(this, -4)}>Subtract 4</button>
<h1>Counter in Buttons: {this.props.counter}</h1>
</div>
);
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment