[{"_1":2,"_960":-5,"_961":-5},"loaderData",{"_3":4,"_595":596,"_811":812,"_959":-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","bcivx8aqnigkg59mlcu5le07","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.10.1","requestInfo",{"_402":403,"_404":405,"_406":407,"_408":409,"_410":409,"_411":412,"_419":420,"_421":422,"_423":386,"_424":384},"protocol","http:","hostname","epicweb-dev-react-fundamentals.fly.dev","port","","origin","http://epicweb-dev-react-fundamentals.fly.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,443,457,468,476,485,494,501,510,518,526,533,540,547,553,559,565,571,575,580,586,591],{"_7":432,"_433":434,"_20":435,"_436":437},"15579c21eafb24bc9694a953dfa98cc9","avatarUrl","https://www.gravatar.com/avatar/15579c21eafb24bc9694a953dfa98cc9?size=288&default=identicon","Jesse Torgbe-Cofie","location",{"_387":438,"_408":439,"_379":440},"Full Stack Foundations 🔭","http://localhost:5639",{"_441":442},"exerciseNumber",6,{"_7":444,"_445":16,"_446":447,"_448":449,"_20":450,"_436":451},"cf7a71cc-c53b-47e4-86c0-e77be27d3ad1","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/ec0d9bfc2376eae4eb76954a8f0bd5fa?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/ec0d9bfc2376eae4eb76954a8f0bd5fa?size=512&default=identicon","Abhishek Jain",{"_387":452,"_408":439,"_379":453},"React Suspense 🔀",{"_9":454,"_441":455,"_456":455},"problem",2,"stepNumber",{"_7":458,"_445":384,"_446":459,"_448":460,"_20":461,"_436":462},"d316f5d8-e5e8-4079-949e-ee5195a9c8f4","https://www.gravatar.com/avatar/f7bc55be219a433bc816de5628b4a9b5?size=64&default=identicon","https://www.gravatar.com/avatar/f7bc55be219a433bc816de5628b4a9b5?size=512&default=identicon","Benjamin Durand",{"_387":463,"_408":439,"_379":464},"Testing Fundamentals",{"_9":465,"_441":466,"_456":467},"solution",3,1,{"_7":469,"_445":384,"_446":470,"_448":471,"_20":472,"_436":473},"08237dc6-67f7-418b-aa52-77b4bc30d638","https://avatars.githubusercontent.com/u/59316775?v=4&size=64","https://avatars.githubusercontent.com/u/59316775?v=4&size=512","HCaupert",{"_387":474,"_408":439,"_379":475},"Build React Hooks 🪝",{"_9":454,"_441":467,"_456":467},{"_7":477,"_445":384,"_446":478,"_448":479,"_20":480,"_436":481},"aeff60ba-306b-4571-aad5-4fa192ffaebd","https://www.gravatar.com/avatar/df8de2eca805dc9be5116048b822b21a?size=64&default=identicon","https://www.gravatar.com/avatar/df8de2eca805dc9be5116048b822b21a?size=512&default=identicon","Raoul-Gabriel Gheletus",{"_387":482,"_408":439,"_379":483},"Professional Web Forms 📝",{"_9":454,"_441":484,"_456":455},7,{"_7":486,"_445":16,"_446":487,"_448":488,"_20":489,"_436":490},"5c7aec59-efc5-474c-829e-acf789e8bea9","https://avatars.githubusercontent.com/u/87215099?v=4&size=64","https://avatars.githubusercontent.com/u/87215099?v=4&size=512","Seaming",{"_387":491,"_408":439,"_379":492},"Advanced React APIs 🔥",{"_441":493},8,{"_7":495,"_445":16,"_446":496,"_448":497,"_20":498,"_436":499},"add67219-240b-422c-8a93-036d69ce310a","https://www.gravatar.com/avatar/de411a68d8a38d91c8bd78c7e67546c9?size=64&default=identicon","https://www.gravatar.com/avatar/de411a68d8a38d91c8bd78c7e67546c9?size=512&default=identicon","Nikita",{"_387":452,"_408":439,"_379":500},{"_441":467},{"_7":502,"_445":384,"_446":503,"_448":504,"_20":505,"_436":506},"827cbde7-9cab-4d93-ae09-5a23ba73e222","https://www.gravatar.com/avatar/cc68f4285c7f64f4019396e7ca0adad8?size=64&default=identicon","https://www.gravatar.com/avatar/cc68f4285c7f64f4019396e7ca0adad8?size=512&default=identicon","Polina Deryuga",{"_387":507,"_408":439,"_379":508},"React Hooks 🎣",{"_9":465,"_441":467,"_456":509},4,{"_7":511,"_445":384,"_446":512,"_448":513,"_20":514,"_436":515},"394f8748-6086-489c-9f23-9592d3df5bef","https://avatars.githubusercontent.com/u/24479568?v=4&size=64","https://avatars.githubusercontent.com/u/24479568?v=4&size=512","Garry R Burch",{"_387":337,"_408":439,"_379":516},{"_441":517},5,{"_7":519,"_445":384,"_446":520,"_448":521,"_20":522,"_436":523},"225a1963-56d4-427f-acca-ee3db062ffa7","https://www.gravatar.com/avatar/9cb6095bc914ff51199de1abc0c73164?size=64&default=identicon","https://www.gravatar.com/avatar/9cb6095bc914ff51199de1abc0c73164?size=512&default=identicon","Juha-Matti Hakala",{"_387":524,"_408":439,"_379":525},"Advanced React Patterns 🤯",{"_9":465,"_441":509,"_456":455},{"_7":527,"_445":384,"_446":528,"_448":529,"_20":530,"_436":531},"eae66020-9f49-4c00-a475-8b6d5d9af456","https://avatars.githubusercontent.com/u/36880398?v=4&size=64","https://avatars.githubusercontent.com/u/36880398?v=4&size=512","Jeremy Offori",{"_387":438,"_408":439,"_379":532},{"_441":466},{"_7":534,"_445":384,"_446":535,"_448":536,"_20":537,"_436":538},"616fecb5-6dea-4c20-b872-84c6fc576d9d","https://www.gravatar.com/avatar/f6c03a94b25d3a1cf264e37619cc1e75?size=64&default=identicon","https://www.gravatar.com/avatar/f6c03a94b25d3a1cf264e37619cc1e75?size=512&default=identicon","Boris",{"_387":337,"_408":439,"_379":539},{"_9":454,"_441":466,"_456":455},{"_7":541,"_445":384,"_446":542,"_448":543,"_20":544,"_436":545},"42dff37e-fb3b-4fed-a4a4-e153740e7d68","https://avatars.githubusercontent.com/u/63620885?v=4&size=64","https://avatars.githubusercontent.com/u/63620885?v=4&size=512","ruanmeneguello",{"_387":507,"_408":439,"_379":546},{"_9":454,"_441":509,"_456":455},{"_7":548,"_445":384,"_446":549,"_448":550,"_20":551,"_436":552},"d533ab8b-f390-4531-8f40-61381e799f04","https://www.gravatar.com/avatar/947d99cade641ac09ebf65abc6dce8b7?size=64&default=identicon","https://www.gravatar.com/avatar/947d99cade641ac09ebf65abc6dce8b7?size=512&default=identicon","Pedro Vazquez Caballero",{"_387":507,"_408":439},{"_7":554,"_445":384,"_446":555,"_448":556,"_20":-5,"_436":557},"159abe5f-fe24-4c5b-b1c2-a5bff59c5087","https://www.gravatar.com/avatar/915df0afaeb16fe000f69b1f0803ac59?size=64&default=identicon","https://www.gravatar.com/avatar/915df0afaeb16fe000f69b1f0803ac59?size=512&default=identicon",{"_387":337,"_408":439,"_379":558},{"_9":454,"_441":442,"_456":455},{"_7":560,"_445":384,"_446":561,"_448":562,"_20":-5,"_436":563},"ca5a10ff-0b1c-4932-a5e9-888deed168a3","https://www.gravatar.com/avatar/09bbfb65726eaff35bd04c16cef554fa?size=64&default=identicon","https://www.gravatar.com/avatar/09bbfb65726eaff35bd04c16cef554fa?size=512&default=identicon",{"_387":337,"_408":439,"_379":564},{"_9":454,"_441":484,"_456":466},{"_7":566,"_445":384,"_446":567,"_448":568,"_20":-5,"_436":569},"5f202044-01e2-4f30-8e0b-376281882379","https://www.gravatar.com/avatar/2bf29d6e55eb6c58379a377b080a4e22?size=64&default=identicon","https://www.gravatar.com/avatar/2bf29d6e55eb6c58379a377b080a4e22?size=512&default=identicon",{"_387":337,"_408":439,"_379":570},{"_9":454,"_441":517,"_456":442},{"_7":572,"_436":573},"avxah78bn4egggsdvyltnc96",{"_387":524,"_408":439,"_379":574},{"_9":454,"_441":493,"_456":467},{"_7":576,"_436":577},"pcfweg6gaxcp0f71gfw84asz",{"_387":578,"_408":579},"Tailwind CSS Color Tokens 🎨","http://tailwindcss-color-tokens.epicweb.dev",{"_7":581,"_445":384,"_446":582,"_448":583,"_20":-5,"_436":584},"f3636969-455b-431e-97e4-4d314506b21a","https://www.gravatar.com/avatar/5a90aa4a8e229de0abcee2b8e91966e4?size=64&default=identicon","https://www.gravatar.com/avatar/5a90aa4a8e229de0abcee2b8e91966e4?size=512&default=identicon",{"_387":452,"_408":439,"_379":585},{"_9":465,"_441":442,"_456":455},{"_7":587,"_445":384,"_446":588,"_448":589,"_20":-5,"_436":590},"91aeaa24-66b2-4f54-91f6-38e38cda1b00","https://www.gravatar.com/avatar/2a10cb9b89fef16141cdf58faf3f1051?size=64&default=identicon","https://www.gravatar.com/avatar/2a10cb9b89fef16141cdf58faf3f1051?size=512&default=identicon",{"_387":491,"_408":439},{"_7":592,"_436":593},"q0c7z1pxobexao9tcraux75i",{"_387":337,"_408":409,"_379":594},{"_441":442,"_456":-5,"_9":-5},"routes/_app+/_layout",{"_387":337,"_597":598,"_807":808,"_810":16},"exercises",[599,614,631,656,677,705,721,746,771,789],{"_441":467,"_336":600,"_601":602,"_606":607,"_610":611},"Hello World in JS","solutions",[603,604],{"_456":467,"_336":600,"_20":27},{"_456":455,"_336":605,"_20":35},"Generate the Root Node","problems",[608,609],{"_456":467,"_336":600,"_20":21},{"_456":455,"_336":605,"_20":31},"steps",[612,613],{"_456":467,"_336":600,"_20":21},{"_456":455,"_336":605,"_20":31},{"_441":455,"_336":615,"_601":616,"_606":623,"_610":627},"Raw React APIs",[617,619,621],{"_456":467,"_336":618,"_20":43},"Create React Elements",{"_456":455,"_336":620,"_20":51},"Nesting Elements",{"_456":466,"_336":622,"_20":59},"Deep Nesting Elements",[624,625,626],{"_456":467,"_336":618,"_20":39},{"_456":455,"_336":620,"_20":47},{"_456":466,"_336":622,"_20":55},[628,629,630],{"_456":467,"_336":618,"_20":39},{"_456":455,"_336":620,"_20":47},{"_456":466,"_336":622,"_20":55},{"_441":466,"_336":632,"_601":633,"_606":644,"_610":650},"Using JSX",[634,636,638,640,642],{"_456":467,"_336":635,"_20":67},"Compiling JSX",{"_456":455,"_336":637,"_20":75},"Interpolation",{"_456":466,"_336":639,"_20":83},"Spread props",{"_456":509,"_336":641,"_20":91},"Nesting JSX",{"_456":517,"_336":643,"_20":99},"Fragments",[645,646,647,648,649],{"_456":467,"_336":635,"_20":63},{"_456":455,"_336":637,"_20":71},{"_456":466,"_336":639,"_20":79},{"_456":509,"_336":641,"_20":87},{"_456":517,"_336":643,"_20":95},[651,652,653,654,655],{"_456":467,"_336":635,"_20":63},{"_456":455,"_336":637,"_20":71},{"_456":466,"_336":639,"_20":79},{"_456":509,"_336":641,"_20":87},{"_456":517,"_336":643,"_20":95},{"_441":509,"_336":657,"_601":658,"_606":667,"_610":672},"Custom Components",[659,661,663,665],{"_456":467,"_336":660,"_20":107},"Simple Function",{"_456":455,"_336":662,"_20":115},"Raw API",{"_456":466,"_336":664,"_20":123},"JSX Components",{"_456":509,"_336":666,"_20":131},"Props",[668,669,670,671],{"_456":467,"_336":660,"_20":103},{"_456":455,"_336":662,"_20":111},{"_456":466,"_336":664,"_20":119},{"_456":509,"_336":666,"_20":127},[673,674,675,676],{"_456":467,"_336":660,"_20":103},{"_456":455,"_336":662,"_20":111},{"_456":466,"_336":664,"_20":119},{"_456":509,"_336":666,"_20":127},{"_441":517,"_336":678,"_601":679,"_606":691,"_610":698},"TypeScript",[680,681,683,685,687,689],{"_456":467,"_336":666,"_20":139},{"_456":455,"_336":682,"_20":147},"Narrow Types",{"_456":466,"_336":684,"_20":155},"Derive Types",{"_456":509,"_336":686,"_20":163},"Default Props",{"_456":517,"_336":688,"_20":171},"Reduce Duplication",{"_456":442,"_336":690,"_20":179},"Satisfies",[692,693,694,695,696,697],{"_456":467,"_336":666,"_20":135},{"_456":455,"_336":682,"_20":143},{"_456":466,"_336":684,"_20":151},{"_456":509,"_336":686,"_20":159},{"_456":517,"_336":688,"_20":167},{"_456":442,"_336":690,"_20":175},[699,700,701,702,703,704],{"_456":467,"_336":666,"_20":135},{"_456":455,"_336":682,"_20":143},{"_456":466,"_336":684,"_20":151},{"_456":509,"_336":686,"_20":159},{"_456":517,"_336":688,"_20":167},{"_456":442,"_336":690,"_20":175},{"_441":442,"_336":706,"_601":707,"_606":713,"_610":717},"Styling",[708,709,711],{"_456":467,"_336":706,"_20":187},{"_456":455,"_336":710,"_20":195},"Custom Component",{"_456":466,"_336":712,"_20":203},"Size Prop",[714,715,716],{"_456":467,"_336":706,"_20":183},{"_456":455,"_336":710,"_20":191},{"_456":466,"_336":712,"_20":199},[718,719,720],{"_456":467,"_336":706,"_20":183},{"_456":455,"_336":710,"_20":191},{"_456":466,"_336":712,"_20":199},{"_441":484,"_336":722,"_601":723,"_606":734,"_610":740},"Forms",[724,726,728,730,732],{"_456":467,"_336":725,"_20":211},"Form",{"_456":455,"_336":727,"_20":219},"Form Action",{"_456":466,"_336":729,"_20":227},"Input Types",{"_456":509,"_336":731,"_20":235},"Submission",{"_456":517,"_336":733,"_20":243},"Form Actions",[735,736,737,738,739],{"_456":467,"_336":725,"_20":207},{"_456":455,"_336":727,"_20":215},{"_456":466,"_336":729,"_20":223},{"_456":509,"_336":731,"_20":231},{"_456":517,"_336":733,"_20":239},[741,742,743,744,745],{"_456":467,"_336":725,"_20":207},{"_456":455,"_336":727,"_20":215},{"_456":466,"_336":729,"_20":223},{"_456":509,"_336":731,"_20":231},{"_456":517,"_336":733,"_20":239},{"_441":493,"_336":747,"_601":748,"_606":759,"_610":765},"Inputs",[749,751,753,755,757],{"_456":467,"_336":750,"_20":251},"Checkbox",{"_456":455,"_336":752,"_20":259},"Select",{"_456":466,"_336":754,"_20":267},"Radios",{"_456":509,"_336":756,"_20":275},"Hidden Inputs",{"_456":517,"_336":758,"_20":283},"Default Value",[760,761,762,763,764],{"_456":467,"_336":750,"_20":247},{"_456":455,"_336":752,"_20":255},{"_456":466,"_336":754,"_20":263},{"_456":509,"_336":756,"_20":271},{"_456":517,"_336":758,"_20":279},[766,767,768,769,770],{"_456":467,"_336":750,"_20":247},{"_456":455,"_336":752,"_20":255},{"_456":466,"_336":754,"_20":263},{"_456":509,"_336":756,"_20":271},{"_456":517,"_336":758,"_20":279},{"_441":772,"_336":773,"_601":774,"_606":781,"_610":785},9,"Error Boundaries",[775,777,779],{"_456":467,"_336":776,"_20":291},"Composition",{"_456":455,"_336":778,"_20":299},"Other Errors",{"_456":466,"_336":780,"_20":307},"Reset",[782,783,784],{"_456":467,"_336":776,"_20":287},{"_456":455,"_336":778,"_20":295},{"_456":466,"_336":780,"_20":303},[786,787,788],{"_456":467,"_336":776,"_20":287},{"_456":455,"_336":778,"_20":295},{"_456":466,"_336":780,"_20":303},{"_441":790,"_336":791,"_601":792,"_606":799,"_610":803},10,"Rendering Arrays",[793,795,797],{"_456":467,"_336":794,"_20":315},"Key prop",{"_456":455,"_336":796,"_20":323},"Focus State",{"_456":466,"_336":798,"_20":331},"Key Reset",[800,801,802],{"_456":467,"_336":794,"_20":311},{"_456":455,"_336":796,"_20":319},{"_456":466,"_336":798,"_20":327},[804,805,806],{"_456":467,"_336":794,"_20":311},{"_456":455,"_336":796,"_20":319},{"_456":466,"_336":798,"_20":327},"playground",{"_809":-5,"_441":-2},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_813":814,"_387":337,"_379":815,"_941":942,"_943":944,"_945":946,"_950":951,"_956":957},"articleId","workshop-react-fundamentals-6-finished",{"_441":442,"_816":817,"_336":706,"_818":819,"_820":821,"_822":823,"_825":826,"_610":828,"_606":909,"_601":925},"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",[824],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-styling","finishedEpicVideoEmbeds",[827],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-styling",[829,862,886],{"_456":467,"_454":830,"_465":850},{"_20":183,"_336":706,"_816":831,"_22":184,"_24":185,"_818":832,"_833":834,"_836":837,"_844":845,"_847":848,"_441":442,"_456":467,"_9":454,"_849":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",[835],"https://www.epicreact.dev/workshops/react-fundamentals/styling","test",{"_9":838,"_839":840,"_841":842},"browser","pathname","/app/06.01.problem/test/","testFiles",[843],"boxes.test.ts","dev",{"_9":838,"_839":846},"/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":706,"_816":851,"_22":188,"_24":189,"_818":852,"_833":853,"_836":855,"_844":858,"_847":860,"_441":442,"_456":467,"_9":465,"_861":-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;",[854],"https://www.epicreact.dev/workshops/react-fundamentals/styling/solution",{"_9":838,"_839":856,"_841":857},"/app/06.01.solution/test/",[843],{"_9":838,"_839":859},"/app/06.01.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/01.solution.style?view=editor&title=Styling+%28solution%29","problemName",{"_456":455,"_454":863,"_465":875},{"_20":191,"_336":710,"_816":864,"_22":192,"_24":193,"_818":865,"_833":866,"_836":868,"_844":872,"_847":874,"_441":442,"_456":455,"_9":454,"_849":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;",[867],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component",{"_9":838,"_839":869,"_841":870},"/app/06.02.problem/test/",[871,843],"box.test.tsx",{"_9":838,"_839":873},"/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":710,"_816":876,"_22":196,"_24":197,"_818":877,"_833":878,"_836":880,"_844":883,"_847":885,"_441":442,"_456":455,"_9":465,"_861":-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;",[879],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component/solution",{"_9":838,"_839":881,"_841":882},"/app/06.02.solution/test/",[871,843],{"_9":838,"_839":884},"/app/06.02.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/06.styling/02.solution.component?view=editor&title=Custom+Component+%28solution%29",{"_456":466,"_454":887,"_465":898},{"_20":199,"_336":712,"_816":888,"_22":200,"_24":201,"_818":889,"_833":890,"_836":892,"_844":895,"_847":897,"_441":442,"_456":466,"_9":454,"_849":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;",[891],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop",{"_9":838,"_839":893,"_841":894},"/app/06.03.problem/test/",[871,843],{"_9":838,"_839":896},"/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":712,"_816":899,"_22":204,"_24":205,"_818":900,"_833":901,"_836":903,"_844":906,"_847":908,"_441":442,"_456":466,"_9":465,"_861":-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;",[902],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop/solution",{"_9":838,"_839":904,"_841":905},"/app/06.03.solution/test/",[871,843],{"_9":838,"_839":907},"/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",[910,915,920],{"_20":183,"_336":706,"_816":831,"_22":184,"_24":185,"_818":832,"_833":911,"_836":912,"_844":914,"_847":848,"_441":442,"_456":467,"_9":454,"_849":187},[835],{"_9":838,"_839":840,"_841":913},[843],{"_9":838,"_839":846},{"_20":191,"_336":710,"_816":864,"_22":192,"_24":193,"_818":865,"_833":916,"_836":917,"_844":919,"_847":874,"_441":442,"_456":455,"_9":454,"_849":195},[867],{"_9":838,"_839":869,"_841":918},[871,843],{"_9":838,"_839":873},{"_20":199,"_336":712,"_816":888,"_22":200,"_24":201,"_818":889,"_833":921,"_836":922,"_844":924,"_847":897,"_441":442,"_456":466,"_9":454,"_849":203},[891],{"_9":838,"_839":893,"_841":923},[871,843],{"_9":838,"_839":896},[926,931,936],{"_20":187,"_336":706,"_816":851,"_22":188,"_24":189,"_818":852,"_833":927,"_836":928,"_844":930,"_847":860,"_441":442,"_456":467,"_9":465,"_861":-5},[854],{"_9":838,"_839":856,"_841":929},[843],{"_9":838,"_839":859},{"_20":195,"_336":710,"_816":876,"_22":196,"_24":197,"_818":877,"_833":932,"_836":933,"_844":935,"_847":885,"_441":442,"_456":455,"_9":465,"_861":-5},[879],{"_9":838,"_839":881,"_841":934},[871,843],{"_9":838,"_839":884},{"_20":203,"_336":712,"_816":899,"_22":204,"_24":205,"_818":900,"_833":937,"_836":938,"_844":940,"_847":908,"_441":442,"_456":466,"_9":465,"_861":-5},[902],{"_9":838,"_839":904,"_841":939},[871,843],{"_9":838,"_839":907},"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",944],"exerciseFinished",{"_947":948,"_24":949},"file","/myapp/workshop-content/exercises/06.styling/FINISHED.mdx","exercises/06.styling/FINISHED.mdx","prevStepLink",{"_952":953,"_954":955},"to","/exercise/06/03/solution","aria-label","Size Prop (solution)","nextStepLink",{"_952":958,"_954":722},"/exercise/07","routes/_app+/exercise+/_layout","actionData","errors"]

06. Styling/Elaboration