25:["$","title",null,{"children":"React Bootstrap Typeahead | Aaron Kyle Dennis | Observable"}] 49:T6f8,html`

Alabama

Alaska

`4a:T1523,html`

Custom CSS

`4b:T19c9,BasicBehaviorsExample = /***/ //"./example/examples/BasicBehaviorsExample.react.js": // /*!*********************************************************!*\ !*** ./example/examples/BasicBehaviorsExample.react.js ***! \*********************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nvar _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; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _FormGroup = __webpack_require__(/*! react-bootstrap/lib/FormGroup */ \"./node_modules/react-bootstrap/lib/FormGroup.js\");\n\nvar _FormGroup2 = _interopRequireDefault(_FormGroup);\n\nvar _Control = __webpack_require__(/*! ../components/Control */ \"./example/components/Control.react.js\");\n\nvar _Control2 = _interopRequireDefault(_Control);\n\nvar _src = __webpack_require__(/*! ../../src/ */ \"./src/index.js\");\n\nvar _exampleData = __webpack_require__(/*! ../exampleData */ \"./example/exampleData.js\");\n\nvar _exampleData2 = _interopRequireDefault(_exampleData);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _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; }\n\n/* example-start */\nvar BasicBehaviorsExample = function (_React$Component) {\n _inherits(BasicBehaviorsExample, _React$Component);\n\n function BasicBehaviorsExample() {\n var _ref;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, BasicBehaviorsExample);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BasicBehaviorsExample.__proto__ || Object.getPrototypeOf(BasicBehaviorsExample)).call.apply(_ref, [this].concat(args))), _this), _this.state = {\n disabled: false,\n dropup: false,\n flip: false,\n highlightOnlyResult: false,\n minLength: 0,\n selectHintOnEnter: false\n }, _this._handleChange = function (e) {\n var _e$target = e.target,\n checked = _e$target.checked,\n name = _e$target.name;\n\n var newState = _defineProperty({}, name, checked);\n\n if (name === 'minLength') {\n newState.minLength = checked ? 2 : 0;\n }\n\n _this.setState(newState);\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(BasicBehaviorsExample, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var _state = this.state,\n disabled = _state.disabled,\n dropup = _state.dropup,\n emptyLabel = _state.emptyLabel,\n flip = _state.flip,\n highlightOnlyResult = _state.highlightOnlyResult,\n minLength = _state.minLength,\n selectHintOnEnter = _state.selectHintOnEnter;\n\n\n var checkboxes = [\n /* eslint-disable max-len */\n { checked: disabled, children: 'Disable the input', name: 'disabled' }, { checked: dropup, children: 'Dropup menu', name: 'dropup' }, { checked: flip, children: 'Flip the menu position when it reaches the viewport bounds', name: 'flip' }, { checked: !!minLength, children: 'Require minimum input before showing results (2 chars)', name: 'minLength' }, { checked: emptyLabel, children: 'Hide the menu when there are no results', name: 'emptyLabel' }, { checked: selectHintOnEnter, children: 'Select the hinted result by pressing enter', name: 'selectHintOnEnter' }, { checked: highlightOnlyResult, children: 'Highlight the only result', name: 'highlightOnlyResult' }];\n\n return _react2.default.createElement(\n _react.Fragment,\n null,\n _react2.default.createElement(_src.Typeahead, _extends({}, this.state, {\n emptyLabel: emptyLabel ? '' : undefined,\n labelKey: 'name',\n options: _exampleData2.default,\n placeholder: 'Choose a state...'\n })),\n _react2.default.createElement(\n _FormGroup2.default,\n null,\n checkboxes.map(function (props) {\n return _react2.default.createElement(_Control2.default, _extends({}, props, {\n key: props.name,\n onChange: _this2._handleChange,\n type: 'checkbox'\n }));\n })\n )\n );\n }\n }]);\n\n return BasicBehaviorsExample;\n}(_react2.default.Component);\n/* example-end */\n\nexports.default = BasicBehaviorsExample;\n\n//# sourceURL=webpack:///./example/examples/BasicBehaviorsExample.react.js?"); /***/ })4c:T1191,BasicExample = /***/ //"./example/examples/BasicExample.react.js":// /*!************************************************!*\ !*** ./example/examples/BasicExample.react.js ***! \************************************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _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; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _FormGroup = __webpack_require__(/*! react-bootstrap/lib/FormGroup */ \"./node_modules/react-bootstrap/lib/FormGroup.js\");\n\nvar _FormGroup2 = _interopRequireDefault(_FormGroup);\n\nvar _Control = __webpack_require__(/*! ../components/Control */ \"./example/components/Control.react.js\");\n\nvar _Control2 = _interopRequireDefault(_Control);\n\nvar _src = __webpack_require__(/*! ../../src/ */ \"./src/index.js\");\n\nvar _exampleData = __webpack_require__(/*! ../exampleData */ \"./example/exampleData.js\");\n\nvar _exampleData2 = _interopRequireDefault(_exampleData);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _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; }\n\n/* example-start */\nvar BasicExample = function (_React$Component) {\n _inherits(BasicExample, _React$Component);\n\n function BasicExample() {\n var _ref;\n\n var _temp, _this, _ret;\n\n _classCallCheck(this, BasicExample);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BasicExample.__proto__ || Object.getPrototypeOf(BasicExample)).call.apply(_ref, [this].concat(args))), _this), _this.state = {\n multiple: false\n }, _temp), _possibleConstructorReturn(_this, _ret);\n }\n\n _createClass(BasicExample, [{\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n var multiple = this.state.multiple;\n\n\n return _react2.default.createElement(\n _react.Fragment,\n null,\n _react2.default.createElement(_src.Typeahead, {\n labelKey: 'name',\n multiple: multiple,\n options: _exampleData2.default,\n placeholder: 'Choose a state...'\n }),\n _react2.default.createElement(\n _FormGroup2.default,\n null,\n _react2.default.createElement(\n _Control2.default,\n {\n checked: multiple,\n onChange: function onChange(e) {\n return _this2.setState({ multiple: e.target.checked });\n },\n type: 'checkbox' },\n 'Multi-Select'\n )\n )\n );\n }\n }]);\n\n return BasicExample;\n}(_react2.default.Component);\n/* example-end */\n\nexports.default = BasicExample;\n\n//# sourceURL=webpack:///./example/examples/BasicExample.react.js?"); /***/ })4d:T1202,exampleData = /***/ //"./example/exampleData.js":// /*!********************************!*\ !*** ./example/exampleData.js ***! \********************************/ /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { "use strict"; eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n/* eslint-disable max-len, sort-keys */\nexports.default = [{ name: 'Alabama', population: 4780127, capital: 'Montgomery', region: 'South' }, { name: 'Alaska', population: 710249, capital: 'Juneau', region: 'West' }, { name: 'Arizona', population: 6392307, capital: 'Phoenix', region: 'West' }, { name: 'Arkansas', population: 2915958, capital: 'Little Rock', region: 'South' }, { name: 'California', population: 37254503, capital: 'Sacramento', region: 'West' }, { name: 'Colorado', population: 5029324, capital: 'Denver', region: 'West' }, { name: 'Connecticut', population: 3574118, capital: 'Hartford', region: 'Northeast' }, { name: 'Delaware', population: 897936, capital: 'Dover', region: 'South' }, { name: 'Florida', population: 18804623, capital: 'Tallahassee', region: 'South' }, { name: 'Georgia', population: 9688681, capital: 'Atlanta', region: 'South' }, { name: 'Hawaii', population: 1360301, capital: 'Honolulu', region: 'West' }, { name: 'Idaho', population: 1567652, capital: 'Boise', region: 'West' }, { name: 'Illinois', population: 12831549, capital: 'Springfield', region: 'Midwest' }, { name: 'Indiana', population: 6484229, capital: 'Indianapolis', region: 'Midwest' }, { name: 'Iowa', population: 3046869, capital: 'Des Moines', region: 'Midwest' }, { name: 'Kansas', population: 2853132, capital: 'Topeka', region: 'Midwest' }, { name: 'Kentucky', population: 4339349, capital: 'Frankfort', region: 'South' }, { name: 'Louisiana', population: 4533479, capital: 'Baton Rouge', region: 'South' }, { name: 'Maine', population: 1328361, capital: 'Augusta', region: 'Northeast' }, { name: 'Maryland', population: 5773785, capital: 'Annapolis', region: 'South' }, { name: 'Massachusetts', population: 6547817, capital: 'Boston', region: 'Northeast' }, { name: 'Michigan', population: 9884129, capital: 'Lansing', region: 'Midwest' }, { name: 'Minnesota', population: 5303925, capital: 'Saint Paul', region: 'Midwest' }, { name: 'Mississippi', population: 2968103, capital: 'Jackson', region: 'South' }, { name: 'Missouri', population: 5988927, capital: 'Jefferson City', region: 'Midwest' }, { name: 'Montana', population: 989417, capital: 'Alberta', region: 'West' }, { name: 'Nebraska', population: 1826341, capital: 'Lincoln', region: 'Midwest' }, { name: 'Nevada', population: 2700691, capital: 'Carson City', region: 'West' }, { name: 'New Hampshire', population: 1316466, capital: 'Concord', region: 'Northeast' }, { name: 'New Jersey', population: 8791936, capital: 'Trenton', region: 'Northeast' }, { name: 'New Mexico', population: 2059192, capital: 'Santa Fe', region: 'West' }, { name: 'New York', population: 19378087, capital: 'Albany', region: 'Northeast' }, { name: 'North Carolina', population: 9535692, capital: 'Raleigh', region: 'South' }, { name: 'North Dakota', population: 672591, capital: 'Bismarck', region: 'Midwest' }, { name: 'Ohio', population: 11536725, capital: 'Columbus', region: 'Midwest' }, { name: 'Oklahoma', population: 3751616, capital: 'Oklahoma City', region: 'South' }, { name: 'Oregon', population: 3831073, capital: 'Salem', region: 'West' }, { name: 'Pennsylvania', population: 12702887, capital: 'Harrisburg', region: 'Northeast' }, { name: 'Rhode Island', population: 1052931, capital: 'Providence', region: 'Northeast' }, { name: 'South Carolina', population: 4625401, capital: 'Columbia', region: 'South' }, { name: 'South Dakota', population: 814191, capital: 'Pierre', region: 'Midwest' }, { name: 'Tennessee', population: 6346275, capital: 'Nashville', region: 'South' }, { name: 'Texas', population: 25146105, capital: 'Austin', region: 'South' }, { name: 'Utah', population: 2763888, capital: 'Salt Lake City', region: 'West' }, { name: 'Vermont', population: 625745, capital: 'Montpelier', region: 'Northeast' }, { name: 'Virginia', population: 8001045, capital: 'Richmond', region: 'South' }, { name: 'Washington', population: 6724543, capital: 'Olympia', region: 'West' }, { name: 'West Virginia', population: 1853011, capital: 'Charleston', region: 'South' }, { name: 'Wisconsin', population: 5687289, capital: 'Madison', region: 'West' }, { name: 'Wyoming', population: 563767, capital: 'Cheyenne', region: 'West' }];\n\n//# sourceURL=webpack:///./example/exampleData.js?"); /***/ })4e:[] 29:{"id":"e42f7b60f1048608","slug":null,"title":"React Bootstrap Typeahead","thumbnail":"fc119e2b95f554e63bd7126f5f8c62e10b9715147266139194d43bd811c1c71d","access_level":"unlisted","create_time":"$D2018-12-10T12:20:37.430Z","update_time":"$D2018-12-10T22:04:59.230Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8d652a601386fcf4","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":"starter_2024","bio":"Social development practitioner. Trying to understand our world.","following":false},"version":262,"publish_version":262,"role":null,"authored":false,"authors":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"bio":"Social development practitioner. Trying to understand our world.","following":false}],"members":[{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"React Bootstrap Typeahead","cells":[{"id":0,"value":"md`# React Bootstrap Typeahead`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`\n\nPorting over Eric Giovanola's [react-bootstrap-typeahead](https://ericgio.github.io/react-bootstrap-typeahead/).\n\nA comprehensive configuration of [examples](http://ericgio.github.io/react-bootstrap-typeahead/) is availble through the website [css](http://ericgio.github.io/react-bootstrap-typeahead/assets/examples.css) and [js](https://ericgio.github.io/react-bootstrap-typeahead/package-example.js).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`## Porting Attempt`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`Let's try to get the 'Basic Example' working. When it's all operating correctly, we should see an input field resmebling the following (but with interactivity):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`The React code provided in the Example is as follows. Now it's just a matter of getting this to render in Observable.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"class BasicExample extends React.Component {\n state = {\n multiple: true,\n };\n\n render() {\n const {multiple} = this.state;\n\n return (\n \n \n \n this.setState({multiple: e.target.checked})}\n type=\"checkbox\">\n Multi-Select\n \n \n \n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"md`## Notes on Requiring`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`Eric Giovanola's [online examples](https://ericgio.github.io/react-bootstrap-typeahead/) reference a JavaScropt file called [\\`package-example.js\\`](https://ericgio.github.io/react-bootstrap-typeahead/package-example.js). **This file not only creates the interactivity for each UI component, but it also supplies the data used to auto-populate the input fields.** I'll try to require it:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"package_example = {\n const response = await fetch(\"https://ericgio.github.io/react-bootstrap-typeahead/package-example.js\");\n const blob = await response.blob();\n return require(URL.createObjectURL(blob)).catch(() => window.package_example);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`I guess that worked? [Not sure if 'undefined' is synonomous with 'success' here]. Alternatively, I'll try loading in each specific JS function and the dataset at the end of this notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`The module is also available on npm, and was discoverable using Tom's [require tool](https://beta.observablehq.com/@tmcw/module-require-debugger).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"react_bootstrap_typeahead = require('react-bootstrap-typeahead@3.2.4/lib/index.js').catch(() => window._AsyncTypeahead2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`... Not sure if requiring both these JS will cause conflicts [?]`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`And now for the remaining JS libraries:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"prismjs = require('prismjs@1.15.0/prism.js').catch(() => window._self)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"react_github_button = require('react-github-button@0.1.11/lib/index.js').catch(() => window._extends)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"md`## Style Sheets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"bootstrap_css = html`\n

Bootstrap CSS

Bootstrap Typeahead CSS

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`## Researching Solutions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`https://beta.observablehq.com/@tmcw/state-of-react-in-observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`https://beta.observablehq.com/@tmcw/hello-htm-react`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`https://beta.observablehq.com/@midnightpineapple/adding-react-to-observable-notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"md`## Enabling React.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"React.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"{\n let parent = html`

`;\n ReactDOM.render(React.createElement('div', {}, 'Hello, world!'), parent);\n return parent;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"htm = require(\"htm@1/dist/htm.js\").then(htm => htm.bind(React.createElement))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"r = require.alias({\n react: \"react@16/umd/react.development.js\",\n \"react-dom\": \"react-dom@16/umd/react-dom.development.js\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"React = r(\"react\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"ReactDOM = r(\"react-dom\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"md`---\nHere are some of Eric's example JS functions:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null