[{"_1":2,"_1347":-5,"_1348":-5},"loaderData",{"_3":4,"_804":805,"_1099":1100,"_1346":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_334":335,"_342":343,"_344":345,"_399":347,"_400":349,"_350":351,"_401":402,"_416":417,"_441":-5,"_442":-5,"_443":444},"userId",{"_7":8,"_9":10},"id","ln2iea2foiftk0qkncqfo4z0","type","cookie.randomId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.js-hello-world/01.problem.hello","relativePath","exercises/01.js-hello-world/01.problem.hello",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.js-hello-world/01.solution.hello","exercises/01.js-hello-world/01.solution.hello",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.js-hello-world/02.problem.root","exercises/01.js-hello-world/02.problem.root",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.js-hello-world/02.solution.root","exercises/01.js-hello-world/02.solution.root",{"_20":39,"_22":40,"_24":41},"02.01.problem","/myapp/workshop-content/exercises/02.raw-react/01.problem.elements","exercises/02.raw-react/01.problem.elements",{"_20":43,"_22":44,"_24":45},"02.01.solution","/myapp/workshop-content/exercises/02.raw-react/01.solution.elements","exercises/02.raw-react/01.solution.elements",{"_20":47,"_22":48,"_24":49},"02.02.problem","/myapp/workshop-content/exercises/02.raw-react/02.problem.nesting","exercises/02.raw-react/02.problem.nesting",{"_20":51,"_22":52,"_24":53},"02.02.solution","/myapp/workshop-content/exercises/02.raw-react/02.solution.nesting","exercises/02.raw-react/02.solution.nesting",{"_20":55,"_22":56,"_24":57},"02.03.problem","/myapp/workshop-content/exercises/02.raw-react/03.problem.deep-nesting","exercises/02.raw-react/03.problem.deep-nesting",{"_20":59,"_22":60,"_24":61},"02.03.solution","/myapp/workshop-content/exercises/02.raw-react/03.solution.deep-nesting","exercises/02.raw-react/03.solution.deep-nesting",{"_20":63,"_22":64,"_24":65},"03.01.problem","/myapp/workshop-content/exercises/03.using-jsx/01.problem.compiler","exercises/03.using-jsx/01.problem.compiler",{"_20":67,"_22":68,"_24":69},"03.01.solution","/myapp/workshop-content/exercises/03.using-jsx/01.solution.compiler","exercises/03.using-jsx/01.solution.compiler",{"_20":71,"_22":72,"_24":73},"03.02.problem","/myapp/workshop-content/exercises/03.using-jsx/02.problem.interpolation","exercises/03.using-jsx/02.problem.interpolation",{"_20":75,"_22":76,"_24":77},"03.02.solution","/myapp/workshop-content/exercises/03.using-jsx/02.solution.interpolation","exercises/03.using-jsx/02.solution.interpolation",{"_20":79,"_22":80,"_24":81},"03.03.problem","/myapp/workshop-content/exercises/03.using-jsx/03.problem.spread","exercises/03.using-jsx/03.problem.spread",{"_20":83,"_22":84,"_24":85},"03.03.solution","/myapp/workshop-content/exercises/03.using-jsx/03.solution.spread","exercises/03.using-jsx/03.solution.spread",{"_20":87,"_22":88,"_24":89},"03.04.problem","/myapp/workshop-content/exercises/03.using-jsx/04.problem.nesting","exercises/03.using-jsx/04.problem.nesting",{"_20":91,"_22":92,"_24":93},"03.04.solution","/myapp/workshop-content/exercises/03.using-jsx/04.solution.nesting","exercises/03.using-jsx/04.solution.nesting",{"_20":95,"_22":96,"_24":97},"03.05.problem","/myapp/workshop-content/exercises/03.using-jsx/05.problem.fragments","exercises/03.using-jsx/05.problem.fragments",{"_20":99,"_22":100,"_24":101},"03.05.solution","/myapp/workshop-content/exercises/03.using-jsx/05.solution.fragments","exercises/03.using-jsx/05.solution.fragments",{"_20":103,"_22":104,"_24":105},"04.01.problem","/myapp/workshop-content/exercises/04.components/01.problem.function","exercises/04.components/01.problem.function",{"_20":107,"_22":108,"_24":109},"04.01.solution","/myapp/workshop-content/exercises/04.components/01.solution.function","exercises/04.components/01.solution.function",{"_20":111,"_22":112,"_24":113},"04.02.problem","/myapp/workshop-content/exercises/04.components/02.problem.raw","exercises/04.components/02.problem.raw",{"_20":115,"_22":116,"_24":117},"04.02.solution","/myapp/workshop-content/exercises/04.components/02.solution.raw","exercises/04.components/02.solution.raw",{"_20":119,"_22":120,"_24":121},"04.03.problem","/myapp/workshop-content/exercises/04.components/03.problem.jsx","exercises/04.components/03.problem.jsx",{"_20":123,"_22":124,"_24":125},"04.03.solution","/myapp/workshop-content/exercises/04.components/03.solution.jsx","exercises/04.components/03.solution.jsx",{"_20":127,"_22":128,"_24":129},"04.04.problem","/myapp/workshop-content/exercises/04.components/04.problem.props","exercises/04.components/04.problem.props",{"_20":131,"_22":132,"_24":133},"04.04.solution","/myapp/workshop-content/exercises/04.components/04.solution.props","exercises/04.components/04.solution.props",{"_20":135,"_22":136,"_24":137},"05.01.problem","/myapp/workshop-content/exercises/05.typescript/01.problem.props","exercises/05.typescript/01.problem.props",{"_20":139,"_22":140,"_24":141},"05.01.solution","/myapp/workshop-content/exercises/05.typescript/01.solution.props","exercises/05.typescript/01.solution.props",{"_20":143,"_22":144,"_24":145},"05.02.problem","/myapp/workshop-content/exercises/05.typescript/02.problem.narrow","exercises/05.typescript/02.problem.narrow",{"_20":147,"_22":148,"_24":149},"05.02.solution","/myapp/workshop-content/exercises/05.typescript/02.solution.narrow","exercises/05.typescript/02.solution.narrow",{"_20":151,"_22":152,"_24":153},"05.03.problem","/myapp/workshop-content/exercises/05.typescript/03.problem.derive","exercises/05.typescript/03.problem.derive",{"_20":155,"_22":156,"_24":157},"05.03.solution","/myapp/workshop-content/exercises/05.typescript/03.solution.derive","exercises/05.typescript/03.solution.derive",{"_20":159,"_22":160,"_24":161},"05.04.problem","/myapp/workshop-content/exercises/05.typescript/04.problem.default-props","exercises/05.typescript/04.problem.default-props",{"_20":163,"_22":164,"_24":165},"05.04.solution","/myapp/workshop-content/exercises/05.typescript/04.solution.default-props","exercises/05.typescript/04.solution.default-props",{"_20":167,"_22":168,"_24":169},"05.05.problem","/myapp/workshop-content/exercises/05.typescript/05.problem.function-types","exercises/05.typescript/05.problem.function-types",{"_20":171,"_22":172,"_24":173},"05.05.solution","/myapp/workshop-content/exercises/05.typescript/05.solution.function-types","exercises/05.typescript/05.solution.function-types",{"_20":175,"_22":176,"_24":177},"05.06.problem","/myapp/workshop-content/exercises/05.typescript/06.problem.satisfies","exercises/05.typescript/06.problem.satisfies",{"_20":179,"_22":180,"_24":181},"05.06.solution","/myapp/workshop-content/exercises/05.typescript/06.solution.satisfies","exercises/05.typescript/06.solution.satisfies",{"_20":183,"_22":184,"_24":185},"06.01.problem","/myapp/workshop-content/exercises/06.styling/01.problem.style","exercises/06.styling/01.problem.style",{"_20":187,"_22":188,"_24":189},"06.01.solution","/myapp/workshop-content/exercises/06.styling/01.solution.style","exercises/06.styling/01.solution.style",{"_20":191,"_22":192,"_24":193},"06.02.problem","/myapp/workshop-content/exercises/06.styling/02.problem.component","exercises/06.styling/02.problem.component",{"_20":195,"_22":196,"_24":197},"06.02.solution","/myapp/workshop-content/exercises/06.styling/02.solution.component","exercises/06.styling/02.solution.component",{"_20":199,"_22":200,"_24":201},"06.03.problem","/myapp/workshop-content/exercises/06.styling/03.problem.size-prop","exercises/06.styling/03.problem.size-prop",{"_20":203,"_22":204,"_24":205},"06.03.solution","/myapp/workshop-content/exercises/06.styling/03.solution.size-prop","exercises/06.styling/03.solution.size-prop",{"_20":207,"_22":208,"_24":209},"07.01.problem","/myapp/workshop-content/exercises/07.forms/01.problem.form","exercises/07.forms/01.problem.form",{"_20":211,"_22":212,"_24":213},"07.01.solution","/myapp/workshop-content/exercises/07.forms/01.solution.form","exercises/07.forms/01.solution.form",{"_20":215,"_22":216,"_24":217},"07.02.problem","/myapp/workshop-content/exercises/07.forms/02.problem.action","exercises/07.forms/02.problem.action",{"_20":219,"_22":220,"_24":221},"07.02.solution","/myapp/workshop-content/exercises/07.forms/02.solution.action","exercises/07.forms/02.solution.action",{"_20":223,"_22":224,"_24":225},"07.03.problem","/myapp/workshop-content/exercises/07.forms/03.problem.types","exercises/07.forms/03.problem.types",{"_20":227,"_22":228,"_24":229},"07.03.solution","/myapp/workshop-content/exercises/07.forms/03.solution.types","exercises/07.forms/03.solution.types",{"_20":231,"_22":232,"_24":233},"07.04.problem","/myapp/workshop-content/exercises/07.forms/04.problem.submit","exercises/07.forms/04.problem.submit",{"_20":235,"_22":236,"_24":237},"07.04.solution","/myapp/workshop-content/exercises/07.forms/04.solution.submit","exercises/07.forms/04.solution.submit",{"_20":239,"_22":240,"_24":241},"07.05.problem","/myapp/workshop-content/exercises/07.forms/05.problem.action","exercises/07.forms/05.problem.action",{"_20":243,"_22":244,"_24":245},"07.05.solution","/myapp/workshop-content/exercises/07.forms/05.solution.action","exercises/07.forms/05.solution.action",{"_20":247,"_22":248,"_24":249},"08.01.problem","/myapp/workshop-content/exercises/08.inputs/01.problem.checkbox","exercises/08.inputs/01.problem.checkbox",{"_20":251,"_22":252,"_24":253},"08.01.solution","/myapp/workshop-content/exercises/08.inputs/01.solution.checkbox","exercises/08.inputs/01.solution.checkbox",{"_20":255,"_22":256,"_24":257},"08.02.problem","/myapp/workshop-content/exercises/08.inputs/02.problem.select","exercises/08.inputs/02.problem.select",{"_20":259,"_22":260,"_24":261},"08.02.solution","/myapp/workshop-content/exercises/08.inputs/02.solution.select","exercises/08.inputs/02.solution.select",{"_20":263,"_22":264,"_24":265},"08.03.problem","/myapp/workshop-content/exercises/08.inputs/03.problem.radio","exercises/08.inputs/03.problem.radio",{"_20":267,"_22":268,"_24":269},"08.03.solution","/myapp/workshop-content/exercises/08.inputs/03.solution.radio","exercises/08.inputs/03.solution.radio",{"_20":271,"_22":272,"_24":273},"08.04.problem","/myapp/workshop-content/exercises/08.inputs/04.problem.hidden","exercises/08.inputs/04.problem.hidden",{"_20":275,"_22":276,"_24":277},"08.04.solution","/myapp/workshop-content/exercises/08.inputs/04.solution.hidden","exercises/08.inputs/04.solution.hidden",{"_20":279,"_22":280,"_24":281},"08.05.problem","/myapp/workshop-content/exercises/08.inputs/05.problem.default-value","exercises/08.inputs/05.problem.default-value",{"_20":283,"_22":284,"_24":285},"08.05.solution","/myapp/workshop-content/exercises/08.inputs/05.solution.default-value","exercises/08.inputs/05.solution.default-value",{"_20":287,"_22":288,"_24":289},"09.01.problem","/myapp/workshop-content/exercises/09.errors/01.problem.composition","exercises/09.errors/01.problem.composition",{"_20":291,"_22":292,"_24":293},"09.01.solution","/myapp/workshop-content/exercises/09.errors/01.solution.composition","exercises/09.errors/01.solution.composition",{"_20":295,"_22":296,"_24":297},"09.02.problem","/myapp/workshop-content/exercises/09.errors/02.problem.show-boundary","exercises/09.errors/02.problem.show-boundary",{"_20":299,"_22":300,"_24":301},"09.02.solution","/myapp/workshop-content/exercises/09.errors/02.solution.show-boundary","exercises/09.errors/02.solution.show-boundary",{"_20":303,"_22":304,"_24":305},"09.03.problem","/myapp/workshop-content/exercises/09.errors/03.problem.reset","exercises/09.errors/03.problem.reset",{"_20":307,"_22":308,"_24":309},"09.03.solution","/myapp/workshop-content/exercises/09.errors/03.solution.reset","exercises/09.errors/03.solution.reset",{"_20":311,"_22":312,"_24":313},"10.01.problem","/myapp/workshop-content/exercises/10.arrays/01.problem.key-prop","exercises/10.arrays/01.problem.key-prop",{"_20":315,"_22":316,"_24":317},"10.01.solution","/myapp/workshop-content/exercises/10.arrays/01.solution.key-prop","exercises/10.arrays/01.solution.key-prop",{"_20":319,"_22":320,"_24":321},"10.02.problem","/myapp/workshop-content/exercises/10.arrays/02.problem.focus-state","exercises/10.arrays/02.problem.focus-state",{"_20":323,"_22":324,"_24":325},"10.02.solution","/myapp/workshop-content/exercises/10.arrays/02.solution.focus-state","exercises/10.arrays/02.solution.focus-state",{"_20":327,"_22":328,"_24":329},"10.03.problem","/myapp/workshop-content/exercises/10.arrays/03.problem.key-reset","exercises/10.arrays/03.problem.key-reset",{"_20":331,"_22":332,"_24":333},"10.03.solution","/myapp/workshop-content/exercises/10.arrays/03.solution.key-reset","exercises/10.arrays/03.solution.key-reset","repoUpdates",{"_336":16,"_337":338,"_339":338,"_340":341},"updatesAvailable","localCommit","45d5fc5","remoteCommit","diffLink","https://github.com/undefined/undefined/compare/45d5fc5...45d5fc5","unmutedNotifications",[],"workshopConfig",{"_346":347,"_348":349,"_350":351,"_357":358,"_375":376,"_377":378,"_379":380,"_381":382,"_385":386,"_391":392,"_395":396,"_397":398},"title","React Fundamentals ⚛","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":352,"_353":354,"_355":356},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370,"_371":372},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-fundamentals","discordChannelId","1285244676286189569","discordTags",[373,374],"1285246046498328627","1285245484432228375","onboardingVideo","https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-fundamentals","githubRoot","https://github.com/epicweb-dev/react-fundamentals/tree/main","stackBlitzConfig",{"_383":384},"view","editor","forms",{"_387":388,"_389":390},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_393":394},"enabled",true,"initialRoute","/","notifications",[],"workshopTitle","workshopSubtitle","ENV",{"_403":404,"_405":406,"_407":378,"_408":380,"_409":394,"_410":411,"_412":413,"_414":415},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.27.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","b1e082c93a0e4e3ee6ec77eaef5314ae2978f7d455e4add56e040eb7f9db48da","requestInfo",{"_418":419,"_420":421,"_422":423,"_424":425,"_426":425,"_427":428,"_435":436,"_437":438,"_439":396,"_440":394},"protocol","http:","hostname","fundamentals.epicreact.dev","port","","origin","http://fundamentals.epicreact.dev","domain","hints",{"_429":430,"_431":432,"_433":434},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/05/finished","session",{"_429":-5},"separator","online","toast","confettiId","presence",{"_445":446},"users",[447,465,475,484,491,498,505,512,520,527,534,541,549,556,564,571,578,587,594,601,608,615,622,629,636,643,650,657,664,671,679,686,693,699,704,710,716,720,725,732,738,741,747,753,757,761,767,773,778,784,790,793,797,800],{"_7":448,"_449":394,"_450":451,"_452":453,"_20":454,"_455":456},"d055f5ff-5b0f-4e23-aa06-e2f72a8bfdce","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/ea13d825e7b0b507d0a158a84c74f335?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/ea13d825e7b0b507d0a158a84c74f335?size=512&default=identicon","Rodrigo","location",{"_399":457,"_424":458,"_389":459},"MCP Fundamentals 🧱","http://localhost:5639",{"_9":460,"_461":462,"_463":464},"solution","exerciseNumber",4,"stepNumber",3,{"_7":466,"_449":394,"_450":467,"_452":468,"_20":469,"_455":470},"6f5162db-3c7f-48e1-90c3-902bdfaf2659","https://avatars.githubusercontent.com/u/52554666?v=4&size=64","https://avatars.githubusercontent.com/u/52554666?v=4&size=512","Ken Johnson",{"_399":471,"_424":458,"_389":472},"Advanced React Patterns 🤯",{"_9":473,"_461":462,"_463":474},"problem",2,{"_7":476,"_449":394,"_450":477,"_452":478,"_20":479,"_455":480},"77776154-c4b0-4b55-b646-e1ed02bce330","https://www.gravatar.com/avatar/0c16563e60a4c235053e53a35dca346d?size=64&default=identicon","https://www.gravatar.com/avatar/0c16563e60a4c235053e53a35dca346d?size=512&default=identicon","Daniel Alonso Mora",{"_399":481,"_424":458,"_389":482},"React Hooks 🎣",{"_9":473,"_461":483,"_463":483},1,{"_7":485,"_449":394,"_450":486,"_452":487,"_20":488,"_455":489},"79d6b89f-4e41-4078-bf5b-9efaff39a2ef","https://www.gravatar.com/avatar/fbc9710307e5e549cda78191d6e449d7?size=64&default=identicon","https://www.gravatar.com/avatar/fbc9710307e5e549cda78191d6e449d7?size=512&default=identicon","Bassam",{"_399":457,"_424":458,"_389":490},{"_461":483},{"_7":492,"_449":394,"_450":493,"_452":494,"_20":495,"_455":496},"3137be2a-0a92-42df-b888-9c1b347de35b","https://cdn.discordapp.com/avatars/469326559371722755/00f1754dfbd1c0d7c21ad1f3aa7eb3e5.png?size=64","https://cdn.discordapp.com/avatars/469326559371722755/00f1754dfbd1c0d7c21ad1f3aa7eb3e5.png?size=512","Fernando Tomazelli Feres",{"_399":481,"_424":458,"_389":497},{"_9":473,"_461":483,"_463":464},{"_7":499,"_449":394,"_450":500,"_452":501,"_20":502,"_455":503},"e4972ded-cc30-4b76-85f0-26d86b7fc0be","https://www.gravatar.com/avatar/7c34f6c38c80edad8638c77041350224?size=64&default=identicon","https://www.gravatar.com/avatar/7c34f6c38c80edad8638c77041350224?size=512&default=identicon","Nitin",{"_399":457,"_424":458,"_389":504},{"_9":473,"_461":462,"_463":483},{"_7":506,"_449":394,"_450":507,"_452":508,"_20":509,"_455":510},"c8992ed7-3085-4335-ac2f-570b2f82b8e6","https://avatars.githubusercontent.com/u/126622740?v=4&size=64","https://avatars.githubusercontent.com/u/126622740?v=4&size=512","PartnerCoDev",{"_399":457,"_424":458,"_389":511},{"_9":473,"_461":462,"_463":483},{"_7":513,"_449":394,"_450":514,"_452":515,"_20":516,"_455":517},"b795f896-4d6d-4ac8-bb37-067bffb1fd87","https://www.gravatar.com/avatar/e8de7917c06c10771b9dceede64ef9ef?size=64&default=identicon","https://www.gravatar.com/avatar/e8de7917c06c10771b9dceede64ef9ef?size=512&default=identicon","Victor Chukhry",{"_399":457,"_424":518,"_389":519},"http://localhost:5642",{"_9":460,"_461":462,"_463":464},{"_7":521,"_449":394,"_450":522,"_452":523,"_20":524,"_455":525},"5cd536b2-29c1-4369-9fad-e46e0e58c5e8","https://www.gravatar.com/avatar/2b121f98f689f690c02074304c5e06b1?size=64&default=identicon","https://www.gravatar.com/avatar/2b121f98f689f690c02074304c5e06b1?size=512&default=identicon","Francis",{"_399":457,"_424":458,"_389":526},{"_9":460,"_461":462,"_463":464},{"_7":528,"_449":394,"_450":529,"_452":530,"_20":531,"_455":532},"4b6ef8c7-7402-45ab-9d8d-6f17588ae341","https://www.gravatar.com/avatar/cb61853e7a8d4bf17a413c169ccf870a?size=64&default=identicon","https://www.gravatar.com/avatar/cb61853e7a8d4bf17a413c169ccf870a?size=512&default=identicon","Matt",{"_399":457,"_424":458,"_389":533},{"_9":473,"_461":462,"_463":464},{"_7":535,"_449":394,"_450":536,"_452":537,"_20":538,"_455":539},"80808a0d-aee0-4e06-acd1-c787ecdb5179","https://avatars.githubusercontent.com/u/10428082?v=4&size=64","https://avatars.githubusercontent.com/u/10428082?v=4&size=512","Florian Bienefelt",{"_399":457,"_424":458,"_389":540},{"_461":462},{"_7":542,"_449":394,"_450":543,"_452":544,"_20":545,"_455":546},"d0ce826b-58a3-4ac8-8917-6918283137f9","https://www.gravatar.com/avatar/a7173a8875a257f164f204eb574ff216?size=64&default=identicon","https://www.gravatar.com/avatar/a7173a8875a257f164f204eb574ff216?size=512&default=identicon","Kelvin",{"_399":457,"_424":547,"_389":548},"http://localhost:5640",{"_461":462},{"_7":550,"_449":394,"_450":551,"_452":552,"_20":553,"_455":554},"5dda7a6b-8948-4810-b87c-d365f36e5041","https://avatars.githubusercontent.com/u/25672810?v=4&size=64","https://avatars.githubusercontent.com/u/25672810?v=4&size=512","Pedro Costa",{"_399":457,"_424":458,"_389":555},{"_9":473,"_461":462,"_463":483},{"_7":557,"_449":394,"_450":558,"_452":559,"_20":560,"_455":561},"5a6d0345-9e5c-4cb6-bea4-fbecb16bc005","https://www.gravatar.com/avatar/71a4a3019d4f84e349dc9b0216898598?size=64&default=identicon","https://www.gravatar.com/avatar/71a4a3019d4f84e349dc9b0216898598?size=512&default=identicon","Benjamin",{"_399":457,"_424":562,"_389":563},"http://localhost:5641",{"_9":473,"_461":462,"_463":464},{"_7":565,"_449":394,"_450":566,"_452":567,"_20":568,"_455":569},"5e66121c-be42-4d11-8717-8b0ee1d8894a","https://www.gravatar.com/avatar/67d45700cf03221745521960e87f9f3b?size=64&default=identicon","https://www.gravatar.com/avatar/67d45700cf03221745521960e87f9f3b?size=512&default=identicon","Nimisha",{"_399":457,"_424":458,"_389":570},{"_9":473,"_461":462,"_463":464},{"_7":572,"_449":394,"_450":573,"_452":574,"_20":575,"_455":576},"c2a570d8-2a0d-4223-bf42-346766ec84b1","https://www.gravatar.com/avatar/2629ab846c677f5142996728d2b617ae?size=64&default=identicon","https://www.gravatar.com/avatar/2629ab846c677f5142996728d2b617ae?size=512&default=identicon","Kyle",{"_399":457,"_424":458,"_389":577},{"_9":473,"_461":462,"_463":474},{"_7":579,"_449":394,"_450":580,"_452":581,"_20":582,"_455":583},"b28059b9-1a10-4d06-8af7-549f95f203a8","https://www.gravatar.com/avatar/03bc87ad50b6ef09ccbd5ea00ed225bc?size=64&default=identicon","https://www.gravatar.com/avatar/03bc87ad50b6ef09ccbd5ea00ed225bc?size=512&default=identicon","thomas grice",{"_399":584,"_424":547,"_389":585},"Full Stack Foundations 🔭",{"_9":460,"_461":586,"_463":464},5,{"_7":588,"_449":394,"_450":589,"_452":590,"_20":591,"_455":592},"d3af3f2d-dac3-4ec0-83d8-698bd4461932","https://avatars.githubusercontent.com/u/4989930?v=4&size=64","https://avatars.githubusercontent.com/u/4989930?v=4&size=512","Vladimir Mosyaykin",{"_399":457,"_424":458,"_389":593},{"_461":462},{"_7":595,"_449":394,"_450":596,"_452":597,"_20":598,"_455":599},"7e645ce1-744c-42f7-ab0f-b69e2f678aaf","https://www.gravatar.com/avatar/6abd183331eeb2d3444a62713d3343f1?size=64&default=identicon","https://www.gravatar.com/avatar/6abd183331eeb2d3444a62713d3343f1?size=512&default=identicon","Alex",{"_399":457,"_424":458,"_389":600},{"_9":473,"_461":474,"_463":483},{"_7":602,"_449":394,"_450":603,"_452":604,"_20":605,"_455":606},"db79628f-d262-4811-9dcd-1e90a7c4b22c","https://avatars.githubusercontent.com/u/6928171?v=4&size=64","https://avatars.githubusercontent.com/u/6928171?v=4&size=512","Luan van der Westhuizen",{"_399":457,"_424":458,"_389":607},{"_9":473,"_461":462,"_463":464},{"_7":609,"_449":394,"_450":610,"_452":611,"_20":612,"_455":613},"4549da15-5b16-43c3-9fae-60879761269d","https://avatars.githubusercontent.com/u/54449993?v=4&size=64","https://avatars.githubusercontent.com/u/54449993?v=4&size=512","Braden",{"_399":457,"_424":458,"_389":614},{"_9":473,"_461":586,"_463":483},{"_7":616,"_449":394,"_450":617,"_452":618,"_20":619,"_455":620},"04ad6814-27a0-46c4-a028-c89dbc3bbf37","https://avatars.githubusercontent.com/u/84003742?v=4&size=64","https://avatars.githubusercontent.com/u/84003742?v=4&size=512","Erik",{"_399":457,"_424":458,"_389":621},{"_461":462},{"_7":623,"_449":394,"_450":624,"_452":625,"_20":626,"_455":627},"5fcf5e50-86c4-44de-aba6-d75c412a4ff5","https://www.gravatar.com/avatar/cf0f0fd2801174e5b6cd5a8fe061bba0?size=64&default=identicon","https://www.gravatar.com/avatar/cf0f0fd2801174e5b6cd5a8fe061bba0?size=512&default=identicon","Josh",{"_399":457,"_424":458,"_389":628},{"_461":462},{"_7":630,"_449":394,"_450":631,"_452":632,"_20":633,"_455":634},"5b316af1-e6df-4452-be4f-29b7e3c787f6","https://www.gravatar.com/avatar/8a1346829a164648a4507019f3dc3875?size=64&default=identicon","https://www.gravatar.com/avatar/8a1346829a164648a4507019f3dc3875?size=512&default=identicon","Ian",{"_399":457,"_424":518,"_389":635},{"_461":586},{"_7":637,"_449":394,"_450":638,"_452":639,"_20":640,"_455":641},"1bac3980-4954-4150-9775-22e15833264b","https://www.gravatar.com/avatar/43dc222fb726dd650ccab21ab09aa780?size=64&default=identicon","https://www.gravatar.com/avatar/43dc222fb726dd650ccab21ab09aa780?size=512&default=identicon","Chetan M",{"_399":457,"_424":458,"_389":642},{"_9":473,"_461":464,"_463":483},{"_7":644,"_449":394,"_450":645,"_452":646,"_20":647,"_455":648},"869f0630-0f9f-47d3-921e-413d85ac924e","https://www.gravatar.com/avatar/c6e018a438c47cd1deabb1056cce9e99?size=64&default=identicon","https://www.gravatar.com/avatar/c6e018a438c47cd1deabb1056cce9e99?size=512&default=identicon","Chanan",{"_399":457,"_424":458,"_389":649},{"_461":462},{"_7":651,"_449":394,"_450":652,"_452":653,"_20":654,"_455":655},"8b7bc4e4-2a1f-4c41-b208-76c282182e6a","https://www.gravatar.com/avatar/ed6e2df4b1e1efea9ca2a451cc21b889?size=64&default=identicon","https://www.gravatar.com/avatar/ed6e2df4b1e1efea9ca2a451cc21b889?size=512&default=identicon","Emiliano Potignano",{"_399":457,"_424":547,"_389":656},{"_461":586},{"_7":658,"_449":394,"_450":659,"_452":660,"_20":661,"_455":662},"4fb4b366-9a25-4d02-a365-9633316c0282","https://avatars.githubusercontent.com/u/3313043?v=4&size=64","https://avatars.githubusercontent.com/u/3313043?v=4&size=512","Derek Alia",{"_399":457,"_424":458,"_389":663},{"_9":473,"_461":462,"_463":483},{"_7":665,"_449":394,"_450":666,"_452":667,"_20":668,"_455":669},"4edb8758-3aef-42d3-804c-4167f2dd1082","https://www.gravatar.com/avatar/218c35bd1900c93d5fa1aada8272e465?size=64&default=identicon","https://www.gravatar.com/avatar/218c35bd1900c93d5fa1aada8272e465?size=512&default=identicon","Mark Weston",{"_399":457,"_424":458,"_389":670},{"_9":473,"_461":462,"_463":474},{"_7":672,"_449":394,"_450":673,"_452":674,"_20":675,"_455":676},"056b7481-d97b-4d44-a66d-b01b06b5d8b7","https://avatars.githubusercontent.com/u/6808172?v=4&size=64","https://avatars.githubusercontent.com/u/6808172?v=4&size=512","Josh Flayhart",{"_399":457,"_424":458,"_389":677},{"_9":460,"_461":464,"_463":678},6,{"_7":680,"_449":394,"_450":681,"_452":682,"_20":683,"_455":684},"0356b7f1-ce82-47d5-a051-07fc6b2d3cd4","https://avatars.githubusercontent.com/u/24300293?v=4&size=64","https://avatars.githubusercontent.com/u/24300293?v=4&size=512","MuscularDeveloper",{"_399":481,"_424":458,"_389":685},{"_9":473,"_461":464,"_463":474},{"_7":687,"_449":394,"_450":688,"_452":689,"_20":690,"_455":691},"2c4caa18-6594-48f9-8914-a4beb45c20cd","https://www.gravatar.com/avatar/c1c563b36d23e34002036e1de405f9ca?size=64&default=identicon","https://www.gravatar.com/avatar/c1c563b36d23e34002036e1de405f9ca?size=512&default=identicon","Kent",{"_399":457,"_424":458,"_389":692},{"_9":473,"_461":462,"_463":483},{"_7":694,"_449":394,"_450":695,"_452":696,"_20":-5,"_455":697},"c474cc39-3f4e-4b4e-86aa-eeae4f7eb871","https://www.gravatar.com/avatar/98a93f9ad948e46d1b170e58fc012378?size=64&default=identicon","https://www.gravatar.com/avatar/98a93f9ad948e46d1b170e58fc012378?size=512&default=identicon",{"_399":457,"_424":458,"_389":698},{"_9":473,"_461":462,"_463":464},{"_7":700,"_455":701},"t4la8hyvxzn40k179o8fjr7d",{"_399":702,"_424":703},"Build React Hooks 🪝","http://10.87.1.52:5639",{"_7":705,"_449":394,"_450":706,"_452":707,"_20":-5,"_455":708},"db5ea4cc-3593-45b5-9a64-f35112a490a6","https://www.gravatar.com/avatar/2b3d2b15ba3182d79beb53878b932da7?size=64&default=identicon","https://www.gravatar.com/avatar/2b3d2b15ba3182d79beb53878b932da7?size=512&default=identicon",{"_399":457,"_424":458,"_389":709},{"_461":462},{"_7":711,"_449":394,"_450":712,"_452":713,"_20":-5,"_455":714},"083b64ba-8faf-44e4-90a9-91f91ca0e9dc","https://www.gravatar.com/avatar/4eecacc59b971377a045c473a20327a4?size=64&default=identicon","https://www.gravatar.com/avatar/4eecacc59b971377a045c473a20327a4?size=512&default=identicon",{"_399":347,"_424":458,"_389":715},{"_9":473,"_461":483,"_463":483},{"_7":717,"_455":718},"euld41iuhyyfpl3dg8o154ry",{"_399":457,"_424":458,"_389":719},{"_9":473,"_461":462,"_463":464},{"_7":721,"_455":722},"lq6xgk1e261o0l4ci41cus8l",{"_399":457,"_424":723,"_389":724},"http://mcp-fundamentals.epicai.pro",{"_9":460,"_461":483,"_463":483},{"_7":726,"_455":727},"pnt3i7ya7hg9w1h8ydi79kyt",{"_399":728,"_424":729,"_389":730},"📐 Pixel Perfect Tailwind","http://epicweb-dev-pixel-perfect-tailwind.fly.dev",{"_9":473,"_461":731,"_463":462},8,{"_7":733,"_449":394,"_450":734,"_452":735,"_20":-5,"_455":736},"36282369-64f8-4a95-af83-820d64e8dbaa","https://www.gravatar.com/avatar/7451bd9d8498ec650a9c2e00673600af?size=64&default=identicon","https://www.gravatar.com/avatar/7451bd9d8498ec650a9c2e00673600af?size=512&default=identicon",{"_399":457,"_424":458,"_389":737},{"_9":473,"_461":462,"_463":464},{"_7":739,"_455":740},"inosthoolyq5kxeah6jv2nd5",{"_399":457,"_424":723},{"_7":742,"_449":394,"_450":743,"_452":744,"_20":-5,"_455":745},"80c45bb7-4266-4a10-b1a2-de69d3e5f86b","https://www.gravatar.com/avatar/9a422f516b72ccbe52d37aa19df72aa1?size=64&default=identicon","https://www.gravatar.com/avatar/9a422f516b72ccbe52d37aa19df72aa1?size=512&default=identicon",{"_399":457,"_424":458,"_389":746},{"_461":586},{"_7":748,"_449":394,"_450":749,"_452":750,"_20":-5,"_455":751},"678cc626-6001-43f2-9b80-4a2861eb9df5","https://www.gravatar.com/avatar/a0ff2c201071bd1dcc32dd61c76b1f68?size=64&default=identicon","https://www.gravatar.com/avatar/a0ff2c201071bd1dcc32dd61c76b1f68?size=512&default=identicon",{"_399":457,"_424":458,"_389":752},{"_9":473,"_461":462,"_463":464},{"_7":754,"_455":755},"w7uveks5t61w403tue2v5lof",{"_399":457,"_424":458,"_389":756},{"_9":473,"_461":462,"_463":474},{"_7":758,"_455":759},"a6bmzjwwwyy4j2g5absxsola",{"_399":457,"_424":458,"_389":760},{"_9":473,"_461":462,"_463":474},{"_7":762,"_449":394,"_450":763,"_452":764,"_20":-5,"_455":765},"d7093b5f-24f3-487d-9354-799140707621","https://www.gravatar.com/avatar/fbf1a446391ee7dcac6e3ff3f6266e6a?size=64&default=identicon","https://www.gravatar.com/avatar/fbf1a446391ee7dcac6e3ff3f6266e6a?size=512&default=identicon",{"_399":457,"_424":458,"_389":766},{"_461":462},{"_7":768,"_449":394,"_450":769,"_452":770,"_20":-5,"_455":771},"c0915af1-f925-4782-911f-6b55e0f2cc10","https://www.gravatar.com/avatar/a1b7f3a953d06137de79e73a33742d3e?size=64&default=identicon","https://www.gravatar.com/avatar/a1b7f3a953d06137de79e73a33742d3e?size=512&default=identicon",{"_399":457,"_424":547,"_389":772},{"_9":473,"_461":483,"_463":483},{"_7":774,"_449":394,"_450":775,"_452":776,"_20":-5,"_455":777},"bc735f7d-381f-491e-9320-527519e8a653","https://www.gravatar.com/avatar/6bc5e4cab9fab24213e5662e4bf224d5?size=64&default=identicon","https://www.gravatar.com/avatar/6bc5e4cab9fab24213e5662e4bf224d5?size=512&default=identicon",{"_399":457,"_424":458},{"_7":779,"_449":394,"_450":780,"_452":781,"_20":-5,"_455":782},"113ba56e-f660-4769-84c6-b44b342cbcb4","https://www.gravatar.com/avatar/b496d1aa1d91d06225f25ec9492974c3?size=64&default=identicon","https://www.gravatar.com/avatar/b496d1aa1d91d06225f25ec9492974c3?size=512&default=identicon",{"_399":457,"_424":458,"_389":783},{"_461":586},{"_7":785,"_449":394,"_450":786,"_452":787,"_20":-5,"_455":788},"83340844-310f-4d5e-b7fc-655af450d08e","https://www.gravatar.com/avatar/a7b4ca59c2a06b54796bfba40d5f65b5?size=64&default=identicon","https://www.gravatar.com/avatar/a7b4ca59c2a06b54796bfba40d5f65b5?size=512&default=identicon",{"_399":457,"_424":458,"_389":789},{"_9":473,"_461":462,"_463":464},{"_7":791,"_455":792},"wmoqsrx7op2sd26bii387bsr",{"_399":457,"_424":723},{"_7":794,"_455":795},"x0bf1e64yqaabgm5zbr2gc3s",{"_399":457,"_424":723,"_389":796},{"_461":464},{"_7":798,"_455":799},"rvlb7kznmdqbo5pk30c3nzyk",{"_399":347,"_424":458},{"_7":801,"_455":802},"ast5o3ukx962tskjazfomc9l",{"_399":347,"_424":425,"_389":803},{"_461":586,"_463":-5,"_9":-5},"routes/_app+/_layout",{"_399":347,"_806":807,"_1095":1096,"_1098":16},"exercises",[808,827,850,885,914,954,976,1012,1047,1071],{"_461":483,"_346":809,"_810":811,"_815":816,"_819":820},"Hello World in JS","solutions",[812,813],{"_463":483,"_346":809,"_20":27},{"_463":474,"_346":814,"_20":35},"Generate the Root Node","problems",[817,818],{"_463":483,"_346":809,"_20":21},{"_463":474,"_346":814,"_20":31},"steps",[821,824],{"_463":483,"_346":809,"_20":21,"_473":822,"_460":823},{"_20":21,"_346":809},{"_20":27,"_346":809},{"_463":474,"_346":814,"_20":31,"_473":825,"_460":826},{"_20":31,"_346":814},{"_20":35,"_346":814},{"_461":474,"_346":828,"_810":829,"_815":836,"_819":840},"Raw React APIs",[830,832,834],{"_463":483,"_346":831,"_20":43},"Create React Elements",{"_463":474,"_346":833,"_20":51},"Nesting Elements",{"_463":464,"_346":835,"_20":59},"Deep Nesting Elements",[837,838,839],{"_463":483,"_346":831,"_20":39},{"_463":474,"_346":833,"_20":47},{"_463":464,"_346":835,"_20":55},[841,844,847],{"_463":483,"_346":831,"_20":39,"_473":842,"_460":843},{"_20":39,"_346":831},{"_20":43,"_346":831},{"_463":474,"_346":833,"_20":47,"_473":845,"_460":846},{"_20":47,"_346":833},{"_20":51,"_346":833},{"_463":464,"_346":835,"_20":55,"_473":848,"_460":849},{"_20":55,"_346":835},{"_20":59,"_346":835},{"_461":464,"_346":851,"_810":852,"_815":863,"_819":869},"Using JSX",[853,855,857,859,861],{"_463":483,"_346":854,"_20":67},"Compiling JSX",{"_463":474,"_346":856,"_20":75},"Interpolation",{"_463":464,"_346":858,"_20":83},"Spread props",{"_463":462,"_346":860,"_20":91},"Nesting JSX",{"_463":586,"_346":862,"_20":99},"Fragments",[864,865,866,867,868],{"_463":483,"_346":854,"_20":63},{"_463":474,"_346":856,"_20":71},{"_463":464,"_346":858,"_20":79},{"_463":462,"_346":860,"_20":87},{"_463":586,"_346":862,"_20":95},[870,873,876,879,882],{"_463":483,"_346":854,"_20":63,"_473":871,"_460":872},{"_20":63,"_346":854},{"_20":67,"_346":854},{"_463":474,"_346":856,"_20":71,"_473":874,"_460":875},{"_20":71,"_346":856},{"_20":75,"_346":856},{"_463":464,"_346":858,"_20":79,"_473":877,"_460":878},{"_20":79,"_346":858},{"_20":83,"_346":858},{"_463":462,"_346":860,"_20":87,"_473":880,"_460":881},{"_20":87,"_346":860},{"_20":91,"_346":860},{"_463":586,"_346":862,"_20":95,"_473":883,"_460":884},{"_20":95,"_346":862},{"_20":99,"_346":862},{"_461":462,"_346":886,"_810":887,"_815":896,"_819":901},"Custom Components",[888,890,892,894],{"_463":483,"_346":889,"_20":107},"Simple Function",{"_463":474,"_346":891,"_20":115},"Raw API",{"_463":464,"_346":893,"_20":123},"JSX Components",{"_463":462,"_346":895,"_20":131},"Props",[897,898,899,900],{"_463":483,"_346":889,"_20":103},{"_463":474,"_346":891,"_20":111},{"_463":464,"_346":893,"_20":119},{"_463":462,"_346":895,"_20":127},[902,905,908,911],{"_463":483,"_346":889,"_20":103,"_473":903,"_460":904},{"_20":103,"_346":889},{"_20":107,"_346":889},{"_463":474,"_346":891,"_20":111,"_473":906,"_460":907},{"_20":111,"_346":891},{"_20":115,"_346":891},{"_463":464,"_346":893,"_20":119,"_473":909,"_460":910},{"_20":119,"_346":893},{"_20":123,"_346":893},{"_463":462,"_346":895,"_20":127,"_473":912,"_460":913},{"_20":127,"_346":895},{"_20":131,"_346":895},{"_461":586,"_346":915,"_810":916,"_815":928,"_819":935},"TypeScript",[917,918,920,922,924,926],{"_463":483,"_346":895,"_20":139},{"_463":474,"_346":919,"_20":147},"Narrow Types",{"_463":464,"_346":921,"_20":155},"Derive Types",{"_463":462,"_346":923,"_20":163},"Default Props",{"_463":586,"_346":925,"_20":171},"Reduce Duplication",{"_463":678,"_346":927,"_20":179},"Satisfies",[929,930,931,932,933,934],{"_463":483,"_346":895,"_20":135},{"_463":474,"_346":919,"_20":143},{"_463":464,"_346":921,"_20":151},{"_463":462,"_346":923,"_20":159},{"_463":586,"_346":925,"_20":167},{"_463":678,"_346":927,"_20":175},[936,939,942,945,948,951],{"_463":483,"_346":895,"_20":135,"_473":937,"_460":938},{"_20":135,"_346":895},{"_20":139,"_346":895},{"_463":474,"_346":919,"_20":143,"_473":940,"_460":941},{"_20":143,"_346":919},{"_20":147,"_346":919},{"_463":464,"_346":921,"_20":151,"_473":943,"_460":944},{"_20":151,"_346":921},{"_20":155,"_346":921},{"_463":462,"_346":923,"_20":159,"_473":946,"_460":947},{"_20":159,"_346":923},{"_20":163,"_346":923},{"_463":586,"_346":925,"_20":167,"_473":949,"_460":950},{"_20":167,"_346":925},{"_20":171,"_346":925},{"_463":678,"_346":927,"_20":175,"_473":952,"_460":953},{"_20":175,"_346":927},{"_20":179,"_346":927},{"_461":678,"_346":955,"_810":956,"_815":962,"_819":966},"Styling",[957,958,960],{"_463":483,"_346":955,"_20":187},{"_463":474,"_346":959,"_20":195},"Custom Component",{"_463":464,"_346":961,"_20":203},"Size Prop",[963,964,965],{"_463":483,"_346":955,"_20":183},{"_463":474,"_346":959,"_20":191},{"_463":464,"_346":961,"_20":199},[967,970,973],{"_463":483,"_346":955,"_20":183,"_473":968,"_460":969},{"_20":183,"_346":955},{"_20":187,"_346":955},{"_463":474,"_346":959,"_20":191,"_473":971,"_460":972},{"_20":191,"_346":959},{"_20":195,"_346":959},{"_463":464,"_346":961,"_20":199,"_473":974,"_460":975},{"_20":199,"_346":961},{"_20":203,"_346":961},{"_461":977,"_346":978,"_810":979,"_815":990,"_819":996},7,"Forms",[980,982,984,986,988],{"_463":483,"_346":981,"_20":211},"Form",{"_463":474,"_346":983,"_20":219},"Form Action",{"_463":464,"_346":985,"_20":227},"Input Types",{"_463":462,"_346":987,"_20":235},"Submission",{"_463":586,"_346":989,"_20":243},"Form Actions",[991,992,993,994,995],{"_463":483,"_346":981,"_20":207},{"_463":474,"_346":983,"_20":215},{"_463":464,"_346":985,"_20":223},{"_463":462,"_346":987,"_20":231},{"_463":586,"_346":989,"_20":239},[997,1000,1003,1006,1009],{"_463":483,"_346":981,"_20":207,"_473":998,"_460":999},{"_20":207,"_346":981},{"_20":211,"_346":981},{"_463":474,"_346":983,"_20":215,"_473":1001,"_460":1002},{"_20":215,"_346":983},{"_20":219,"_346":983},{"_463":464,"_346":985,"_20":223,"_473":1004,"_460":1005},{"_20":223,"_346":985},{"_20":227,"_346":985},{"_463":462,"_346":987,"_20":231,"_473":1007,"_460":1008},{"_20":231,"_346":987},{"_20":235,"_346":987},{"_463":586,"_346":989,"_20":239,"_473":1010,"_460":1011},{"_20":239,"_346":989},{"_20":243,"_346":989},{"_461":731,"_346":1013,"_810":1014,"_815":1025,"_819":1031},"Inputs",[1015,1017,1019,1021,1023],{"_463":483,"_346":1016,"_20":251},"Checkbox",{"_463":474,"_346":1018,"_20":259},"Select",{"_463":464,"_346":1020,"_20":267},"Radios",{"_463":462,"_346":1022,"_20":275},"Hidden Inputs",{"_463":586,"_346":1024,"_20":283},"Default Value",[1026,1027,1028,1029,1030],{"_463":483,"_346":1016,"_20":247},{"_463":474,"_346":1018,"_20":255},{"_463":464,"_346":1020,"_20":263},{"_463":462,"_346":1022,"_20":271},{"_463":586,"_346":1024,"_20":279},[1032,1035,1038,1041,1044],{"_463":483,"_346":1016,"_20":247,"_473":1033,"_460":1034},{"_20":247,"_346":1016},{"_20":251,"_346":1016},{"_463":474,"_346":1018,"_20":255,"_473":1036,"_460":1037},{"_20":255,"_346":1018},{"_20":259,"_346":1018},{"_463":464,"_346":1020,"_20":263,"_473":1039,"_460":1040},{"_20":263,"_346":1020},{"_20":267,"_346":1020},{"_463":462,"_346":1022,"_20":271,"_473":1042,"_460":1043},{"_20":271,"_346":1022},{"_20":275,"_346":1022},{"_463":586,"_346":1024,"_20":279,"_473":1045,"_460":1046},{"_20":279,"_346":1024},{"_20":283,"_346":1024},{"_461":1048,"_346":1049,"_810":1050,"_815":1057,"_819":1061},9,"Error Boundaries",[1051,1053,1055],{"_463":483,"_346":1052,"_20":291},"Composition",{"_463":474,"_346":1054,"_20":299},"Other Errors",{"_463":464,"_346":1056,"_20":307},"Reset",[1058,1059,1060],{"_463":483,"_346":1052,"_20":287},{"_463":474,"_346":1054,"_20":295},{"_463":464,"_346":1056,"_20":303},[1062,1065,1068],{"_463":483,"_346":1052,"_20":287,"_473":1063,"_460":1064},{"_20":287,"_346":1052},{"_20":291,"_346":1052},{"_463":474,"_346":1054,"_20":295,"_473":1066,"_460":1067},{"_20":295,"_346":1054},{"_20":299,"_346":1054},{"_463":464,"_346":1056,"_20":303,"_473":1069,"_460":1070},{"_20":303,"_346":1056},{"_20":307,"_346":1056},{"_461":1072,"_346":1073,"_810":1074,"_815":1081,"_819":1085},10,"Rendering Arrays",[1075,1077,1079],{"_463":483,"_346":1076,"_20":315},"Key prop",{"_463":474,"_346":1078,"_20":323},"Focus State",{"_463":464,"_346":1080,"_20":331},"Key Reset",[1082,1083,1084],{"_463":483,"_346":1076,"_20":311},{"_463":474,"_346":1078,"_20":319},{"_463":464,"_346":1080,"_20":327},[1086,1089,1092],{"_463":483,"_346":1076,"_20":311,"_473":1087,"_460":1088},{"_20":311,"_346":1076},{"_20":315,"_346":1076},{"_463":474,"_346":1078,"_20":319,"_473":1090,"_460":1091},{"_20":319,"_346":1078},{"_20":323,"_346":1078},{"_463":464,"_346":1080,"_20":327,"_473":1093,"_460":1094},{"_20":327,"_346":1080},{"_20":331,"_346":1080},"playground",{"_1097":-5,"_461":-2,"_463":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_1101":1102,"_399":347,"_389":1103,"_1328":1329,"_1330":1331,"_1332":1333,"_1337":1338,"_1343":1344},"articleId","workshop-react-fundamentals-5-finished",{"_22":1104,"_461":586,"_1105":1106,"_346":915,"_1107":1108,"_1109":1110,"_1111":1112,"_1114":1115,"_819":1117,"_815":1266,"_810":1297},"/myapp/workshop-content/exercises/05.typescript","dirName","05.typescript","instructionsCode","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),k=(n,e)=>{for(var l in e)r(n,l,{get:e[l],enumerable:!0})},o=(n,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of y(e))!u.call(n,s)&&s!==l&&r(n,s,{get:()=>e[s],enumerable:!(c=b(e,s))||c.enumerable});return n};var g=(n,e,l)=>(l=n!=null?p(m(n)):{},o(e||!n||!n.__esModule?r(l,\"default\",{value:n,enumerable:!0}):l,n)),f=n=>o(r({},\"__esModule\",{value:!0}),n);var i=v((D,t)=>{t.exports=_jsx_runtime});var E={};k(E,{default:()=>h,frontmatter:()=>N});var a=g(i()),N=void 0;function d(n){let e={a:\"a\",blockquote:\"blockquote\",code:\"code\",h1:\"h1\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:l}=e;return l||w(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"TypeScript\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-typescript\"}),`\n`,(0,a.jsx)(e.p,{children:`TypeScript is an enormously valuable team productivity, code quality, and\nconfidence tool that I strongly recommend you use to build any React application\nyou plan making maintainable. As you're working with TypeScript and getting\nangry at all the red squiggles it puts in your code, keep this in mind:`}),`\n`,(0,a.jsxs)(e.blockquote,{children:[`\n`,(0,a.jsxs)(e.p,{children:[`TypeScript is not making your life terrible. It's just showing you how\nterrible your life already is. \\u2013 `,(0,a.jsx)(e.a,{href:\"https://twitter.com/kentcdodds/status/1763606063394496633\",children:\"Kent C. Dodds\"})]}),`\n`]}),`\n`,(0,a.jsxs)(e.p,{children:[`You can think of TypeScript as that\n`,(0,a.jsx)(e.a,{href:\"https://twitter.com/kentcdodds/status/1715562350835855396\",children:\"brutally honest friend\"}),`\nwho isn't afraid to tell you about the spinach in your teeth. It's not the\nfriend's fault that you've got spinach in your teeth. It's your fault. You\nshould be thanking TypeScript, not cursing it.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`Remember, in exercise 4 we learned\n`,(0,a.jsx)(e.a,{href:\"https://twitter.com/kentcdodds/status/1763606427028136131\",children:\"what a React component\"}),`\nis:`]}),`\n`,(0,a.jsxs)(e.blockquote,{children:[`\n`,(0,a.jsx)(e.p,{children:`Components are functions which accept an object called \"props\" and return\nsomething that is renderable`}),`\n`]}),`\n`,(0,a.jsx)(e.p,{children:`Because of this, they don't require any special considerations when applying\nTypeScript type annotations to them. You treat React component functions the\nsame way you treat regular functions. Because of this, the major battle for\nfolks using TypeScript with React is:`}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsx)(e.li,{children:\"Improving their TypeScript skills\"}),`\n`,(0,a.jsx)(e.li,{children:\"Learning the React-specific types available\"}),`\n`]}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F4DC} I advise having the\n`,(0,a.jsx)(e.a,{href:\"https://github.com/typescript-cheatsheets/react\",children:\"React+TypeScript Cheatsheets\"}),`\nrepo open as a reference while you're getting used to using TypeScript and\nReact. Another terrific resource is\n`,(0,a.jsx)(e.a,{href:\"https://www.totaltypescript.com/\",children:\"Total TypeScript\"}),` which has a lot of great\nfree resources which go much deeper than we do in this exercise.`]}),`\n`,(0,a.jsx)(e.p,{children:\"With that said, here's a quick intro to adding type annotations to functions:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// here's a regular JS function that accepts a user\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// which might have a name property\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getName\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"??\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Unknown\"}),\"'\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// here's how you'd type that user object to say it has an optional name property:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?:\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\" }\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// and here's how you'd tell TypeScript that the user parameter is a User object\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getName\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"??\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Unknown\"}),\"'\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// and if you'd like to, you can specify the return type explicitly as well\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// (though it is inferred):\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getName\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\")\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"??\"}),\" \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Unknown\"}),\"'\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F4DC} Learn more about the syntax for functions in TypeScript here:\n`,(0,a.jsx)(e.a,{href:\"https://kentcdodds.com/blog/typescript-function-syntaxes\",children:\"TypeScript Function Syntaxes\"})]}),`\n`,(0,a.jsx)(e.p,{children:`Let's look at a quick example of adding TypeScript to a simple (and familiar)\nReact component:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Message\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),'\"',\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// We could say:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageProps\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Message\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageProps\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),'\"',\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// that would allow: Hello World\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// but not: Hello World\"}),`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// The React types have a ReactNode, which is the recommended choice for the children prop:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageProps\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Message\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageProps\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),'\"',\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"18\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"19\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// keep in mind that you don't *have* to give your props a name.\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"20\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// You can inline them as well. This works just the same as above:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"21\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Message\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"22\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),'\"',\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"23\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"24\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"25\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// and you can destructure as well (this is what I do most of the time):\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"26\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Message\"}),\"({ \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\" }\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }) {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"27\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),'\"',\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"28\",children:[\"}\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"29\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"30\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// mix-and-match:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"31\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageProps\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ReactNode\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"32\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"Message\"}),\"({ \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\" }\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"MessageProps\"}),\") {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"33\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" <\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"className\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"message\"}),'\"',\">\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\"\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"34\",children:[\"}\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F4DC} Learn more about typing React components here:\n`,(0,a.jsx)(e.a,{href:\"https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript\",children:\"How to write a React Component in TypeScript\"})]}),`\n`,(0,a.jsx)(e.p,{children:`\\u{1F989} It's great to have your code type checked, but not at the expense of\nprogressing and learning. If you get totally stuck on something, then I suggest\nyou tell TypeScript to quiet down and come back to it later when you're more\nexperienced or want to focus on it. You can do this like so:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// @ts-expect-error TypeScript is complaining about this next line.\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Something about magic not existing.\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// I don't know how to fix this right now and AI Assistants were unhelpful...\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Come back later.\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"make\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"magic\"}),\"()\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`Don't worry if you struggle with TypeScript at first, the more you use it, the\nbetter you'll get at it, just like anything else.`}),`\n`,(0,a.jsx)(\"callout-info\",{children:(0,a.jsxs)(e.p,{children:[\"Note: We're moving from the \",(0,a.jsx)(e.code,{children:\"*.html\"}),\" files to \",(0,a.jsx)(e.code,{children:\"*.tsx\"}),` files. This is more\nreal-world and also your editor likely supports TypeScript better within\nTypeScript files rather than HTML files. From here on out, the `,(0,a.jsx)(e.code,{children:\"index.tsx\"}),`\nfile will be loaded onto the page automatically. We'll also get live reload of\nthe browser as we save changes which will be quite nice. The workshop app is a\nlittle magical, but you'll find `,(0,a.jsx)(e.code,{children:\"createRoot(rootElement).render(element)\"}),`\ncalls in each of the files, just like we were doing in the previous exercises.`]})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function w(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(E);})();\n;return Component;","finishedCode","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)i(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of h(e))!x.call(t,o)&&o!==n&&i(t,o,{get:()=>e[o],enumerable:!(s=f(e,o))||s.enumerable});return t};var _=(t,e,n)=>(n=t!=null?m(w(t)):{},c(e||!t||!t.__esModule?i(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>c(i({},\"__esModule\",{value:!0}),t);var d=l((b,a)=>{a.exports=_jsx_runtime});var E={};y(E,{default:()=>u,frontmatter:()=>g});var r=_(d()),g=void 0;function p(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||k(\"EpicVideo\",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.h1,{children:\"TypeScript\"}),`\n`,(0,r.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-typescript\"}),`\n`,(0,r.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Awesome work. TypeScript is a must in this industry and using it with React\nis fairly straightforward.`})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,r.jsx)(e,{...t,children:(0,r.jsx)(p,{...t})}):p(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;","instructionsEpicVideoEmbeds",[1113],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-typescript","finishedEpicVideoEmbeds",[1116],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-typescript",[1118,1151,1174,1197,1220,1243],{"_463":483,"_473":1119,"_460":1139},{"_20":135,"_346":895,"_1105":1120,"_22":136,"_24":137,"_1107":1121,"_1122":1123,"_1125":1126,"_1133":1134,"_1136":1137,"_461":586,"_463":483,"_9":473,"_1138":139},"01.problem.props","var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),y=(t,e)=>{for(var n in e)r(t,n,{get:e[n],enumerable:!0})},s=(t,e,n,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of m(e))!w.call(t,i)&&i!==n&&r(t,i,{get:()=>e[i],enumerable:!(c=u(e,i))||c.enumerable});return t};var x=(t,e,n)=>(n=t!=null?l(f(t)):{},s(e||!t||!t.__esModule?r(n,\"default\",{value:t,enumerable:!0}):n,t)),_=t=>s(r({},\"__esModule\",{value:!0}),t);var d=g((b,a)=>{a.exports=_jsx_runtime});var v={};y(v,{default:()=>h,frontmatter:()=>j});var o=x(d()),j=void 0;function p(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:n}=e;return n||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Props\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/props-ts\"}),`\n`,(0,o.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Our developers are having a hard time using the \",(0,o.jsx)(e.code,{children:\"Calculator\"}),` component\nproperly, so I want you to add type annotations.`]}),`\n`,(0,o.jsx)(e.p,{children:`I'd also like you to meet Lily the Life Jacket! \\u{1F9BA} She's going to be hanging\naround with the rest of the crew to indicate wherever there's something that's\nTypeScript-specific you need to do and to give you TypeScript-specific tips.\nYou'll be working with Lily the Life Jacket a lot in this exercise.`}),`\n`,(0,o.jsx)(e.p,{children:\"Follow the emoji!\"})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(p,{...t})}):p(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(v);})();\n;return Component;","epicVideoEmbeds",[1124],"https://www.epicreact.dev/workshops/react-fundamentals/props-ts","test",{"_9":1127,"_1128":1129,"_1130":1131},"browser","pathname","/app/05.01.problem/test/","testFiles",[1132],"calculator.test.ts","dev",{"_9":1127,"_1128":1135},"/app/05.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/01.problem.props?view=editor&title=Props+%28problem%29","solutionName",{"_20":139,"_346":895,"_1105":1140,"_22":140,"_24":141,"_1107":1141,"_1122":1142,"_1125":1144,"_1133":1147,"_1136":1149,"_461":586,"_463":483,"_9":460,"_1150":-5},"01.solution.props","var Component=(()=>{var l=Object.create;var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!w.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(s=h(e,r))||s.enumerable});return t};var g=(t,e,o)=>(o=t!=null?l(f(t)):{},i(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>i(c({},\"__esModule\",{value:!0}),t);var a=x((b,p)=>{p.exports=_jsx_runtime});var E={};_(E,{default:()=>u,frontmatter:()=>y});var n=g(a()),y=void 0;function d(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Props\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/props-ts/solution\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great work! Now we'll get some type safety when people are using the\n`,(0,n.jsx)(e.code,{children:\"Calculator\"}),\" component. But I think we can do better for the operator prop...\"]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(t)}function k(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;",[1143],"https://www.epicreact.dev/workshops/react-fundamentals/props-ts/solution",{"_9":1127,"_1128":1145,"_1130":1146},"/app/05.01.solution/test/",[1132],{"_9":1127,"_1128":1148},"/app/05.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/01.solution.props?view=editor&title=Props+%28solution%29","problemName",{"_463":474,"_473":1152,"_460":1163},{"_20":143,"_346":919,"_1105":1153,"_22":144,"_24":145,"_1107":1154,"_1122":1155,"_1125":1157,"_1133":1160,"_1136":1162,"_461":586,"_463":474,"_9":473,"_1138":147},"02.problem.narrow","var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),g=(r,e)=>{for(var a in e)l(r,a,{get:e[a],enumerable:!0})},t=(r,e,a,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let o of y(e))!v.call(r,o)&&o!==a&&l(r,o,{get:()=>e[o],enumerable:!(s=b(e,o))||s.enumerable});return r};var w=(r,e,a)=>(a=r!=null?h(u(r)):{},t(e||!r||!r.__esModule?l(a,\"default\",{value:r,enumerable:!0}):a,r)),f=r=>t(l({},\"__esModule\",{value:!0}),r);var i=m((A,c)=>{c.exports=_jsx_runtime});var E={};g(E,{default:()=>p,frontmatter:()=>x});var n=w(i()),x=void 0;function d(r){let e={a:\"a\",code:\"code\",em:\"em\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...r.components},{EpicVideo:a}=e;return a||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Narrow Types\"}),`\n`,(0,n.jsx)(a,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/narrow-types\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Our \",(0,n.jsx)(e.code,{children:\"CalculatorProps['operator']\"}),\" type being set simply to \",(0,n.jsx)(e.code,{children:\"string\"}),` is not\n\"narrow\" enough to help users of our `,(0,n.jsx)(e.code,{children:\"Calculator\"}),\" component. It allows \",(0,n.jsx)(e.em,{children:\"any\"}),`\n`,(0,n.jsx)(e.code,{children:\"string\"}),` value to be provided, even one which our Calculator doesn't support.\nFor example, the exponentiation operator `,(0,n.jsx)(e.code,{children:\"**\"}),` could be passed and TypeScript\nwon't complain, but this would cause a runtime error because we don't have a\nfunction to handle that operator:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"element\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"left\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"**\"}),'\"',\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"right\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"3\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" /> \",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4A5}\"}),`\n`]})})}),`\n`,(0,n.jsxs)(e.p,{children:[\"On top of that, the API for our \",(0,n.jsx)(e.code,{children:\"Calculator\"}),` isn't very discoverable. How would\npeople know which `,(0,n.jsx)(e.code,{children:\"operations\"}),\" are possible? Docs? Trial and error?\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Rather than a \",(0,n.jsx)(e.code,{children:\"string\"}),`, your TypeScript type definition can be set to a specific\nstring. For example:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"KodyString\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Kody\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"let\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"kody\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"KodyString\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// this variable can only ever be set to the string 'Kody'\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`Combine that functionality with\n`,(0,n.jsxs)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types\",children:[\"union syntax of \",(0,n.jsx)(e.code,{children:\"|\"})]}),`\nand you'll be able to specify exactly which operators are allowed. For example:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"KodyOrHannahString\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Kody\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Hannah\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"let\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"assistant\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"KodyOrHannahString\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// this variable can only ever be set to the string 'Kody' or 'Hannah'\"}),`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// \\u{1F4B0} tip: we could do the same thing without creating a type by inlining instead:\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// let assistant: 'Kody' | 'Hannah'\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"How about we narrow our \",(0,n.jsx)(e.code,{children:\"operator\"}),\" type from a \",(0,n.jsx)(e.code,{children:\"string\"}),` to some specific strings\nusing a union.`]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(d,{...r})}):d(r)}function k(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(E);})();\n;return Component;",[1156],"https://www.epicreact.dev/workshops/react-fundamentals/narrow-types",{"_9":1127,"_1128":1158,"_1130":1159},"/app/05.02.problem/test/",[1132],{"_9":1127,"_1128":1161},"/app/05.02.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/02.problem.narrow?view=editor&title=Narrow+Types+%28problem%29",{"_20":147,"_346":919,"_1105":1164,"_22":148,"_24":149,"_1107":1165,"_1122":1166,"_1125":1168,"_1133":1171,"_1136":1173,"_461":586,"_463":474,"_9":460,"_1150":-5},"02.solution.narrow","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var o in t)s(e,o,{get:t[o],enumerable:!0})},c=(e,t,o,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!l.call(e,r)&&r!==o&&s(e,r,{get:()=>t[r],enumerable:!(i=m(t,r))||i.enumerable});return e};var g=(e,t,o)=>(o=e!=null?h(w(e)):{},c(t||!e||!e.__esModule?s(o,\"default\",{value:e,enumerable:!0}):o,e)),j=e=>c(s({},\"__esModule\",{value:!0}),e);var a=x((k,p)=>{p.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>y});var n=g(a()),y=void 0;function d(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:o}=t;return o||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.h1,{children:\"Narrow Types\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/narrow-types/solution\"}),`\n`,(0,n.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great, we've narrowed our types a bit which helps a lot with the experience\nof using our component props. But there's more to do! Let's keep going.`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,n.jsx)(t,{...e,children:(0,n.jsx)(d,{...e})}):d(e)}function E(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(M);})();\n;return Component;",[1167],"https://www.epicreact.dev/workshops/react-fundamentals/narrow-types/solution",{"_9":1127,"_1128":1169,"_1130":1170},"/app/05.02.solution/test/",[1132],{"_9":1127,"_1128":1172},"/app/05.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/02.solution.narrow?view=editor&title=Narrow+Types+%28solution%29",{"_463":464,"_473":1175,"_460":1186},{"_20":151,"_346":921,"_1105":1176,"_22":152,"_24":153,"_1107":1177,"_1122":1178,"_1125":1180,"_1133":1183,"_1136":1185,"_461":586,"_463":464,"_9":473,"_1138":155},"03.problem.derive","var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var f=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),v=(r,e)=>{for(var o in e)t(r,o,{get:e[o],enumerable:!0})},l=(r,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of u(e))!m.call(r,a)&&a!==o&&t(r,a,{get:()=>e[a],enumerable:!(s=y(e,a))||s.enumerable});return r};var w=(r,e,o)=>(o=r!=null?h(b(r)):{},l(e||!r||!r.__esModule?t(o,\"default\",{value:r,enumerable:!0}):o,r)),k=r=>l(t({},\"__esModule\",{value:!0}),r);var d=f((C,c)=>{c.exports=_jsx_runtime});var E={};v(E,{default:()=>p,frontmatter:()=>g});var n=w(d()),g=void 0;function i(r){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...r.components},{EpicVideo:o}=e;return o||x(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Derive Types\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/derive-types\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} You may have noticed that we're duplicating our operators of \",(0,n.jsx)(e.code,{children:\"+\"}),\", \",(0,n.jsx)(e.code,{children:\"-\"}),\", \",(0,n.jsx)(e.code,{children:\"*\"}),`,\nand `,(0,n.jsx)(e.code,{children:\"/\"}),`. Any time we want to add a new operator, we have to add it in two places\nand if we miss one then we could either have a runtime error, or users won't be\nable to use our new operator at all.`]}),`\n`,(0,n.jsx)(e.p,{children:`It would be better if we could have the compiler let us know we missed one\n(foreshadowing... look forward to that in an upcoming step) or just\nderive the possible operators.`}),`\n`,(0,n.jsxs)(e.p,{children:[\"To do this, you need to know about two TypeScript keywords: \",(0,n.jsx)(e.code,{children:\"typeof\"}),` and\n`,(0,n.jsx)(e.code,{children:\"keyof\"}),\". Technically \",(0,n.jsx)(e.code,{children:\"typeof\"}),` is a JavaScript feature, but TypeScript builds on\ntop of this and will get you the TypeScript type for the given variable. So if\nyou say:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { name: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"kody\"}),\"'\",\", isCute: \",(0,n.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\" }\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"typeof\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"user\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// type User = { name: string; isCute: boolean; }\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"And then you can use \",(0,n.jsx)(e.code,{children:\"keyof\"}),` to get a union-ed type of strings of all the keys\nin a given type:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"UserKeys\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"keyof\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'// type UserKeys = \"name\" | \"isCute\"'}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F4DC} Learn more about TypeScript's\n`,(0,n.jsxs)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/2/typeof-types.html\",children:[(0,n.jsx)(e.code,{children:\"typeof\"}),\" operator\"]}),`\nand\n`,(0,n.jsxs)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/2/keyof-types.html\",children:[(0,n.jsx)(e.code,{children:\"keyof\"}),\" operator\"]}),\".\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"With that, try and derive the type of the \",(0,n.jsx)(e.code,{children:\"CalculatorProps['operator']\"}),` so you\ndon't have to repeat yourself.`]})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,n.jsx)(e,{...r,children:(0,n.jsx)(i,{...r})}):i(r)}function x(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(E);})();\n;return Component;",[1179],"https://www.epicreact.dev/workshops/react-fundamentals/derive-types",{"_9":1127,"_1128":1181,"_1130":1182},"/app/05.03.problem/test/",[1132],{"_9":1127,"_1128":1184},"/app/05.03.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/03.problem.derive?view=editor&title=Derive+Types+%28problem%29",{"_20":155,"_346":921,"_1105":1187,"_22":156,"_24":157,"_1107":1188,"_1122":1189,"_1125":1191,"_1133":1194,"_1136":1196,"_461":586,"_463":464,"_9":460,"_1150":-5},"03.solution.derive","var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of l(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=m(t,r))||s.enumerable});return e};var y=(e,t,n)=>(n=e!=null?f(h(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var p=w((D,d)=>{d.exports=_jsx_runtime});var E={};_(E,{default:()=>u,frontmatter:()=>v});var o=y(p()),v=void 0;function a(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||g(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Derive Types\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/derive-types/solution\"}),`\n`,(0,o.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great! That's definitely a win for our developer productivity!\"})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(a,{...e})}):a(e)}function g(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(E);})();\n;return Component;",[1190],"https://www.epicreact.dev/workshops/react-fundamentals/derive-types/solution",{"_9":1127,"_1128":1192,"_1130":1193},"/app/05.03.solution/test/",[1132],{"_9":1127,"_1128":1195},"/app/05.03.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/03.solution.derive?view=editor&title=Derive+Types+%28solution%29",{"_463":462,"_473":1198,"_460":1209},{"_20":159,"_346":923,"_1105":1199,"_22":160,"_24":161,"_1107":1200,"_1122":1201,"_1125":1203,"_1133":1206,"_1136":1208,"_461":586,"_463":462,"_9":473,"_1138":163},"04.problem.default-props","var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var m=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports),f=(r,e)=>{for(var l in e)s(r,l,{get:e[l],enumerable:!0})},c=(r,e,l,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let n of y(e))!v.call(r,n)&&n!==l&&s(r,n,{get:()=>e[n],enumerable:!(o=b(e,n))||o.enumerable});return r};var k=(r,e,l)=>(l=r!=null?h(u(r)):{},c(e||!r||!r.__esModule?s(l,\"default\",{value:r,enumerable:!0}):l,r)),g=r=>c(s({},\"__esModule\",{value:!0}),r);var i=m((D,t)=>{t.exports=_jsx_runtime});var x={};f(x,{default:()=>p,frontmatter:()=>w});var a=k(i()),w=void 0;function d(r){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...r.components},{EpicVideo:l}=e;return l||E(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Default Props\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/default-props\"}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Sometimes you want to allow the user of your component to skip providing a\nprop and use a default value instead. To do this, we can use\n`,(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Default_values_2\",children:\"destructuring default values syntax\"}),`,\nbut when users of our component try to skip a prop, TypeScript will complain\nbecause our type says all the elements of the `,(0,a.jsx)(e.code,{children:\"CalculatorProps\"}),` type are\nrequired.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`So when you make a prop optional, make sure you provide any relevant default\nvalue as well as mark it as optional using the\n`,(0,a.jsx)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/2/objects.html#optional-properties\",children:\"optional properties syntax\"}),\":\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"User\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"name\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"string\"}),\"; \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"isCute\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"?:\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"boolean\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// name is required, isCute is optional, so these both compile:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"kody\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { name: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Kody\"}),\"'\",\", isCute: \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"true\"}),\" }\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"peter\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { name: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Peter\"}),\"'\",\" }\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"For this step, make all props optional. Default \",(0,a.jsx)(e.code,{children:\"left\"}),\" and \",(0,a.jsx)(e.code,{children:\"right\"}),` to\n`,(0,a.jsx)(e.code,{children:\"0\"}),\" and \",(0,a.jsx)(e.code,{children:\"operator\"}),\" to \",(0,a.jsx)(e.code,{children:\"'+'\"}),\". Then you can update the App to test it out:\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsxs)(e.code,{children:[(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"function\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"App\"}),\"() {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"return\"}),\" (\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"h1\"}),\">Calculator\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"left\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"right\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"-\"}),'\"',\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"left\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"1\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"*\"}),'\"',\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\t\t<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Calculator\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"operator\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"right\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"2\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\t\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t)\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\"}\",`\n`]})]})})]})}function p(r={}){let{wrapper:e}=r.components||{};return e?(0,a.jsx)(e,{...r,children:(0,a.jsx)(d,{...r})}):d(r)}function E(r,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+r+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(x);})();\n;return Component;",[1202],"https://www.epicreact.dev/workshops/react-fundamentals/default-props",{"_9":1127,"_1128":1204,"_1130":1205},"/app/05.04.problem/test/",[1132],{"_9":1127,"_1128":1207},"/app/05.04.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/04.problem.default-props?view=editor&title=Default+Props+%28problem%29",{"_20":163,"_346":923,"_1105":1210,"_22":164,"_24":165,"_1107":1211,"_1122":1212,"_1125":1214,"_1133":1217,"_1136":1219,"_461":586,"_463":462,"_9":460,"_1150":-5},"04.solution.default-props","var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)s(t,o,{get:e[o],enumerable:!0})},i=(t,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!w.call(t,r)&&r!==o&&s(t,r,{get:()=>e[r],enumerable:!(a=f(e,r))||a.enumerable});return t};var j=(t,e,o)=>(o=t!=null?l(m(t)):{},i(e||!t||!t.__esModule?s(o,\"default\",{value:t,enumerable:!0}):o,t)),g=t=>i(s({},\"__esModule\",{value:!0}),t);var d=x((k,c)=>{c.exports=_jsx_runtime});var M={};_(M,{default:()=>u,frontmatter:()=>y});var n=j(d()),y=void 0;function p(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Default Props\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/default-props/solution\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} In the React world we use default props all the time, so I'm glad that you\nknow all about how to do that now!`})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(p,{...t})}):p(t)}function E(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(M);})();\n;return Component;",[1213],"https://www.epicreact.dev/workshops/react-fundamentals/default-props/solution",{"_9":1127,"_1128":1215,"_1130":1216},"/app/05.04.solution/test/",[1132],{"_9":1127,"_1128":1218},"/app/05.04.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/04.solution.default-props?view=editor&title=Default+Props+%28solution%29",{"_463":586,"_473":1221,"_460":1232},{"_20":167,"_346":925,"_1105":1222,"_22":168,"_24":169,"_1107":1223,"_1122":1224,"_1125":1226,"_1133":1229,"_1136":1231,"_461":586,"_463":586,"_9":473,"_1138":171},"05.problem.function-types","var Component=(()=>{var p=Object.create;var r=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var m=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)r(n,o,{get:e[o],enumerable:!0})},s=(n,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let i of y(e))!w.call(n,i)&&i!==o&&r(n,i,{get:()=>e[i],enumerable:!(a=u(e,i))||a.enumerable});return n};var b=(n,e,o)=>(o=n!=null?p(f(n)):{},s(e||!n||!n.__esModule?r(o,\"default\",{value:n,enumerable:!0}):o,n)),v=n=>s(r({},\"__esModule\",{value:!0}),n);var d=m((T,c)=>{c.exports=_jsx_runtime});var j={};g(j,{default:()=>h,frontmatter:()=>x});var t=b(d()),x=void 0;function l(n){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",ul:\"ul\",...n.components},{EpicVideo:o}=e;return o||k(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Reduce Duplication\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/reduce-duplication\"}),`\n`,(0,t.jsx)(e.p,{children:`\\u{1F989} These last two steps have little to do with React and everything to\ndo with TypeScript. If you'd rather skip these two, I won't be offended \\u{1F972}`}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} One last thing that bugs me is the repetition in the \",(0,t.jsx)(e.code,{children:\"operations\"}),` type. The\ntype for every one of those functions is the same. They all accept two numbers\nand return a number.`]}),`\n`,(0,t.jsxs)(e.p,{children:[`One thing we could do is extract that function into a type and then tell\nTypeScript that the `,(0,t.jsx)(e.code,{children:\"operations\"}),\" object is a \",(0,t.jsx)(e.code,{children:\"Record\"}),` where the key is one of\nthe valid operators and the value is an `,(0,t.jsx)(e.code,{children:\"OperationFn\"}),\".\"]}),`\n`,(0,t.jsx)(e.p,{children:\"I'm going to let you try this one on your own.\"}),`\n`,(0,t.jsx)(e.p,{children:\"\\u{1F4B0} But I'll give you some hints:\"}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[`You'll need \\u{1F4DC}\n`,(0,t.jsxs)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type\",children:[\"TypeScript's \",(0,t.jsx)(e.code,{children:\"Record\"}),\" Utility Type\"]})]}),`\n`,(0,t.jsxs)(e.li,{children:[\"You'll have to manually create a union of all allowed \",(0,t.jsx)(e.code,{children:\"operations\"}),` again for\nthe Record's `,(0,t.jsx)(e.code,{children:\"key\"})]}),`\n`,(0,t.jsxs)(e.li,{children:[`You'll need to define \\u{1F4DC}\n`,(0,t.jsx)(e.a,{href:\"https://kentcdodds.com/blog/typescript-function-syntaxes\",children:\"a function type\"}),`\nfor the Record's value`]}),`\n`]}),`\n`,(0,t.jsx)(e.p,{children:`\\u{1F989} At the end of this one, you may prefer the previous version and that's fine.\nThis is just two ways to do it and they both come with trade-offs. Personally, I\nprefer this way to avoid typing all the functions individually.`}),`\n`,(0,t.jsx)(e.p,{children:`\\u{1F989} Also, you may wonder why we went back to repeating ourselves. Unfortunately\nthere's no way around it if you want to define the object as a Record with a\nspecific key. However! It's not as bad as before because if we make a mistake\nand forget to update both places, the compiler will complain at us rather than\nhaving a runtime error, so it's less of a problem. And there's actually a\nworkaround for this, which is what the next step is all about!`})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(l,{...n})}):l(n)}function k(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return v(j);})();\n;return Component;",[1225],"https://www.epicreact.dev/workshops/react-fundamentals/reduce-duplication",{"_9":1127,"_1128":1227,"_1130":1228},"/app/05.05.problem/test/",[1132],{"_9":1127,"_1128":1230},"/app/05.05.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/05.problem.function-types?view=editor&title=Reduce+Duplication+%28problem%29",{"_20":171,"_346":925,"_1105":1233,"_22":172,"_24":173,"_1107":1234,"_1122":1235,"_1125":1237,"_1133":1240,"_1136":1242,"_461":586,"_463":586,"_9":460,"_1150":-5},"05.solution.function-types","var Component=(()=>{var l=Object.create;var r=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},s=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let i of m(t))!x.call(e,i)&&i!==n&&r(e,i,{get:()=>t[i],enumerable:!(c=h(t,i))||c.enumerable});return e};var g=(e,t,n)=>(n=e!=null?l(f(e)):{},s(t||!e||!e.__esModule?r(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>s(r({},\"__esModule\",{value:!0}),e);var u=w((b,d)=>{d.exports=_jsx_runtime});var y={};_(y,{default:()=>a,frontmatter:()=>E});var o=g(u()),E=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Reduce Duplication\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/reduce-duplication/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Getting rid of duplication quite nice here. Well done! But we duplicated\nsomething else which is less nice...`})]})}function a(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function M(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(y);})();\n;return Component;",[1236],"https://www.epicreact.dev/workshops/react-fundamentals/reduce-duplication/solution",{"_9":1127,"_1128":1238,"_1130":1239},"/app/05.05.solution/test/",[1132],{"_9":1127,"_1128":1241},"/app/05.05.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/05.solution.function-types?view=editor&title=Reduce+Duplication+%28solution%29",{"_463":678,"_473":1244,"_460":1255},{"_20":175,"_346":927,"_1105":1245,"_22":176,"_24":177,"_1107":1246,"_1122":1247,"_1125":1249,"_1133":1252,"_1136":1254,"_461":586,"_463":678,"_9":473,"_1138":179},"06.problem.satisfies","var Component=(()=>{var h=Object.create;var o=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var v=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),w=(a,e)=>{for(var s in e)o(a,s,{get:e[s],enumerable:!0})},l=(a,e,s,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!m.call(a,r)&&r!==s&&o(a,r,{get:()=>e[r],enumerable:!(t=y(e,r))||t.enumerable});return a};var f=(a,e,s)=>(s=a!=null?h(u(a)):{},l(e||!a||!a.__esModule?o(s,\"default\",{value:a,enumerable:!0}):s,a)),x=a=>l(o({},\"__esModule\",{value:!0}),a);var i=v((j,c)=>{c.exports=_jsx_runtime});var E={};w(E,{default:()=>p,frontmatter:()=>g});var n=f(i()),g=void 0;function d(a){let e={a:\"a\",code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",strong:\"strong\",...a.components},{EpicVideo:s}=e;return s||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Satisfies\"}),`\n`,(0,n.jsx)(s,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/satisfies\"}),`\n`,(0,n.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Ok, so repeating ourselves there is not awesome. The problem is that we want\nto enforce the value of our `,(0,n.jsx)(e.code,{children:\"operations\"}),` object, but to do that we either have\nto widen the type of our `,(0,n.jsx)(e.code,{children:\"key\"}),` or list it explicitly as we're doing. This is\nbecause when you cast your object to a type, TypeScript widens your type as far\nas that cast. Here's a simple example of the problem:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ValidCandies\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"twix\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"snickers\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"m&ms\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"candy\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\":\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ValidCandies\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"twix\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// candy is 'twix' | 'snickers' | 'm&ms'\"}),`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[`What we need is some way to enforce the values of our object, without having to\nannotate our object. We can do this using TypeScript's\n`,(0,n.jsx)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html#the-satisfies-operator\",children:(0,n.jsx)(e.code,{children:\"satisfies\"})}),` syntax.\nFor example:`]}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsxs)(e.code,{children:[(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"type\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ValidCandies\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"twix\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"snickers\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"|\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"m&ms\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"candy\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"twix\"}),\"'\",\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"satisfies\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ValidCandies\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// candy is 'twix'\"}),`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"See? No type widening! Wahoo!\"}),`\n`,(0,n.jsx)(\"callout-info\",{children:(0,n.jsxs)(e.p,{children:[\"Before \",(0,n.jsx)(e.code,{children:\"satisfies\"}),` came out, we had to use a \"Constrained Identity Function\"\n(pattern coined by yours truly). Learn more in `,(0,n.jsx)(e.strong,{children:(0,n.jsx)(e.a,{href:\"https://kentcdodds.com/blog/how-to-write-a-constrained-identity-function-in-typescript\",children:`How to write a Constrained\nIdentity Function (CIF) in\nTypeScript`})})]})})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function k(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(E);})();\n;return Component;",[1248],"https://www.epicreact.dev/workshops/react-fundamentals/satisfies",{"_9":1127,"_1128":1250,"_1130":1251},"/app/05.06.problem/test/",[1132],{"_9":1127,"_1128":1253},"/app/05.06.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/06.problem.satisfies?view=editor&title=Satisfies+%28problem%29",{"_20":179,"_346":927,"_1105":1256,"_22":180,"_24":181,"_1107":1257,"_1122":1258,"_1125":1260,"_1133":1263,"_1136":1265,"_461":586,"_463":678,"_9":460,"_1150":-5},"06.solution.satisfies","var Component=(()=>{var h=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var _=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},c=(t,e,o,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of l(e))!x.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(s=u(e,r))||s.enumerable});return t};var j=(t,e,o)=>(o=t!=null?h(m(t)):{},c(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),g=t=>c(i({},\"__esModule\",{value:!0}),t);var d=_((k,a)=>{a.exports=_jsx_runtime});var M={};w(M,{default:()=>f,frontmatter:()=>y});var n=j(d()),y=void 0;function p(t){let e={h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Satisfies\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/satisfies/solution\"}),`\n`,(0,n.jsx)(e.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} That is...\"}),`\n`,(0,n.jsx)(e.p,{children:\"...\"}),`\n`,(0,n.jsx)(e.p,{children:\"...\"}),`\n`,(0,n.jsx)(e.p,{children:\"Satisfactory. \\u{1F921}\"})]})}function f(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(p,{...t})}):p(t)}function E(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(M);})();\n;return Component;",[1259],"https://www.epicreact.dev/workshops/react-fundamentals/satisfies/solution",{"_9":1127,"_1128":1261,"_1130":1262},"/app/05.06.solution/test/",[1132],{"_9":1127,"_1128":1264},"/app/05.06.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/05.typescript/06.solution.satisfies?view=editor&title=Satisfies+%28solution%29",[1267,1272,1277,1282,1287,1292],{"_20":135,"_346":895,"_1105":1120,"_22":136,"_24":137,"_1107":1121,"_1122":1268,"_1125":1269,"_1133":1271,"_1136":1137,"_461":586,"_463":483,"_9":473,"_1138":139},[1124],{"_9":1127,"_1128":1129,"_1130":1270},[1132],{"_9":1127,"_1128":1135},{"_20":143,"_346":919,"_1105":1153,"_22":144,"_24":145,"_1107":1154,"_1122":1273,"_1125":1274,"_1133":1276,"_1136":1162,"_461":586,"_463":474,"_9":473,"_1138":147},[1156],{"_9":1127,"_1128":1158,"_1130":1275},[1132],{"_9":1127,"_1128":1161},{"_20":151,"_346":921,"_1105":1176,"_22":152,"_24":153,"_1107":1177,"_1122":1278,"_1125":1279,"_1133":1281,"_1136":1185,"_461":586,"_463":464,"_9":473,"_1138":155},[1179],{"_9":1127,"_1128":1181,"_1130":1280},[1132],{"_9":1127,"_1128":1184},{"_20":159,"_346":923,"_1105":1199,"_22":160,"_24":161,"_1107":1200,"_1122":1283,"_1125":1284,"_1133":1286,"_1136":1208,"_461":586,"_463":462,"_9":473,"_1138":163},[1202],{"_9":1127,"_1128":1204,"_1130":1285},[1132],{"_9":1127,"_1128":1207},{"_20":167,"_346":925,"_1105":1222,"_22":168,"_24":169,"_1107":1223,"_1122":1288,"_1125":1289,"_1133":1291,"_1136":1231,"_461":586,"_463":586,"_9":473,"_1138":171},[1225],{"_9":1127,"_1128":1227,"_1130":1290},[1132],{"_9":1127,"_1128":1230},{"_20":175,"_346":927,"_1105":1245,"_22":176,"_24":177,"_1107":1246,"_1122":1293,"_1125":1294,"_1133":1296,"_1136":1254,"_461":586,"_463":678,"_9":473,"_1138":179},[1248],{"_9":1127,"_1128":1250,"_1130":1295},[1132],{"_9":1127,"_1128":1253},[1298,1303,1308,1313,1318,1323],{"_20":139,"_346":895,"_1105":1140,"_22":140,"_24":141,"_1107":1141,"_1122":1299,"_1125":1300,"_1133":1302,"_1136":1149,"_461":586,"_463":483,"_9":460,"_1150":-5},[1143],{"_9":1127,"_1128":1145,"_1130":1301},[1132],{"_9":1127,"_1128":1148},{"_20":147,"_346":919,"_1105":1164,"_22":148,"_24":149,"_1107":1165,"_1122":1304,"_1125":1305,"_1133":1307,"_1136":1173,"_461":586,"_463":474,"_9":460,"_1150":-5},[1167],{"_9":1127,"_1128":1169,"_1130":1306},[1132],{"_9":1127,"_1128":1172},{"_20":155,"_346":921,"_1105":1187,"_22":156,"_24":157,"_1107":1188,"_1122":1309,"_1125":1310,"_1133":1312,"_1136":1196,"_461":586,"_463":464,"_9":460,"_1150":-5},[1190],{"_9":1127,"_1128":1192,"_1130":1311},[1132],{"_9":1127,"_1128":1195},{"_20":163,"_346":923,"_1105":1210,"_22":164,"_24":165,"_1107":1211,"_1122":1314,"_1125":1315,"_1133":1317,"_1136":1219,"_461":586,"_463":462,"_9":460,"_1150":-5},[1213],{"_9":1127,"_1128":1215,"_1130":1316},[1132],{"_9":1127,"_1128":1218},{"_20":171,"_346":925,"_1105":1233,"_22":172,"_24":173,"_1107":1234,"_1122":1319,"_1125":1320,"_1133":1322,"_1136":1242,"_461":586,"_463":586,"_9":460,"_1150":-5},[1236],{"_9":1127,"_1128":1238,"_1130":1321},[1132],{"_9":1127,"_1128":1241},{"_20":179,"_346":927,"_1105":1256,"_22":180,"_24":181,"_1107":1257,"_1122":1324,"_1125":1325,"_1133":1327,"_1136":1265,"_461":586,"_463":678,"_9":460,"_1150":-5},[1259],{"_9":1127,"_1128":1261,"_1130":1326},[1132],{"_9":1127,"_1128":1264},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=React%20Fundamentals%20%E2%9A%9B&entry.428900931=TypeScript","epicVideoInfosPromise",["P",1331],"exerciseFinished",{"_1334":1335,"_24":1336},"file","/myapp/workshop-content/exercises/05.typescript/FINISHED.mdx","exercises/05.typescript/FINISHED.mdx","prevStepLink",{"_1339":1340,"_1341":1342},"to","/exercise/05/06/solution","aria-label","Satisfies (solution)","nextStepLink",{"_1339":1345,"_1341":955},"/exercise/06","routes/_app+/exercise+/_layout","actionData","errors"]

05. TypeScript/Elaboration