[{"_1":2,"_940":-5,"_941":-5},"loaderData",{"_3":4,"_576":577,"_791":792,"_939":-5},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_334":335,"_387":337,"_388":339,"_340":341,"_389":390,"_400":401,"_425":-5,"_426":-5,"_427":428},"userId",{"_7":8,"_9":10},"id","eb37fz7bymqvpxujxvfxl99p","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","workshopConfig",{"_336":337,"_338":339,"_340":341,"_347":348,"_365":366,"_367":368,"_369":370,"_371":372,"_375":376,"_381":382,"_385":386},"title","React Fundamentals ⚛","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":342,"_343":344,"_345":346},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-fundamentals","discordChannelId","1285244676286189569","discordTags",[363,364],"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",{"_373":374},"view","editor","forms",{"_377":378,"_379":380},"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",{"_383":384},"enabled",true,"initialRoute","/","workshopTitle","workshopSubtitle","ENV",{"_391":392,"_393":394,"_395":368,"_396":370,"_397":384,"_398":399},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","5.9.0","requestInfo",{"_402":403,"_404":405,"_406":407,"_408":409,"_410":409,"_411":412,"_419":420,"_421":422,"_423":386,"_424":384},"protocol","http:","hostname","fundamentals.epicreact.dev","port","","origin","http://fundamentals.epicreact.dev","domain","hints",{"_413":414,"_415":416,"_417":418},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/06/finished","session",{"_413":-5},"separator","online","toast","confettiId","presence",{"_429":430},"users",[431,446,457,467,475,482,489,497,504,510,518,524,530,534,539,546,554,558,562,566,572],{"_7":432,"_433":384,"_434":435,"_436":437,"_20":438,"_439":440},"4d0bce7e-00dc-4acf-96ab-56f5c904f0dd","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/eba77b1bbb869459de3e4152d54315bf?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/eba77b1bbb869459de3e4152d54315bf?size=512&default=identicon","Sunny","location",{"_387":441,"_408":442,"_379":443},"React Hooks 🎣","http://localhost:5639",{"_444":445},"exerciseNumber",6,{"_7":447,"_433":384,"_434":448,"_436":449,"_20":450,"_439":451},"7503b572-ff6a-4f0d-8f55-0a4dc88bb30a","https://cdn.discordapp.com/avatars/111472332551254016/390ff6296408906df6bc583a5dbfff4a.png?size=64","https://cdn.discordapp.com/avatars/111472332551254016/390ff6296408906df6bc583a5dbfff4a.png?size=512","Gus Saiani",{"_387":452,"_408":442,"_379":453},"Advanced React APIs 🔥",{"_9":454,"_444":455,"_456":445},"solution",1,"stepNumber",{"_7":458,"_433":384,"_434":459,"_436":460,"_20":461,"_439":462},"9f6afd5b-d748-4e3f-a4a4-b65d825d07eb","https://cdn.discordapp.com/avatars/210733228007358466/ef3e8b1984790660fc666be34f49ad33.png?size=64","https://cdn.discordapp.com/avatars/210733228007358466/ef3e8b1984790660fc666be34f49ad33.png?size=512","Wojciech Wernicki",{"_387":337,"_408":442,"_379":463},{"_9":464,"_444":465,"_456":466},"problem",10,2,{"_7":468,"_433":384,"_434":469,"_436":470,"_20":471,"_439":472},"6f349704-5dfc-4866-b107-9bd18c04f638","https://cdn.discordapp.com/avatars/132973074126602240/a88ea299856bff3c1e66519373e4824c.png?size=64","https://cdn.discordapp.com/avatars/132973074126602240/a88ea299856bff3c1e66519373e4824c.png?size=512","Måns Nilsson",{"_387":337,"_408":442,"_379":473},{"_444":474},7,{"_7":476,"_433":384,"_434":477,"_436":478,"_20":479,"_439":480},"ef25ed12-f48d-46b1-a95d-063df68d7115","https://www.gravatar.com/avatar/47f3259f370b67817338289ac8d741d7?size=64&default=identicon","https://www.gravatar.com/avatar/47f3259f370b67817338289ac8d741d7?size=512&default=identicon","Ramin Rezaei",{"_387":337,"_408":442,"_379":481},{"_444":466},{"_7":483,"_433":384,"_434":484,"_436":485,"_20":486,"_439":487},"789b4683-165c-4835-bfe4-632b81180e87","https://www.gravatar.com/avatar/0b166468d569190aab1774010ff252c3?size=64&default=identicon","https://www.gravatar.com/avatar/0b166468d569190aab1774010ff252c3?size=512&default=identicon","Helios Vicente Beltran",{"_387":441,"_408":442,"_379":488},{"_9":454,"_444":466,"_456":466},{"_7":490,"_433":384,"_434":491,"_436":492,"_20":493,"_439":494},"b1e31396-0afa-4095-ad8c-4625844186b3","https://www.gravatar.com/avatar/2613e5405e2ba663f642af1093f8bc64?size=64&default=identicon","https://www.gravatar.com/avatar/2613e5405e2ba663f642af1093f8bc64?size=512&default=identicon","HONGJIA LIU",{"_387":337,"_408":442,"_379":495},{"_444":496},5,{"_7":498,"_433":384,"_434":499,"_436":500,"_20":501,"_439":502},"d0de3c52-0950-43f7-9fe1-fe290e2be9da","https://www.gravatar.com/avatar/45061cc69cd0cb6c6fab5dcf207b01ed?size=64&default=identicon","https://www.gravatar.com/avatar/45061cc69cd0cb6c6fab5dcf207b01ed?size=512&default=identicon","Aizaz U Khaja",{"_387":337,"_408":442,"_379":503},{"_444":474},{"_7":505,"_433":384,"_434":506,"_436":507,"_20":508,"_439":509},"1824f61c-490e-4656-be22-b172dad156bf","https://www.gravatar.com/avatar/c32e0ccf7f1882bd4c0a339c0d40d0fd?size=64&default=identicon","https://www.gravatar.com/avatar/c32e0ccf7f1882bd4c0a339c0d40d0fd?size=512&default=identicon","Francisco Javier Martin Cuenca",{"_387":452,"_408":442},{"_7":511,"_433":384,"_434":512,"_436":513,"_20":514,"_439":515},"9b39bf24-d5bd-4f7f-85ee-94d83180ad7c","https://www.gravatar.com/avatar/60c6607f0b11b562895ad56d14514303?size=64&default=identicon","https://www.gravatar.com/avatar/60c6607f0b11b562895ad56d14514303?size=512&default=identicon","Sung Lee",{"_387":452,"_408":442,"_379":516},{"_9":464,"_444":517,"_456":455},4,{"_7":519,"_433":384,"_434":520,"_436":521,"_20":-5,"_439":522},"cb032b3c-fff0-4961-be55-3b59f4d5f1e4","https://www.gravatar.com/avatar/909af4862d3f767021b3bb308c969f24?size=64&default=identicon","https://www.gravatar.com/avatar/909af4862d3f767021b3bb308c969f24?size=512&default=identicon",{"_387":523,"_408":442},"React Suspense 🔀",{"_7":525,"_439":526},"bmwawue32zsp1iq2h4ol6gmr",{"_387":527,"_408":442,"_379":528},"Full Stack Foundations 🔭",{"_444":529},3,{"_7":531,"_439":532},"p9ighn9fm1l95pgghushwpyx",{"_387":523,"_408":442,"_379":533},{"_9":464,"_444":529,"_456":529},{"_7":535,"_439":536},"spmqpzaqr5y136e6mrf3dk9f",{"_387":537,"_408":442,"_379":538},"React Performance ⚡",{"_9":464,"_444":445,"_456":529},{"_7":540,"_433":384,"_434":541,"_436":542,"_20":-5,"_439":543},"49628e0c-7ae2-4f05-8518-793fbacd3c83","https://www.gravatar.com/avatar/1931c4e638e61cbded63a6cef0a5f28a?size=64&default=identicon","https://www.gravatar.com/avatar/1931c4e638e61cbded63a6cef0a5f28a?size=512&default=identicon",{"_387":544,"_408":442,"_379":545},"Full Stack Testing 🧪",{"_444":466},{"_7":547,"_433":384,"_434":548,"_436":549,"_20":-5,"_439":550},"fa10185f-3851-47dd-b49a-4b94aebed13b","https://www.gravatar.com/avatar/898627a90acf7abe191ed0c1bdf73066?size=64&default=identicon","https://www.gravatar.com/avatar/898627a90acf7abe191ed0c1bdf73066?size=512&default=identicon",{"_387":551,"_408":442,"_379":552},"Data Modeling Deep Dive 💾",{"_9":454,"_444":553,"_456":529},8,{"_7":555,"_439":556},"wwzqkwv28j225lpoqjuy3rw6",{"_387":551,"_408":442,"_379":557},{"_444":466},{"_7":559,"_439":560},"p9mte0cv6v6ypyfv5r7onfc8",{"_387":337,"_408":442,"_379":561},{"_9":464,"_444":529,"_456":455},{"_7":563,"_439":564},"058108f307aa96f92e12eb12a128f26a",{"_387":337,"_408":442,"_379":565},{"_9":464,"_444":496,"_456":455},{"_7":567,"_433":384,"_434":568,"_436":569,"_20":-5,"_439":570},"9a870da3-721b-4cc4-aa89-777441711328","https://www.gravatar.com/avatar/a4f24a80d106ec87c5ca706889e542e4?size=64&default=identicon","https://www.gravatar.com/avatar/a4f24a80d106ec87c5ca706889e542e4?size=512&default=identicon",{"_387":337,"_408":442,"_379":571},{"_9":464,"_444":496,"_456":529},{"_7":573,"_439":574},"xhah21pwh4di7b6el6w4fd2k",{"_387":337,"_408":409,"_379":575},{"_444":445,"_456":-5,"_9":-5},"routes/_app+/_layout",{"_387":337,"_578":579,"_787":788,"_790":16},"exercises",[580,595,612,637,658,686,702,727,752,770],{"_444":455,"_336":581,"_582":583,"_587":588,"_591":592},"Hello World in JS","solutions",[584,585],{"_456":455,"_336":581,"_20":27},{"_456":466,"_336":586,"_20":35},"Generate the Root Node","problems",[589,590],{"_456":455,"_336":581,"_20":21},{"_456":466,"_336":586,"_20":31},"steps",[593,594],{"_456":455,"_336":581,"_20":21},{"_456":466,"_336":586,"_20":31},{"_444":466,"_336":596,"_582":597,"_587":604,"_591":608},"Raw React APIs",[598,600,602],{"_456":455,"_336":599,"_20":43},"Create React Elements",{"_456":466,"_336":601,"_20":51},"Nesting Elements",{"_456":529,"_336":603,"_20":59},"Deep Nesting Elements",[605,606,607],{"_456":455,"_336":599,"_20":39},{"_456":466,"_336":601,"_20":47},{"_456":529,"_336":603,"_20":55},[609,610,611],{"_456":455,"_336":599,"_20":39},{"_456":466,"_336":601,"_20":47},{"_456":529,"_336":603,"_20":55},{"_444":529,"_336":613,"_582":614,"_587":625,"_591":631},"Using JSX",[615,617,619,621,623],{"_456":455,"_336":616,"_20":67},"Compiling JSX",{"_456":466,"_336":618,"_20":75},"Interpolation",{"_456":529,"_336":620,"_20":83},"Spread props",{"_456":517,"_336":622,"_20":91},"Nesting JSX",{"_456":496,"_336":624,"_20":99},"Fragments",[626,627,628,629,630],{"_456":455,"_336":616,"_20":63},{"_456":466,"_336":618,"_20":71},{"_456":529,"_336":620,"_20":79},{"_456":517,"_336":622,"_20":87},{"_456":496,"_336":624,"_20":95},[632,633,634,635,636],{"_456":455,"_336":616,"_20":63},{"_456":466,"_336":618,"_20":71},{"_456":529,"_336":620,"_20":79},{"_456":517,"_336":622,"_20":87},{"_456":496,"_336":624,"_20":95},{"_444":517,"_336":638,"_582":639,"_587":648,"_591":653},"Custom Components",[640,642,644,646],{"_456":455,"_336":641,"_20":107},"Simple Function",{"_456":466,"_336":643,"_20":115},"Raw API",{"_456":529,"_336":645,"_20":123},"JSX Components",{"_456":517,"_336":647,"_20":131},"Props",[649,650,651,652],{"_456":455,"_336":641,"_20":103},{"_456":466,"_336":643,"_20":111},{"_456":529,"_336":645,"_20":119},{"_456":517,"_336":647,"_20":127},[654,655,656,657],{"_456":455,"_336":641,"_20":103},{"_456":466,"_336":643,"_20":111},{"_456":529,"_336":645,"_20":119},{"_456":517,"_336":647,"_20":127},{"_444":496,"_336":659,"_582":660,"_587":672,"_591":679},"TypeScript",[661,662,664,666,668,670],{"_456":455,"_336":647,"_20":139},{"_456":466,"_336":663,"_20":147},"Narrow Types",{"_456":529,"_336":665,"_20":155},"Derive Types",{"_456":517,"_336":667,"_20":163},"Default Props",{"_456":496,"_336":669,"_20":171},"Reduce Duplication",{"_456":445,"_336":671,"_20":179},"Satisfies",[673,674,675,676,677,678],{"_456":455,"_336":647,"_20":135},{"_456":466,"_336":663,"_20":143},{"_456":529,"_336":665,"_20":151},{"_456":517,"_336":667,"_20":159},{"_456":496,"_336":669,"_20":167},{"_456":445,"_336":671,"_20":175},[680,681,682,683,684,685],{"_456":455,"_336":647,"_20":135},{"_456":466,"_336":663,"_20":143},{"_456":529,"_336":665,"_20":151},{"_456":517,"_336":667,"_20":159},{"_456":496,"_336":669,"_20":167},{"_456":445,"_336":671,"_20":175},{"_444":445,"_336":687,"_582":688,"_587":694,"_591":698},"Styling",[689,690,692],{"_456":455,"_336":687,"_20":187},{"_456":466,"_336":691,"_20":195},"Custom Component",{"_456":529,"_336":693,"_20":203},"Size Prop",[695,696,697],{"_456":455,"_336":687,"_20":183},{"_456":466,"_336":691,"_20":191},{"_456":529,"_336":693,"_20":199},[699,700,701],{"_456":455,"_336":687,"_20":183},{"_456":466,"_336":691,"_20":191},{"_456":529,"_336":693,"_20":199},{"_444":474,"_336":703,"_582":704,"_587":715,"_591":721},"Forms",[705,707,709,711,713],{"_456":455,"_336":706,"_20":211},"Form",{"_456":466,"_336":708,"_20":219},"Form Action",{"_456":529,"_336":710,"_20":227},"Input Types",{"_456":517,"_336":712,"_20":235},"Submission",{"_456":496,"_336":714,"_20":243},"Form Actions",[716,717,718,719,720],{"_456":455,"_336":706,"_20":207},{"_456":466,"_336":708,"_20":215},{"_456":529,"_336":710,"_20":223},{"_456":517,"_336":712,"_20":231},{"_456":496,"_336":714,"_20":239},[722,723,724,725,726],{"_456":455,"_336":706,"_20":207},{"_456":466,"_336":708,"_20":215},{"_456":529,"_336":710,"_20":223},{"_456":517,"_336":712,"_20":231},{"_456":496,"_336":714,"_20":239},{"_444":553,"_336":728,"_582":729,"_587":740,"_591":746},"Inputs",[730,732,734,736,738],{"_456":455,"_336":731,"_20":251},"Checkbox",{"_456":466,"_336":733,"_20":259},"Select",{"_456":529,"_336":735,"_20":267},"Radios",{"_456":517,"_336":737,"_20":275},"Hidden Inputs",{"_456":496,"_336":739,"_20":283},"Default Value",[741,742,743,744,745],{"_456":455,"_336":731,"_20":247},{"_456":466,"_336":733,"_20":255},{"_456":529,"_336":735,"_20":263},{"_456":517,"_336":737,"_20":271},{"_456":496,"_336":739,"_20":279},[747,748,749,750,751],{"_456":455,"_336":731,"_20":247},{"_456":466,"_336":733,"_20":255},{"_456":529,"_336":735,"_20":263},{"_456":517,"_336":737,"_20":271},{"_456":496,"_336":739,"_20":279},{"_444":753,"_336":754,"_582":755,"_587":762,"_591":766},9,"Error Boundaries",[756,758,760],{"_456":455,"_336":757,"_20":291},"Composition",{"_456":466,"_336":759,"_20":299},"Other Errors",{"_456":529,"_336":761,"_20":307},"Reset",[763,764,765],{"_456":455,"_336":757,"_20":287},{"_456":466,"_336":759,"_20":295},{"_456":529,"_336":761,"_20":303},[767,768,769],{"_456":455,"_336":757,"_20":287},{"_456":466,"_336":759,"_20":295},{"_456":529,"_336":761,"_20":303},{"_444":465,"_336":771,"_582":772,"_587":779,"_591":783},"Rendering Arrays",[773,775,777],{"_456":455,"_336":774,"_20":315},"Key prop",{"_456":466,"_336":776,"_20":323},"Focus State",{"_456":529,"_336":778,"_20":331},"Key Reset",[780,781,782],{"_456":455,"_336":774,"_20":311},{"_456":466,"_336":776,"_20":319},{"_456":529,"_336":778,"_20":327},[784,785,786],{"_456":455,"_336":774,"_20":311},{"_456":466,"_336":776,"_20":319},{"_456":529,"_336":778,"_20":327},"playground",{"_789":-5,"_444":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_793":794,"_387":337,"_379":795,"_921":922,"_923":924,"_925":926,"_930":931,"_936":937},"articleId","workshop-react-fundamentals-6-finished",{"_444":445,"_796":797,"_336":687,"_798":799,"_800":801,"_802":803,"_805":806,"_591":808,"_587":889,"_582":905},"dirName","06.styling","instructionsCode","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var l in e)s(n,l,{get:e[l],enumerable:!0})},o=(n,e,l,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of y(e))!v.call(n,r)&&r!==l&&s(n,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return n};var k=(n,e,l)=>(l=n!=null?p(m(n)):{},o(e||!n||!n.__esModule?s(l,\"default\",{value:n,enumerable:!0}):l,n)),f=n=>o(s({},\"__esModule\",{value:!0}),n);var i=u((x,t)=>{t.exports=_jsx_runtime});var D={};g(D,{default:()=>h,frontmatter:()=>N});var a=k(i()),N=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",h2:\"h2\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:l}=e;return l||S(\"EpicVideo\",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.h1,{children:\"Styling\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-styling\"}),`\n`,(0,a.jsx)(e.p,{children:\"There are two primary ways to style React components\"}),`\n`,(0,a.jsxs)(e.ol,{children:[`\n`,(0,a.jsxs)(e.li,{children:[\"Inline styles with the \",(0,a.jsx)(e.code,{children:\"style\"}),\" prop\"]}),`\n`,(0,a.jsxs)(e.li,{children:[\"Regular CSS with the \",(0,a.jsx)(e.code,{children:\"className\"}),\" prop\"]}),`\n`]}),`\n`,(0,a.jsx)(e.p,{children:`Before we get into those, you need to know something about element properties\nand HTML attributes.`}),`\n`,(0,a.jsx)(e.h2,{children:\"Element properties and HTML attributes\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"In HTML, you have elements and attributes. For example, the \",(0,a.jsx)(e.code,{children:\"div\"}),` element has a\n`,(0,a.jsx)(e.code,{children:\"class\"}),\" attribute:\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsx)(e.code,{children:(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"my-class\"}),'\"',\">\",`\n`]})})}),`\n`,(0,a.jsxs)(e.p,{children:[\"In the DOM, the \",(0,a.jsx)(e.code,{children:\"div\"}),\" element has a \",(0,a.jsx)(e.code,{children:\"className\"}),\" property:\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"id\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"my-div\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"my-class\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"script\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"myDiv\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"my-div\"}),\"'\",\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"myDiv\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"class\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// undefine\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"d\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"myDiv\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"className\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'// \"my-class\"'}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"In JSX, you use the property name rather than the attribute name:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsx)(e.code,{children:(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(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:\"my-class\"}),'\"',\" />\",`\n`]})})}),`\n`,(0,a.jsxs)(e.p,{children:[\"This applies to a number of other attributes as well. For example, \",(0,a.jsx)(e.code,{children:\"for\"}),` in HTML\nis `,(0,a.jsx)(e.code,{children:\"htmlFor\"}),\" in DOM (and JSX). Others include \",(0,a.jsx)(e.code,{children:\"tabindex\"}),\" and \",(0,a.jsx)(e.code,{children:\"readonly\"}),` (which\nare, respectively, `,(0,a.jsx)(e.code,{children:\"tabIndex\"}),\" and \",(0,a.jsx)(e.code,{children:\"readOnly\"}),\" in JSX).\"]}),`\n`,(0,a.jsx)(e.p,{children:`Most differences between HTML attributes and JSX props are due to the fact that\nprops are a reference to \"properties\" not \"attributes\", so understanding the\ndifference is handy!`}),`\n`,(0,a.jsx)(e.h2,{children:\"Inline styles\"}),`\n`,(0,a.jsx)(e.p,{children:`Inline styles are set differently in JSX from HTML as a result of how they are\napplied to the DOM. In HTML, you'd pass a string of CSS, but you access it as an\nobject in the DOM:`}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"id\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"my-div\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"style\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"margin-top: 20px; background-color: blue;\"}),'\"',\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"script\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"myDiv\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"document\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"getElementById\"}),\"(\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"my-div\"}),\"'\",\")\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"myDiv\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"marginTop\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'// \"20px\"'}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"console\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"log\"}),\"(\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"myDiv\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"backgroundColor\"}),\") \",(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:'// \"blue\"'}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsx)(e.p,{children:\"As a result, in JSX, you pass an object of CSS rather than a string:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsx)(e.code,{children:(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{ marginTop: \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"20\"}),\", backgroundColor: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"blue\"}),\"'\",\" }\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]})})}),`\n`,(0,a.jsx)(e.p,{children:`This actually makes them much easier to work with. Though the style prop has\nsome significant limitations (like lack of media queries and pseudo-selectors),\nso it's not always the best choice.`}),`\n`,(0,a.jsxs)(\"callout-warning\",{class:\"aside\",children:[(0,a.jsxs)(e.p,{children:[\"Note that in React the \",(0,a.jsx)(e.code,{children:\"{{\"}),\" and \",(0,a.jsx)(e.code,{children:\"}}\"}),` is actually a combination of a JSX\nexpression and an object expression. The same example above could be written\nlike so:`]}),(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:\"const\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"myStyles\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" {marginTop: \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"20\"}),\", backgroundColor: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"blue\"}),\"'\",\"}\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(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(--base08)\"},children:\"myStyles\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\" />\",`\n`]})]})})]}),`\n`,(0,a.jsxs)(e.p,{children:[\"Note also that the property names are \",(0,a.jsx)(e.code,{children:\"camelCased\"}),\" rather than \",(0,a.jsx)(e.code,{children:\"kebab-cased\"}),`.\nThis matches the `,(0,a.jsx)(e.code,{children:\"style\"}),` property of DOM nodes (which is a\n`,(0,a.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration\",children:(0,a.jsx)(e.code,{children:\"CSSStyleDeclaration\"})}),`\nobject).`]}),`\n`,(0,a.jsx)(e.h2,{children:\"Class names\"}),`\n`,(0,a.jsx)(e.p,{children:`The most common mechanism for styling web applications is through the use of CSS\nand class names.`}),`\n`,(0,a.jsxs)(e.p,{children:[`As mentioned earlier, in HTML, you apply a class name to an element with the\n`,(0,a.jsx)(e.code,{children:\"class\"}),\" attribute. In JSX, you use the \",(0,a.jsx)(e.code,{children:\"className\"}),\" prop:\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"tsx\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsx)(e.code,{children:(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(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:\"my-class\"}),'\"',\" />\",`\n`]})})}),`\n`,(0,a.jsx)(e.p,{children:\"Then you'll load a CSS file onto the page:\"}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,a.jsx)(e.code,{children:(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"link\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"rel\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"stylesheet\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"href\"}),\"=\",'\"',(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"styles.css\"}),'\"',\" />\",`\n`]})})}),`\n`,(0,a.jsxs)(e.p,{children:[\"And that can contain the styles for \",(0,a.jsx)(e.code,{children:\".my-class\"}),\":\"]}),`\n`,(0,a.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"css\",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:\"my-class\"}),\" {\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"margin-top\"}),\": \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"20px\"}),\";\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t\",(0,a.jsx)(e.span,{style:{color:\"var(--base0C)\"},children:\"background-color\"}),\": \",(0,a.jsx)(e.span,{style:{color:\"var(--base09)\"},children:\"blue\"}),\";\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"}\",`\n`]})]})})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(d,{...n})}):d(n)}function S(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(D);})();\n;return Component;","finishedCode","var Component=(()=>{var h=Object.create;var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),x=(t,e)=>{for(var o in e)c(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!g.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(i=p(e,r))||i.enumerable});return t};var y=(t,e,o)=>(o=t!=null?h(f(t)):{},s(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),_=t=>s(c({},\"__esModule\",{value:!0}),t);var a=w((M,d)=>{d.exports=_jsx_runtime});var k={};x(k,{default:()=>u,frontmatter:()=>b});var n=y(a()),b=void 0;function l(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||j(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Styling\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-styling\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Great work! Styling is all about the \",(0,n.jsx)(e.code,{children:\"style\"}),\" and \",(0,n.jsx)(e.code,{children:\"className\"}),` props. There's\nmuch more to know about styling on the web, but that should get you going for\n99% of your needs with React! Well done.`]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(l,{...t})}):l(t)}function j(t,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+t+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return _(k);})();\n;return Component;","instructionsEpicVideoEmbeds",[804],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-styling","finishedEpicVideoEmbeds",[807],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-styling",[809,842,866],{"_456":455,"_464":810,"_454":830},{"_20":183,"_336":687,"_796":811,"_22":184,"_24":185,"_798":812,"_813":814,"_816":817,"_824":825,"_827":828,"_444":445,"_456":455,"_9":464,"_829":187},"01.problem.style","var Component=(()=>{var u=Object.create;var a=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var o in e)a(n,o,{get:e[o],enumerable:!0})},l=(n,e,o,r)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let s of y(e))!g.call(n,s)&&s!==o&&a(n,s,{get:()=>e[s],enumerable:!(r=m(e,s))||r.enumerable});return n};var v=(n,e,o)=>(o=n!=null?u(f(n)):{},l(e||!n||!n.__esModule?a(o,\"default\",{value:n,enumerable:!0}):o,n)),w=n=>l(a({},\"__esModule\",{value:!0}),n);var c=b((C,i)=>{i.exports=_jsx_runtime});var _={};x(_,{default:()=>p,frontmatter:()=>k});var t=v(c()),k=void 0;function d(n){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...n.components},{EpicVideo:o,InlineFile:r}=e;return o||h(\"EpicVideo\",!0),r||h(\"InlineFile\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Styling\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/styling\"}),`\n`,(0,t.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We have a CSS file \",(0,t.jsx)(r,{file:\"index.css\"}),` that's being loaded on the\npage using a link tag:`]}),`\n`,(0,t.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,t.jsx)(e.code,{children:(0,t.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"1\",children:[\"<\",(0,t.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"link\"}),\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"rel\"}),\"=\",'\"',(0,t.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"stylesheet\"}),'\"',\" \",(0,t.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"href\"}),\"=\",'\"',(0,t.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"index.css\"}),'\"',\" />\",`\n`]})})}),`\n`,(0,t.jsxs)(e.p,{children:[`In our isolated learning environment, the workshop app gets the styles on the\npage for us automatically. In a real-world app, you'll need to add the `,(0,t.jsx)(e.code,{children:\"\"}),`\ntag yourself (or use a tool which does this for you).`]}),`\n`,(0,t.jsxs)(e.p,{children:[\"Your job is to apply the right \",(0,t.jsx)(e.code,{children:\"className\"}),\" and \",(0,t.jsx)(e.code,{children:\"style\"}),` props to the divs so the\nstyles applied match the text content.`]})]})}function p(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}function h(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(_);})();\n;return Component;","epicVideoEmbeds",[815],"https://www.epicreact.dev/workshops/react-fundamentals/styling","test",{"_9":818,"_819":820,"_821":822},"browser","pathname","/app/06.01.problem/test/","testFiles",[823],"boxes.test.ts","dev",{"_9":818,"_819":826},"/app/06.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/01.problem.style?view=editor&title=Styling+%28problem%29","solutionName",{"_20":187,"_336":687,"_796":831,"_22":188,"_24":189,"_798":832,"_813":833,"_816":835,"_824":838,"_827":840,"_444":445,"_456":455,"_9":454,"_841":-5},"01.solution.style","var Component=(()=>{var u=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=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})},s=(t,e,o,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!w.call(t,r)&&r!==o&&c(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var g=(t,e,o)=>(o=t!=null?u(f(t)):{},s(e||!t||!t.__esModule?c(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>s(c({},\"__esModule\",{value:!0}),t);var a=x((k,d)=>{d.exports=_jsx_runtime});var M={};_(M,{default:()=>l,frontmatter:()=>y});var n=g(a()),y=void 0;function p(t){let e={code:\"code\",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:\"Styling\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/styling/solution\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Great! We now know how to add a \",(0,n.jsx)(e.code,{children:\"className\"}),\" and \",(0,n.jsx)(e.code,{children:\"style\"}),` prop to our elements.\nBut we've got some repetition that would be nice to ditch...`]})]})}function l(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 j(M);})();\n;return Component;",[834],"https://www.epicreact.dev/workshops/react-fundamentals/styling/solution",{"_9":818,"_819":836,"_821":837},"/app/06.01.solution/test/",[823],{"_9":818,"_819":839},"/app/06.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/01.solution.style?view=editor&title=Styling+%28solution%29","problemName",{"_456":466,"_464":843,"_454":855},{"_20":191,"_336":691,"_796":844,"_22":192,"_24":193,"_798":845,"_813":846,"_816":848,"_824":852,"_827":854,"_444":445,"_456":466,"_9":464,"_829":195},"02.problem.component","var Component=(()=>{var p=Object.create;var o=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var v=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var l in e)o(n,l,{get:e[l],enumerable:!0})},c=(n,e,l,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!y.call(n,r)&&r!==l&&o(n,r,{get:()=>e[r],enumerable:!(s=b(e,r))||s.enumerable});return n};var g=(n,e,l)=>(l=n!=null?p(u(n)):{},c(e||!n||!n.__esModule?o(l,\"default\",{value:n,enumerable:!0}):l,n)),k=n=>c(o({},\"__esModule\",{value:!0}),n);var i=v((E,t)=>{t.exports=_jsx_runtime});var N={};f(N,{default:()=>h,frontmatter:()=>x});var a=g(i()),x=void 0;function d(n){let e={code:\"code\",em:\"em\",h1:\"h1\",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:\"Custom Component\"}),`\n`,(0,a.jsx)(l,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/custom-component\"}),`\n`,(0,a.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We want to reduce duplication here by making a custom \",(0,a.jsx)(e.code,{children:\"\"}),` component\nthat renders a div, accepts all the props and merges the given `,(0,a.jsx)(e.code,{children:\"style\"}),` and\n`,(0,a.jsx)(e.code,{children:\"className\"}),\" props with the shared values.\"]}),`\n`,(0,a.jsx)(e.p,{children:\"I should be able to use it like so:\"}),`\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:\"Box\"}),\" \",(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:\"box--small\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{ backgroundColor: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"lightblue\"}),\"'\",\" }\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\tsmall lightblue box\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"The \",(0,a.jsx)(e.code,{children:\"box\"}),\" className and \",(0,a.jsx)(e.code,{children:\"fontStyle: 'italic'\"}),` style should be applied\nautomatically by the `,(0,a.jsx)(e.code,{children:\"\"}),` component which should then merge that default\nwith the values that come from props.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`How you go about implementing it is part of the fun (aka \"learning\" \\u{1F609}). You may\ncome up with something completely different from how I do it and that's great\nfor your learning. When you're done, these two ultimately render `,(0,a.jsx)(e.em,{children:\"exactly\"}),` the\nsame thing:`]}),`\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:\"// before:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"div\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\" \",(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:\"box box--small\"}),'\"',`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{fontStyle: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"italic\"}),\"'\",\", backgroundColor: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"lightblue\"}),\"'\",\"}\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\" small lightblue box\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\",`\n`]}),(0,a.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:`\n`}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,a.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// after:\"}),`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"<\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"Box\"}),\" \",(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:\"box--small\"}),'\"',\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{backgroundColor: \",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"lightblue\"}),\"'\",\"}\",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\" small lightblue box\",`\n`]}),(0,a.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:[\"\",`\n`]})]})}),`\n`,(0,a.jsxs)(e.p,{children:[\"And I should be able to switch the \",(0,a.jsx)(e.code,{children:\"div\"}),\" for a \",(0,a.jsx)(e.code,{children:\"Box\"}),` for the medium and large\nboxes as well.`]}),`\n`,(0,a.jsxs)(e.p,{children:[`\\u{1F4B0} Here's a quick tip for the TypeScript part of this. When you want to wrap an\nelement to basically simulate that element + a little functionality (like in our\ncase), you'll want to borrow the type definition for that element from React.\nHere's how you do that (for a `,(0,a.jsx)(e.code,{children:\"span\"}),\" element rather than \",(0,a.jsx)(e.code,{children:\"div\"}),\"):\"]}),`\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:\"MySpan\"}),\"(\",(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:\"React\"}),\".\",(0,a.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"ComponentProps\"}),\"<\",\"'\",(0,a.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"span\"}),\"'\",\">) {\",`\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:\"span\"}),\" \",(0,a.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"...\"}),(0,a.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"props\"}),(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`]})]})}),`\n`,(0,a.jsx)(e.p,{children:`And now you'll get type safety and autocomplete for all the HTML attributes\naccepted by a span element.`})]})}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 k(N);})();\n;return Component;",[847],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component",{"_9":818,"_819":849,"_821":850},"/app/06.02.problem/test/",[851,823],"box.test.tsx",{"_9":818,"_819":853},"/app/06.02.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/02.problem.component?view=editor&title=Custom+Component+%28problem%29",{"_20":195,"_336":691,"_796":856,"_22":196,"_24":197,"_798":857,"_813":858,"_816":860,"_824":863,"_827":865,"_444":445,"_456":466,"_9":454,"_841":-5},"02.solution.component","var Component=(()=>{var a=Object.create;var i=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),g=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of h(e))!l.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=x(e,r))||c.enumerable});return t};var _=(t,e,o)=>(o=t!=null?a(f(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),j=t=>s(i({},\"__esModule\",{value:!0}),t);var p=w((C,d)=>{d.exports=_jsx_runtime});var y={};g(y,{default:()=>m,frontmatter:()=>b});var n=_(p()),b=void 0;function u(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:\"Custom Component\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/custom-component/solution\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} Great work with the \",(0,n.jsx)(e.code,{children:\"\"}),` component. But we can make this experience even\nbetter by designing our box around the different sizes. Let's keep going!`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F6A8} Also, don't forget to export your Box component (tests will need it!) \",(0,n.jsx)(e.code,{children:\"export function Box...\"})]})]})}function m(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(u,{...t})}):u(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(y);})();\n;return Component;",[859],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component/solution",{"_9":818,"_819":861,"_821":862},"/app/06.02.solution/test/",[851,823],{"_9":818,"_819":864},"/app/06.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/02.solution.component?view=editor&title=Custom+Component+%28solution%29",{"_456":529,"_464":867,"_454":878},{"_20":199,"_336":693,"_796":868,"_22":200,"_24":201,"_798":869,"_813":870,"_816":872,"_824":875,"_827":877,"_444":445,"_456":529,"_9":464,"_829":203},"03.problem.size-prop","var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,y=Object.prototype.hasOwnProperty;var f=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports),v=(o,e)=>{for(var r in e)a(o,r,{get:e[r],enumerable:!0})},l=(o,e,r,s)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let t of u(e))!y.call(o,t)&&t!==r&&a(o,t,{get:()=>e[t],enumerable:!(s=b(e,t))||s.enumerable});return o};var w=(o,e,r)=>(r=o!=null?h(m(o)):{},l(e||!o||!o.__esModule?a(r,\"default\",{value:o,enumerable:!0}):r,o)),x=o=>l(a({},\"__esModule\",{value:!0}),o);var i=f((E,c)=>{c.exports=_jsx_runtime});var _={};v(_,{default:()=>p,frontmatter:()=>g});var n=w(i()),g=void 0;function d(o){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...o.components},{EpicVideo:r}=e;return r||k(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Size Prop\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/size-prop\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} It's great that we're composing the \",(0,n.jsx)(e.code,{children:\"className\"}),\"s and \",(0,n.jsx)(e.code,{children:\"style\"}),`s properly, but\nwouldn't it be better if the users of our components didn't have to worry about\nwhich class name to apply for a given effect? Or that a class name is involved\nat all? I think it would be better if users of our component had a `,(0,n.jsx)(e.code,{children:\"size\"}),` prop\nand our component took care of making the box that size.`]}),`\n`,(0,n.jsx)(e.p,{children:\"In this step, try to make this API work:\"}),`\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:\"Box\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"size\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"small\"}),'\"',\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"style\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"{\"}),\"{ backgroundColor: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"lightblue\"}),\"'\",\" }\",(0,n.jsx)(e.span,{style:{color:\"var(--base0F)\"},children:\"}\"}),\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\tsmall lightblue box\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[`You'll need \\u{1F4DC}\n`,(0,n.jsx)(e.a,{href:\"https://www.typescriptlang.org/docs/handbook/2/objects.html#intersection-types\",children:\"TypeScript's intersection (&) operator\"})]}),`\n`]})]})}function p(o={}){let{wrapper:e}=o.components||{};return e?(0,n.jsx)(e,{...o,children:(0,n.jsx)(d,{...o})}):d(o)}function k(o,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+o+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(_);})();\n;return Component;",[871],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop",{"_9":818,"_819":873,"_821":874},"/app/06.03.problem/test/",[851,823],{"_9":818,"_819":876},"/app/06.03.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/03.problem.size-prop?view=editor&title=Size+Prop+%28problem%29",{"_20":203,"_336":693,"_796":879,"_22":204,"_24":205,"_798":880,"_813":881,"_816":883,"_824":886,"_827":888,"_444":445,"_456":529,"_9":454,"_841":-5},"03.solution.size-prop","var Component=(()=>{var f=Object.create;var i=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),_=(t,e)=>{for(var o in e)i(t,o,{get:e[o],enumerable:!0})},s=(t,e,o,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!x.call(t,r)&&r!==o&&i(t,r,{get:()=>e[r],enumerable:!(c=h(e,r))||c.enumerable});return t};var j=(t,e,o)=>(o=t!=null?f(l(t)):{},s(e||!t||!t.__esModule?i(o,\"default\",{value:t,enumerable:!0}):o,t)),g=t=>s(i({},\"__esModule\",{value:!0}),t);var d=w((z,p)=>{p.exports=_jsx_runtime});var k={};_(k,{default:()=>u,frontmatter:()=>E});var n=j(d()),E=void 0;function a(t){let e={code:\"code\",h1:\"h1\",p:\"p\",...t.components},{EpicVideo:o}=e;return o||M(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Size Prop\"}),`\n`,(0,n.jsx)(o,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/size-prop/solution\"}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} The constraints set people free! Great work on the \",(0,n.jsx)(e.code,{children:\"size\"}),\" prop!\"]})]})}function u(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(a,{...t})}):a(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 g(k);})();\n;return Component;",[882],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop/solution",{"_9":818,"_819":884,"_821":885},"/app/06.03.solution/test/",[851,823],{"_9":818,"_819":887},"/app/06.03.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/03.solution.size-prop?view=editor&title=Size+Prop+%28solution%29",[890,895,900],{"_20":183,"_336":687,"_796":811,"_22":184,"_24":185,"_798":812,"_813":891,"_816":892,"_824":894,"_827":828,"_444":445,"_456":455,"_9":464,"_829":187},[815],{"_9":818,"_819":820,"_821":893},[823],{"_9":818,"_819":826},{"_20":191,"_336":691,"_796":844,"_22":192,"_24":193,"_798":845,"_813":896,"_816":897,"_824":899,"_827":854,"_444":445,"_456":466,"_9":464,"_829":195},[847],{"_9":818,"_819":849,"_821":898},[851,823],{"_9":818,"_819":853},{"_20":199,"_336":693,"_796":868,"_22":200,"_24":201,"_798":869,"_813":901,"_816":902,"_824":904,"_827":877,"_444":445,"_456":529,"_9":464,"_829":203},[871],{"_9":818,"_819":873,"_821":903},[851,823],{"_9":818,"_819":876},[906,911,916],{"_20":187,"_336":687,"_796":831,"_22":188,"_24":189,"_798":832,"_813":907,"_816":908,"_824":910,"_827":840,"_444":445,"_456":455,"_9":454,"_841":-5},[834],{"_9":818,"_819":836,"_821":909},[823],{"_9":818,"_819":839},{"_20":195,"_336":691,"_796":856,"_22":196,"_24":197,"_798":857,"_813":912,"_816":913,"_824":915,"_827":865,"_444":445,"_456":466,"_9":454,"_841":-5},[859],{"_9":818,"_819":861,"_821":914},[851,823],{"_9":818,"_819":864},{"_20":203,"_336":693,"_796":879,"_22":204,"_24":205,"_798":880,"_813":917,"_816":918,"_824":920,"_827":888,"_444":445,"_456":529,"_9":454,"_841":-5},[882],{"_9":818,"_819":884,"_821":919},[851,823],{"_9":818,"_819":887},"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=Styling","epicVideoInfosPromise",["P",924],"exerciseFinished",{"_927":928,"_24":929},"file","/myapp/workshop-content/exercises/06.styling/FINISHED.mdx","exercises/06.styling/FINISHED.mdx","prevStepLink",{"_932":933,"_934":935},"to","/exercise/06/03/solution","aria-label","Size Prop (solution)","nextStepLink",{"_932":938,"_934":703},"/exercise/07","routes/_app+/exercise+/_layout","actionData","errors"]

06. Styling/Elaboration