React based view

by uyeong21c

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
    <!-- This element's contents will be replaced with your component. -->
</div>

SCSS

// ------------------------------------- //
// Style of App
// ------------------------------------- //

#app {
  width: 340px;
}

// ------------------------------------- //
// Style of Saying
// ------------------------------------- //

$module: 'saying';

.#{$module} {
  background: #fff;
  border: 1px solid #ededed;
  padding: 10px;
  
  &__title {
    margin: 0;
  }
  
  &__message {
    margin: 5px 0;
  }
  
  &__speaker {
    font-size: 14px;
    color: #808080;
  }
}

JavaScript 1.7

class Saying extends React.Component {
    render() {
        return (
            <div className="saying">
                <h1 className="saying__title">{this.props.title}</h1>
                <p className="saying__message">{this.props.message}</p>
                <span className="saying__speaker">{this.props.speaker}</span><br/>
                <button className="saying__change" onClick={this.props.onChange}>
                    {this.props.button}
                </button>
            </div>
        );
    }
}

let sayingState = {
    title: "오늘의 명언",
    message: "언제나 현재에 집중할 수 있다면 행복할 것이다.",
    speaker: "파울로 코엘료",
    button: "바꾸기"
};

function run() {
    ReactDOM.render(
        <Saying {...sayingState} onChange={onChange}/>,
        document.getElementById('app')
    );
}

function onChange() {
    sayingState = Object.assign({}, sayingState, {
        message: '많은 사람이 재능의 부족보다 결심의 부족으로 실패한다.',
        speaker: '빌링 선데이'
    });

    run();
}

run();