React App

/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const chCodeConfig = { "staticMediaQuery": "not screen, (max-width: 768px)", "lineNumbers": undefined, "showCopyButton": true, "themeName": "material-darker" }; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", p: "p", code: "code" }, props.components), {CH} = _components; if (!CH) _missingMdxReference("CH", false); if (!CH.CodeSlot) _missingMdxReference("CH.CodeSlot", true); if (!CH.Slideshow) _missingMdxReference("CH.Slideshow", true); return _jsxs(_Fragment, { children: [_jsx("style", { dangerouslySetInnerHTML: { __html: "[data-ch-theme=\"material-darker\"] { --ch-t-colorScheme: dark;--ch-t-foreground: #EEFFFF;--ch-t-background: #212121;--ch-t-lighter-inlineBackground: #212121e6;--ch-t-editor-background: #212121;--ch-t-editor-foreground: #EEFFFF;--ch-t-editor-lineHighlightBackground: #00000050;--ch-t-editor-rangeHighlightBackground: #FFFFFF0d;--ch-t-editor-infoForeground: #3794FF;--ch-t-editor-selectionBackground: #61616150;--ch-t-focusBorder: #FFFFFF00;--ch-t-tab-activeBackground: #212121;--ch-t-tab-activeForeground: #FFFFFF;--ch-t-tab-inactiveBackground: #212121;--ch-t-tab-inactiveForeground: #616161;--ch-t-tab-border: #212121;--ch-t-tab-activeBorder: #80CBC4;--ch-t-editorGroup-border: #00000030;--ch-t-editorGroupHeader-tabsBackground: #212121;--ch-t-editorLineNumber-foreground: #424242;--ch-t-input-background: #2B2B2B;--ch-t-input-foreground: #EEFFFF;--ch-t-input-border: #FFFFFF10;--ch-t-icon-foreground: #C5C5C5;--ch-t-sideBar-background: #212121;--ch-t-sideBar-foreground: #616161;--ch-t-sideBar-border: #21212160;--ch-t-list-activeSelectionBackground: #212121;--ch-t-list-activeSelectionForeground: #80CBC4;--ch-t-list-hoverBackground: #212121;--ch-t-list-hoverForeground: #FFFFFF; }" } }), "\n", _jsx(_components.h1, { children: "Slideshow with preview" }), "\n", _jsxs(_components.p, { children: ["This is how to use the ", _jsx(_components.code, { children: "" }), " component. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quia! Quidem, quisquam."] }), "\n", _jsxs(CH.Slideshow, { preset: "https://codesandbox.io/s/rfdho", code: { minZoom: 0.5 }, codeConfig: chCodeConfig, editorSteps: [{ "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "createElement", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "h1", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\",", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " { ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "style", "props": { "style": { "color": "#F07178" } } }, { "content": ": { ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "color", "props": { "style": { "color": "#F07178" } } }, { "content": ": \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "teal", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" } },", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Hello React", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "4", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "h1 ", "props": { "style": { "color": "#F07178" } } }, { "content": "style", "props": { "style": { "color": "#C792EA" } } }, { "content": "={{ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "color", "props": { "style": { "color": "#F07178" } } }, { "content": ": \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "teal", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" }}>", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Hello React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "4:10", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "() {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Hello", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "h1 ", "props": { "style": { "color": "#F07178" } } }, { "content": "style", "props": { "style": { "color": "#C792EA" } } }, { "content": "={{ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "color", "props": { "style": { "color": "#F07178" } } }, { "content": ": \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "teal", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" }}>", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Hello React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "4[10:20],12:17", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "() {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Hello", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent", "props": { "style": { "color": "#FFCB6B" } } }, { "content": " />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent", "props": { "style": { "color": "#FFCB6B" } } }, { "content": " />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "14[18:29],15[18:31]", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "() {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Hello", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "4[22:29],14[18:29],15[18:31]", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Hello", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "4[22:29],7", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button", "props": { "style": { "color": "#F07178" } } }, { "content": ">{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "5,9", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button", "props": { "style": { "color": "#F07178" } } }, { "content": ">{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "7:9,13[15:35]", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " // do something", "props": { "style": { "color": "#545454", "fontStyle": "italic" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "5", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " // do something", "props": { "style": { "color": "#545454", "fontStyle": "italic" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "5,7:9", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " setCount", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "+ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "1", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "5,7:9,13,14", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " setCount", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "+ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "1", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "19", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " setCount", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "+ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "1", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " players ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " [", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Laspada", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "]", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "=\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "19,23[6:34],24,25[1:6]", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " setCount", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "+ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "1", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " players ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " [", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Laspada", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "]", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "#89DDFF" } } }, { "content": "players", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "map", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "playerName ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=>", "props": { "style": { "color": "#C792EA" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "key", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ))", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "24[38:54]", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " setCount", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "+ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "1", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " players ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " [", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Laspada", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "]", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "#89DDFF" } } }, { "content": "players", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "map", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "playerName ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=>", "props": { "style": { "color": "#C792EA" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "key", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ))", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "21:27,30,34", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " setCount", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "+ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "1", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " players ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " [", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Laspada", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "]", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyBox", "props": { "style": { "color": "#82AAFF" } } }, { "content": "() {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div ", "props": { "style": { "color": "#F07178" } } }, { "content": "style", "props": { "style": { "color": "#C792EA" } } }, { "content": "={{ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "border", "props": { "style": { "color": "#F07178" } } }, { "content": ": \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "8px solid deeppink", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" }}>", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " // TODO something", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyBox", "props": { "style": { "color": "#FFCB6B" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "#89DDFF" } } }, { "content": "players", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "map", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "playerName ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=>", "props": { "style": { "color": "#C792EA" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "key", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ))", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }, { "northPanel": { "tabs": ["src/index.js"], "active": "src/index.js", "heightRatio": 1 }, "southPanel": undefined, "files": [{ "name": "src/index.js", "focus": "21[16:27],24,30:34", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " React ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " ReactDOM ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "from ", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "react-dom", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyComponent", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "[", "props": { "style": { "color": "#89DDFF" } } }, { "content": "goalCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ", ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "setCount", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "] = ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "React", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "useState", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "2", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "#C792EA" } } }, { "content": "handleClick ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "= ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "event ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=> ", "props": { "style": { "color": "#C792EA" } } }, { "content": "{", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " setCount", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#F07178" } } }, { "content": "goalCount ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "+ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "1", "props": { "style": { "color": "#F78C6C" } } }, { "content": ")", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div", "props": { "style": { "color": "#F07178" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "button ", "props": { "style": { "color": "#F07178" } } }, { "content": "onClick", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "handleClick", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}>{", "props": { "style": { "color": "#89DDFF" } } }, { "content": "name", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "⚽", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "repeat", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(goalCount)", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " players ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " [", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Messi", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Ronaldo", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\", \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "Laspada", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "]", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "function ", "props": { "style": { "color": "#C792EA" } } }, { "content": "MyBox", "props": { "style": { "color": "#82AAFF" } } }, { "content": "({ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "children ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "}) {", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "#89DDFF", "fontStyle": "italic" } } }, { "content": " (", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "div ", "props": { "style": { "color": "#F07178" } } }, { "content": "style", "props": { "style": { "color": "#C792EA" } } }, { "content": "={{ ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "border", "props": { "style": { "color": "#F07178" } } }, { "content": ": \"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "8px solid deeppink", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\" }}>", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "#89DDFF" } } }, { "content": "children", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "#F07178" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "#C792EA" } } }, { "content": " app ", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "=", "props": { "style": { "color": "#89DDFF" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyBox", "props": { "style": { "color": "#FFCB6B" } } }, { "content": ">", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "#89DDFF" } } }, { "content": "players", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "map", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "playerName ", "props": { "style": { "color": "#EEFFFF", "fontStyle": "italic" } } }, { "content": "=>", "props": { "style": { "color": "#C792EA" } } }, { "content": " (", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "#89DDFF" } } }, { "content": "MyComponent ", "props": { "style": { "color": "#FFCB6B" } } }, { "content": "name", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} ", "props": { "style": { "color": "#89DDFF" } } }, { "content": "key", "props": { "style": { "color": "#C792EA" } } }, { "content": "={", "props": { "style": { "color": "#89DDFF" } } }, { "content": "playerName", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "} />", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ))", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "}", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "#89DDFF" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "#EEFFFF" } } }] }, { "tokens": [{ "content": "ReactDOM", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "render", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(app", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ",", "props": { "style": { "color": "#89DDFF" } } }, { "content": " document", "props": { "style": { "color": "#EEFFFF" } } }, { "content": ".", "props": { "style": { "color": "#89DDFF" } } }, { "content": "getElementById", "props": { "style": { "color": "#82AAFF" } } }, { "content": "(", "props": { "style": { "color": "#EEFFFF" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "root", "props": { "style": { "color": "#C3E88D" } } }, { "content": "\"", "props": { "style": { "color": "#89DDFF" } } }, { "content": "))", "props": { "style": { "color": "#EEFFFF" } } }] }], "lang": "jsx" }, "annotations": [] }] }], presetConfig: { "files": { "/package.json": { "code": "{\n \"name\": \"react-in-60-seconds\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"keywords\": [],\n \"main\": \"src/index.js\",\n \"dependencies\": {\n \"react\": \"17.0.2\",\n \"react-dom\": \"17.0.2\",\n \"react-scripts\": \"4.0.0\"\n },\n \"devDependencies\": {\n \"@babel/runtime\": \"7.13.8\",\n \"typescript\": \"4.1.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test --env=jsdom\",\n \"eject\": \"react-scripts eject\"\n },\n \"browserslist\": [\n \">0.2%\",\n \"not dead\",\n \"not ie <= 11\",\n \"not op_mini all\"\n ]\n}" }, "/public/index.html": { "code": "\n\n\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\tReact App\n\n\n\n\t\n\t

\n\t\n\n\n" }, "/src/index.js": { "code": "import React from \"react\";\nimport ReactDOM from \"react-dom\";\n\nfunction MyComponent({ name }) {\n const [goalCount, setCount] = React.useState(2);\n\n const handleClick = (event) => {\n setCount(goalCount + 1);\n };\n\n return (\n

\n \n {\"⚽\".repeat(goalCount)}\n

\n );\n}\n\nconst players = [\"Messi\", \"Ronaldo\", \"Laspada\"];\n\nfunction MyBox({ children }) {\n return

{children}

\n \n {\"⚽\".repeat(goalCount)}\n

\n );\n}\n\nconst players = [\"Messi\", \"Ronaldo\", \"Laspada\"];\n\nfunction MyBox({ children }) {\n return

{children}

;\n}\n\nconst app = (\n \n {players.map((playerName) => (\n \n ))}\n \n);\n\nReactDOM.render(app, document.getElementById(\"root\"));\n" }, "/.codesandbox/workspace.json": { "code": "{\n \"responsive-preview\": {\n \"Mobile\": [\n 320,\n 675\n ],\n \"Tablet\": [\n 1024,\n 765\n ],\n \"Desktop\": [\n 1400,\n 800\n ],\n \"Desktop HD\": [\n 1920,\n 1080\n ]\n }\n}" } }, "main": "/src/index.js", "entry": "/src/index.js", "environment": "create-react-app", "dependencies": { "react": "16.0.0", "react-dom": "16.0.0" }, "is_sse": false }, children: [_jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "React provides a createElement function to declare what we want to render to the DOM" })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "But instead of using createElement directly you can use JSX." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "To create a component you only need to write a function with a name that starts with a capital letter." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "Now you can use that function in JSX." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "You can assign attributes" })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "And React will pass them to the component as parameters" })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "Inside JSX, you use curly braces to wrap dynamic data" })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "In fact you can wrap any javascript expression." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "To add event listeners you pass a function to the corresponding attribute" })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "To add state to a component there's the useState function from React." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "It gives you a function to update the state." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "When you call it, React will know it needs to re-render the component." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "To render a list" })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "you can map each list item to an element using javascript." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "React only needs a unique key for each element, to find out when something changes." })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "If you want to compose components together" })] }), _jsxs(_Fragment, { children: [_jsx(CH.CodeSlot, {}), _jsx(_components.p, { children: "React passes the nested elements inside a special property called children." })] }), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {}), _jsx(_Fragment, {})] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = props.components || ({}); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { chCodeConfig, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }