[{"_1":2,"_995":-5,"_996":-5},"loaderData",{"_3":4,"_552":553,"_846":847},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_334":335,"_337":338,"_339":16,"_340":341,"_398":343,"_399":345,"_346":347,"_400":401,"_422":423,"_447":-5,"_448":-7,"_449":450},"userId",{"_7":8,"_9":10},"id","319f4c5b-a4d0-4a05-badf-577b6e8c7fb5","type","cookie.clientId","preferences","progress",[],"user","userHasAccess",false,"apps",[19,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330],{"_20":21,"_22":23,"_24":25},"name","01.01.problem","fullPath","/myapp/workshop-content/exercises/01.js-hello-world/01.problem.hello","relativePath","exercises/01.js-hello-world/01.problem.hello",{"_20":27,"_22":28,"_24":29},"01.01.solution","/myapp/workshop-content/exercises/01.js-hello-world/01.solution.hello","exercises/01.js-hello-world/01.solution.hello",{"_20":31,"_22":32,"_24":33},"01.02.problem","/myapp/workshop-content/exercises/01.js-hello-world/02.problem.root","exercises/01.js-hello-world/02.problem.root",{"_20":35,"_22":36,"_24":37},"01.02.solution","/myapp/workshop-content/exercises/01.js-hello-world/02.solution.root","exercises/01.js-hello-world/02.solution.root",{"_20":39,"_22":40,"_24":41},"02.01.problem","/myapp/workshop-content/exercises/02.raw-react/01.problem.elements","exercises/02.raw-react/01.problem.elements",{"_20":43,"_22":44,"_24":45},"02.01.solution","/myapp/workshop-content/exercises/02.raw-react/01.solution.elements","exercises/02.raw-react/01.solution.elements",{"_20":47,"_22":48,"_24":49},"02.02.problem","/myapp/workshop-content/exercises/02.raw-react/02.problem.nesting","exercises/02.raw-react/02.problem.nesting",{"_20":51,"_22":52,"_24":53},"02.02.solution","/myapp/workshop-content/exercises/02.raw-react/02.solution.nesting","exercises/02.raw-react/02.solution.nesting",{"_20":55,"_22":56,"_24":57},"02.03.problem","/myapp/workshop-content/exercises/02.raw-react/03.problem.deep-nesting","exercises/02.raw-react/03.problem.deep-nesting",{"_20":59,"_22":60,"_24":61},"02.03.solution","/myapp/workshop-content/exercises/02.raw-react/03.solution.deep-nesting","exercises/02.raw-react/03.solution.deep-nesting",{"_20":63,"_22":64,"_24":65},"03.01.problem","/myapp/workshop-content/exercises/03.using-jsx/01.problem.compiler","exercises/03.using-jsx/01.problem.compiler",{"_20":67,"_22":68,"_24":69},"03.01.solution","/myapp/workshop-content/exercises/03.using-jsx/01.solution.compiler","exercises/03.using-jsx/01.solution.compiler",{"_20":71,"_22":72,"_24":73},"03.02.problem","/myapp/workshop-content/exercises/03.using-jsx/02.problem.interpolation","exercises/03.using-jsx/02.problem.interpolation",{"_20":75,"_22":76,"_24":77},"03.02.solution","/myapp/workshop-content/exercises/03.using-jsx/02.solution.interpolation","exercises/03.using-jsx/02.solution.interpolation",{"_20":79,"_22":80,"_24":81},"03.03.problem","/myapp/workshop-content/exercises/03.using-jsx/03.problem.spread","exercises/03.using-jsx/03.problem.spread",{"_20":83,"_22":84,"_24":85},"03.03.solution","/myapp/workshop-content/exercises/03.using-jsx/03.solution.spread","exercises/03.using-jsx/03.solution.spread",{"_20":87,"_22":88,"_24":89},"03.04.problem","/myapp/workshop-content/exercises/03.using-jsx/04.problem.nesting","exercises/03.using-jsx/04.problem.nesting",{"_20":91,"_22":92,"_24":93},"03.04.solution","/myapp/workshop-content/exercises/03.using-jsx/04.solution.nesting","exercises/03.using-jsx/04.solution.nesting",{"_20":95,"_22":96,"_24":97},"03.05.problem","/myapp/workshop-content/exercises/03.using-jsx/05.problem.fragments","exercises/03.using-jsx/05.problem.fragments",{"_20":99,"_22":100,"_24":101},"03.05.solution","/myapp/workshop-content/exercises/03.using-jsx/05.solution.fragments","exercises/03.using-jsx/05.solution.fragments",{"_20":103,"_22":104,"_24":105},"04.01.problem","/myapp/workshop-content/exercises/04.components/01.problem.function","exercises/04.components/01.problem.function",{"_20":107,"_22":108,"_24":109},"04.01.solution","/myapp/workshop-content/exercises/04.components/01.solution.function","exercises/04.components/01.solution.function",{"_20":111,"_22":112,"_24":113},"04.02.problem","/myapp/workshop-content/exercises/04.components/02.problem.raw","exercises/04.components/02.problem.raw",{"_20":115,"_22":116,"_24":117},"04.02.solution","/myapp/workshop-content/exercises/04.components/02.solution.raw","exercises/04.components/02.solution.raw",{"_20":119,"_22":120,"_24":121},"04.03.problem","/myapp/workshop-content/exercises/04.components/03.problem.jsx","exercises/04.components/03.problem.jsx",{"_20":123,"_22":124,"_24":125},"04.03.solution","/myapp/workshop-content/exercises/04.components/03.solution.jsx","exercises/04.components/03.solution.jsx",{"_20":127,"_22":128,"_24":129},"04.04.problem","/myapp/workshop-content/exercises/04.components/04.problem.props","exercises/04.components/04.problem.props",{"_20":131,"_22":132,"_24":133},"04.04.solution","/myapp/workshop-content/exercises/04.components/04.solution.props","exercises/04.components/04.solution.props",{"_20":135,"_22":136,"_24":137},"05.01.problem","/myapp/workshop-content/exercises/05.typescript/01.problem.props","exercises/05.typescript/01.problem.props",{"_20":139,"_22":140,"_24":141},"05.01.solution","/myapp/workshop-content/exercises/05.typescript/01.solution.props","exercises/05.typescript/01.solution.props",{"_20":143,"_22":144,"_24":145},"05.02.problem","/myapp/workshop-content/exercises/05.typescript/02.problem.narrow","exercises/05.typescript/02.problem.narrow",{"_20":147,"_22":148,"_24":149},"05.02.solution","/myapp/workshop-content/exercises/05.typescript/02.solution.narrow","exercises/05.typescript/02.solution.narrow",{"_20":151,"_22":152,"_24":153},"05.03.problem","/myapp/workshop-content/exercises/05.typescript/03.problem.derive","exercises/05.typescript/03.problem.derive",{"_20":155,"_22":156,"_24":157},"05.03.solution","/myapp/workshop-content/exercises/05.typescript/03.solution.derive","exercises/05.typescript/03.solution.derive",{"_20":159,"_22":160,"_24":161},"05.04.problem","/myapp/workshop-content/exercises/05.typescript/04.problem.default-props","exercises/05.typescript/04.problem.default-props",{"_20":163,"_22":164,"_24":165},"05.04.solution","/myapp/workshop-content/exercises/05.typescript/04.solution.default-props","exercises/05.typescript/04.solution.default-props",{"_20":167,"_22":168,"_24":169},"05.05.problem","/myapp/workshop-content/exercises/05.typescript/05.problem.function-types","exercises/05.typescript/05.problem.function-types",{"_20":171,"_22":172,"_24":173},"05.05.solution","/myapp/workshop-content/exercises/05.typescript/05.solution.function-types","exercises/05.typescript/05.solution.function-types",{"_20":175,"_22":176,"_24":177},"05.06.problem","/myapp/workshop-content/exercises/05.typescript/06.problem.satisfies","exercises/05.typescript/06.problem.satisfies",{"_20":179,"_22":180,"_24":181},"05.06.solution","/myapp/workshop-content/exercises/05.typescript/06.solution.satisfies","exercises/05.typescript/06.solution.satisfies",{"_20":183,"_22":184,"_24":185},"06.01.problem","/myapp/workshop-content/exercises/06.styling/01.problem.style","exercises/06.styling/01.problem.style",{"_20":187,"_22":188,"_24":189},"06.01.solution","/myapp/workshop-content/exercises/06.styling/01.solution.style","exercises/06.styling/01.solution.style",{"_20":191,"_22":192,"_24":193},"06.02.problem","/myapp/workshop-content/exercises/06.styling/02.problem.component","exercises/06.styling/02.problem.component",{"_20":195,"_22":196,"_24":197},"06.02.solution","/myapp/workshop-content/exercises/06.styling/02.solution.component","exercises/06.styling/02.solution.component",{"_20":199,"_22":200,"_24":201},"06.03.problem","/myapp/workshop-content/exercises/06.styling/03.problem.size-prop","exercises/06.styling/03.problem.size-prop",{"_20":203,"_22":204,"_24":205},"06.03.solution","/myapp/workshop-content/exercises/06.styling/03.solution.size-prop","exercises/06.styling/03.solution.size-prop",{"_20":207,"_22":208,"_24":209},"07.01.problem","/myapp/workshop-content/exercises/07.forms/01.problem.form","exercises/07.forms/01.problem.form",{"_20":211,"_22":212,"_24":213},"07.01.solution","/myapp/workshop-content/exercises/07.forms/01.solution.form","exercises/07.forms/01.solution.form",{"_20":215,"_22":216,"_24":217},"07.02.problem","/myapp/workshop-content/exercises/07.forms/02.problem.action","exercises/07.forms/02.problem.action",{"_20":219,"_22":220,"_24":221},"07.02.solution","/myapp/workshop-content/exercises/07.forms/02.solution.action","exercises/07.forms/02.solution.action",{"_20":223,"_22":224,"_24":225},"07.03.problem","/myapp/workshop-content/exercises/07.forms/03.problem.types","exercises/07.forms/03.problem.types",{"_20":227,"_22":228,"_24":229},"07.03.solution","/myapp/workshop-content/exercises/07.forms/03.solution.types","exercises/07.forms/03.solution.types",{"_20":231,"_22":232,"_24":233},"07.04.problem","/myapp/workshop-content/exercises/07.forms/04.problem.submit","exercises/07.forms/04.problem.submit",{"_20":235,"_22":236,"_24":237},"07.04.solution","/myapp/workshop-content/exercises/07.forms/04.solution.submit","exercises/07.forms/04.solution.submit",{"_20":239,"_22":240,"_24":241},"07.05.problem","/myapp/workshop-content/exercises/07.forms/05.problem.action","exercises/07.forms/05.problem.action",{"_20":243,"_22":244,"_24":245},"07.05.solution","/myapp/workshop-content/exercises/07.forms/05.solution.action","exercises/07.forms/05.solution.action",{"_20":247,"_22":248,"_24":249},"08.01.problem","/myapp/workshop-content/exercises/08.inputs/01.problem.checkbox","exercises/08.inputs/01.problem.checkbox",{"_20":251,"_22":252,"_24":253},"08.01.solution","/myapp/workshop-content/exercises/08.inputs/01.solution.checkbox","exercises/08.inputs/01.solution.checkbox",{"_20":255,"_22":256,"_24":257},"08.02.problem","/myapp/workshop-content/exercises/08.inputs/02.problem.select","exercises/08.inputs/02.problem.select",{"_20":259,"_22":260,"_24":261},"08.02.solution","/myapp/workshop-content/exercises/08.inputs/02.solution.select","exercises/08.inputs/02.solution.select",{"_20":263,"_22":264,"_24":265},"08.03.problem","/myapp/workshop-content/exercises/08.inputs/03.problem.radio","exercises/08.inputs/03.problem.radio",{"_20":267,"_22":268,"_24":269},"08.03.solution","/myapp/workshop-content/exercises/08.inputs/03.solution.radio","exercises/08.inputs/03.solution.radio",{"_20":271,"_22":272,"_24":273},"08.04.problem","/myapp/workshop-content/exercises/08.inputs/04.problem.hidden","exercises/08.inputs/04.problem.hidden",{"_20":275,"_22":276,"_24":277},"08.04.solution","/myapp/workshop-content/exercises/08.inputs/04.solution.hidden","exercises/08.inputs/04.solution.hidden",{"_20":279,"_22":280,"_24":281},"08.05.problem","/myapp/workshop-content/exercises/08.inputs/05.problem.default-value","exercises/08.inputs/05.problem.default-value",{"_20":283,"_22":284,"_24":285},"08.05.solution","/myapp/workshop-content/exercises/08.inputs/05.solution.default-value","exercises/08.inputs/05.solution.default-value",{"_20":287,"_22":288,"_24":289},"09.01.problem","/myapp/workshop-content/exercises/09.errors/01.problem.composition","exercises/09.errors/01.problem.composition",{"_20":291,"_22":292,"_24":293},"09.01.solution","/myapp/workshop-content/exercises/09.errors/01.solution.composition","exercises/09.errors/01.solution.composition",{"_20":295,"_22":296,"_24":297},"09.02.problem","/myapp/workshop-content/exercises/09.errors/02.problem.show-boundary","exercises/09.errors/02.problem.show-boundary",{"_20":299,"_22":300,"_24":301},"09.02.solution","/myapp/workshop-content/exercises/09.errors/02.solution.show-boundary","exercises/09.errors/02.solution.show-boundary",{"_20":303,"_22":304,"_24":305},"09.03.problem","/myapp/workshop-content/exercises/09.errors/03.problem.reset","exercises/09.errors/03.problem.reset",{"_20":307,"_22":308,"_24":309},"09.03.solution","/myapp/workshop-content/exercises/09.errors/03.solution.reset","exercises/09.errors/03.solution.reset",{"_20":311,"_22":312,"_24":313},"10.01.problem","/myapp/workshop-content/exercises/10.arrays/01.problem.key-prop","exercises/10.arrays/01.problem.key-prop",{"_20":315,"_22":316,"_24":317},"10.01.solution","/myapp/workshop-content/exercises/10.arrays/01.solution.key-prop","exercises/10.arrays/01.solution.key-prop",{"_20":319,"_22":320,"_24":321},"10.02.problem","/myapp/workshop-content/exercises/10.arrays/02.problem.focus-state","exercises/10.arrays/02.problem.focus-state",{"_20":323,"_22":324,"_24":325},"10.02.solution","/myapp/workshop-content/exercises/10.arrays/02.solution.focus-state","exercises/10.arrays/02.solution.focus-state",{"_20":327,"_22":328,"_24":329},"10.03.problem","/myapp/workshop-content/exercises/10.arrays/03.problem.key-reset","exercises/10.arrays/03.problem.key-reset",{"_20":331,"_22":332,"_24":333},"10.03.solution","/myapp/workshop-content/exercises/10.arrays/03.solution.key-reset","exercises/10.arrays/03.solution.key-reset","repoUpdates",{"_336":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_342":343,"_344":345,"_346":347,"_353":354,"_371":372,"_374":375,"_376":377,"_378":379,"_382":383,"_388":389,"_392":393,"_394":395,"_396":397},"title","React Fundamentals ⚛","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":348,"_349":350,"_351":352},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","Epic React","logo","/logo.svg","slug","react-fundamentals","discordChannelId","1285244676286189569","discordTags",[369,370],"1285246046498328627","1285245484432228375","onboardingVideo",[373],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/react-fundamentals","githubRoot","https://github.com/epicweb-dev/react-fundamentals/tree/main","stackBlitzConfig",{"_380":381},"view","editor","forms",{"_384":385,"_386":387},"workshop","https://docs.google.com/forms/d/e/1FAIpQLSdRmj9p8-5zyoqRzxp3UpqSbC3aFkweXvvJIKes0a5s894gzg/viewform?hl=en&embedded=true&entry.2123647600={workshopTitle}","exercise","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}","testTab",{"_390":391},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_402":403,"_404":405,"_406":407,"_408":375,"_409":377,"_410":391,"_411":412,"_413":414,"_415":416,"_417":391,"_418":419,"_420":421},"MODE","production","EPICSHOP_CONTEXT_CWD","/myapp/workshop-content","EPICSHOP_WORKSHOP_INSTANCE_ID","4e1570b81d1baf3d16bd3a08ece570cb","EPICSHOP_GITHUB_REPO","EPICSHOP_GITHUB_ROOT","EPICSHOP_DEPLOYED","EPICSHOP_APP_VERSION","6.41.1","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","f79510bfe8261a68c111ba4658c803596bfc0f9c9f111801e8fd722231f216ae","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_424":425,"_426":427,"_428":429,"_430":431,"_432":431,"_433":434,"_441":442,"_443":444,"_445":393,"_446":391},"protocol","http:","hostname","epicweb-dev-react-fundamentals.fly.dev","port","","origin","http://epicweb-dev-react-fundamentals.fly.dev","domain","hints",{"_435":436,"_437":438,"_439":440},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/06/finished","session",{"_435":-5},"separator","online","toast","confettiId","presence",{"_451":452},"users",[453,468,477,486,497,500,507,512,521,527,532,537,542,549],{"_7":454,"_455":391,"_456":457,"_458":459,"_20":460,"_461":462},"7c51886e-6216-458f-948e-b2fd02288b0f","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/f9538d76f2d71ec8c35ea31582bd5edf?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/f9538d76f2d71ec8c35ea31582bd5edf?size=512&default=identicon","Claudius Kirsch","location",{"_398":463,"_430":464,"_386":465},"Advanced React Patterns 🤯","http://localhost:5639",{"_466":467},"exerciseNumber",7,{"_7":469,"_455":391,"_456":470,"_458":471,"_20":472,"_461":473},"0b613e16-74f5-4d75-b44b-badeb80c04e6","https://www.gravatar.com/avatar/53228184bb0011258c789e1789d1f1f9?size=64&default=identicon","https://www.gravatar.com/avatar/53228184bb0011258c789e1789d1f1f9?size=512&default=identicon","Tomas Niederhauser",{"_398":474,"_430":464,"_386":475},"React Suspense 🔀",{"_466":476},4,{"_7":478,"_455":391,"_456":479,"_458":480,"_20":481,"_461":482},"eaa8f773-8b08-4132-b299-320d3e124184","https://cdn.discordapp.com/avatars/298939039451578371/407c6e7e9d044432a25a335f60092075.png?size=64","https://cdn.discordapp.com/avatars/298939039451578371/407c6e7e9d044432a25a335f60092075.png?size=512","Christian Téllez Giraldo",{"_398":483,"_430":464,"_386":484},"Advanced React APIs 🔥",{"_466":485},6,{"_7":487,"_455":391,"_456":488,"_458":489,"_20":490,"_461":491},"2f077b38-c961-4789-944f-49aa7d197bd2","https://cdn.discordapp.com/avatars/707642396170780693/a46bb30e1cf14d9d2847a2997477eeb6.png?size=64","https://cdn.discordapp.com/avatars/707642396170780693/a46bb30e1cf14d9d2847a2997477eeb6.png?size=512","Bonvin Adrien",{"_398":483,"_430":464,"_386":492},{"_9":493,"_466":494,"_495":496},"problem",9,"stepNumber",3,{"_7":498,"_461":499},"f2682a8b-cf8a-468e-bc40-7173d2467bed",{"_398":343,"_430":464},{"_7":501,"_455":391,"_456":502,"_458":503,"_20":-5,"_461":504},"32e9c236-66f7-484f-961b-7098c35cdbba","https://www.gravatar.com/avatar/4756e41fb41e695bcc98c5d667414845?size=64&default=identicon","https://www.gravatar.com/avatar/4756e41fb41e695bcc98c5d667414845?size=512&default=identicon",{"_398":463,"_430":464,"_386":505},{"_9":493,"_466":506,"_495":506},1,{"_7":508,"_461":509},"uzddkwpevqbjl1zi50nflfep",{"_398":510,"_430":464,"_386":511},"MCP Fundamentals 🧱",{"_9":493,"_466":496,"_495":476},{"_7":513,"_455":391,"_456":514,"_458":515,"_20":-5,"_461":516},"67fff984-cf53-447f-b148-425aa7713d15","https://cdn.discordapp.com/avatars/703322171786788964/f046c55d25e73c3119ef0a1286e9da74.png?size=64","https://cdn.discordapp.com/avatars/703322171786788964/f046c55d25e73c3119ef0a1286e9da74.png?size=512",{"_398":517,"_430":464,"_386":518},"MCP UI 🪟",{"_9":519,"_466":520,"_495":506},"solution",2,{"_7":522,"_455":391,"_456":523,"_458":524,"_20":-5,"_461":525},"8da05ee7-6dd6-47d4-8182-d605916994b5","https://www.gravatar.com/avatar/1466d45b3d48db6a80468a659476a138?size=64&default=identicon","https://www.gravatar.com/avatar/1466d45b3d48db6a80468a659476a138?size=512&default=identicon",{"_398":474,"_430":464,"_386":526},{"_466":506},{"_7":528,"_461":529},"iifpp6debarhpzlniy6mfk1k",{"_398":530,"_430":464,"_386":531},"React Router Fundamentals part 1 ⛓️",{"_9":519,"_466":506,"_495":506},{"_7":533,"_461":534},"brxxd325hcoh50czg65ng5x3",{"_398":535,"_430":536},"Get Started with React 🏃‍➡️","http://get-started.epicreact.dev",{"_7":538,"_455":391,"_456":539,"_458":540,"_20":-5,"_461":541},"f83463b1-a6b5-4368-b77a-8c0ee7f16609","https://www.gravatar.com/avatar/df9abfe3c084a9d0069a85cb7ce03a86?size=64&default=identicon","https://www.gravatar.com/avatar/df9abfe3c084a9d0069a85cb7ce03a86?size=512&default=identicon",{"_398":535,"_430":464},{"_7":543,"_461":544},"unj8le3g9pfdvim845o20kq4",{"_398":545,"_430":546,"_386":547},"📐 Pixel Perfect Tailwind","http://epicweb-dev-pixel-perfect-tailwind.fly.dev",{"_9":493,"_466":548,"_495":520},8,{"_7":8,"_461":550},{"_398":343,"_430":431,"_386":551},{"_466":485,"_495":-5,"_9":-5},"routes/_app+/_layout",{"_398":343,"_554":555,"_842":843,"_845":16},"exercises",[556,575,598,634,663,703,725,760,795,818],{"_466":506,"_342":557,"_558":559,"_563":564,"_567":568},"Hello World in JS","solutions",[560,561],{"_495":506,"_342":557,"_20":27},{"_495":520,"_342":562,"_20":35},"Generate the Root Node","problems",[565,566],{"_495":506,"_342":557,"_20":21},{"_495":520,"_342":562,"_20":31},"steps",[569,572],{"_495":506,"_342":557,"_20":21,"_493":570,"_519":571},{"_20":21,"_342":557},{"_20":27,"_342":557},{"_495":520,"_342":562,"_20":31,"_493":573,"_519":574},{"_20":31,"_342":562},{"_20":35,"_342":562},{"_466":520,"_342":576,"_558":577,"_563":584,"_567":588},"Raw React APIs",[578,580,582],{"_495":506,"_342":579,"_20":43},"Create React Elements",{"_495":520,"_342":581,"_20":51},"Nesting Elements",{"_495":496,"_342":583,"_20":59},"Deep Nesting Elements",[585,586,587],{"_495":506,"_342":579,"_20":39},{"_495":520,"_342":581,"_20":47},{"_495":496,"_342":583,"_20":55},[589,592,595],{"_495":506,"_342":579,"_20":39,"_493":590,"_519":591},{"_20":39,"_342":579},{"_20":43,"_342":579},{"_495":520,"_342":581,"_20":47,"_493":593,"_519":594},{"_20":47,"_342":581},{"_20":51,"_342":581},{"_495":496,"_342":583,"_20":55,"_493":596,"_519":597},{"_20":55,"_342":583},{"_20":59,"_342":583},{"_466":496,"_342":599,"_558":600,"_563":612,"_567":618},"Using JSX",[601,603,605,607,609],{"_495":506,"_342":602,"_20":67},"Compiling JSX",{"_495":520,"_342":604,"_20":75},"Interpolation",{"_495":496,"_342":606,"_20":83},"Spread props",{"_495":476,"_342":608,"_20":91},"Nesting JSX",{"_495":610,"_342":611,"_20":99},5,"Fragments",[613,614,615,616,617],{"_495":506,"_342":602,"_20":63},{"_495":520,"_342":604,"_20":71},{"_495":496,"_342":606,"_20":79},{"_495":476,"_342":608,"_20":87},{"_495":610,"_342":611,"_20":95},[619,622,625,628,631],{"_495":506,"_342":602,"_20":63,"_493":620,"_519":621},{"_20":63,"_342":602},{"_20":67,"_342":602},{"_495":520,"_342":604,"_20":71,"_493":623,"_519":624},{"_20":71,"_342":604},{"_20":75,"_342":604},{"_495":496,"_342":606,"_20":79,"_493":626,"_519":627},{"_20":79,"_342":606},{"_20":83,"_342":606},{"_495":476,"_342":608,"_20":87,"_493":629,"_519":630},{"_20":87,"_342":608},{"_20":91,"_342":608},{"_495":610,"_342":611,"_20":95,"_493":632,"_519":633},{"_20":95,"_342":611},{"_20":99,"_342":611},{"_466":476,"_342":635,"_558":636,"_563":645,"_567":650},"Custom Components",[637,639,641,643],{"_495":506,"_342":638,"_20":107},"Simple Function",{"_495":520,"_342":640,"_20":115},"Raw API",{"_495":496,"_342":642,"_20":123},"JSX Components",{"_495":476,"_342":644,"_20":131},"Props",[646,647,648,649],{"_495":506,"_342":638,"_20":103},{"_495":520,"_342":640,"_20":111},{"_495":496,"_342":642,"_20":119},{"_495":476,"_342":644,"_20":127},[651,654,657,660],{"_495":506,"_342":638,"_20":103,"_493":652,"_519":653},{"_20":103,"_342":638},{"_20":107,"_342":638},{"_495":520,"_342":640,"_20":111,"_493":655,"_519":656},{"_20":111,"_342":640},{"_20":115,"_342":640},{"_495":496,"_342":642,"_20":119,"_493":658,"_519":659},{"_20":119,"_342":642},{"_20":123,"_342":642},{"_495":476,"_342":644,"_20":127,"_493":661,"_519":662},{"_20":127,"_342":644},{"_20":131,"_342":644},{"_466":610,"_342":664,"_558":665,"_563":677,"_567":684},"TypeScript",[666,667,669,671,673,675],{"_495":506,"_342":644,"_20":139},{"_495":520,"_342":668,"_20":147},"Narrow Types",{"_495":496,"_342":670,"_20":155},"Derive Types",{"_495":476,"_342":672,"_20":163},"Default Props",{"_495":610,"_342":674,"_20":171},"Reduce Duplication",{"_495":485,"_342":676,"_20":179},"Satisfies",[678,679,680,681,682,683],{"_495":506,"_342":644,"_20":135},{"_495":520,"_342":668,"_20":143},{"_495":496,"_342":670,"_20":151},{"_495":476,"_342":672,"_20":159},{"_495":610,"_342":674,"_20":167},{"_495":485,"_342":676,"_20":175},[685,688,691,694,697,700],{"_495":506,"_342":644,"_20":135,"_493":686,"_519":687},{"_20":135,"_342":644},{"_20":139,"_342":644},{"_495":520,"_342":668,"_20":143,"_493":689,"_519":690},{"_20":143,"_342":668},{"_20":147,"_342":668},{"_495":496,"_342":670,"_20":151,"_493":692,"_519":693},{"_20":151,"_342":670},{"_20":155,"_342":670},{"_495":476,"_342":672,"_20":159,"_493":695,"_519":696},{"_20":159,"_342":672},{"_20":163,"_342":672},{"_495":610,"_342":674,"_20":167,"_493":698,"_519":699},{"_20":167,"_342":674},{"_20":171,"_342":674},{"_495":485,"_342":676,"_20":175,"_493":701,"_519":702},{"_20":175,"_342":676},{"_20":179,"_342":676},{"_466":485,"_342":704,"_558":705,"_563":711,"_567":715},"Styling",[706,707,709],{"_495":506,"_342":704,"_20":187},{"_495":520,"_342":708,"_20":195},"Custom Component",{"_495":496,"_342":710,"_20":203},"Size Prop",[712,713,714],{"_495":506,"_342":704,"_20":183},{"_495":520,"_342":708,"_20":191},{"_495":496,"_342":710,"_20":199},[716,719,722],{"_495":506,"_342":704,"_20":183,"_493":717,"_519":718},{"_20":183,"_342":704},{"_20":187,"_342":704},{"_495":520,"_342":708,"_20":191,"_493":720,"_519":721},{"_20":191,"_342":708},{"_20":195,"_342":708},{"_495":496,"_342":710,"_20":199,"_493":723,"_519":724},{"_20":199,"_342":710},{"_20":203,"_342":710},{"_466":467,"_342":726,"_558":727,"_563":738,"_567":744},"Forms",[728,730,732,734,736],{"_495":506,"_342":729,"_20":211},"Form",{"_495":520,"_342":731,"_20":219},"Form Action",{"_495":496,"_342":733,"_20":227},"Input Types",{"_495":476,"_342":735,"_20":235},"Submission",{"_495":610,"_342":737,"_20":243},"Form Actions",[739,740,741,742,743],{"_495":506,"_342":729,"_20":207},{"_495":520,"_342":731,"_20":215},{"_495":496,"_342":733,"_20":223},{"_495":476,"_342":735,"_20":231},{"_495":610,"_342":737,"_20":239},[745,748,751,754,757],{"_495":506,"_342":729,"_20":207,"_493":746,"_519":747},{"_20":207,"_342":729},{"_20":211,"_342":729},{"_495":520,"_342":731,"_20":215,"_493":749,"_519":750},{"_20":215,"_342":731},{"_20":219,"_342":731},{"_495":496,"_342":733,"_20":223,"_493":752,"_519":753},{"_20":223,"_342":733},{"_20":227,"_342":733},{"_495":476,"_342":735,"_20":231,"_493":755,"_519":756},{"_20":231,"_342":735},{"_20":235,"_342":735},{"_495":610,"_342":737,"_20":239,"_493":758,"_519":759},{"_20":239,"_342":737},{"_20":243,"_342":737},{"_466":548,"_342":761,"_558":762,"_563":773,"_567":779},"Inputs",[763,765,767,769,771],{"_495":506,"_342":764,"_20":251},"Checkbox",{"_495":520,"_342":766,"_20":259},"Select",{"_495":496,"_342":768,"_20":267},"Radios",{"_495":476,"_342":770,"_20":275},"Hidden Inputs",{"_495":610,"_342":772,"_20":283},"Default Value",[774,775,776,777,778],{"_495":506,"_342":764,"_20":247},{"_495":520,"_342":766,"_20":255},{"_495":496,"_342":768,"_20":263},{"_495":476,"_342":770,"_20":271},{"_495":610,"_342":772,"_20":279},[780,783,786,789,792],{"_495":506,"_342":764,"_20":247,"_493":781,"_519":782},{"_20":247,"_342":764},{"_20":251,"_342":764},{"_495":520,"_342":766,"_20":255,"_493":784,"_519":785},{"_20":255,"_342":766},{"_20":259,"_342":766},{"_495":496,"_342":768,"_20":263,"_493":787,"_519":788},{"_20":263,"_342":768},{"_20":267,"_342":768},{"_495":476,"_342":770,"_20":271,"_493":790,"_519":791},{"_20":271,"_342":770},{"_20":275,"_342":770},{"_495":610,"_342":772,"_20":279,"_493":793,"_519":794},{"_20":279,"_342":772},{"_20":283,"_342":772},{"_466":494,"_342":796,"_558":797,"_563":804,"_567":808},"Error Boundaries",[798,800,802],{"_495":506,"_342":799,"_20":291},"Composition",{"_495":520,"_342":801,"_20":299},"Other Errors",{"_495":496,"_342":803,"_20":307},"Reset",[805,806,807],{"_495":506,"_342":799,"_20":287},{"_495":520,"_342":801,"_20":295},{"_495":496,"_342":803,"_20":303},[809,812,815],{"_495":506,"_342":799,"_20":287,"_493":810,"_519":811},{"_20":287,"_342":799},{"_20":291,"_342":799},{"_495":520,"_342":801,"_20":295,"_493":813,"_519":814},{"_20":295,"_342":801},{"_20":299,"_342":801},{"_495":496,"_342":803,"_20":303,"_493":816,"_519":817},{"_20":303,"_342":803},{"_20":307,"_342":803},{"_466":819,"_342":820,"_558":821,"_563":828,"_567":832},10,"Rendering Arrays",[822,824,826],{"_495":506,"_342":823,"_20":315},"Key prop",{"_495":520,"_342":825,"_20":323},"Focus State",{"_495":496,"_342":827,"_20":331},"Key Reset",[829,830,831],{"_495":506,"_342":823,"_20":311},{"_495":520,"_342":825,"_20":319},{"_495":496,"_342":827,"_20":327},[833,836,839],{"_495":506,"_342":823,"_20":311,"_493":834,"_519":835},{"_20":311,"_342":823},{"_20":315,"_342":823},{"_495":520,"_342":825,"_20":319,"_493":837,"_519":838},{"_20":319,"_342":825},{"_20":323,"_342":825},{"_495":496,"_342":827,"_20":327,"_493":840,"_519":841},{"_20":327,"_342":827},{"_20":331,"_342":827},"playground",{"_844":-5,"_466":-2,"_495":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_848":849,"_398":343,"_386":850,"_977":978,"_979":980,"_981":982,"_986":987,"_992":993},"articleId","workshop-react-fundamentals-6-finished",{"_22":851,"_466":485,"_852":853,"_342":704,"_854":855,"_856":857,"_858":859,"_861":862,"_567":864,"_563":945,"_558":961},"/myapp/workshop-content/exercises/06.styling","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",[860],"https://www.epicreact.dev/workshops/react-fundamentals/intro-to-styling","finishedEpicVideoEmbeds",[863],"https://www.epicreact.dev/workshops/react-fundamentals/dad-joke-break-styling",[865,898,922],{"_495":506,"_493":866,"_519":886},{"_20":183,"_342":704,"_852":867,"_22":184,"_24":185,"_854":868,"_869":870,"_872":873,"_880":881,"_883":884,"_466":485,"_495":506,"_9":493,"_885":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",[871],"https://www.epicreact.dev/workshops/react-fundamentals/styling","test",{"_9":874,"_875":876,"_877":878},"browser","pathname","/app/06.01.problem/test/","testFiles",[879],"boxes.test.ts","dev",{"_9":874,"_875":882},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","solutionName",{"_20":187,"_342":704,"_852":887,"_22":188,"_24":189,"_854":888,"_869":889,"_872":891,"_880":894,"_883":896,"_466":485,"_495":506,"_9":519,"_897":-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;",[890],"https://www.epicreact.dev/workshops/react-fundamentals/styling/solution",{"_9":874,"_875":892,"_877":893},"/app/06.01.solution/test/",[879],{"_9":874,"_875":895},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx","problemName",{"_495":520,"_493":899,"_519":911},{"_20":191,"_342":708,"_852":900,"_22":192,"_24":193,"_854":901,"_869":902,"_872":904,"_880":908,"_883":910,"_466":485,"_495":520,"_9":493,"_885":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;",[903],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component",{"_9":874,"_875":905,"_877":906},"/app/06.02.problem/test/",[907,879],"box.test.tsx",{"_9":874,"_875":909},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":195,"_342":708,"_852":912,"_22":196,"_24":197,"_854":913,"_869":914,"_872":916,"_880":919,"_883":921,"_466":485,"_495":520,"_9":519,"_897":-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;",[915],"https://www.epicreact.dev/workshops/react-fundamentals/custom-component/solution",{"_9":874,"_875":917,"_877":918},"/app/06.02.solution/test/",[907,879],{"_9":874,"_875":920},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_495":496,"_493":923,"_519":934},{"_20":199,"_342":710,"_852":924,"_22":200,"_24":201,"_854":925,"_869":926,"_872":928,"_880":931,"_883":933,"_466":485,"_495":496,"_9":493,"_885":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;",[927],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop",{"_9":874,"_875":929,"_877":930},"/app/06.03.problem/test/",[907,879],{"_9":874,"_875":932},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",{"_20":203,"_342":710,"_852":935,"_22":204,"_24":205,"_854":936,"_869":937,"_872":939,"_880":942,"_883":944,"_466":485,"_495":496,"_9":519,"_897":-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;",[938],"https://www.epicreact.dev/workshops/react-fundamentals/size-prop/solution",{"_9":874,"_875":940,"_877":941},"/app/06.03.solution/test/",[907,879],{"_9":874,"_875":943},"/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&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.tsx",[946,951,956],{"_20":183,"_342":704,"_852":867,"_22":184,"_24":185,"_854":868,"_869":947,"_872":948,"_880":950,"_883":884,"_466":485,"_495":506,"_9":493,"_885":187},[871],{"_9":874,"_875":876,"_877":949},[879],{"_9":874,"_875":882},{"_20":191,"_342":708,"_852":900,"_22":192,"_24":193,"_854":901,"_869":952,"_872":953,"_880":955,"_883":910,"_466":485,"_495":520,"_9":493,"_885":195},[903],{"_9":874,"_875":905,"_877":954},[907,879],{"_9":874,"_875":909},{"_20":199,"_342":710,"_852":924,"_22":200,"_24":201,"_854":925,"_869":957,"_872":958,"_880":960,"_883":933,"_466":485,"_495":496,"_9":493,"_885":203},[927],{"_9":874,"_875":929,"_877":959},[907,879],{"_9":874,"_875":932},[962,967,972],{"_20":187,"_342":704,"_852":887,"_22":188,"_24":189,"_854":888,"_869":963,"_872":964,"_880":966,"_883":896,"_466":485,"_495":506,"_9":519,"_897":-5},[890],{"_9":874,"_875":892,"_877":965},[879],{"_9":874,"_875":895},{"_20":195,"_342":708,"_852":912,"_22":196,"_24":197,"_854":913,"_869":968,"_872":969,"_880":971,"_883":921,"_466":485,"_495":520,"_9":519,"_897":-5},[915],{"_9":874,"_875":917,"_877":970},[907,879],{"_9":874,"_875":920},{"_20":203,"_342":710,"_852":935,"_22":204,"_24":205,"_854":936,"_869":973,"_872":974,"_880":976,"_883":944,"_466":485,"_495":496,"_9":519,"_897":-5},[938],{"_9":874,"_875":940,"_877":975},[907,879],{"_9":874,"_875":943},"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",980],"exerciseFinished",{"_983":984,"_24":985},"file","/myapp/workshop-content/exercises/06.styling/FINISHED.mdx","exercises/06.styling/FINISHED.mdx","prevStepLink",{"_988":989,"_990":991},"to","/exercise/06/03/solution","aria-label","Size Prop (solution)","nextStepLink",{"_988":994,"_990":726},"/exercise/07","actionData","errors"]

06. Styling/Elaboration