Skip to content

Instantly share code, notes, and snippets.

@rickbacci

rickbacci/sample.js

Forked from biglovisa/sample.js
Created December 16, 2015 20:42
Show Gist options
  • Save rickbacci/0ba45ae6d28d44641152 to your computer and use it in GitHub Desktop.
Save rickbacci/0ba45ae6d28d44641152 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Lovisa Svallingson created this gist Dec 16, 2015.
    60 changes: 60 additions & 0 deletions sample.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    ///// 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>
    );
    },
    });