-
-
Save yurtarmehmet/824fc2360242205e8d4f to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/jimiye
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-1.9.1.js"></script> | |
| <script src="http://fb.me/react-with-addons-0.14.3.js"></script> | |
| <script src="http://fb.me/react-dom-0.14.3.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="root"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| var Card = React.createClass({displayName: 'Card', | |
| getInitialState: function(){ | |
| return {} | |
| }, | |
| componentDidMount: function(){ | |
| var component = this; | |
| $.get("https://api.github.com/users/"+ this.props.login,function(data){ | |
| component.setState(data); | |
| }); | |
| }, | |
| render: function(){ | |
| return ( | |
| React.createElement("div", null, | |
| React.createElement("img", {src: this.state.avatar_url, width: "80"}), | |
| React.createElement("h3", null, this.state.name), | |
| React.createElement("hr", null) | |
| ) | |
| ) | |
| } | |
| }); | |
| var Form = React.createClass({displayName: 'Form', | |
| handleSubmit: function(e){ | |
| e.preventDefault(); | |
| //Ref'i login olan inputu getiriyor | |
| var loginInput = React.findDOMNode(this.refs.login); | |
| this.props.addCard(loginInput.value); | |
| //Submitte val'ini boşalt | |
| loginInput.value = ""; | |
| }, | |
| render: function(){ | |
| return ( | |
| React.createElement("form", {onSubmit: this.handleSubmit}, | |
| React.createElement("input", {placeholder: "username", ref: "login"}), | |
| React.createElement("button", null, "Submit") | |
| ) | |
| ) | |
| } | |
| }); | |
| var Main = React.createClass({displayName: 'Main', | |
| getInitialState: function(){ | |
| return{logins:[]}; | |
| }, | |
| addCard: function(username){ | |
| this.setState({logins: this.state.logins.concat(username)}); | |
| }, | |
| render: function(){ | |
| var cards = this.state.logins.map(function(login){ | |
| return (React.createElement(Card, {login: login})) | |
| }); | |
| return (React.createElement("div", null, | |
| React.createElement(Form, {addCard: this.addCard}), | |
| cards | |
| )) | |
| } | |
| }); | |
| React.render(React.createElement(Main, null), document.getElementById("root")); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-1.9.1.js"><\/script> | |
| <script src="//fb.me/react-with-addons-0.14.3.js"><\/script> | |
| <script src="//fb.me/react-dom-0.14.3.js"><\/script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="root"> | |
| </div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var Card = React.createClass({ | |
| getInitialState: function(){ | |
| return {} | |
| }, | |
| componentDidMount: function(){ | |
| var component = this; | |
| $.get("https://api.github.com/users/"+ this.props.login,function(data){ | |
| component.setState(data); | |
| }); | |
| }, | |
| render: function(){ | |
| return ( | |
| <div> | |
| <img src={this.state.avatar_url} width="80"></img> | |
| <h3>{this.state.name}</h3> | |
| <hr /> | |
| </div> | |
| ) | |
| } | |
| }); | |
| var Form = React.createClass({ | |
| handleSubmit: function(e){ | |
| e.preventDefault(); | |
| //Ref'i login olan inputu getiriyor | |
| var loginInput = React.findDOMNode(this.refs.login); | |
| this.props.addCard(loginInput.value); | |
| //Submitte val'ini boşalt | |
| loginInput.value = ""; | |
| }, | |
| render: function(){ | |
| return ( | |
| <form onSubmit={this.handleSubmit}> | |
| <input placeholder="username" ref="login" /> | |
| <button>Submit</button> | |
| </form> | |
| ) | |
| } | |
| }); | |
| var Main = React.createClass({ | |
| getInitialState: function(){ | |
| return{logins:[]}; | |
| }, | |
| addCard: function(username){ | |
| this.setState({logins: this.state.logins.concat(username)}); | |
| }, | |
| render: function(){ | |
| var cards = this.state.logins.map(function(login){ | |
| return (<Card login={login} />) | |
| }); | |
| return (<div> | |
| <Form addCard={this.addCard}/> | |
| {cards} | |
| </div>) | |
| } | |
| }); | |
| React.render(<Main />, document.getElementById("root"));</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 Card = React.createClass({displayName: 'Card', | |
| getInitialState: function(){ | |
| return {} | |
| }, | |
| componentDidMount: function(){ | |
| var component = this; | |
| $.get("https://api.github.com/users/"+ this.props.login,function(data){ | |
| component.setState(data); | |
| }); | |
| }, | |
| render: function(){ | |
| return ( | |
| React.createElement("div", null, | |
| React.createElement("img", {src: this.state.avatar_url, width: "80"}), | |
| React.createElement("h3", null, this.state.name), | |
| React.createElement("hr", null) | |
| ) | |
| ) | |
| } | |
| }); | |
| var Form = React.createClass({displayName: 'Form', | |
| handleSubmit: function(e){ | |
| e.preventDefault(); | |
| //Ref'i login olan inputu getiriyor | |
| var loginInput = React.findDOMNode(this.refs.login); | |
| this.props.addCard(loginInput.value); | |
| //Submitte val'ini boşalt | |
| loginInput.value = ""; | |
| }, | |
| render: function(){ | |
| return ( | |
| React.createElement("form", {onSubmit: this.handleSubmit}, | |
| React.createElement("input", {placeholder: "username", ref: "login"}), | |
| React.createElement("button", null, "Submit") | |
| ) | |
| ) | |
| } | |
| }); | |
| var Main = React.createClass({displayName: 'Main', | |
| getInitialState: function(){ | |
| return{logins:[]}; | |
| }, | |
| addCard: function(username){ | |
| this.setState({logins: this.state.logins.concat(username)}); | |
| }, | |
| render: function(){ | |
| var cards = this.state.logins.map(function(login){ | |
| return (React.createElement(Card, {login: login})) | |
| }); | |
| return (React.createElement("div", null, | |
| React.createElement(Form, {addCard: this.addCard}), | |
| cards | |
| )) | |
| } | |
| }); | |
| React.render(React.createElement(Main, null), document.getElementById("root")); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment