Created
December 20, 2015 18:33
-
-
Save gwang/373d4b38b5ef7fc9d4b6 to your computer and use it in GitHub Desktop.
a simple demo on how to use React.js components
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- index.html --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>React Tutorial</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="content"></div> | |
| <script type="text/babel" src="script.jsx"></script> | |
| <script type="text/babel"> | |
| // To get started with this tutorial running your own code, simply remove | |
| // the script tag loading scripts/example.js and start writing code here. | |
| // tutorial1.js | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var Button = React.createClass({ | |
| localHandleClick: function() { | |
| this.props.localHandleCallBack(this.props.increment); | |
| }, | |
| render: function() { | |
| return( | |
| // onClick calls a Button method named localHandleClick | |
| // which inturn uses the call back function saved in the localHandleCallBack. | |
| <button onClick={this.localHandleClick}>+{this.props.increment}</button> | |
| ) | |
| } | |
| }); | |
| var Result = React.createClass({ | |
| render: function() { | |
| return ( | |
| <div>{this.props.localCounter}</div> | |
| ) | |
| } | |
| }); | |
| var CommentBox = React.createClass({ | |
| render: function() { | |
| return ( | |
| <div className="commentBox"> | |
| Hello, world! I am a CommentBox. | |
| </div> | |
| ); | |
| } | |
| }); | |
| var Main = React.createClass({ | |
| getInitialState: function() { | |
| return {counter: 10}; | |
| }, | |
| handleClick: function(increment){ | |
| this.setState({counter: this.state.counter + increment}); | |
| }, | |
| render: function() { | |
| return ( | |
| <div> | |
| <Button localHandleCallBack = {this.handleClick} increment={1} /> | |
| <Button localHandleCallBack = {this.handleClick} increment={5} /> | |
| <Button localHandleCallBack = {this.handleClick} increment={10} /> | |
| <Button localHandleCallBack = {this.handleClick} increment={100} /> | |
| <Result localCounter = {this.state.counter} /> | |
| <CommentBox /> | |
| </div> | |
| ) | |
| } | |
| }); | |
| ReactDOM.render( | |
| <Main />, | |
| document.getElementById('content') | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment