Created
July 19, 2019 13:20
-
-
Save SivanKarthick/f8bf3bb831d6a1354acc6598aeb93183 to your computer and use it in GitHub Desktop.
React Hello World w/ JSBin // source https://jsbin.com/tipixiy
This file contains 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="http://fb.me/react-0.13.1.js"></script> | |
| <meta charset="utf-8"> | |
| <title>React Hello World w/ JSBin</title> | |
| </head> | |
| <body> | |
| <div id="react_example"></div> | |
| <script id="jsbin-javascript"> | |
| /** | |
| * Seems to be in line with this | |
| * http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements | |
| * Now I have the state in parent and child. Is that good or bad? Why would I need it in child? | |
| * Could probably take that out | |
| * Another Example http://jsbin.com/pidipad/edit?js,output | |
| * */ | |
| "use strict"; | |
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
| var Parent = (function (_React$Component) { | |
| _inherits(Parent, _React$Component); | |
| function Parent(props) { | |
| var _this = this; | |
| _classCallCheck(this, Parent); | |
| _get(Object.getPrototypeOf(Parent.prototype), "constructor", this).call(this, props); | |
| this.onUpdate = function (val) { | |
| _this.setState({ | |
| fieldVal: val | |
| }); | |
| }; | |
| this.state = { | |
| fieldVal: "" | |
| }; | |
| } | |
| _createClass(Parent, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h2", | |
| null, | |
| "Parent" | |
| ), | |
| "Value in Parent Component State: ", | |
| this.state.fieldVal, | |
| React.createElement("br", null), | |
| React.createElement(Child, { onUpdate: this.onUpdate }), | |
| React.createElement("br", null), | |
| React.createElement(OtherChild, { passedVal: this.state.fieldVal }) | |
| ); | |
| } | |
| }]); | |
| return Parent; | |
| })(React.Component); | |
| var Child = (function (_React$Component2) { | |
| _inherits(Child, _React$Component2); | |
| function Child(props) { | |
| var _this2 = this; | |
| _classCallCheck(this, Child); | |
| _get(Object.getPrototypeOf(Child.prototype), "constructor", this).call(this, props); | |
| this.update = function (e) { | |
| console.log(e.target.value); | |
| _this2.props.onUpdate(e.target.value); | |
| _this2.setState({ fieldVal: e.target.value }); | |
| }; | |
| this.state = { | |
| fieldVal: "" | |
| }; | |
| } | |
| _createClass(Child, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h4", | |
| null, | |
| "Child" | |
| ), | |
| React.createElement("input", { | |
| type: "text", | |
| placeholder: "type here", | |
| onChange: this.update, | |
| value: this.state.fieldVal | |
| }) | |
| ); | |
| } | |
| }]); | |
| return Child; | |
| })(React.Component); | |
| var OtherChild = (function (_React$Component3) { | |
| _inherits(OtherChild, _React$Component3); | |
| function OtherChild() { | |
| _classCallCheck(this, OtherChild); | |
| _get(Object.getPrototypeOf(OtherChild.prototype), "constructor", this).apply(this, arguments); | |
| } | |
| _createClass(OtherChild, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h4", | |
| null, | |
| "OtherChild" | |
| ), | |
| "Value in OtherChild Props: ", | |
| this.props.passedVal | |
| ); | |
| } | |
| }]); | |
| return OtherChild; | |
| })(React.Component); | |
| React.render(React.createElement(Parent, null), document.getElementById('react_example')); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="//fb.me/react-0.13.1.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>React Hello World w/ JSBin</title> | |
| </head> | |
| <body> | |
| <div id="react_example"></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-javascript" type="text/javascript">/** | |
| * Seems to be in line with this | |
| * http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements | |
| * Now I have the state in parent and child. Is that good or bad? Why would I need it in child? | |
| * Could probably take that out | |
| * Another Example http://jsbin.com/pidipad/edit?js,output | |
| * */ | |
| class Parent extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| fieldVal: "" | |
| } | |
| } | |
| onUpdate = (val) => { | |
| this.setState({ | |
| fieldVal: val | |
| }) | |
| }; | |
| render() { | |
| return ( | |
| <div> | |
| <h2>Parent</h2> | |
| Value in Parent Component State: {this.state.fieldVal} | |
| <br/> | |
| <Child onUpdate={this.onUpdate} /> | |
| <br /> | |
| <OtherChild passedVal={this.state.fieldVal} /> | |
| </div> | |
| ) | |
| } | |
| } | |
| class Child extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| fieldVal: "" | |
| } | |
| } | |
| update = (e) => { | |
| console.log(e.target.value); | |
| this.props.onUpdate(e.target.value); | |
| this.setState({fieldVal: e.target.value}); | |
| }; | |
| render() { | |
| return ( | |
| <div> | |
| <h4>Child</h4> | |
| <input | |
| type="text" | |
| placeholder="type here" | |
| onChange={this.update} | |
| value={this.state.fieldVal} | |
| /> | |
| </div> | |
| ) | |
| } | |
| } | |
| class OtherChild extends React.Component { | |
| render() { | |
| return ( | |
| <div> | |
| <h4>OtherChild</h4> | |
| Value in OtherChild Props: {this.props.passedVal} | |
| </div> | |
| ) | |
| } | |
| } | |
| React.render( | |
| <Parent />, | |
| document.getElementById('react_example') | |
| );</script></body> | |
| </html> |
This file contains 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
| /** | |
| * Seems to be in line with this | |
| * http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements | |
| * Now I have the state in parent and child. Is that good or bad? Why would I need it in child? | |
| * Could probably take that out | |
| * Another Example http://jsbin.com/pidipad/edit?js,output | |
| * */ | |
| "use strict"; | |
| var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); | |
| var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; | |
| function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | |
| function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | |
| var Parent = (function (_React$Component) { | |
| _inherits(Parent, _React$Component); | |
| function Parent(props) { | |
| var _this = this; | |
| _classCallCheck(this, Parent); | |
| _get(Object.getPrototypeOf(Parent.prototype), "constructor", this).call(this, props); | |
| this.onUpdate = function (val) { | |
| _this.setState({ | |
| fieldVal: val | |
| }); | |
| }; | |
| this.state = { | |
| fieldVal: "" | |
| }; | |
| } | |
| _createClass(Parent, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h2", | |
| null, | |
| "Parent" | |
| ), | |
| "Value in Parent Component State: ", | |
| this.state.fieldVal, | |
| React.createElement("br", null), | |
| React.createElement(Child, { onUpdate: this.onUpdate }), | |
| React.createElement("br", null), | |
| React.createElement(OtherChild, { passedVal: this.state.fieldVal }) | |
| ); | |
| } | |
| }]); | |
| return Parent; | |
| })(React.Component); | |
| var Child = (function (_React$Component2) { | |
| _inherits(Child, _React$Component2); | |
| function Child(props) { | |
| var _this2 = this; | |
| _classCallCheck(this, Child); | |
| _get(Object.getPrototypeOf(Child.prototype), "constructor", this).call(this, props); | |
| this.update = function (e) { | |
| console.log(e.target.value); | |
| _this2.props.onUpdate(e.target.value); | |
| _this2.setState({ fieldVal: e.target.value }); | |
| }; | |
| this.state = { | |
| fieldVal: "" | |
| }; | |
| } | |
| _createClass(Child, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h4", | |
| null, | |
| "Child" | |
| ), | |
| React.createElement("input", { | |
| type: "text", | |
| placeholder: "type here", | |
| onChange: this.update, | |
| value: this.state.fieldVal | |
| }) | |
| ); | |
| } | |
| }]); | |
| return Child; | |
| })(React.Component); | |
| var OtherChild = (function (_React$Component3) { | |
| _inherits(OtherChild, _React$Component3); | |
| function OtherChild() { | |
| _classCallCheck(this, OtherChild); | |
| _get(Object.getPrototypeOf(OtherChild.prototype), "constructor", this).apply(this, arguments); | |
| } | |
| _createClass(OtherChild, [{ | |
| key: "render", | |
| value: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "h4", | |
| null, | |
| "OtherChild" | |
| ), | |
| "Value in OtherChild Props: ", | |
| this.props.passedVal | |
| ); | |
| } | |
| }]); | |
| return OtherChild; | |
| })(React.Component); | |
| React.render(React.createElement(Parent, null), document.getElementById('react_example')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment