[{"_1":2,"_963":-5,"_964":-5},"loaderData",{"_3":4,"_599":600,"_814":815,"_962":-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","nrucaouspf0zw3e39hin4szx","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,445,455,466,475,483,491,499,507,515,523,531,538,547,551,555,560,566,573,579,585,589,595],{"_7":432,"_433":434,"_20":435,"_436":437},"7889aaa07b86af41c2874cb452bb8883","avatarUrl","https://cdn.discordapp.com/avatars/983607249769480252/6d9b1172c66f935a8f94767ed916ba3b?size=512","Wichofly 🚀","location",{"_387":337,"_408":438,"_379":439},"http://localhost:5639",{"_9":440,"_441":442,"_443":444},"problem","exerciseNumber",8,"stepNumber",3,{"_7":446,"_447":384,"_448":449,"_450":451,"_20":452,"_436":453},"a148767e-31c8-4710-b90b-1c70d2b28ddd","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/8246253291140ce348855f1b9e988002?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/8246253291140ce348855f1b9e988002?size=512&default=identicon","RUHELA AKHTAR",{"_387":454,"_408":438},"React Suspense 🔀",{"_7":456,"_447":384,"_448":457,"_450":458,"_20":459,"_436":460},"ec85e693-64ee-4afe-847c-835acf4e6ce3","https://www.gravatar.com/avatar/4e90c0c89e29ffc4edf30074c64341f4?size=64&default=identicon","https://www.gravatar.com/avatar/4e90c0c89e29ffc4edf30074c64341f4?size=512&default=identicon","Wagner R",{"_387":461,"_408":438,"_379":462},"Advanced React Patterns 🤯",{"_9":463,"_441":464,"_443":465},"solution",5,2,{"_7":467,"_447":384,"_448":468,"_450":469,"_20":470,"_436":471},"cc23ff97-d4d2-435c-a947-ae0697988649","https://avatars.githubusercontent.com/u/15137214?v=4&size=64","https://avatars.githubusercontent.com/u/15137214?v=4&size=512","Jun-Xin Huang",{"_387":472,"_408":438,"_379":473},"Web Authentication 🔐",{"_441":474},1,{"_7":476,"_447":384,"_448":477,"_450":478,"_20":479,"_436":480},"37ed9916-5eda-41f6-903b-c31bab07d77a","https://www.gravatar.com/avatar/7eb429bfca3266684ad2ff0c03aca925?size=64&default=identicon","https://www.gravatar.com/avatar/7eb429bfca3266684ad2ff0c03aca925?size=512&default=identicon","Tobias",{"_387":481,"_408":438,"_379":482},"Get Started with React 🏃‍➡️",{"_9":440,"_441":465,"_443":465},{"_7":484,"_447":384,"_448":485,"_450":486,"_20":487,"_436":488},"c05dd055-694b-4459-9bf8-90cfc698f0f2","https://www.gravatar.com/avatar/4b50eceba6835390d88f8999a0cbf6eb?size=64&default=identicon","https://www.gravatar.com/avatar/4b50eceba6835390d88f8999a0cbf6eb?size=512&default=identicon","Pol Bas Mantilla",{"_387":461,"_408":489,"_379":490},"http://192.168.2.18:5639",{"_441":465},{"_7":492,"_447":384,"_448":493,"_450":494,"_20":495,"_436":496},"effb88c1-961c-47a0-a095-b66e0530d2dd","https://avatars.githubusercontent.com/u/1569180?v=4&size=64","https://avatars.githubusercontent.com/u/1569180?v=4&size=512","Toni Laukka",{"_387":497,"_408":438,"_379":498},"React Performance ⚡",{"_9":440,"_441":474,"_443":474},{"_7":500,"_447":384,"_448":501,"_450":502,"_20":503,"_436":504},"17da7240-860c-4e33-9574-3929295e7a94","https://avatars.githubusercontent.com/u/3237551?v=4&size=64","https://avatars.githubusercontent.com/u/3237551?v=4&size=512","Denis Juan Alonso Gonzalez",{"_387":337,"_408":438,"_379":505},{"_441":506},9,{"_7":508,"_447":384,"_448":509,"_450":510,"_20":511,"_436":512},"787076ba-5b00-472d-95e7-89a91c287491","https://cdn.discordapp.com/avatars/529450479994929183/932ac6f7966478c87b618b46efe5410e.png?size=64","https://cdn.discordapp.com/avatars/529450479994929183/932ac6f7966478c87b618b46efe5410e.png?size=512","Michal Pietrzak",{"_387":337,"_408":438,"_379":513},{"_9":440,"_441":514,"_443":444},4,{"_7":516,"_447":384,"_448":517,"_450":518,"_20":519,"_436":520},"39203f9d-922f-4cb5-9d8f-8330b04d47fb","https://www.gravatar.com/avatar/68aa8f76f226bd0c69994b75165533f2?size=64&default=identicon","https://www.gravatar.com/avatar/68aa8f76f226bd0c69994b75165533f2?size=512&default=identicon","Stephan Bakker",{"_387":521,"_408":438,"_379":522},"Professional Web Forms 📝",{"_9":463,"_441":444,"_443":465},{"_7":524,"_447":384,"_448":525,"_450":526,"_20":527,"_436":528},"814c9824-d1c3-40e6-9c1d-9ed881a826a2","https://www.gravatar.com/avatar/87deb1199ffe30e2c73db05dec8a99da?size=64&default=identicon","https://www.gravatar.com/avatar/87deb1199ffe30e2c73db05dec8a99da?size=512&default=identicon","NOUNIS CHRISTOS",{"_387":529,"_408":438,"_379":530},"Advanced React APIs 🔥",{"_9":440,"_441":474,"_443":514},{"_7":532,"_447":384,"_448":533,"_450":534,"_20":535,"_436":536},"eaf2e309-172d-4b20-aea9-181f4a212c79","https://www.gravatar.com/avatar/3c0e6455e629d704027fd17fa5d82303?size=64&default=identicon","https://www.gravatar.com/avatar/3c0e6455e629d704027fd17fa5d82303?size=512&default=identicon","Oliver E Day",{"_387":537,"_408":438},"Full Stack Foundations 🔭",{"_7":539,"_447":384,"_448":540,"_450":541,"_20":-5,"_436":542},"388ae3b4-841c-4854-8c7d-d290ea29e6d3","https://www.gravatar.com/avatar/ae986614d33dde352c4f716900de40fb?size=64&default=identicon","https://www.gravatar.com/avatar/ae986614d33dde352c4f716900de40fb?size=512&default=identicon",{"_387":543,"_408":544,"_379":545},"React Hooks 🎣","http://localhost:5640",{"_9":440,"_441":546,"_443":444},6,{"_7":548,"_436":549},"crpyugmm8o842puhiaa5kd1r",{"_387":337,"_408":409,"_379":550},{"_9":440,"_441":442,"_443":465},{"_7":552,"_436":553},"w7zp37t2pckb3v41ulof6k44",{"_387":337,"_408":409,"_379":554},{"_9":440,"_441":464,"_443":474},{"_7":556,"_436":557},"ilu9e7i428yhf2zsdb7tf9y0",{"_387":543,"_408":558,"_379":559},"http://hooks.epicreact.dev",{"_9":440,"_441":474,"_443":465},{"_7":561,"_447":384,"_448":562,"_450":563,"_20":-5,"_436":564},"2a1e88bc-e1d5-4fc1-a7f0-d22eeb95f46f","https://cdn.discordapp.com/avatars/187604445498966016/b0ab470cbb9efdd4bc862b9cd4bd0e3d.png?size=64","https://cdn.discordapp.com/avatars/187604445498966016/b0ab470cbb9efdd4bc862b9cd4bd0e3d.png?size=512",{"_387":337,"_408":438,"_379":565},{"_9":463,"_441":474,"_443":474},{"_7":567,"_436":568},"s78y0k2h2r77ext0w25l4tm4",{"_387":569,"_408":570,"_379":571},"Full Stack Testing 🧪","http://testing.epicweb.dev",{"_441":572},7,{"_7":574,"_447":384,"_448":575,"_450":576,"_20":-5,"_436":577},"a0f0d345-e6f8-430c-b14a-12db21d052e1","https://www.gravatar.com/avatar/a14fdd481bbaea1750d779e3affedb37?size=64&default=identicon","https://www.gravatar.com/avatar/a14fdd481bbaea1750d779e3affedb37?size=512&default=identicon",{"_387":337,"_408":438,"_379":578},{"_441":464},{"_7":580,"_447":384,"_448":581,"_450":582,"_20":-5,"_436":583},"31471d6d-9123-4204-9d0e-bd6088ee0603","https://www.gravatar.com/avatar/4bf2cee6512562472ea162d42c2e1067?size=64&default=identicon","https://www.gravatar.com/avatar/4bf2cee6512562472ea162d42c2e1067?size=512&default=identicon",{"_387":521,"_408":438,"_379":584},{"_441":465},{"_7":586,"_436":587},"e7jmyfsw0yc6ozrqj3etj61o",{"_387":521,"_408":438,"_379":588},{"_9":440,"_441":465,"_443":444},{"_7":590,"_447":384,"_448":591,"_450":592,"_20":-5,"_436":593},"8da05ee7-6dd6-47d4-8182-d605916994b5","https://www.gravatar.com/avatar/1466d45b3d48db6a80468a659476a138?size=64&default=identicon","https://www.gravatar.com/avatar/1466d45b3d48db6a80468a659476a138?size=512&default=identicon",{"_387":543,"_408":438,"_379":594},{"_9":440,"_441":444,"_443":465},{"_7":596,"_436":597},"y1e7pfg04zvxyqz4plcagncu",{"_387":337,"_408":409,"_379":598},{"_441":546,"_443":-5,"_9":-5},"routes/_app+/_layout",{"_387":337,"_601":602,"_810":811,"_813":16},"exercises",[603,618,635,660,681,709,725,750,775,792],{"_441":474,"_336":604,"_605":606,"_610":611,"_614":615},"Hello World in JS","solutions",[607,608],{"_443":474,"_336":604,"_20":27},{"_443":465,"_336":609,"_20":35},"Generate the Root Node","problems",[612,613],{"_443":474,"_336":604,"_20":21},{"_443":465,"_336":609,"_20":31},"steps",[616,617],{"_443":474,"_336":604,"_20":21},{"_443":465,"_336":609,"_20":31},{"_441":465,"_336":619,"_605":620,"_610":627,"_614":631},"Raw React APIs",[621,623,625],{"_443":474,"_336":622,"_20":43},"Create React Elements",{"_443":465,"_336":624,"_20":51},"Nesting Elements",{"_443":444,"_336":626,"_20":59},"Deep Nesting Elements",[628,629,630],{"_443":474,"_336":622,"_20":39},{"_443":465,"_336":624,"_20":47},{"_443":444,"_336":626,"_20":55},[632,633,634],{"_443":474,"_336":622,"_20":39},{"_443":465,"_336":624,"_20":47},{"_443":444,"_336":626,"_20":55},{"_441":444,"_336":636,"_605":637,"_610":648,"_614":654},"Using JSX",[638,640,642,644,646],{"_443":474,"_336":639,"_20":67},"Compiling JSX",{"_443":465,"_336":641,"_20":75},"Interpolation",{"_443":444,"_336":643,"_20":83},"Spread props",{"_443":514,"_336":645,"_20":91},"Nesting JSX",{"_443":464,"_336":647,"_20":99},"Fragments",[649,650,651,652,653],{"_443":474,"_336":639,"_20":63},{"_443":465,"_336":641,"_20":71},{"_443":444,"_336":643,"_20":79},{"_443":514,"_336":645,"_20":87},{"_443":464,"_336":647,"_20":95},[655,656,657,658,659],{"_443":474,"_336":639,"_20":63},{"_443":465,"_336":641,"_20":71},{"_443":444,"_336":643,"_20":79},{"_443":514,"_336":645,"_20":87},{"_443":464,"_336":647,"_20":95},{"_441":514,"_336":661,"_605":662,"_610":671,"_614":676},"Custom Components",[663,665,667,669],{"_443":474,"_336":664,"_20":107},"Simple Function",{"_443":465,"_336":666,"_20":115},"Raw API",{"_443":444,"_336":668,"_20":123},"JSX Components",{"_443":514,"_336":670,"_20":131},"Props",[672,673,674,675],{"_443":474,"_336":664,"_20":103},{"_443":465,"_336":666,"_20":111},{"_443":444,"_336":668,"_20":119},{"_443":514,"_336":670,"_20":127},[677,678,679,680],{"_443":474,"_336":664,"_20":103},{"_443":465,"_336":666,"_20":111},{"_443":444,"_336":668,"_20":119},{"_443":514,"_336":670,"_20":127},{"_441":464,"_336":682,"_605":683,"_610":695,"_614":702},"TypeScript",[684,685,687,689,691,693],{"_443":474,"_336":670,"_20":139},{"_443":465,"_336":686,"_20":147},"Narrow Types",{"_443":444,"_336":688,"_20":155},"Derive Types",{"_443":514,"_336":690,"_20":163},"Default Props",{"_443":464,"_336":692,"_20":171},"Reduce Duplication",{"_443":546,"_336":694,"_20":179},"Satisfies",[696,697,698,699,700,701],{"_443":474,"_336":670,"_20":135},{"_443":465,"_336":686,"_20":143},{"_443":444,"_336":688,"_20":151},{"_443":514,"_336":690,"_20":159},{"_443":464,"_336":692,"_20":167},{"_443":546,"_336":694,"_20":175},[703,704,705,706,707,708],{"_443":474,"_336":670,"_20":135},{"_443":465,"_336":686,"_20":143},{"_443":444,"_336":688,"_20":151},{"_443":514,"_336":690,"_20":159},{"_443":464,"_336":692,"_20":167},{"_443":546,"_336":694,"_20":175},{"_441":546,"_336":710,"_605":711,"_610":717,"_614":721},"Styling",[712,713,715],{"_443":474,"_336":710,"_20":187},{"_443":465,"_336":714,"_20":195},"Custom Component",{"_443":444,"_336":716,"_20":203},"Size Prop",[718,719,720],{"_443":474,"_336":710,"_20":183},{"_443":465,"_336":714,"_20":191},{"_443":444,"_336":716,"_20":199},[722,723,724],{"_443":474,"_336":710,"_20":183},{"_443":465,"_336":714,"_20":191},{"_443":444,"_336":716,"_20":199},{"_441":572,"_336":726,"_605":727,"_610":738,"_614":744},"Forms",[728,730,732,734,736],{"_443":474,"_336":729,"_20":211},"Form",{"_443":465,"_336":731,"_20":219},"Form Action",{"_443":444,"_336":733,"_20":227},"Input Types",{"_443":514,"_336":735,"_20":235},"Submission",{"_443":464,"_336":737,"_20":243},"Form Actions",[739,740,741,742,743],{"_443":474,"_336":729,"_20":207},{"_443":465,"_336":731,"_20":215},{"_443":444,"_336":733,"_20":223},{"_443":514,"_336":735,"_20":231},{"_443":464,"_336":737,"_20":239},[745,746,747,748,749],{"_443":474,"_336":729,"_20":207},{"_443":465,"_336":731,"_20":215},{"_443":444,"_336":733,"_20":223},{"_443":514,"_336":735,"_20":231},{"_443":464,"_336":737,"_20":239},{"_441":442,"_336":751,"_605":752,"_610":763,"_614":769},"Inputs",[753,755,757,759,761],{"_443":474,"_336":754,"_20":251},"Checkbox",{"_443":465,"_336":756,"_20":259},"Select",{"_443":444,"_336":758,"_20":267},"Radios",{"_443":514,"_336":760,"_20":275},"Hidden Inputs",{"_443":464,"_336":762,"_20":283},"Default Value",[764,765,766,767,768],{"_443":474,"_336":754,"_20":247},{"_443":465,"_336":756,"_20":255},{"_443":444,"_336":758,"_20":263},{"_443":514,"_336":760,"_20":271},{"_443":464,"_336":762,"_20":279},[770,771,772,773,774],{"_443":474,"_336":754,"_20":247},{"_443":465,"_336":756,"_20":255},{"_443":444,"_336":758,"_20":263},{"_443":514,"_336":760,"_20":271},{"_443":464,"_336":762,"_20":279},{"_441":506,"_336":776,"_605":777,"_610":784,"_614":788},"Error Boundaries",[778,780,782],{"_443":474,"_336":779,"_20":291},"Composition",{"_443":465,"_336":781,"_20":299},"Other Errors",{"_443":444,"_336":783,"_20":307},"Reset",[785,786,787],{"_443":474,"_336":779,"_20":287},{"_443":465,"_336":781,"_20":295},{"_443":444,"_336":783,"_20":303},[789,790,791],{"_443":474,"_336":779,"_20":287},{"_443":465,"_336":781,"_20":295},{"_443":444,"_336":783,"_20":303},{"_441":793,"_336":794,"_605":795,"_610":802,"_614":806},10,"Rendering Arrays",[796,798,800],{"_443":474,"_336":797,"_20":315},"Key prop",{"_443":465,"_336":799,"_20":323},"Focus State",{"_443":444,"_336":801,"_20":331},"Key Reset",[803,804,805],{"_443":474,"_336":797,"_20":311},{"_443":465,"_336":799,"_20":319},{"_443":444,"_336":801,"_20":327},[807,808,809],{"_443":474,"_336":797,"_20":311},{"_443":465,"_336":799,"_20":319},{"_443":444,"_336":801,"_20":327},"playground",{"_812":-5,"_441":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_816":817,"_387":337,"_379":818,"_944":945,"_946":947,"_948":949,"_953":954,"_959":960},"articleId","workshop-react-fundamentals-6-finished",{"_441":546,"_819":820,"_336":710,"_821":822,"_823":824,"_825":826,"_828":829,"_614":831,"_610":912,"_605":928},"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:\"// undefined\"}),`\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",[827],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-styling","finishedEpicVideoEmbeds",[830],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-styling",[832,865,889],{"_443":474,"_440":833,"_463":853},{"_20":183,"_336":710,"_819":834,"_22":184,"_24":185,"_821":835,"_836":837,"_839":840,"_847":848,"_850":851,"_441":546,"_443":474,"_9":440,"_852":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",[838],"https://www.epicreact.dev/workshops/react-fundamentals/styling","test",{"_9":841,"_842":843,"_844":845},"browser","pathname","/app/06.01.problem/test/","testFiles",[846],"boxes.test.ts","dev",{"_9":841,"_842":849},"/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":710,"_819":854,"_22":188,"_24":189,"_821":855,"_836":856,"_839":858,"_847":861,"_850":863,"_441":546,"_443":474,"_9":463,"_864":-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;",[857],"https://www.epicreact.dev/workshops/react-fundamentals/styling/solution",{"_9":841,"_842":859,"_844":860},"/app/06.01.solution/test/",[846],{"_9":841,"_842":862},"/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",{"_443":465,"_440":866,"_463":878},{"_20":191,"_336":714,"_819":867,"_22":192,"_24":193,"_821":868,"_836":869,"_839":871,"_847":875,"_850":877,"_441":546,"_443":465,"_9":440,"_852":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;",[870],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component",{"_9":841,"_842":872,"_844":873},"/app/06.02.problem/test/",[874,846],"box.test.tsx",{"_9":841,"_842":876},"/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":714,"_819":879,"_22":196,"_24":197,"_821":880,"_836":881,"_839":883,"_847":886,"_850":888,"_441":546,"_443":465,"_9":463,"_864":-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;",[882],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component/solution",{"_9":841,"_842":884,"_844":885},"/app/06.02.solution/test/",[874,846],{"_9":841,"_842":887},"/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",{"_443":444,"_440":890,"_463":901},{"_20":199,"_336":716,"_819":891,"_22":200,"_24":201,"_821":892,"_836":893,"_839":895,"_847":898,"_850":900,"_441":546,"_443":444,"_9":440,"_852":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;",[894],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop",{"_9":841,"_842":896,"_844":897},"/app/06.03.problem/test/",[874,846],{"_9":841,"_842":899},"/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":716,"_819":902,"_22":204,"_24":205,"_821":903,"_836":904,"_839":906,"_847":909,"_850":911,"_441":546,"_443":444,"_9":463,"_864":-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;",[905],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop/solution",{"_9":841,"_842":907,"_844":908},"/app/06.03.solution/test/",[874,846],{"_9":841,"_842":910},"/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",[913,918,923],{"_20":183,"_336":710,"_819":834,"_22":184,"_24":185,"_821":835,"_836":914,"_839":915,"_847":917,"_850":851,"_441":546,"_443":474,"_9":440,"_852":187},[838],{"_9":841,"_842":843,"_844":916},[846],{"_9":841,"_842":849},{"_20":191,"_336":714,"_819":867,"_22":192,"_24":193,"_821":868,"_836":919,"_839":920,"_847":922,"_850":877,"_441":546,"_443":465,"_9":440,"_852":195},[870],{"_9":841,"_842":872,"_844":921},[874,846],{"_9":841,"_842":876},{"_20":199,"_336":716,"_819":891,"_22":200,"_24":201,"_821":892,"_836":924,"_839":925,"_847":927,"_850":900,"_441":546,"_443":444,"_9":440,"_852":203},[894],{"_9":841,"_842":896,"_844":926},[874,846],{"_9":841,"_842":899},[929,934,939],{"_20":187,"_336":710,"_819":854,"_22":188,"_24":189,"_821":855,"_836":930,"_839":931,"_847":933,"_850":863,"_441":546,"_443":474,"_9":463,"_864":-5},[857],{"_9":841,"_842":859,"_844":932},[846],{"_9":841,"_842":862},{"_20":195,"_336":714,"_819":879,"_22":196,"_24":197,"_821":880,"_836":935,"_839":936,"_847":938,"_850":888,"_441":546,"_443":465,"_9":463,"_864":-5},[882],{"_9":841,"_842":884,"_844":937},[874,846],{"_9":841,"_842":887},{"_20":203,"_336":716,"_819":902,"_22":204,"_24":205,"_821":903,"_836":940,"_839":941,"_847":943,"_850":911,"_441":546,"_443":444,"_9":463,"_864":-5},[905],{"_9":841,"_842":907,"_844":942},[874,846],{"_9":841,"_842":910},"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",947],"exerciseFinished",{"_950":951,"_24":952},"file","/myapp/workshop-content/exercises/06.styling/FINISHED.mdx","exercises/06.styling/FINISHED.mdx","prevStepLink",{"_955":956,"_957":958},"to","/exercise/06/03/solution","aria-label","Size Prop (solution)","nextStepLink",{"_955":961,"_957":726},"/exercise/07","routes/_app+/exercise+/_layout","actionData","errors"]

06. Styling/Elaboration