[{"_1":2,"_918":-5,"_919":-5},"loaderData",{"_3":4,"_553":554,"_769":770,"_917":-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","n23sqy9iu61axbna4thr5ri5","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.5","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,458,466,474,483,492,499,508,515,525,533,537,542,549],{"_7":432,"_433":434,"_20":435,"_436":437},"f7bc55be219a433bc816de5628b4a9b5","avatarUrl","https://cdn.discordapp.com/avatars/1316820405436284989/4cf322d2bea8732605e60f8a6c7b20fb?size=512","Esquinte 🌌 🚀","location",{"_387":438,"_408":439,"_379":440},"📐 Pixel Perfect Tailwind","http://localhost:5639",{"_9":441,"_442":443,"_444":445},"problem","exerciseNumber",7,"stepNumber",1,{"_7":447,"_448":384,"_449":450,"_451":452,"_20":453,"_436":454},"78286ddf-f4ba-4c51-a493-6b4c33230a29","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/16c6ebc6a9794378727470dae7ecca6e?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/16c6ebc6a9794378727470dae7ecca6e?size=512&default=identicon","TAKASHI ARAKI",{"_387":455,"_408":439,"_379":456},"React Performance ⚡",{"_442":457},2,{"_7":459,"_448":384,"_449":460,"_451":461,"_20":462,"_436":463},"32c71c72-3362-4366-863b-e588e6764585","https://www.gravatar.com/avatar/a0152fe3e77edfab6495e4d09922f742?size=64&default=identicon","https://www.gravatar.com/avatar/a0152fe3e77edfab6495e4d09922f742?size=512&default=identicon","Patrick Schandler",{"_387":464,"_408":439,"_379":465},"Full Stack Foundations 🔭",{"_9":441,"_442":445,"_444":445},{"_7":467,"_448":384,"_449":468,"_451":469,"_20":470,"_436":471},"2393dbd5-6265-4b68-ab93-aa044e03c0e7","https://www.gravatar.com/avatar/42d6b3f6369129bcd2550ebc668d5052?size=64&default=identicon","https://www.gravatar.com/avatar/42d6b3f6369129bcd2550ebc668d5052?size=512&default=identicon","Lucas",{"_387":472,"_408":439,"_379":473},"Data Modeling Deep Dive 💾",{"_9":441,"_442":445,"_444":445},{"_7":475,"_448":384,"_449":476,"_451":477,"_20":478,"_436":479},"c1f2d82a-4e1b-4ac6-a4dd-4f25a7391524","https://www.gravatar.com/avatar/6bdfe36e28827d253c7e072fb7847185?size=64&default=identicon","https://www.gravatar.com/avatar/6bdfe36e28827d253c7e072fb7847185?size=512&default=identicon","VS",{"_387":480,"_408":439,"_379":481},"Advanced React APIs 🔥",{"_442":482},5,{"_7":484,"_448":384,"_449":485,"_451":486,"_20":487,"_436":488},"08b8105f-3d21-4382-9d0e-517326a3b5bd","https://www.gravatar.com/avatar/15a34aefd6e4f2e99e5075e2a719adbd?size=64&default=identicon","https://www.gravatar.com/avatar/15a34aefd6e4f2e99e5075e2a719adbd?size=512&default=identicon","Kathleen",{"_387":337,"_408":439,"_379":489},{"_9":490,"_442":443,"_444":491},"solution",3,{"_7":493,"_448":384,"_449":494,"_451":495,"_20":496,"_436":497},"e2ed67ec-d267-487a-a9f8-2e73c0d22f93","https://www.gravatar.com/avatar/439bd63e3b0fad79c182d7b98de0a831?size=64&default=identicon","https://www.gravatar.com/avatar/439bd63e3b0fad79c182d7b98de0a831?size=512&default=identicon","Jyoti Ranjan Sharma",{"_387":464,"_408":439,"_379":498},{"_9":490,"_442":445,"_444":482},{"_7":500,"_448":384,"_449":501,"_451":502,"_20":503,"_436":504},"2ad3f9a0-d8e6-49c8-bf82-2b41199a1bbf","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=64&default=identicon","https://www.gravatar.com/avatar/3c77ed63b0adbee55a74923d76fbc818?size=512&default=identicon","Tiago Benedetti",{"_387":505,"_408":506,"_379":507},"Professional Web Forms 📝","http://192.168.0.14:5639",{"_9":441,"_442":445,"_444":491},{"_7":509,"_448":384,"_449":510,"_451":511,"_20":512,"_436":513},"6103beee-2a3d-4262-8b55-b84a0d164bd6","https://www.gravatar.com/avatar/7c8e0d3f56bfe3448223781b241eb832?size=64&default=identicon","https://www.gravatar.com/avatar/7c8e0d3f56bfe3448223781b241eb832?size=512&default=identicon","Cian O’Gralaigh",{"_387":455,"_408":439,"_379":514},{"_442":491},{"_7":516,"_448":384,"_449":517,"_451":518,"_20":519,"_436":520},"1661039c-8124-4145-8bcf-5bbfae2c9e1d","https://www.gravatar.com/avatar/3973bbe40ab3d36aabe4f59311fa4353?size=64&default=identicon","https://www.gravatar.com/avatar/3973bbe40ab3d36aabe4f59311fa4353?size=512&default=identicon","josep arrufat vicente",{"_387":521,"_408":522,"_379":523},"React Suspense 🔀","http://192.168.5.234:5639",{"_442":524},6,{"_7":526,"_448":384,"_449":527,"_451":528,"_20":529,"_436":530},"a50b42ba-0139-476f-bb96-8ec8fb521af4","https://www.gravatar.com/avatar/ca7bd1f279dac444a203e27a09993394?size=64&default=identicon","https://www.gravatar.com/avatar/ca7bd1f279dac444a203e27a09993394?size=512&default=identicon","Zack Hitchcock",{"_387":337,"_408":439,"_379":531},{"_442":532},4,{"_7":534,"_436":535},"dxdun7kfsgwo4ugggp3pfqfp",{"_387":455,"_408":536},"http://performance.epicreact.dev",{"_7":538,"_436":539},"kyd0h4sd13vero80dm1vbmet",{"_387":505,"_408":540,"_379":541},"http://forms.epicweb.dev",{"_9":441,"_442":524,"_444":491},{"_7":543,"_448":384,"_449":544,"_451":545,"_20":-5,"_436":546},"0c156f1a-4abf-4784-8f17-8086592964de","https://www.gravatar.com/avatar/ec5640cd3d84358a5a1ab6558e373b3d?size=64&default=identicon","https://www.gravatar.com/avatar/ec5640cd3d84358a5a1ab6558e373b3d?size=512&default=identicon",{"_387":337,"_408":439,"_379":547},{"_442":548},9,{"_7":550,"_436":551},"dtk2n2khne6ys5zw0hhn1d0z",{"_387":337,"_408":409,"_379":552},{"_442":524,"_444":-5,"_9":-5},"routes/_app+/_layout",{"_387":337,"_555":556,"_765":766,"_768":16},"exercises",[557,572,589,614,635,663,679,704,730,747],{"_442":445,"_336":558,"_559":560,"_564":565,"_568":569},"Hello World in JS","solutions",[561,562],{"_444":445,"_336":558,"_20":27},{"_444":457,"_336":563,"_20":35},"Generate the Root Node","problems",[566,567],{"_444":445,"_336":558,"_20":21},{"_444":457,"_336":563,"_20":31},"steps",[570,571],{"_444":445,"_336":558,"_20":21},{"_444":457,"_336":563,"_20":31},{"_442":457,"_336":573,"_559":574,"_564":581,"_568":585},"Raw React APIs",[575,577,579],{"_444":445,"_336":576,"_20":43},"Create React Elements",{"_444":457,"_336":578,"_20":51},"Nesting Elements",{"_444":491,"_336":580,"_20":59},"Deep Nesting Elements",[582,583,584],{"_444":445,"_336":576,"_20":39},{"_444":457,"_336":578,"_20":47},{"_444":491,"_336":580,"_20":55},[586,587,588],{"_444":445,"_336":576,"_20":39},{"_444":457,"_336":578,"_20":47},{"_444":491,"_336":580,"_20":55},{"_442":491,"_336":590,"_559":591,"_564":602,"_568":608},"Using JSX",[592,594,596,598,600],{"_444":445,"_336":593,"_20":67},"Compiling JSX",{"_444":457,"_336":595,"_20":75},"Interpolation",{"_444":491,"_336":597,"_20":83},"Spread props",{"_444":532,"_336":599,"_20":91},"Nesting JSX",{"_444":482,"_336":601,"_20":99},"Fragments",[603,604,605,606,607],{"_444":445,"_336":593,"_20":63},{"_444":457,"_336":595,"_20":71},{"_444":491,"_336":597,"_20":79},{"_444":532,"_336":599,"_20":87},{"_444":482,"_336":601,"_20":95},[609,610,611,612,613],{"_444":445,"_336":593,"_20":63},{"_444":457,"_336":595,"_20":71},{"_444":491,"_336":597,"_20":79},{"_444":532,"_336":599,"_20":87},{"_444":482,"_336":601,"_20":95},{"_442":532,"_336":615,"_559":616,"_564":625,"_568":630},"Custom Components",[617,619,621,623],{"_444":445,"_336":618,"_20":107},"Simple Function",{"_444":457,"_336":620,"_20":115},"Raw API",{"_444":491,"_336":622,"_20":123},"JSX Components",{"_444":532,"_336":624,"_20":131},"Props",[626,627,628,629],{"_444":445,"_336":618,"_20":103},{"_444":457,"_336":620,"_20":111},{"_444":491,"_336":622,"_20":119},{"_444":532,"_336":624,"_20":127},[631,632,633,634],{"_444":445,"_336":618,"_20":103},{"_444":457,"_336":620,"_20":111},{"_444":491,"_336":622,"_20":119},{"_444":532,"_336":624,"_20":127},{"_442":482,"_336":636,"_559":637,"_564":649,"_568":656},"TypeScript",[638,639,641,643,645,647],{"_444":445,"_336":624,"_20":139},{"_444":457,"_336":640,"_20":147},"Narrow Types",{"_444":491,"_336":642,"_20":155},"Derive Types",{"_444":532,"_336":644,"_20":163},"Default Props",{"_444":482,"_336":646,"_20":171},"Reduce Duplication",{"_444":524,"_336":648,"_20":179},"Satisfies",[650,651,652,653,654,655],{"_444":445,"_336":624,"_20":135},{"_444":457,"_336":640,"_20":143},{"_444":491,"_336":642,"_20":151},{"_444":532,"_336":644,"_20":159},{"_444":482,"_336":646,"_20":167},{"_444":524,"_336":648,"_20":175},[657,658,659,660,661,662],{"_444":445,"_336":624,"_20":135},{"_444":457,"_336":640,"_20":143},{"_444":491,"_336":642,"_20":151},{"_444":532,"_336":644,"_20":159},{"_444":482,"_336":646,"_20":167},{"_444":524,"_336":648,"_20":175},{"_442":524,"_336":664,"_559":665,"_564":671,"_568":675},"Styling",[666,667,669],{"_444":445,"_336":664,"_20":187},{"_444":457,"_336":668,"_20":195},"Custom Component",{"_444":491,"_336":670,"_20":203},"Size Prop",[672,673,674],{"_444":445,"_336":664,"_20":183},{"_444":457,"_336":668,"_20":191},{"_444":491,"_336":670,"_20":199},[676,677,678],{"_444":445,"_336":664,"_20":183},{"_444":457,"_336":668,"_20":191},{"_444":491,"_336":670,"_20":199},{"_442":443,"_336":680,"_559":681,"_564":692,"_568":698},"Forms",[682,684,686,688,690],{"_444":445,"_336":683,"_20":211},"Form",{"_444":457,"_336":685,"_20":219},"Form Action",{"_444":491,"_336":687,"_20":227},"Input Types",{"_444":532,"_336":689,"_20":235},"Submission",{"_444":482,"_336":691,"_20":243},"Form Actions",[693,694,695,696,697],{"_444":445,"_336":683,"_20":207},{"_444":457,"_336":685,"_20":215},{"_444":491,"_336":687,"_20":223},{"_444":532,"_336":689,"_20":231},{"_444":482,"_336":691,"_20":239},[699,700,701,702,703],{"_444":445,"_336":683,"_20":207},{"_444":457,"_336":685,"_20":215},{"_444":491,"_336":687,"_20":223},{"_444":532,"_336":689,"_20":231},{"_444":482,"_336":691,"_20":239},{"_442":705,"_336":706,"_559":707,"_564":718,"_568":724},8,"Inputs",[708,710,712,714,716],{"_444":445,"_336":709,"_20":251},"Checkbox",{"_444":457,"_336":711,"_20":259},"Select",{"_444":491,"_336":713,"_20":267},"Radios",{"_444":532,"_336":715,"_20":275},"Hidden Inputs",{"_444":482,"_336":717,"_20":283},"Default Value",[719,720,721,722,723],{"_444":445,"_336":709,"_20":247},{"_444":457,"_336":711,"_20":255},{"_444":491,"_336":713,"_20":263},{"_444":532,"_336":715,"_20":271},{"_444":482,"_336":717,"_20":279},[725,726,727,728,729],{"_444":445,"_336":709,"_20":247},{"_444":457,"_336":711,"_20":255},{"_444":491,"_336":713,"_20":263},{"_444":532,"_336":715,"_20":271},{"_444":482,"_336":717,"_20":279},{"_442":548,"_336":731,"_559":732,"_564":739,"_568":743},"Error Boundaries",[733,735,737],{"_444":445,"_336":734,"_20":291},"Composition",{"_444":457,"_336":736,"_20":299},"Other Errors",{"_444":491,"_336":738,"_20":307},"Reset",[740,741,742],{"_444":445,"_336":734,"_20":287},{"_444":457,"_336":736,"_20":295},{"_444":491,"_336":738,"_20":303},[744,745,746],{"_444":445,"_336":734,"_20":287},{"_444":457,"_336":736,"_20":295},{"_444":491,"_336":738,"_20":303},{"_442":748,"_336":749,"_559":750,"_564":757,"_568":761},10,"Rendering Arrays",[751,753,755],{"_444":445,"_336":752,"_20":315},"Key prop",{"_444":457,"_336":754,"_20":323},"Focus State",{"_444":491,"_336":756,"_20":331},"Key Reset",[758,759,760],{"_444":445,"_336":752,"_20":311},{"_444":457,"_336":754,"_20":319},{"_444":491,"_336":756,"_20":327},[762,763,764],{"_444":445,"_336":752,"_20":311},{"_444":457,"_336":754,"_20":319},{"_444":491,"_336":756,"_20":327},"playground",{"_767":-5,"_442":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_771":772,"_387":337,"_379":773,"_899":900,"_901":902,"_903":904,"_908":909,"_914":915},"articleId","workshop-react-fundamentals-6-finished",{"_442":524,"_774":775,"_336":664,"_776":777,"_778":779,"_780":781,"_783":784,"_568":786,"_564":867,"_559":883},"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",[782],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-styling","finishedEpicVideoEmbeds",[785],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-styling",[787,820,844],{"_444":445,"_441":788,"_490":808},{"_20":183,"_336":664,"_774":789,"_22":184,"_24":185,"_776":790,"_791":792,"_794":795,"_802":803,"_805":806,"_442":524,"_444":445,"_9":441,"_807":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",[793],"https://www.epicreact.dev/workshops/react-fundamentals/styling","test",{"_9":796,"_797":798,"_799":800},"browser","pathname","/app/06.01.problem/test/","testFiles",[801],"boxes.test.ts","dev",{"_9":796,"_797":804},"/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":664,"_774":809,"_22":188,"_24":189,"_776":810,"_791":811,"_794":813,"_802":816,"_805":818,"_442":524,"_444":445,"_9":490,"_819":-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;",[812],"https://www.epicreact.dev/workshops/react-fundamentals/styling/solution",{"_9":796,"_797":814,"_799":815},"/app/06.01.solution/test/",[801],{"_9":796,"_797":817},"/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",{"_444":457,"_441":821,"_490":833},{"_20":191,"_336":668,"_774":822,"_22":192,"_24":193,"_776":823,"_791":824,"_794":826,"_802":830,"_805":832,"_442":524,"_444":457,"_9":441,"_807":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;",[825],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component",{"_9":796,"_797":827,"_799":828},"/app/06.02.problem/test/",[829,801],"box.test.tsx",{"_9":796,"_797":831},"/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":668,"_774":834,"_22":196,"_24":197,"_776":835,"_791":836,"_794":838,"_802":841,"_805":843,"_442":524,"_444":457,"_9":490,"_819":-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;",[837],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component/solution",{"_9":796,"_797":839,"_799":840},"/app/06.02.solution/test/",[829,801],{"_9":796,"_797":842},"/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",{"_444":491,"_441":845,"_490":856},{"_20":199,"_336":670,"_774":846,"_22":200,"_24":201,"_776":847,"_791":848,"_794":850,"_802":853,"_805":855,"_442":524,"_444":491,"_9":441,"_807":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;",[849],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop",{"_9":796,"_797":851,"_799":852},"/app/06.03.problem/test/",[829,801],{"_9":796,"_797":854},"/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":670,"_774":857,"_22":204,"_24":205,"_776":858,"_791":859,"_794":861,"_802":864,"_805":866,"_442":524,"_444":491,"_9":490,"_819":-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;",[860],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop/solution",{"_9":796,"_797":862,"_799":863},"/app/06.03.solution/test/",[829,801],{"_9":796,"_797":865},"/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",[868,873,878],{"_20":183,"_336":664,"_774":789,"_22":184,"_24":185,"_776":790,"_791":869,"_794":870,"_802":872,"_805":806,"_442":524,"_444":445,"_9":441,"_807":187},[793],{"_9":796,"_797":798,"_799":871},[801],{"_9":796,"_797":804},{"_20":191,"_336":668,"_774":822,"_22":192,"_24":193,"_776":823,"_791":874,"_794":875,"_802":877,"_805":832,"_442":524,"_444":457,"_9":441,"_807":195},[825],{"_9":796,"_797":827,"_799":876},[829,801],{"_9":796,"_797":831},{"_20":199,"_336":670,"_774":846,"_22":200,"_24":201,"_776":847,"_791":879,"_794":880,"_802":882,"_805":855,"_442":524,"_444":491,"_9":441,"_807":203},[849],{"_9":796,"_797":851,"_799":881},[829,801],{"_9":796,"_797":854},[884,889,894],{"_20":187,"_336":664,"_774":809,"_22":188,"_24":189,"_776":810,"_791":885,"_794":886,"_802":888,"_805":818,"_442":524,"_444":445,"_9":490,"_819":-5},[812],{"_9":796,"_797":814,"_799":887},[801],{"_9":796,"_797":817},{"_20":195,"_336":668,"_774":834,"_22":196,"_24":197,"_776":835,"_791":890,"_794":891,"_802":893,"_805":843,"_442":524,"_444":457,"_9":490,"_819":-5},[837],{"_9":796,"_797":839,"_799":892},[829,801],{"_9":796,"_797":842},{"_20":203,"_336":670,"_774":857,"_22":204,"_24":205,"_776":858,"_791":895,"_794":896,"_802":898,"_805":866,"_442":524,"_444":491,"_9":490,"_819":-5},[860],{"_9":796,"_797":862,"_799":897},[829,801],{"_9":796,"_797":865},"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",902],"exerciseFinished",{"_905":906,"_24":907},"file","/myapp/workshop-content/exercises/06.styling/FINISHED.mdx","exercises/06.styling/FINISHED.mdx","prevStepLink",{"_910":911,"_912":913},"to","/exercise/06/03/solution","aria-label","Size Prop (solution)","nextStepLink",{"_910":916,"_912":680},"/exercise/07","routes/_app+/exercise+/_layout","actionData","errors"]

06. Styling/Elaboration