{"componentChunkName":"component---gatsby-theme-mdx-deck-src-templates-deck-js","path":"/","matchPath":"/*","webpackCompilationHash":"678575607d64e07a91f9","result":{"data":{"deck":{"id":"920dde17-3e7c-5715-b5bb-140fb80b5406","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar theme = vsDark;\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  theme: theme,\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"React JSX \"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"div\", null, mdx(\"h2\", null, \"Custom component\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Must always start with capital letter\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Returns JSX\"))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\"\n  }), \"function Msg() {\\n  const name = \\\"Cool guy\\\";\\n  return (\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"1[10] file=./src/Msg.0.js subtitle=\\\"1. Must always start with capital letter\\\"\",\n    \"1[10]\": true,\n    \"file\": \"./src/Msg.0.js\",\n    \"subtitle\": \"\\\"1.\",\n    \"Must\": true,\n    \"always\": true,\n    \"start\": true,\n    \"with\": true,\n    \"capital\": true,\n    \"letter\\\"\": true\n  }), \"function Msg() {\\n  const name = \\\"Cool guy\\\";\\n  return (\\n    <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"3[10],4,5 file=./src/Msg.0.js subtitle=\\\"2. Returns JSX\\\"\",\n    \"3[10],4,5\": true,\n    \"file\": \"./src/Msg.0.js\",\n    \"subtitle\": \"\\\"2.\",\n    \"Returns\": true,\n    \"JSX\\\"\": true\n  }), \"function Msg() {\\n  const name = \\\"Cool guy\\\";\\n  return (\\n    <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=./src/Msg.0.js title=\\\"Definition\\\"\",\n    \"file\": \"./src/Msg.0.js\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg() {\\n  const name = \\\"Cool guy\\\";\\n  return (\\n    <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Usage\\\"\",\n    \"title\": \"\\\"Usage\\\"\"\n  }), \"  <Msg />\\n\")), mdx(MsgOnlyName, {\n    mdxType: \"MsgOnlyName\"\n  })), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=./src/Msg.0.js title=\\\"Definition\\\"\",\n    \"file\": \"./src/Msg.0.js\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg() {\\n  const name = \\\"Cool guy\\\";\\n  return (\\n    <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Multiple names\\\"\",\n    \"title\": \"\\\"Multiple\",\n    \"names\\\"\": true\n  }), \"  <Msg />\\n  <Msg />\\n  <Msg />\\n\")), mdx(\"div\", null, mdx(MsgOnlyName, {\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    mdxType: \"MsgOnlyName\"\n  })))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=./src/Msg.0.js title=\\\"Definition\\\"\",\n    \"file\": \"./src/Msg.0.js\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg() {\\n  const name = \\\"Cool guy\\\";\\n  return (\\n    <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Multiple names\\\"\",\n    \"title\": \"\\\"Multiple\",\n    \"names\\\"\": true\n  }), \"  <Msg />\\n  <Msg />\\n  <Msg />\\n\")), mdx(\"div\", null, mdx(MsgOnlyName, {\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    mdxType: \"MsgOnlyName\"\n  }))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=./src/Msg.0.1.js title=\\\"Name Change\\\"\",\n    \"file\": \"./src/Msg.0.1.js\",\n    \"title\": \"\\\"Name\",\n    \"Change\\\"\": true\n  }), \"function Msg() {\\n  const name = \\\"Kenshiro\\\";\\n  return (\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Multiple names\\\"\",\n    \"title\": \"\\\"Multiple\",\n    \"names\\\"\": true\n  }), \"  <Msg />\\n  <Msg />\\n  <Msg />\\n\")), mdx(\"div\", null, mdx(MsgOnlyName, {\n    name: \"Kenshiro\",\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    name: \"Kenshiro\",\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    name: \"Kenshiro\",\n    mdxType: \"MsgOnlyName\"\n  })))), mdx(\"hr\", null), mdx(\"h1\", null, \"React Props\"), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=./src/Msg.0.js\",\n    \"file\": \"./src/Msg.0.js\"\n  }), \"function Msg() {\\n  const name = \\\"Cool guy\\\";\\n  return (\\n    <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.1.js\\\"\",\n    \"file\": \"\\\"./src/Msg.1.js\\\"\"\n  }), \"function Msg(props) {\\n  {/* const name = \\\"Cool guy\\\"; */}\\n return (\\n     <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n );\\n}\\n\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    title: \"React Props\",\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=./src/Msg.0.1.js subtitle=\\\"❌ Props\\\"\",\n    \"file\": \"./src/Msg.0.1.js\",\n    \"subtitle\": \"\\\"❌\",\n    \"Props\\\"\": true\n  }), \"function Msg() {\\n  const name = \\\"Kenshiro\\\";\\n  return (\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"1[14:19],4[32:41] file=\\\"./src/Msg.1.js\\\" subtitle=\\\"✔️ Props\\\"\",\n    \"1[14:19],4[32:41]\": true,\n    \"file\": \"\\\"./src/Msg.1.js\\\"\",\n    \"subtitle\": \"\\\"✔️\",\n    \"Props\\\"\": true\n  }), \"function Msg(props) {\\n  {/* const name = \\\"Cool guy\\\"; */}\\n return (\\n     <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n );\\n}\\n\")))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.1.1.js\\\" title=\\\"Definition\\\"\",\n    \"file\": \"\\\"./src/Msg.1.1.js\\\"\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg(props) {\\n  return (\\n      <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Usage\\\"\",\n    \"title\": \"\\\"Usage\\\"\"\n  }), \"  <Msg name=\\\"Kenshiro\\\"/>\\n\")), mdx(MsgOnlyName, {\n    name: \"Kenshiro\",\n    mdxType: \"MsgOnlyName\"\n  })), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.1.1.js\\\" title=\\\"Definition\\\"\",\n    \"file\": \"\\\"./src/Msg.1.1.js\\\"\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg(props) {\\n  return (\\n      <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Multi Usage\\\" subtitle=\\\"⬆️⬆️⬆️ Reusablity\\\"\",\n    \"title\": \"\\\"Multi\",\n    \"Usage\\\"\": true,\n    \"subtitle\": \"\\\"⬆️⬆️⬆️\",\n    \"Reusablity\\\"\": true\n  }), \"  <Msg name=\\\"Kenshiro\\\"/>\\n  <Msg name=\\\"Zoro\\\"/>\\n  <Msg name=\\\"Sanji\\\"/>\\n\")), mdx(\"div\", null, mdx(MsgOnlyName, {\n    name: \"Kenshiro\",\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    name: \"Zoro\",\n    mdxType: \"MsgOnlyName\"\n  }), mdx(MsgOnlyName, {\n    name: \"Sanji\",\n    mdxType: \"MsgOnlyName\"\n  })))), mdx(\"hr\", null), mdx(\"h1\", null, \"React Multi Props\"), mdx(\"hr\", null), mdx(Msg, {\n    name: \"Darth vader\",\n    pic: \"https://filestore.community.support.microsoft.com/api/images/3c4dc47e-3f3e-4cbe-88a3-ee9c0676a652?upload=true\",\n    mdxType: \"Msg\"\n  }), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.js\\\" title=\\\"Definition\\\"\",\n    \"file\": \"\\\"./src/Msg.2.js\\\"\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg(props) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={props.pic} alt={props.name} />\\n      <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.js\\\" title=\\\"Definition\\\" 1[14:18],4[30:35,46:51],5[33:38]\",\n    \"file\": \"\\\"./src/Msg.2.js\\\"\",\n    \"title\": \"\\\"Definition\\\"\",\n    \"1[14:18],4[30:35,46:51],5[33:38]\": true\n  }), \"function Msg(props) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={props.pic} alt={props.name} />\\n      <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\"))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.js\\\" title=\\\"Definition\\\"\",\n    \"file\": \"\\\"./src/Msg.2.js\\\"\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg(props) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={props.pic} alt={props.name} />\\n      <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Usage\\\"\",\n    \"title\": \"\\\"Usage\\\"\"\n  }), \"<Msg \\n  name={\\\"Darth vader\\\"}\\n  pic={\\\"https://cutt.ly/URcwCa2\\\"}/>\\n\")), mdx(Msg, {\n    name: \"Darth vader\",\n    pic: \"https://filestore.community.support.microsoft.com/api/images/3c4dc47e-3f3e-4cbe-88a3-ee9c0676a652?upload=true\",\n    mdxType: \"Msg\"\n  }))), mdx(\"hr\", null), mdx(\"h1\", null, \"Clean code\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Destructuring props\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.js\\\" subtitle=\\\"❌ Destructring\\\"\",\n    \"file\": \"\\\"./src/Msg.2.js\\\"\",\n    \"subtitle\": \"\\\"❌\",\n    \"Destructring\\\"\": true\n  }), \"function Msg(props) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={props.pic} alt={props.name} />\\n      <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.1.js\\\" subtitle=\\\"✔️ Destructring\\\"\",\n    \"file\": \"\\\"./src/Msg.2.1.js\\\"\",\n    \"subtitle\": \"\\\"✔️\",\n    \"Destructring\\\"\": true\n  }), \"function Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.js\\\" 1[14:18],4[30:35,46:51],5[33:38] subtitle=\\\" ❌ Repeated props\\\"\",\n    \"file\": \"\\\"./src/Msg.2.js\\\"\",\n    \"1[14:18],4[30:35,46:51],5[33:38]\": true,\n    \"subtitle\": \"\\\"\",\n    \"❌\": true,\n    \"Repeated\": true,\n    \"props\\\"\": true\n  }), \"function Msg(props) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={props.pic} alt={props.name} />\\n      <h1 className=\\\"name\\\">Hi, {props.name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.1.js\\\" 1[14:26],4[30:33,40:44],5[33:37] subtitle=\\\"✔️ Clean code \\\"\",\n    \"file\": \"\\\"./src/Msg.2.1.js\\\"\",\n    \"1[14:26],4[30:33,40:44],5[33:37]\": true,\n    \"subtitle\": \"\\\"✔️\",\n    \"Clean\": true,\n    \"code\": true,\n    \"\\\"\": true\n  }), \"function Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [vsDark, oceanicNext],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/Msg.2.1.js\\\" title=\\\"Definition\\\"\",\n    \"file\": \"\\\"./src/Msg.2.1.js\\\"\",\n    \"title\": \"\\\"Definition\\\"\"\n  }), \"function Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"title=\\\"Usage\\\"\",\n    \"title\": \"\\\"Usage\\\"\"\n  }), \"<Msg \\n  name={\\\"Darth vader\\\"}\\n  pic={\\\"https://cutt.ly/URcwCa2\\\"}/>\\n\")), mdx(Msg, {\n    name: \"Darth vader\",\n    pic: \"https://filestore.community.support.microsoft.com/api/images/3c4dc47e-3f3e-4cbe-88a3-ee9c0676a652?upload=true\",\n    mdxType: \"Msg\"\n  }))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/users-map.0.js\\\" title=\\\"List names\\\"\",\n    \"file\": \"\\\"./src/users-map.0.js\\\"\",\n    \"title\": \"\\\"List\",\n    \"names\\\"\": true\n  }), \"function App() {\\n  return (\\n    <Msg\\n      name={\\\"Darth vader\\\"}\\n      pic={\\\"https://cutt.ly/URcwCa2\\\"}\\n    />\\n  );\\n}\\n\\nfunction Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/users-map.0.1.js\\\" title=\\\"List names\\\"\",\n    \"file\": \"\\\"./src/users-map.0.1.js\\\"\",\n    \"title\": \"\\\"List\",\n    \"names\\\"\": true\n  }), \"function App() {\\n  const names = [\\n    {\\n      name: \\\"Darth vader\\\",\\n      pic: \\\"https://cutt.ly/URcwCa2\\\",\\n    },\\n  ];\\n\\n  return (\\n    <Msg\\n      name={\\\"Darth vader\\\"}\\n      pic={\\\"https://cutt.ly/URcwCa2\\\"}\\n    />\\n  );\\n}\\n\\nfunction Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/users-map.0.2.js\\\" title=\\\"List users\\\"\",\n    \"file\": \"\\\"./src/users-map.0.2.js\\\"\",\n    \"title\": \"\\\"List\",\n    \"users\\\"\": true\n  }), \"function App() {\\n  const users = [\\n    {\\n      name: \\\"Darth vader\\\",\\n      pic: \\\"https://cutt.ly/URcwCa2\\\",\\n    },\\n    {\\n      name: \\\"Zoro\\\",\\n      pic: \\\"https://cutt.ly/zRcDZyn\\\",\\n    },\\n    {\\n      name: \\\"Sanji\\\",\\n      pic: \\\"https://cutt.ly/8RcD88W\\\",\\n    },\\n  ];\\n\\n  return (\\n    <Msg\\n      name={\\\"Darth vader\\\"}\\n      pic={\\\"https://cutt.ly/URcwCa2\\\"}\\n    />\\n  );\\n}\\n\\nfunction Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/users-map.0.3.js\\\" title=\\\"List names\\\"\",\n    \"file\": \"\\\"./src/users-map.0.3.js\\\"\",\n    \"title\": \"\\\"List\",\n    \"names\\\"\": true\n  }), \"function App() {\\n  const users = [\\n    {\\n      name: \\\"Darth vader\\\",\\n      pic: \\\"https://cutt.ly/URcwCa2\\\",\\n    },\\n    {\\n      name: \\\"Zoro\\\",\\n      pic: \\\"https://cutt.ly/zRcDZyn\\\",\\n    },\\n    {\\n      name: \\\"Sanji\\\",\\n      pic: \\\"https://cutt.ly/8RcD88W\\\",\\n    },\\n  ];\\n\\n  return (\\n    <div>\\n      {users.map((user) => (\\n        <Msg\\n          name={\\\"Darth vader\\\"}\\n          pic={\\\"https://cutt.ly/URcwCa2\\\"}\\n        />\\n      ))}\\n    </div>\\n  );\\n}\\n\\nfunction Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/users-map.0.4.js\\\" title=\\\"List names\\\"\",\n    \"file\": \"\\\"./src/users-map.0.4.js\\\"\",\n    \"title\": \"\\\"List\",\n    \"names\\\"\": true\n  }), \"function App() {\\n  const users = [\\n    {\\n      name: \\\"Darth vader\\\",\\n      pic: \\\"https://cutt.ly/URcwCa2\\\",\\n    },\\n    {\\n      name: \\\"Zoro\\\",\\n      pic: \\\"https://cutt.ly/zRcDZyn\\\",\\n    },\\n    {\\n      name: \\\"Sanji\\\",\\n      pic: \\\"https://cutt.ly/8RcD88W\\\",\\n    },\\n  ];\\n\\n  return (\\n    <div>\\n      {users.map((user) => (\\n        <Msg name={user.name} pic={user.pic} />\\n      ))}\\n    </div>\\n  );\\n}\\n\\nfunction Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-js\",\n    \"metastring\": \"file=\\\"./src/users-map.0.5.js\\\" title=\\\"List names - Destructring\\\"\",\n    \"file\": \"\\\"./src/users-map.0.5.js\\\"\",\n    \"title\": \"\\\"List\",\n    \"names\": true,\n    \"-\": true,\n    \"Destructring\\\"\": true\n  }), \"function App() {\\n  const users = [\\n    {\\n      name: \\\"Darth vader\\\",\\n      pic: \\\"https://cutt.ly/URcwCa2\\\",\\n    },\\n    {\\n      name: \\\"Zoro\\\",\\n      pic: \\\"https://cutt.ly/zRcDZyn\\\",\\n    },\\n    {\\n      name: \\\"Sanji\\\",\\n      pic: \\\"https://cutt.ly/8RcD88W\\\",\\n    },\\n  ];\\n\\n  return (\\n    <div>\\n      {users.map(({ name, pic }) => (\\n        <Msg name={name} pic={pic} />\\n      ))}\\n    </div>\\n  );\\n}\\n\\nfunction Msg({ name, pic }) {\\n  return (\\n    <div>\\n      <img height=\\\"300\\\" src={pic} alt={name} />\\n      <h1 className=\\\"name\\\">Hi, {name}\\uD83D\\uDE0A!!!</h1>\\n    </div>\\n  );\\n}\\n\"))));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/*","isCreatedByStatefulCreatePages":false,"id":"920dde17-3e7c-5715-b5bb-140fb80b5406","slug":"","title":"Custom component"}}}