[{"_1":2,"_1140":-5,"_1141":-5},"loaderData",{"_3":4,"_695":696,"_992":993},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_334":335,"_337":338,"_339":16,"_340":341,"_398":343,"_399":345,"_346":347,"_400":401,"_422":423,"_447":-5,"_448":-5,"_449":450},"userId",{"_7":8,"_9":10},"id","py7o2m2q5bl3yuyf1aw13vx2","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},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_342":343,"_344":345,"_346":347,"_353":354,"_371":372,"_374":375,"_376":377,"_378":379,"_382":383,"_388":389,"_392":393,"_394":395,"_396":397},"title","React Fundamentals ⚛","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":348,"_349":350,"_351":352},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-fundamentals","discordChannelId","1285244676286189569","discordTags",[369,370],"1285246046498328627","1285245484432228375","onboardingVideo",[373],"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",{"_380":381},"view","editor","forms",{"_384":385,"_386":387},"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",{"_390":391},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_402":403,"_404":405,"_406":407,"_408":375,"_409":377,"_410":391,"_411":412,"_413":414,"_415":416,"_417":391,"_418":419,"_420":421},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.36.0","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","a3108346c589968b08452994132f77ee17b2673fc1ea57b4b6c233bfaa0a002b","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_424":425,"_426":427,"_428":429,"_430":431,"_432":431,"_433":434,"_441":442,"_443":444,"_445":393,"_446":391},"protocol","http:","hostname","fundamentals.epicreact.dev","port","","origin","http://fundamentals.epicreact.dev","domain","hints",{"_435":436,"_437":438,"_439":440},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/02/finished","session",{"_435":-5},"separator","online","toast","confettiId","presence",{"_451":452},"users",[453,470,477,484,493,501,509,517,526,533,539,546,554,562,570,577,584,591,598,605,612,619,626,633,640,647,651,654,660,666,669,675,681,687,691],{"_7":454,"_455":391,"_456":457,"_458":459,"_20":460,"_461":462},"e04924d8-83de-4512-91ac-909b70b0ed56","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/c9efb061aa4edcb554784fa09e542f19?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/c9efb061aa4edcb554784fa09e542f19?size=512&default=identicon","mehmet fırat kömürcü","location",{"_398":463,"_430":464,"_386":465},"Advanced React APIs 🔥","http://localhost:5639",{"_9":466,"_467":468,"_469":468},"problem","exerciseNumber",1,"stepNumber",{"_7":471,"_455":391,"_456":472,"_458":473,"_20":474,"_461":475},"3c44df8f-cd2a-44e2-8ebc-f47fdfb890b2","https://www.gravatar.com/avatar/f3058659902bb50dc09708f5e3e72d86?size=64&default=identicon","https://www.gravatar.com/avatar/f3058659902bb50dc09708f5e3e72d86?size=512&default=identicon","Wyatt",{"_398":476,"_430":464},"MCP Fundamentals 🧱",{"_7":478,"_455":391,"_456":479,"_458":480,"_20":481,"_461":482},"f7f4304b-7bc3-4c5a-9d80-d96eb3a16f86","https://cdn.discordapp.com/avatars/374457702493061121/715286737e66694e9b7b8f33ae9de474.png?size=64","https://cdn.discordapp.com/avatars/374457702493061121/715286737e66694e9b7b8f33ae9de474.png?size=512","Anam",{"_398":476,"_430":483},"http://localhost:5640",{"_7":485,"_455":391,"_456":486,"_458":487,"_20":488,"_461":489},"39412fd1-8e0a-4218-8566-c67acc1a6778","https://www.gravatar.com/avatar/0989fdc8ffeffc2bdeba299560136f77?size=64&default=identicon","https://www.gravatar.com/avatar/0989fdc8ffeffc2bdeba299560136f77?size=512&default=identicon","Md Anam Hossain",{"_398":490,"_430":483,"_386":491},"Web Authentication 🔐",{"_467":492},5,{"_7":494,"_455":391,"_456":495,"_458":496,"_20":497,"_461":498},"9ee23268-3c73-4e2d-b6b8-072e274631dc","https://www.gravatar.com/avatar/7f51e958b89a873f8d99643e39562b40?size=64&default=identicon","https://www.gravatar.com/avatar/7f51e958b89a873f8d99643e39562b40?size=512&default=identicon","Steve Zelaznik",{"_398":499,"_430":464,"_386":500},"React Hooks 🎣",{"_9":466,"_467":468,"_469":468},{"_7":502,"_455":391,"_456":503,"_458":504,"_20":505,"_461":506},"70078aa1-7b41-40f4-9930-79013303627b","https://avatars.githubusercontent.com/u/4356894?v=4&size=64","https://avatars.githubusercontent.com/u/4356894?v=4&size=512","Thor Anderson",{"_398":476,"_430":464,"_386":507},{"_9":466,"_467":508,"_469":508},2,{"_7":510,"_455":391,"_456":511,"_458":512,"_20":513,"_461":514},"1c7280fe-b2ca-4416-9d2e-11e4fa91e655","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=64","https://cdn.discordapp.com/avatars/603759289391382556/8c5277b23a4e81afd524afce2dc19dc2.png?size=512","Lenin",{"_398":499,"_430":464,"_386":515},{"_9":466,"_467":516,"_469":468},3,{"_7":518,"_455":391,"_456":519,"_458":520,"_20":521,"_461":522},"692eea5a-c75a-4f1f-8de9-b34b85e3d392","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=64","https://cdn.discordapp.com/avatars/316066013969907715/6183a2142ad6efe60e4f63c699c1ee5f.png?size=512","Wutthipong Bunyafakpol",{"_398":523,"_430":464,"_386":524},"Advanced MCP Features 🐡",{"_467":525},4,{"_7":527,"_455":391,"_456":528,"_458":529,"_20":530,"_461":531},"f91d00ae-7381-4cd0-9966-cd6e931dbc0d","https://cdn.discordapp.com/avatars/490786998030958592/65ebd20f986affa5b1e861d8675e86a9.png?size=64","https://cdn.discordapp.com/avatars/490786998030958592/65ebd20f986affa5b1e861d8675e86a9.png?size=512","Dávid Szabó",{"_398":499,"_430":464,"_386":532},{"_467":468},{"_7":534,"_455":16,"_456":535,"_458":536,"_20":537,"_461":538},"3a31c935-7b4f-40ea-a838-0d7569d54bdc","https://avatars.githubusercontent.com/u/52546?v=4&size=64","https://avatars.githubusercontent.com/u/52546?v=4&size=512","Hirotaka Mizutani",{"_398":476,"_430":464},{"_7":540,"_455":391,"_456":541,"_458":542,"_20":543,"_461":544},"2e8ac2ae-c7c3-4b66-a65d-aa57db0ac986","https://www.gravatar.com/avatar/a379b807dbfbc4d39fa1c3dfddc31f83?size=64&default=identicon","https://www.gravatar.com/avatar/a379b807dbfbc4d39fa1c3dfddc31f83?size=512&default=identicon","STEPHANE GAUTIER IALLE KEMGANG",{"_398":463,"_430":464,"_386":545},{"_467":516},{"_7":547,"_455":391,"_456":548,"_458":549,"_20":550,"_461":551},"c2a55c9c-b6cd-4f43-9951-ccd1d8650adc","https://www.gravatar.com/avatar/6b00b8e198cd18ae74297d5c4b9ef463?size=64&default=identicon","https://www.gravatar.com/avatar/6b00b8e198cd18ae74297d5c4b9ef463?size=512&default=identicon","Binalfew Kassa",{"_398":552,"_430":464,"_386":553},"React Component Testing with Vitest",{"_9":466,"_467":508,"_469":468},{"_7":555,"_455":391,"_456":556,"_458":557,"_20":558,"_461":559},"2a8ab3a7-cef7-4164-b966-aba1161f7436","https://www.gravatar.com/avatar/6a2fbe943d8c0611860d9642afa3822c?size=64&default=identicon","https://www.gravatar.com/avatar/6a2fbe943d8c0611860d9642afa3822c?size=512&default=identicon","Merlin",{"_398":560,"_430":464,"_386":561},"React Server Components 🤹",{"_9":466,"_467":525,"_469":508},{"_7":563,"_455":391,"_456":564,"_458":565,"_20":566,"_461":567},"a5dc3818-bce3-48a1-b110-7ddc818936f3","https://cdn.discordapp.com/avatars/332791154313658388/b457472f132dcaa777b71296e6f44a63.png?size=64","https://cdn.discordapp.com/avatars/332791154313658388/b457472f132dcaa777b71296e6f44a63.png?size=512","Jay",{"_398":476,"_430":464,"_386":568},{"_9":569,"_467":508,"_469":516},"solution",{"_7":571,"_455":391,"_456":572,"_458":573,"_20":574,"_461":575},"d1a8c91e-0977-4941-9521-0963f59f8425","https://cdn.discordapp.com/avatars/480473090145386535/0a896fc6b71134c58fe0b50ba92475f2.png?size=64","https://cdn.discordapp.com/avatars/480473090145386535/0a896fc6b71134c58fe0b50ba92475f2.png?size=512","Michał",{"_398":476,"_430":464,"_386":576},{"_9":466,"_467":516,"_469":516},{"_7":578,"_455":391,"_456":579,"_458":580,"_20":581,"_461":582},"653e10e4-f405-42d0-bfd1-6a89deb0a0a5","https://www.gravatar.com/avatar/3caf0eb19f46da6fa60348ef1f6d012b?size=64&default=identicon","https://www.gravatar.com/avatar/3caf0eb19f46da6fa60348ef1f6d012b?size=512&default=identicon","Marvin",{"_398":476,"_430":483,"_386":583},{"_9":569,"_467":492,"_469":468},{"_7":585,"_455":391,"_456":586,"_458":587,"_20":588,"_461":589},"9c0adb6b-428d-4de1-a667-1fd50c45ffc0","https://cdn.discordapp.com/avatars/1102814201120034856/c68235f228e71de66418cb86876248d9.png?size=64","https://cdn.discordapp.com/avatars/1102814201120034856/c68235f228e71de66418cb86876248d9.png?size=512","Rednar Rosique",{"_398":523,"_430":464,"_386":590},{"_9":569,"_467":508,"_469":468},{"_7":592,"_455":391,"_456":593,"_458":594,"_20":595,"_461":596},"216b531c-4377-4b36-b912-4c0f77f18d8e","https://www.gravatar.com/avatar/087dd49f2165832940809f2be54cc8d6?size=64&default=identicon","https://www.gravatar.com/avatar/087dd49f2165832940809f2be54cc8d6?size=512&default=identicon","Nikhilesh Katakam",{"_398":523,"_430":464,"_386":597},{"_467":492},{"_7":599,"_455":391,"_456":600,"_458":601,"_20":602,"_461":603},"a1299e9f-0947-40d9-a938-01f2725e4bf6","https://www.gravatar.com/avatar/3452765deec83136e61d98e0ccc3e83f?size=64&default=identicon","https://www.gravatar.com/avatar/3452765deec83136e61d98e0ccc3e83f?size=512&default=identicon","Meni",{"_398":476,"_430":464,"_386":604},{"_9":466,"_467":516,"_469":508},{"_7":606,"_455":391,"_456":607,"_458":608,"_20":609,"_461":610},"e2de664f-a76d-42d9-ab6c-1aaf33ad97db","https://www.gravatar.com/avatar/2b4aac8301f008dac1b4f0f4d611a692?size=64&default=identicon","https://www.gravatar.com/avatar/2b4aac8301f008dac1b4f0f4d611a692?size=512&default=identicon","Teerawat Prarom",{"_398":463,"_430":464,"_386":611},{"_9":466,"_467":508,"_469":468},{"_7":613,"_455":391,"_456":614,"_458":615,"_20":616,"_461":617},"9b5cc8a8-ac08-4398-ae31-eaa23ceaf8a1","https://www.gravatar.com/avatar/266c7e634068f7baf1eebc875dc946c5?size=64&default=identicon","https://www.gravatar.com/avatar/266c7e634068f7baf1eebc875dc946c5?size=512&default=identicon","K Raghavendra Rao",{"_398":343,"_430":464,"_386":618},{"_467":508},{"_7":620,"_455":391,"_456":621,"_458":622,"_20":623,"_461":624},"926b5406-4854-4731-bd4f-da63fa9baa9b","https://www.gravatar.com/avatar/6e6245b1507778895a87d1648a7769f1?size=64&default=identicon","https://www.gravatar.com/avatar/6e6245b1507778895a87d1648a7769f1?size=512&default=identicon","Mingus",{"_398":476,"_430":464,"_386":625},{"_467":468},{"_7":627,"_455":391,"_456":628,"_458":629,"_20":630,"_461":631},"6dd572cb-3e85-4e32-a1c9-8c91e2aea3d5","https://cdn.discordapp.com/avatars/1027693649808597123/9170181dbb8baad5d4b8ff346251bc85.png?size=64","https://cdn.discordapp.com/avatars/1027693649808597123/9170181dbb8baad5d4b8ff346251bc85.png?size=512","Jeff CA",{"_398":499,"_430":464,"_386":632},{"_9":466,"_467":468,"_469":525},{"_7":634,"_455":391,"_456":635,"_458":636,"_20":637,"_461":638},"2c4caa18-6594-48f9-8914-a4beb45c20cd","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=64","https://cdn.discordapp.com/avatars/105755735731781632/a_1afdce133caaa4d8d17d02c07b0d2b69.gif?size=512","Kent",{"_398":639,"_430":464},"MCP UI 🪟",{"_7":641,"_455":391,"_456":642,"_458":643,"_20":644,"_461":645},"d15eabf3-02c8-4419-80f1-cff0833567b0","https://www.gravatar.com/avatar/9e38df1be137c0f6dce7503da675b5d9?size=64&default=identicon","https://www.gravatar.com/avatar/9e38df1be137c0f6dce7503da675b5d9?size=512&default=identicon","Kevin",{"_398":476,"_430":464,"_386":646},{"_9":569,"_467":516,"_469":525},{"_7":648,"_461":649},"h6o9ybmqixdu10hn7bhfdhx6",{"_398":650,"_430":464},"Full Stack Foundations 🔭",{"_7":652,"_461":653},"ousjfpfs4qf3uvag2glxtahq",{"_398":476,"_430":464},{"_7":655,"_455":391,"_456":656,"_458":657,"_20":-5,"_461":658},"6cca6894-c48b-48c8-9011-43317bc2174b","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=64&default=identicon","https://www.gravatar.com/avatar/06d4bf3ae925cce17be2699cc6241cc3?size=512&default=identicon",{"_398":523,"_430":483,"_386":659},{"_9":466,"_467":468,"_469":468},{"_7":661,"_455":391,"_456":662,"_458":663,"_20":-5,"_461":664},"8efea78b-638c-487b-add6-ec4e77e28182","https://cdn.discordapp.com/avatars/648558653728751628/73d7fd34ef48f41fdb734bb636802c91.png?size=64","https://cdn.discordapp.com/avatars/648558653728751628/73d7fd34ef48f41fdb734bb636802c91.png?size=512",{"_398":476,"_430":464,"_386":665},{"_467":492},{"_7":667,"_461":668},"lwyemodkdm5bebzt6jabcos8",{"_398":476,"_430":464},{"_7":670,"_455":16,"_456":671,"_458":672,"_20":-5,"_461":673},"368c45bd-831c-4ce2-b81e-0e449852d10f","https://www.gravatar.com/avatar/400832bf4122f01bd2946e3f5a44a7bd?size=64&default=identicon","https://www.gravatar.com/avatar/400832bf4122f01bd2946e3f5a44a7bd?size=512&default=identicon",{"_398":499,"_430":464,"_386":674},{"_9":466,"_467":508,"_469":508},{"_7":676,"_455":391,"_456":677,"_458":678,"_20":-5,"_461":679},"5f6353c1-d516-4c93-9807-8243a07580f5","https://www.gravatar.com/avatar/4e4d79aaff22e5baf8ebadc603a4ebf1?size=64&default=identicon","https://www.gravatar.com/avatar/4e4d79aaff22e5baf8ebadc603a4ebf1?size=512&default=identicon",{"_398":523,"_430":464,"_386":680},{"_467":516},{"_7":682,"_455":391,"_456":683,"_458":684,"_20":-5,"_461":685},"d0c15df3-ee32-4757-8004-2b37ad485cd2","https://cdn.discordapp.com/avatars/690008320207224854/92bf9bebdbff03c8779e0a86f49834a7.png?size=64","https://cdn.discordapp.com/avatars/690008320207224854/92bf9bebdbff03c8779e0a86f49834a7.png?size=512",{"_398":476,"_430":464,"_386":686},{"_9":466,"_467":516,"_469":516},{"_7":688,"_461":689},"p8kuel0stzpfo5tn21c26zhi",{"_398":499,"_430":690},"http://hooks.epicreact.dev",{"_7":692,"_461":693},"qze1axsy5tgj039yg1dkyi51",{"_398":343,"_430":431,"_386":694},{"_467":508,"_469":-5,"_9":-5},"routes/_app+/_layout",{"_398":343,"_697":698,"_988":989,"_991":16},"exercises",[699,718,741,776,805,846,868,904,940,964],{"_467":468,"_342":700,"_701":702,"_706":707,"_710":711},"Hello World in JS","solutions",[703,704],{"_469":468,"_342":700,"_20":27},{"_469":508,"_342":705,"_20":35},"Generate the Root Node","problems",[708,709],{"_469":468,"_342":700,"_20":21},{"_469":508,"_342":705,"_20":31},"steps",[712,715],{"_469":468,"_342":700,"_20":21,"_466":713,"_569":714},{"_20":21,"_342":700},{"_20":27,"_342":700},{"_469":508,"_342":705,"_20":31,"_466":716,"_569":717},{"_20":31,"_342":705},{"_20":35,"_342":705},{"_467":508,"_342":719,"_701":720,"_706":727,"_710":731},"Raw React APIs",[721,723,725],{"_469":468,"_342":722,"_20":43},"Create React Elements",{"_469":508,"_342":724,"_20":51},"Nesting Elements",{"_469":516,"_342":726,"_20":59},"Deep Nesting Elements",[728,729,730],{"_469":468,"_342":722,"_20":39},{"_469":508,"_342":724,"_20":47},{"_469":516,"_342":726,"_20":55},[732,735,738],{"_469":468,"_342":722,"_20":39,"_466":733,"_569":734},{"_20":39,"_342":722},{"_20":43,"_342":722},{"_469":508,"_342":724,"_20":47,"_466":736,"_569":737},{"_20":47,"_342":724},{"_20":51,"_342":724},{"_469":516,"_342":726,"_20":55,"_466":739,"_569":740},{"_20":55,"_342":726},{"_20":59,"_342":726},{"_467":516,"_342":742,"_701":743,"_706":754,"_710":760},"Using JSX",[744,746,748,750,752],{"_469":468,"_342":745,"_20":67},"Compiling JSX",{"_469":508,"_342":747,"_20":75},"Interpolation",{"_469":516,"_342":749,"_20":83},"Spread props",{"_469":525,"_342":751,"_20":91},"Nesting JSX",{"_469":492,"_342":753,"_20":99},"Fragments",[755,756,757,758,759],{"_469":468,"_342":745,"_20":63},{"_469":508,"_342":747,"_20":71},{"_469":516,"_342":749,"_20":79},{"_469":525,"_342":751,"_20":87},{"_469":492,"_342":753,"_20":95},[761,764,767,770,773],{"_469":468,"_342":745,"_20":63,"_466":762,"_569":763},{"_20":63,"_342":745},{"_20":67,"_342":745},{"_469":508,"_342":747,"_20":71,"_466":765,"_569":766},{"_20":71,"_342":747},{"_20":75,"_342":747},{"_469":516,"_342":749,"_20":79,"_466":768,"_569":769},{"_20":79,"_342":749},{"_20":83,"_342":749},{"_469":525,"_342":751,"_20":87,"_466":771,"_569":772},{"_20":87,"_342":751},{"_20":91,"_342":751},{"_469":492,"_342":753,"_20":95,"_466":774,"_569":775},{"_20":95,"_342":753},{"_20":99,"_342":753},{"_467":525,"_342":777,"_701":778,"_706":787,"_710":792},"Custom Components",[779,781,783,785],{"_469":468,"_342":780,"_20":107},"Simple Function",{"_469":508,"_342":782,"_20":115},"Raw API",{"_469":516,"_342":784,"_20":123},"JSX Components",{"_469":525,"_342":786,"_20":131},"Props",[788,789,790,791],{"_469":468,"_342":780,"_20":103},{"_469":508,"_342":782,"_20":111},{"_469":516,"_342":784,"_20":119},{"_469":525,"_342":786,"_20":127},[793,796,799,802],{"_469":468,"_342":780,"_20":103,"_466":794,"_569":795},{"_20":103,"_342":780},{"_20":107,"_342":780},{"_469":508,"_342":782,"_20":111,"_466":797,"_569":798},{"_20":111,"_342":782},{"_20":115,"_342":782},{"_469":516,"_342":784,"_20":119,"_466":800,"_569":801},{"_20":119,"_342":784},{"_20":123,"_342":784},{"_469":525,"_342":786,"_20":127,"_466":803,"_569":804},{"_20":127,"_342":786},{"_20":131,"_342":786},{"_467":492,"_342":806,"_701":807,"_706":820,"_710":827},"TypeScript",[808,809,811,813,815,817],{"_469":468,"_342":786,"_20":139},{"_469":508,"_342":810,"_20":147},"Narrow Types",{"_469":516,"_342":812,"_20":155},"Derive Types",{"_469":525,"_342":814,"_20":163},"Default Props",{"_469":492,"_342":816,"_20":171},"Reduce Duplication",{"_469":818,"_342":819,"_20":179},6,"Satisfies",[821,822,823,824,825,826],{"_469":468,"_342":786,"_20":135},{"_469":508,"_342":810,"_20":143},{"_469":516,"_342":812,"_20":151},{"_469":525,"_342":814,"_20":159},{"_469":492,"_342":816,"_20":167},{"_469":818,"_342":819,"_20":175},[828,831,834,837,840,843],{"_469":468,"_342":786,"_20":135,"_466":829,"_569":830},{"_20":135,"_342":786},{"_20":139,"_342":786},{"_469":508,"_342":810,"_20":143,"_466":832,"_569":833},{"_20":143,"_342":810},{"_20":147,"_342":810},{"_469":516,"_342":812,"_20":151,"_466":835,"_569":836},{"_20":151,"_342":812},{"_20":155,"_342":812},{"_469":525,"_342":814,"_20":159,"_466":838,"_569":839},{"_20":159,"_342":814},{"_20":163,"_342":814},{"_469":492,"_342":816,"_20":167,"_466":841,"_569":842},{"_20":167,"_342":816},{"_20":171,"_342":816},{"_469":818,"_342":819,"_20":175,"_466":844,"_569":845},{"_20":175,"_342":819},{"_20":179,"_342":819},{"_467":818,"_342":847,"_701":848,"_706":854,"_710":858},"Styling",[849,850,852],{"_469":468,"_342":847,"_20":187},{"_469":508,"_342":851,"_20":195},"Custom Component",{"_469":516,"_342":853,"_20":203},"Size Prop",[855,856,857],{"_469":468,"_342":847,"_20":183},{"_469":508,"_342":851,"_20":191},{"_469":516,"_342":853,"_20":199},[859,862,865],{"_469":468,"_342":847,"_20":183,"_466":860,"_569":861},{"_20":183,"_342":847},{"_20":187,"_342":847},{"_469":508,"_342":851,"_20":191,"_466":863,"_569":864},{"_20":191,"_342":851},{"_20":195,"_342":851},{"_469":516,"_342":853,"_20":199,"_466":866,"_569":867},{"_20":199,"_342":853},{"_20":203,"_342":853},{"_467":869,"_342":870,"_701":871,"_706":882,"_710":888},7,"Forms",[872,874,876,878,880],{"_469":468,"_342":873,"_20":211},"Form",{"_469":508,"_342":875,"_20":219},"Form Action",{"_469":516,"_342":877,"_20":227},"Input Types",{"_469":525,"_342":879,"_20":235},"Submission",{"_469":492,"_342":881,"_20":243},"Form Actions",[883,884,885,886,887],{"_469":468,"_342":873,"_20":207},{"_469":508,"_342":875,"_20":215},{"_469":516,"_342":877,"_20":223},{"_469":525,"_342":879,"_20":231},{"_469":492,"_342":881,"_20":239},[889,892,895,898,901],{"_469":468,"_342":873,"_20":207,"_466":890,"_569":891},{"_20":207,"_342":873},{"_20":211,"_342":873},{"_469":508,"_342":875,"_20":215,"_466":893,"_569":894},{"_20":215,"_342":875},{"_20":219,"_342":875},{"_469":516,"_342":877,"_20":223,"_466":896,"_569":897},{"_20":223,"_342":877},{"_20":227,"_342":877},{"_469":525,"_342":879,"_20":231,"_466":899,"_569":900},{"_20":231,"_342":879},{"_20":235,"_342":879},{"_469":492,"_342":881,"_20":239,"_466":902,"_569":903},{"_20":239,"_342":881},{"_20":243,"_342":881},{"_467":905,"_342":906,"_701":907,"_706":918,"_710":924},8,"Inputs",[908,910,912,914,916],{"_469":468,"_342":909,"_20":251},"Checkbox",{"_469":508,"_342":911,"_20":259},"Select",{"_469":516,"_342":913,"_20":267},"Radios",{"_469":525,"_342":915,"_20":275},"Hidden Inputs",{"_469":492,"_342":917,"_20":283},"Default Value",[919,920,921,922,923],{"_469":468,"_342":909,"_20":247},{"_469":508,"_342":911,"_20":255},{"_469":516,"_342":913,"_20":263},{"_469":525,"_342":915,"_20":271},{"_469":492,"_342":917,"_20":279},[925,928,931,934,937],{"_469":468,"_342":909,"_20":247,"_466":926,"_569":927},{"_20":247,"_342":909},{"_20":251,"_342":909},{"_469":508,"_342":911,"_20":255,"_466":929,"_569":930},{"_20":255,"_342":911},{"_20":259,"_342":911},{"_469":516,"_342":913,"_20":263,"_466":932,"_569":933},{"_20":263,"_342":913},{"_20":267,"_342":913},{"_469":525,"_342":915,"_20":271,"_466":935,"_569":936},{"_20":271,"_342":915},{"_20":275,"_342":915},{"_469":492,"_342":917,"_20":279,"_466":938,"_569":939},{"_20":279,"_342":917},{"_20":283,"_342":917},{"_467":941,"_342":942,"_701":943,"_706":950,"_710":954},9,"Error Boundaries",[944,946,948],{"_469":468,"_342":945,"_20":291},"Composition",{"_469":508,"_342":947,"_20":299},"Other Errors",{"_469":516,"_342":949,"_20":307},"Reset",[951,952,953],{"_469":468,"_342":945,"_20":287},{"_469":508,"_342":947,"_20":295},{"_469":516,"_342":949,"_20":303},[955,958,961],{"_469":468,"_342":945,"_20":287,"_466":956,"_569":957},{"_20":287,"_342":945},{"_20":291,"_342":945},{"_469":508,"_342":947,"_20":295,"_466":959,"_569":960},{"_20":295,"_342":947},{"_20":299,"_342":947},{"_469":516,"_342":949,"_20":303,"_466":962,"_569":963},{"_20":303,"_342":949},{"_20":307,"_342":949},{"_467":965,"_342":966,"_701":967,"_706":974,"_710":978},10,"Rendering Arrays",[968,970,972],{"_469":468,"_342":969,"_20":315},"Key prop",{"_469":508,"_342":971,"_20":323},"Focus State",{"_469":516,"_342":973,"_20":331},"Key Reset",[975,976,977],{"_469":468,"_342":969,"_20":311},{"_469":508,"_342":971,"_20":319},{"_469":516,"_342":973,"_20":327},[979,982,985],{"_469":468,"_342":969,"_20":311,"_466":980,"_569":981},{"_20":311,"_342":969},{"_20":315,"_342":969},{"_469":508,"_342":971,"_20":319,"_466":983,"_569":984},{"_20":319,"_342":971},{"_20":323,"_342":971},{"_469":516,"_342":973,"_20":327,"_466":986,"_569":987},{"_20":327,"_342":973},{"_20":331,"_342":973},"playground",{"_990":-5,"_467":-2,"_469":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_994":995,"_398":343,"_386":996,"_1122":1123,"_1124":1125,"_1126":1127,"_1131":1132,"_1137":1138},"articleId","workshop-react-fundamentals-2-finished",{"_22":997,"_467":508,"_998":999,"_342":719,"_1000":1001,"_1002":1003,"_1004":1005,"_1007":1008,"_710":1010,"_706":1090,"_701":1106},"/myapp/workshop-content/exercises/02.raw-react","dirName","02.raw-react","instructionsCode","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return n};var v=(n,e,o)=>(o=n!=null?p(u(n)):{},c(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>c(i({},\"__esModule\",{value:!0}),n);var l=b((j,s)=>{s.exports=_jsx_runtime});var x={};g(x,{default:()=>h,frontmatter:()=>k});var t=v(l()),k=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",ul:\"ul\",...n.components},{EpicVideo:o}=e;return o||R(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Raw React APIs\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-raw-react-apis\"}),`\n`,(0,t.jsx)(e.p,{children:`React is the most widely used frontend framework in the world and it's using the\nsame APIs that you're using when it creates DOM nodes.`}),`\n`,(0,t.jsx)(\"callout-success\",{children:(0,t.jsxs)(e.p,{children:[\"In fact, \",(0,t.jsx)(e.a,{href:\"https://github.com/facebook/react/blob/fb10a2c66a923d218471b535fdaf0dbc530417ee/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L480\",children:`here's where that happens in the React source\ncode`}),`\nat the time of this writing.`]})}),`\n`,(0,t.jsx)(e.p,{children:`React abstracts away the imperative browser API from you to give you a much more\ndeclarative API to work with.`}),`\n`,(0,t.jsx)(\"callout-info\",{children:(0,t.jsxs)(e.p,{children:[\"Learn more about the difference between those two concepts here: \",(0,t.jsx)(e.a,{href:\"https://ui.dev/imperative-vs-declarative-programming/\",children:`Imperative\nvs Declarative\nProgramming`})]})}),`\n`,(0,t.jsx)(e.p,{children:`One important thing to know about React is that it supports multiple platforms\n(for example, native mobile, native desktop, web, and even terminal and VR).\nEach of these platforms has its own code necessary for interacting with that\nplatform, and then there's shared code between the platforms.`}),`\n`,(0,t.jsx)(e.p,{children:`With that in mind, you need two JavaScript files to write React applications for\nthe web:`}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[`React: responsible for creating React elements (kinda like\n`,(0,t.jsx)(e.code,{children:\"document.createElement()\"}),\")\"]}),`\n`,(0,t.jsxs)(e.li,{children:[`ReactDOM: responsible for rendering React elements to the DOM (kinda like\n`,(0,t.jsx)(e.code,{children:\"rootElement.append()\"}),\")\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[`You can learn more about this in\n`,(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react\",children:\"the react docs\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll also be loading these files into our application from the \",(0,t.jsx)(e.code,{children:\"./public\"}),`\ndirectory. This works great for our purposes of keeping this as simple as\npossible so you can learn React and not get distracted by a bunch of tools\n(don't worry, those will come later).`]}),`\n`,(0,t.jsxs)(e.p,{children:[`Finally, from now on, as you save your work, the browser will reload\nautomatically thanks to the `,(0,t.jsx)(e.code,{children:\"epic_ws.js\"}),` file we'll be including at the top of\nthe `,(0,t.jsx)(e.code,{children:\"index.html\"}),\" file. You're welcome \\u{1F60A}.\"]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}function R(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(x);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(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})},a=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(c=f(t,r))||c.enumerable});return e};var j=(e,t,n)=>(n=e!=null?u(w(e)):{},a(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),g=e=>a(i({},\"__esModule\",{value:!0}),e);var d=l((M,s)=>{s.exports=_jsx_runtime});var y={};_(y,{default:()=>h,frontmatter:()=>k});var o=j(d()),k=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Raw React APIs\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-raw-react-apis\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Wahoo! I'll bet you're excited to get into JSX after working with the raw\nAPIs huh? \\u{1F605}`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function b(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return g(y);})();\n;return Component;","instructionsEpicVideoEmbeds",[1006],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-raw-react-apis","finishedEpicVideoEmbeds",[1009],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-raw-react-apis",[1011,1044,1067],{"_469":468,"_466":1012,"_569":1032},{"_20":39,"_342":722,"_998":1013,"_22":40,"_24":41,"_1000":1014,"_1015":1016,"_1018":1019,"_1026":1027,"_1029":1030,"_467":508,"_469":468,"_9":466,"_1031":43},"01.problem.elements","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),k=(l,e)=>{for(var a in e)s(l,a,{get:e[a],enumerable:!0})},o=(l,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!u.call(l,r)&&r!==a&&s(l,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return l};var E=(l,e,a)=>(a=l!=null?p(y(l)):{},o(e||!l||!l.__esModule?s(a,\"default\",{value:l,enumerable:!0}):a,l)),f=l=>o(s({},\"__esModule\",{value:!0}),l);var i=v((x,t)=>{t.exports=_jsx_runtime});var N={};k(N,{default:()=>h,frontmatter:()=>g});var n=E(i()),g=void 0;function d(l){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...l.components},{EpicVideo:a}=e;return a||w(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Create React Elements\"}),`\n`,(0,n.jsx)(a,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/create-react-elements\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Let's convert this to use React! But don't worry, we won't be doing any JSX just\nyet... You're going to use raw React APIs here.`}),`\n`,(0,n.jsxs)(e.p,{children:[`In modern applications, you typically get React and React DOM files from a \"package registry\",\nlike `,(0,n.jsx)(e.a,{href:\"https://npmjs.com\",children:\"npm\"}),\" where packages we use are (\",(0,n.jsx)(e.a,{href:\"https://npm.im/react\",children:\"react\"}),` and\n`,(0,n.jsx)(e.a,{href:\"https://npm.im/react-dom\",children:\"react-dom\"}),\").\"]}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsx)(e.p,{children:`A package registry is a centralized repository where developers can publish\nand share reusable code packages.`})}),`\n`,(0,n.jsx)(e.p,{children:\"To keep things simple for these exercises, we'll import React from slightly different locations:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"public/react.js\"}),\" (accessed at \",(0,n.jsx)(e.code,{children:\"/react.js\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"public/react-dom/client.js\"}),\" (accessed at \",(0,n.jsx)(e.code,{children:\"/react-dom/client.js\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"These files use a service called \",(0,n.jsx)(e.a,{href:\"https://esm.sh\",children:\"esm.sh\"}),\" to provide the React packages.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Don't worry too much about \",(0,n.jsx)(e.a,{href:\"https://esm.sh\",children:\"esm.sh\"}),\" for now - it's just helping us load React easily in these exercises.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example of how to use the React createElement API:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createElement\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/react.js\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createRoot\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/react-dom/client.js\"}),\"'\",`\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(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { id: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"element-id\"}),\"'\",\", children: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Hello world!\"}),\"'\",\" }\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"h1\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createElement\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"root\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createRoot\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootElement\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"root\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement\"}),\")\",`\n`]})]})}),`\n`,(0,n.jsxs)(\"callout-info\",{children:[(0,n.jsx)(e.p,{children:`\\u{1F989} As a reminder, in a typical application, your import will be something\nlike`}),(0,n.jsx)(e.pre,{\"data-nonumber\":\"\",\"data-nolang\":\"\",\"data-line-numbers\":\"false\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createRoot\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-dom/client\"}),\"'\",`\n`]})})}),(0,n.jsxs)(e.p,{children:[\"With that, a build tool or \",(0,n.jsx)(e.code,{children:\"importmap\"}),` will handle resolving that to the\ncorrect path.`]})]}),`\n`,(0,n.jsxs)(e.p,{children:['The \"props\" in ',(0,n.jsx)(e.code,{children:\"elementProps\"}),` above is short for \"properties\". Props are a key concept\nin React - they're the way we pass data into our elements. You can think of the element\ntype as a blueprint for the kind of React component to create, and the props are the\ninputs that customize that element.`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"children\"}),` is a special prop in React. It represents the content inside an element.\nYou have a few ways to specify children:`]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"As a prop (like in the first example above)\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"As multiple arguments to \",(0,n.jsx)(e.code,{children:\"createElement\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"As an array\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example showing the last two methods:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { id: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"element-id\"}),\"'\",\" }\",`\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:\"elementType\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"h1\"}),\"'\",`\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:\"// Method 2: Multiple arguments\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement1\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createElement\"}),\"(\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Hello\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"world!\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Method 3: Array of children\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Hello\"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"world!\"}),\"'\",\"]\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement2\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createElement\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createRoot\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootElement\"}),\").\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement1\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// or reactElement2\"}),`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"Alright! Let's put this into practice!\"}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsxs)(e.p,{children:[\"\\u{1F4B0} Tip: Use \",(0,n.jsx)(e.code,{children:\"console.log(reactElement)\"}),` to see what your created element looks\nlike. You might find the structure interesting!`]})})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}function w(l,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+l+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(N);})();\n;return Component;","epicVideoEmbeds",[1017],"https://www.epicreact.dev/workshops/react-fundamentals/create-react-elements","test",{"_9":1020,"_1021":1022,"_1023":1024},"browser","pathname","/app/02.01.problem/test/","testFiles",[1025],"index.test.ts","dev",{"_9":1020,"_1021":1028},"/app/02.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/02.raw-react/01.problem.elements?view=editor&title=Create+React+Elements+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html","solutionName",{"_20":43,"_342":722,"_998":1033,"_22":44,"_24":45,"_1000":1034,"_1015":1035,"_1018":1037,"_1026":1040,"_1029":1042,"_467":508,"_469":468,"_9":569,"_1043":-5},"01.solution.elements","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),g=(e,t)=>{for(var n in t)s(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!w.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=u(t,r))||i.enumerable});return e};var _=(e,t,n)=>(n=e!=null?m(h(e)):{},c(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(s({},\"__esModule\",{value:!0}),e);var d=x((k,a)=>{a.exports=_jsx_runtime});var y={};g(y,{default:()=>p,frontmatter:()=>E});var o=_(d()),E=void 0;function l(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Create React Elements\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/create-react-elements/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! We're well on our way to using React for building UIs on the web!\nBut most apps are a little more complicated than a single element. Let's go\ndeeper!`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}function b(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;",[1036],"https://www.epicreact.dev/workshops/react-fundamentals/create-react-elements/solution",{"_9":1020,"_1021":1038,"_1023":1039},"/app/02.01.solution/test/",[1025],{"_9":1020,"_1021":1041},"/app/02.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/02.raw-react/01.solution.elements?view=editor&title=Create+React+Elements+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html","problemName",{"_469":508,"_466":1045,"_569":1056},{"_20":47,"_342":724,"_998":1046,"_22":48,"_24":49,"_1000":1047,"_1015":1048,"_1018":1050,"_1026":1053,"_1029":1055,"_467":508,"_469":508,"_9":466,"_1031":51},"02.problem.nesting","var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(t,a)&&a!==r&&l(t,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return t};var y=(t,e,r)=>(r=t!=null?p(b(t)):{},c(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>c(l({},\"__esModule\",{value:!0}),t);var i=g((j,s)=>{s.exports=_jsx_runtime});var E={};v(E,{default:()=>h,frontmatter:()=>w});var n=y(i()),w=void 0;function d(t){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...t.components},{EpicVideo:r}=e;return r||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Nesting Elements\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/nesting-elements\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} See if you can figure out how to write the JavaScript + React code to\ngenerate this DOM output:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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(--base08)\"},children:\"div\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"container\"}),'\"',\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\">Hello\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\">World\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hint: You can either use the \",(0,n.jsx)(e.code,{children:\"children\"}),` prop or additional arguments after the\nprops. If you use the `,(0,n.jsx)(e.code,{children:\"children\"}),` prop, you will get a warning in the developer\nconsole about needing a \"key\" prop. We'll get to that later.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tip: You'll use \",(0,n.jsx)(e.code,{children:\"createElement\"}),\" for the \",(0,n.jsx)(e.code,{children:\"span\"}),` elements, but to get the\nspace between them, you'll need to use a string (`,(0,n.jsx)(e.code,{children:\"' '\"}),`) to tell React to create\na `,(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Text\",children:(0,n.jsx)(e.code,{children:\"textNode\"})}),\".\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/createElement#createelement\",children:[\"\\u{1F4DC} \",(0,n.jsx)(e.code,{children:\"createElement\"})]})}),`\n`]})]})}function h(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 x(E);})();\n;return Component;",[1049],"https://www.epicreact.dev/workshops/react-fundamentals/nesting-elements",{"_9":1020,"_1021":1051,"_1023":1052},"/app/02.02.problem/test/",[1025],{"_9":1020,"_1021":1054},"/app/02.02.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/02.raw-react/02.problem.nesting?view=editor&title=Nesting+Elements+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_20":51,"_342":724,"_998":1057,"_22":52,"_24":53,"_1000":1058,"_1015":1059,"_1018":1061,"_1026":1064,"_1029":1066,"_467":508,"_469":508,"_9":569,"_1043":-5},"02.solution.nesting","var Component=(()=>{var m=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var h=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!x.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=l(e,r))||i.enumerable});return t};var _=(t,e,n)=>(n=t!=null?m(g(t)):{},c(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>c(s({},\"__esModule\",{value:!0}),t);var d=h((b,a)=>{a.exports=_jsx_runtime});var v={};w(v,{default:()=>p,frontmatter:()=>E});var o=_(d()),E=void 0;function u(t){let e={h1:\"h1\",p:\"p\",strong:\"strong\",...t.components},{EpicVideo:n}=e;return n||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Nesting Elements\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/nesting-elements/solution\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great! Now we've got a nice way to nest our React elements so we can build\ncomplex structures in our generated HTML. Let's go `,(0,o.jsx)(e.strong,{children:\"even deeper\"}),\"!\"]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(u,{...t})}):u(t)}function M(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(v);})();\n;return Component;",[1060],"https://www.epicreact.dev/workshops/react-fundamentals/nesting-elements/solution",{"_9":1020,"_1021":1062,"_1023":1063},"/app/02.02.solution/test/",[1025],{"_9":1020,"_1021":1065},"/app/02.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/02.raw-react/02.solution.nesting?view=editor&title=Nesting+Elements+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_469":516,"_466":1068,"_569":1079},{"_20":55,"_342":726,"_998":1069,"_22":56,"_24":57,"_1000":1070,"_1015":1071,"_1018":1073,"_1026":1076,"_1029":1078,"_467":508,"_469":516,"_9":466,"_1031":59},"03.problem.deep-nesting","var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},t=(a,e,s,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of b(e))!v.call(a,r)&&r!==s&&l(a,r,{get:()=>e[r],enumerable:!(o=m(e,r))||o.enumerable});return a};var g=(a,e,s)=>(s=a!=null?h(u(a)):{},t(e||!a||!a.__esModule?l(s,\"default\",{value:a,enumerable:!0}):s,a)),k=a=>t(l({},\"__esModule\",{value:!0}),a);var i=y((j,c)=>{c.exports=_jsx_runtime});var N={};f(N,{default:()=>p,frontmatter:()=>x});var n=g(i()),x=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:s}=e;return s||w(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Deep Nesting Elements\"}),`\n`,(0,n.jsx)(s,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/deep-nesting-elements\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Just to make sure we really understand how to nest this stuff. Try to create\nthis using React's APIs:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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(--base08)\"},children:\"div\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"container\"}),'\"',\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">Here's Sam's favorite food:\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ul\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"sams-food\"}),'\"',\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">Green eggs\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">Ham\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\",`\n`]})]})})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function w(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return k(N);})();\n;return Component;",[1072],"https://www.epicreact.dev/workshops/react-fundamentals/deep-nesting-elements",{"_9":1020,"_1021":1074,"_1023":1075},"/app/02.03.problem/test/",[1025],{"_9":1020,"_1021":1077},"/app/02.03.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/02.raw-react/03.problem.deep-nesting?view=editor&title=Deep+Nesting+Elements+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_20":59,"_342":726,"_998":1080,"_22":60,"_24":61,"_1000":1081,"_1015":1082,"_1018":1084,"_1026":1087,"_1029":1089,"_467":508,"_469":516,"_9":569,"_1043":-5},"03.solution.deep-nesting","var Component=(()=>{var u=Object.create;var s=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=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)s(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,i)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!x.call(e,r)&&r!==n&&s(e,r,{get:()=>t[r],enumerable:!(i=f(t,r))||i.enumerable});return e};var g=(e,t,n)=>(n=e!=null?u(l(e)):{},c(t||!e||!e.__esModule?s(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(s({},\"__esModule\",{value:!0}),e);var d=w((D,a)=>{a.exports=_jsx_runtime});var b={};_(b,{default:()=>m,frontmatter:()=>E});var o=g(d()),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:\"Deep Nesting Elements\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/deep-nesting-elements/solution\"}),`\n`,(0,o.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job! We can go as deep as we want with this stuff!\"})]})}function m(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(b);})();\n;return Component;",[1083],"https://www.epicreact.dev/workshops/react-fundamentals/deep-nesting-elements/solution",{"_9":1020,"_1021":1085,"_1023":1086},"/app/02.03.solution/test/",[1025],{"_9":1020,"_1021":1088},"/app/02.03.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/02.raw-react/03.solution.deep-nesting?view=editor&title=Deep+Nesting+Elements+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",[1091,1096,1101],{"_20":39,"_342":722,"_998":1013,"_22":40,"_24":41,"_1000":1014,"_1015":1092,"_1018":1093,"_1026":1095,"_1029":1030,"_467":508,"_469":468,"_9":466,"_1031":43},[1017],{"_9":1020,"_1021":1022,"_1023":1094},[1025],{"_9":1020,"_1021":1028},{"_20":47,"_342":724,"_998":1046,"_22":48,"_24":49,"_1000":1047,"_1015":1097,"_1018":1098,"_1026":1100,"_1029":1055,"_467":508,"_469":508,"_9":466,"_1031":51},[1049],{"_9":1020,"_1021":1051,"_1023":1099},[1025],{"_9":1020,"_1021":1054},{"_20":55,"_342":726,"_998":1069,"_22":56,"_24":57,"_1000":1070,"_1015":1102,"_1018":1103,"_1026":1105,"_1029":1078,"_467":508,"_469":516,"_9":466,"_1031":59},[1072],{"_9":1020,"_1021":1074,"_1023":1104},[1025],{"_9":1020,"_1021":1077},[1107,1112,1117],{"_20":43,"_342":722,"_998":1033,"_22":44,"_24":45,"_1000":1034,"_1015":1108,"_1018":1109,"_1026":1111,"_1029":1042,"_467":508,"_469":468,"_9":569,"_1043":-5},[1036],{"_9":1020,"_1021":1038,"_1023":1110},[1025],{"_9":1020,"_1021":1041},{"_20":51,"_342":724,"_998":1057,"_22":52,"_24":53,"_1000":1058,"_1015":1113,"_1018":1114,"_1026":1116,"_1029":1066,"_467":508,"_469":508,"_9":569,"_1043":-5},[1060],{"_9":1020,"_1021":1062,"_1023":1115},[1025],{"_9":1020,"_1021":1065},{"_20":59,"_342":726,"_998":1080,"_22":60,"_24":61,"_1000":1081,"_1015":1118,"_1018":1119,"_1026":1121,"_1029":1089,"_467":508,"_469":516,"_9":569,"_1043":-5},[1083],{"_9":1020,"_1021":1085,"_1023":1120},[1025],{"_9":1020,"_1021":1088},"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=Raw%20React%20APIs","epicVideoInfosPromise",["P",1125],"exerciseFinished",{"_1128":1129,"_24":1130},"file","/myapp/workshop-content/exercises/02.raw-react/FINISHED.mdx","exercises/02.raw-react/FINISHED.mdx","prevStepLink",{"_1133":1134,"_1135":1136},"to","/exercise/02/03/solution","aria-label","Deep Nesting Elements (solution)","nextStepLink",{"_1133":1139,"_1135":742},"/exercise/03","actionData","errors"]

02. Raw React APIs/Elaboration