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();
// ------------------------------------- // // 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; } }
<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>