[{"_1":2,"_580":-5,"_581":-5},"loaderData",{"_3":4,"_318":319,"_432":433},"root",{"_5":6,"_11":-5,"_12":13,"_14":-5,"_15":16,"_17":18,"_134":135,"_137":138,"_139":16,"_140":141,"_198":143,"_199":145,"_146":147,"_200":201,"_222":223,"_247":-5,"_248":-5,"_249":250},"userId",{"_7":8,"_9":10},"id","b7772a41-995f-4969-8589-e0e0332c8c2f","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],{"_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","repoUpdates",{"_136":16},"updatesAvailable","unmutedNotifications",[],"exerciseChanges","workshopConfig",{"_142":143,"_144":145,"_146":147,"_153":154,"_171":172,"_174":175,"_176":177,"_178":179,"_182":183,"_188":189,"_192":193,"_194":195,"_196":197},"title","Get Started with React 🏃‍➡️","subtitle","Learn the foundational concepts necessary for building React applications and libraries","instructor",{"_20":148,"_149":150,"_151":152},"Kent C. Dodds","avatar","/images/instructor.png","𝕏","kentcdodds","product",{"_155":156,"_157":158,"_159":160,"_161":162,"_163":164,"_165":166,"_167":168},"host","www.epicreact.dev","displayName","EpicReact.dev","displayNameShort","EpicReact","logo","/logo.svg","slug","get-started-with-react","discordChannelId","1285244676286189569","discordTags",[169,170],"1285246046498328627","1285245484432228375","onboardingVideo",[173],"https://www.epicweb.dev/tips/get-started-with-the-epic-workshop-app-for-react","githubRepo","https://github.com/epicweb-dev/get-started-with-react","githubRoot","https://github.com/epicweb-dev/get-started-with-react/tree/main","stackBlitzConfig",{"_180":181},"view","editor","forms",{"_184":185,"_186":187},"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",{"_190":191},"enabled",true,"initialRoute","/","notifications",[],"sidecarProcesses",{},"workshopTitle","workshopSubtitle","ENV",{"_202":203,"_204":205,"_206":207,"_208":175,"_209":177,"_210":191,"_211":212,"_213":214,"_215":216,"_217":191,"_218":219,"_220":221},"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.3","EPICSHOP_PARENT_PORT","3742","EPICSHOP_PARENT_TOKEN","fe57d59146509cbf5edcb05812eeb768b0edd2a7e3fa06b5f188b99e6268e7fb","EPICSHOP_IS_PUBLISHED","SENTRY_DSN","https://cd51fbf4ca0834f7b3529a478a8ece4c@o913766.ingest.us.sentry.io/4509630082252800","SENTRY_PROJECT_ID","4509630082252800","requestInfo",{"_224":225,"_226":227,"_228":229,"_230":231,"_232":231,"_233":234,"_241":242,"_243":244,"_245":193,"_246":191},"protocol","http:","hostname","get-started.epicreact.dev","port","","origin","http://get-started.epicreact.dev","domain","hints",{"_235":236,"_237":238,"_239":240},"theme","light","timeZone","UTC","reducedMotion","no-preference","path","/exercise/02/finished","session",{"_235":-5},"separator","online","toast","confettiId","presence",{"_251":252},"users",[253,270,278,288,297,305,313],{"_7":254,"_255":191,"_256":257,"_258":259,"_20":260,"_261":262},"9c5208f6-0db9-496c-a902-25525900e1e4","hasAccess","imageUrlSmall","https://www.gravatar.com/avatar/754f035dc61fdb1ee0c421d0dd9b6548?size=64&default=identicon","imageUrlLarge","https://www.gravatar.com/avatar/754f035dc61fdb1ee0c421d0dd9b6548?size=512&default=identicon","Patricia Hillebrandt","location",{"_198":263,"_230":264,"_186":265},"React Fundamentals ⚛","http://localhost:5639",{"_9":266,"_267":268,"_269":268},"problem","exerciseNumber",1,"stepNumber",{"_7":271,"_255":191,"_256":272,"_258":273,"_20":274,"_261":275},"9c778bc9-b36a-497d-ad4e-e3301c187d14","https://www.gravatar.com/avatar/5b3ec04cf342139ea5ae0f93a0eaa6dc?size=64&default=identicon","https://www.gravatar.com/avatar/5b3ec04cf342139ea5ae0f93a0eaa6dc?size=512&default=identicon","Emma S. Frisk",{"_198":263,"_230":264,"_186":276},{"_9":266,"_267":277,"_269":277},5,{"_7":279,"_255":16,"_256":280,"_258":281,"_20":282,"_261":283},"053ce8ed-41c2-4fa4-af3b-910631b38556","https://cdn.discordapp.com/avatars/1118921206335291422/c82b3fa769ed6e6ffdea579381ed5f5c.png?size=64","https://cdn.discordapp.com/avatars/1118921206335291422/c82b3fa769ed6e6ffdea579381ed5f5c.png?size=512","Abhinav",{"_198":263,"_230":264,"_186":284},{"_9":285,"_267":286,"_269":287},"solution",7,4,{"_7":289,"_255":191,"_256":290,"_258":291,"_20":292,"_261":293},"9e1050f2-9616-4e2e-8400-01b733d1a880","https://www.gravatar.com/avatar/611181cb6cb6f8cdb6d675582d29cb59?size=64&default=identicon","https://www.gravatar.com/avatar/611181cb6cb6f8cdb6d675582d29cb59?size=512&default=identicon","Moritz Frölich",{"_198":263,"_230":294,"_186":295},"http://localhost:5640",{"_9":285,"_267":286,"_269":296},3,{"_7":298,"_255":191,"_256":299,"_258":300,"_20":301,"_261":302},"07269ce4-3a2f-4de7-b878-9e4888843436","https://avatars.githubusercontent.com/u/16720382?v=4&size=64","https://avatars.githubusercontent.com/u/16720382?v=4&size=512","Lenssen",{"_198":263,"_230":294,"_186":303},{"_9":266,"_267":304,"_269":296},6,{"_7":306,"_255":191,"_256":307,"_258":308,"_20":309,"_261":310},"eb190aa3-aeb6-4277-b6c4-b8759d25bd84","https://cdn.discordapp.com/avatars/400026418463113218/1755a7fa26d489e233510692d4648ae1.png?size=64","https://cdn.discordapp.com/avatars/400026418463113218/1755a7fa26d489e233510692d4648ae1.png?size=512","IOANNIS LAOURAKIS",{"_198":263,"_230":264,"_186":311},{"_267":312},9,{"_7":314,"_261":315},"a6849b76-9f3e-4af0-927a-d971db9c649c",{"_198":143,"_230":231,"_186":316},{"_267":317,"_269":-5,"_9":-5},2,"routes/_app+/_layout",{"_198":143,"_320":321,"_428":429,"_431":16},"exercises",[322,341,364,399],{"_267":268,"_142":323,"_324":325,"_329":330,"_333":334},"Hello World in JS","solutions",[326,327],{"_269":268,"_142":323,"_20":27},{"_269":317,"_142":328,"_20":35},"Generate the Root Node","problems",[331,332],{"_269":268,"_142":323,"_20":21},{"_269":317,"_142":328,"_20":31},"steps",[335,338],{"_269":268,"_142":323,"_20":21,"_266":336,"_285":337},{"_20":21,"_142":323},{"_20":27,"_142":323},{"_269":317,"_142":328,"_20":31,"_266":339,"_285":340},{"_20":31,"_142":328},{"_20":35,"_142":328},{"_267":317,"_142":342,"_324":343,"_329":350,"_333":354},"Raw React APIs",[344,346,348],{"_269":268,"_142":345,"_20":43},"Create React Elements",{"_269":317,"_142":347,"_20":51},"Nesting Elements",{"_269":296,"_142":349,"_20":59},"Deep Nesting Elements",[351,352,353],{"_269":268,"_142":345,"_20":39},{"_269":317,"_142":347,"_20":47},{"_269":296,"_142":349,"_20":55},[355,358,361],{"_269":268,"_142":345,"_20":39,"_266":356,"_285":357},{"_20":39,"_142":345},{"_20":43,"_142":345},{"_269":317,"_142":347,"_20":47,"_266":359,"_285":360},{"_20":47,"_142":347},{"_20":51,"_142":347},{"_269":296,"_142":349,"_20":55,"_266":362,"_285":363},{"_20":55,"_142":349},{"_20":59,"_142":349},{"_267":296,"_142":365,"_324":366,"_329":377,"_333":383},"Using JSX",[367,369,371,373,375],{"_269":268,"_142":368,"_20":67},"Compiling JSX",{"_269":317,"_142":370,"_20":75},"Interpolation",{"_269":296,"_142":372,"_20":83},"Spread props",{"_269":287,"_142":374,"_20":91},"Nesting JSX",{"_269":277,"_142":376,"_20":99},"Fragments",[378,379,380,381,382],{"_269":268,"_142":368,"_20":63},{"_269":317,"_142":370,"_20":71},{"_269":296,"_142":372,"_20":79},{"_269":287,"_142":374,"_20":87},{"_269":277,"_142":376,"_20":95},[384,387,390,393,396],{"_269":268,"_142":368,"_20":63,"_266":385,"_285":386},{"_20":63,"_142":368},{"_20":67,"_142":368},{"_269":317,"_142":370,"_20":71,"_266":388,"_285":389},{"_20":71,"_142":370},{"_20":75,"_142":370},{"_269":296,"_142":372,"_20":79,"_266":391,"_285":392},{"_20":79,"_142":372},{"_20":83,"_142":372},{"_269":287,"_142":374,"_20":87,"_266":394,"_285":395},{"_20":87,"_142":374},{"_20":91,"_142":374},{"_269":277,"_142":376,"_20":95,"_266":397,"_285":398},{"_20":95,"_142":376},{"_20":99,"_142":376},{"_267":287,"_142":400,"_324":401,"_329":410,"_333":415},"Custom Components",[402,404,406,408],{"_269":268,"_142":403,"_20":107},"Simple Function",{"_269":317,"_142":405,"_20":115},"Raw API",{"_269":296,"_142":407,"_20":123},"JSX Components",{"_269":287,"_142":409,"_20":131},"Props",[411,412,413,414],{"_269":268,"_142":403,"_20":103},{"_269":317,"_142":405,"_20":111},{"_269":296,"_142":407,"_20":119},{"_269":287,"_142":409,"_20":127},[416,419,422,425],{"_269":268,"_142":403,"_20":103,"_266":417,"_285":418},{"_20":103,"_142":403},{"_20":107,"_142":403},{"_269":317,"_142":405,"_20":111,"_266":420,"_285":421},{"_20":111,"_142":405},{"_20":115,"_142":405},{"_269":296,"_142":407,"_20":119,"_266":423,"_285":424},{"_20":119,"_142":407},{"_20":123,"_142":407},{"_269":287,"_142":409,"_20":127,"_266":426,"_285":427},{"_20":127,"_142":409},{"_20":131,"_142":409},"playground",{"_430":-5,"_267":-2,"_269":-2,"_9":-7},"appName","isMenuOpened","routes/_app+/exercise+/$exerciseNumber_.finished",{"_434":435,"_198":143,"_186":436,"_562":563,"_564":565,"_566":567,"_571":572,"_577":578},"articleId","workshop-get-started-with-react-2-finished",{"_22":437,"_267":317,"_438":439,"_142":342,"_440":441,"_442":443,"_444":445,"_447":448,"_333":450,"_329":530,"_324":546},"/myapp/workshop-content/exercises/02.raw-react","dirName","02.raw-react","instructionsCode","var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var b=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),g=(n,e)=>{for(var o in e)i(n,o,{get:e[o],enumerable:!0})},c=(n,e,o,a)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of f(e))!w.call(n,r)&&r!==o&&i(n,r,{get:()=>e[r],enumerable:!(a=m(e,r))||a.enumerable});return n};var v=(n,e,o)=>(o=n!=null?p(u(n)):{},c(e||!n||!n.__esModule?i(o,\"default\",{value:n,enumerable:!0}):o,n)),y=n=>c(i({},\"__esModule\",{value:!0}),n);var l=b((j,s)=>{s.exports=_jsx_runtime});var x={};g(x,{default:()=>h,frontmatter:()=>k});var t=v(l()),k=void 0;function d(n){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",ul:\"ul\",...n.components},{EpicVideo:o}=e;return o||R(\"EpicVideo\",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(e.h1,{children:\"Raw React APIs\"}),`\n`,(0,t.jsx)(o,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/intro-to-raw-react-apis\"}),`\n`,(0,t.jsx)(e.p,{children:`React is the most widely used frontend framework in the world and it's using the\nsame APIs that you're using when it creates DOM nodes.`}),`\n`,(0,t.jsx)(\"callout-success\",{children:(0,t.jsxs)(e.p,{children:[\"In fact, \",(0,t.jsx)(e.a,{href:\"https://github.com/facebook/react/blob/fb10a2c66a923d218471b535fdaf0dbc530417ee/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L480\",children:`here's where that happens in the React source\ncode`}),`\nat the time of this writing.`]})}),`\n`,(0,t.jsx)(e.p,{children:`React abstracts away the imperative browser API from you to give you a much more\ndeclarative API to work with.`}),`\n`,(0,t.jsx)(\"callout-info\",{children:(0,t.jsxs)(e.p,{children:[\"Learn more about the difference between those two concepts here: \",(0,t.jsx)(e.a,{href:\"https://ui.dev/imperative-vs-declarative-programming/\",children:`Imperative\nvs Declarative\nProgramming`})]})}),`\n`,(0,t.jsx)(e.p,{children:`One important thing to know about React is that it supports multiple platforms\n(for example, native mobile, native desktop, web, and even terminal and VR).\nEach of these platforms has its own code necessary for interacting with that\nplatform, and then there's shared code between the platforms.`}),`\n`,(0,t.jsx)(e.p,{children:`With that in mind, you need two JavaScript files to write React applications for\nthe web:`}),`\n`,(0,t.jsxs)(e.ul,{children:[`\n`,(0,t.jsxs)(e.li,{children:[`React: responsible for creating React elements (kinda like\n`,(0,t.jsx)(e.code,{children:\"document.createElement()\"}),\")\"]}),`\n`,(0,t.jsxs)(e.li,{children:[`ReactDOM: responsible for rendering React elements to the DOM (kinda like\n`,(0,t.jsx)(e.code,{children:\"rootElement.append()\"}),\")\"]}),`\n`]}),`\n`,(0,t.jsxs)(e.p,{children:[`You can learn more about this in\n`,(0,t.jsx)(e.a,{href:\"https://react.dev/reference/react\",children:\"the react docs\"}),\".\"]}),`\n`,(0,t.jsxs)(e.p,{children:[\"We'll also be loading these files into our application from the \",(0,t.jsx)(e.code,{children:\"./public\"}),`\ndirectory. This works great for our purposes of keeping this as simple as\npossible so you can learn React and not get distracted by a bunch of tools\n(don't worry, those will come later).`]}),`\n`,(0,t.jsxs)(e.p,{children:[`Finally, from now on, as you save your work, the browser will reload\nautomatically thanks to the `,(0,t.jsx)(e.code,{children:\"epic_ws.js\"}),` file we'll be including at the top of\nthe `,(0,t.jsx)(e.code,{children:\"index.html\"}),\" file. You're welcome \\u{1F60A}.\"]})]})}function h(n={}){let{wrapper:e}=n.components||{};return e?(0,t.jsx)(e,{...n,children:(0,t.jsx)(d,{...n})}):d(n)}function R(n,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+n+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return y(x);})();\n;return Component;","finishedCode","var Component=(()=>{var u=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var w=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var l=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),_=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},a=(e,t,n,c)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of m(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(c=f(t,r))||c.enumerable});return e};var g=(e,t,n)=>(n=e!=null?u(w(e)):{},a(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>a(i({},\"__esModule\",{value:!0}),e);var d=l((M,s)=>{s.exports=_jsx_runtime});var y={};_(y,{default:()=>h,frontmatter:()=>b});var o=g(d()),b=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||k(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Raw React APIs\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/dad-joke-break-raw-react-apis\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Wahoo! I'll bet you're excited to get into JSX after working with the raw\nAPIs huh? \\u{1F605}`})]})}function h(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function k(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(y);})();\n;return Component;","instructionsEpicVideoEmbeds",[446],"https://www.epicreact.dev/tutorials/get-started-with-react/intro-to-raw-react-apis","finishedEpicVideoEmbeds",[449],"https://www.epicreact.dev/tutorials/get-started-with-react/dad-joke-break-raw-react-apis",[451,484,507],{"_269":268,"_266":452,"_285":472},{"_20":39,"_142":345,"_438":453,"_22":40,"_24":41,"_440":454,"_455":456,"_458":459,"_466":467,"_469":470,"_267":317,"_269":268,"_9":266,"_471":43},"01.problem.elements","var Component=(()=>{var p=Object.create;var s=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var v=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports),k=(l,e)=>{for(var a in e)s(l,a,{get:e[a],enumerable:!0})},o=(l,e,a,c)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!u.call(l,r)&&r!==a&&s(l,r,{get:()=>e[r],enumerable:!(c=b(e,r))||c.enumerable});return l};var E=(l,e,a)=>(a=l!=null?p(y(l)):{},o(e||!l||!l.__esModule?s(a,\"default\",{value:l,enumerable:!0}):a,l)),f=l=>o(s({},\"__esModule\",{value:!0}),l);var i=v((x,t)=>{t.exports=_jsx_runtime});var N={};k(N,{default:()=>h,frontmatter:()=>g});var n=E(i()),g=void 0;function d(l){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",ol:\"ol\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...l.components},{EpicVideo:a}=e;return a||w(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Create React Elements\"}),`\n`,(0,n.jsx)(a,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/create-react-elements\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Let's convert this to use React! But don't worry, we won't be doing any JSX just\nyet... You're going to use raw React APIs here.`}),`\n`,(0,n.jsxs)(e.p,{children:[`In modern applications, you typically get React and React DOM files from a \"package registry\",\nlike `,(0,n.jsx)(e.a,{href:\"https://npmjs.com\",children:\"npm\"}),\" where packages we use are (\",(0,n.jsx)(e.a,{href:\"https://npm.im/react\",children:\"react\"}),` and\n`,(0,n.jsx)(e.a,{href:\"https://npm.im/react-dom\",children:\"react-dom\"}),\").\"]}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsx)(e.p,{children:`A package registry is a centralized repository where developers can publish\nand share reusable code packages.`})}),`\n`,(0,n.jsx)(e.p,{children:\"To keep things simple for these exercises, we'll import React from slightly different locations:\"}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"public/react.js\"}),\" (accessed at \",(0,n.jsx)(e.code,{children:\"/react.js\"}),\")\"]}),`\n`,(0,n.jsxs)(e.li,{children:[(0,n.jsx)(e.code,{children:\"public/react-dom/client.js\"}),\" (accessed at \",(0,n.jsx)(e.code,{children:\"/react-dom/client.js\"}),\")\"]}),`\n`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"These files use a service called \",(0,n.jsx)(e.a,{href:\"https://esm.sh\",children:\"esm.sh\"}),\" to provide the React packages.\"]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Don't worry too much about \",(0,n.jsx)(e.a,{href:\"https://esm.sh\",children:\"esm.sh\"}),\" for now - it's just helping us load React easily in these exercises.\"]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's a simple example of how to use the React createElement API:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createElement\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/react.js\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createRoot\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"/react-dom/client.js\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { id: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"element-id\"}),\"'\",\", children: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Hello world!\"}),\"'\",\" }\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"h1\"}),\"'\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createElement\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"root\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createRoot\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootElement\"}),\")\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"root\"}),\".\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement\"}),\")\",`\n`]})]})}),`\n`,(0,n.jsxs)(\"callout-info\",{children:[(0,n.jsx)(e.p,{children:`\\u{1F989} As a reminder, in a typical application, your import will be something\nlike`}),(0,n.jsx)(e.pre,{\"data-nonumber\":\"\",\"data-nolang\":\"\",\"data-line-numbers\":\"false\",\"data-lang\":\"ts\",style:{color:\"var(--base05)\",backgroundColor:\"var(--base00)\"},children:(0,n.jsx)(e.code,{children:(0,n.jsxs)(e.span,{className:\"codeblock-line\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"import\"}),\" { \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"createRoot\"}),\" } \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"from\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"react-dom/client\"}),\"'\",`\n`]})})}),(0,n.jsxs)(e.p,{children:[\"With that, a build tool or \",(0,n.jsx)(e.code,{children:\"importmap\"}),` will handle resolving that to the\ncorrect path.`]})]}),`\n`,(0,n.jsxs)(e.p,{children:['The \"props\" in ',(0,n.jsx)(e.code,{children:\"elementProps\"}),` above is short for \"properties\". Props are a key concept\nin React - they're the way we pass data into our elements. You can think of the element\ntype as a blueprint for the kind of React component to create, and the props are the\ninputs that customize that element.`]}),`\n`,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:\"children\"}),` is a special prop in React. It represents the content inside an element.\nYou have a few ways to specify children:`]}),`\n`,(0,n.jsxs)(e.ol,{children:[`\n`,(0,n.jsx)(e.li,{children:\"As a prop (like in the first example above)\"}),`\n`,(0,n.jsxs)(e.li,{children:[\"As multiple arguments to \",(0,n.jsx)(e.code,{children:\"createElement\"})]}),`\n`,(0,n.jsx)(e.li,{children:\"As an array\"}),`\n`]}),`\n`,(0,n.jsx)(e.p,{children:\"Here's an example showing the last two methods:\"}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"typescript\",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(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" { id: \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"element-id\"}),\"'\",\" }\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"h1\"}),\"'\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Method 2: Multiple arguments\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement1\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createElement\"}),\"(\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\t\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"8\",children:[\"\t\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Hello\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"9\",children:[\"\t\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"10\",children:[\"\t\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"world!\"}),\"'\",\",\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"11\",children:[\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"12\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"13\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// Method 3: Array of children\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"14\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" [\",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"Hello\"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\" \"}),\"'\",\", \",\"'\",(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"world!\"}),\"'\",\"]\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"15\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"const\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement2\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createElement\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementType\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"elementProps\"}),\", \",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"children\"}),\")\",`\n`]}),(0,n.jsx)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"16\",children:`\n`}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"17\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"createRoot\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"rootElement\"}),\").\",(0,n.jsx)(e.span,{style:{color:\"var(--base0D)\"},children:\"render\"}),\"(\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"reactElement1\"}),\") \",(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// or reactElement2\"}),`\n`]})]})}),`\n`,(0,n.jsx)(e.p,{children:\"Alright! Let's put this into practice!\"}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsxs)(e.p,{children:[\"\\u{1F4B0} Tip: Use \",(0,n.jsx)(e.code,{children:\"console.log(reactElement)\"}),` to see what your created element looks\nlike. You might find the structure interesting!`]})})]})}function h(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(d,{...l})}):d(l)}function w(l,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+l+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return f(N);})();\n;return Component;","epicVideoEmbeds",[457],"https://www.epicreact.dev/tutorials/get-started-with-react/create-react-elements","test",{"_9":460,"_461":462,"_463":464},"browser","pathname","/app/02.01.problem/test/","testFiles",[465],"index.test.ts","dev",{"_9":460,"_461":468},"/app/02.01.problem/","stackBlitzUrl","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/02.raw-react/01.problem.elements?view=editor&title=Create+React+Elements+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html","solutionName",{"_20":43,"_142":345,"_438":473,"_22":44,"_24":45,"_440":474,"_455":475,"_458":477,"_466":480,"_469":482,"_267":317,"_269":268,"_9":285,"_483":-5},"01.solution.elements","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of f(t))!w.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=u(t,r))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?m(h(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var d=x((C,a)=>{a.exports=_jsx_runtime});var y={};g(y,{default:()=>p,frontmatter:()=>E});var o=_(d()),E=void 0;function l(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||b(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Create React Elements\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/create-react-elements/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great work! We're well on our way to using React for building UIs on the web!\nBut most apps are a little more complicated than a single element. Let's go\ndeeper!`})]})}function p(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(l,{...e})}):l(e)}function b(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(y);})();\n;return Component;",[476],"https://www.epicreact.dev/tutorials/get-started-with-react/create-react-elements/solution",{"_9":460,"_461":478,"_463":479},"/app/02.01.solution/test/",[465],{"_9":460,"_461":481},"/app/02.01.solution/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/02.raw-react/01.solution.elements?view=editor&title=Create+React+Elements+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html","problemName",{"_269":317,"_266":485,"_285":496},{"_20":47,"_142":347,"_438":486,"_22":48,"_24":49,"_440":487,"_455":488,"_458":490,"_466":493,"_469":495,"_267":317,"_269":317,"_9":266,"_471":51},"02.problem.nesting","var Component=(()=>{var p=Object.create;var l=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var g=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),v=(t,e)=>{for(var r in e)l(t,r,{get:e[r],enumerable:!0})},c=(t,e,r,o)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let a of m(e))!f.call(t,a)&&a!==r&&l(t,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return t};var y=(t,e,r)=>(r=t!=null?p(b(t)):{},c(e||!t||!t.__esModule?l(r,\"default\",{value:t,enumerable:!0}):r,t)),x=t=>c(l({},\"__esModule\",{value:!0}),t);var i=g((j,s)=>{s.exports=_jsx_runtime});var _={};v(_,{default:()=>h,frontmatter:()=>w});var n=y(i()),w=void 0;function d(t){let e={a:\"a\",code:\"code\",h1:\"h1\",li:\"li\",p:\"p\",pre:\"pre\",span:\"span\",ul:\"ul\",...t.components},{EpicVideo:r}=e;return r||E(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Nesting Elements\"}),`\n`,(0,n.jsx)(r,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/nesting-elements\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} See if you can figure out how to write the JavaScript + React code to\ngenerate this DOM output:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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(--base08)\"},children:\"div\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"container\"}),'\"',\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\">Hello\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"span\"}),\">World\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"Hint: You can either use the \",(0,n.jsx)(e.code,{children:\"children\"}),` prop or additional arguments after the\nprops. If you use the `,(0,n.jsx)(e.code,{children:\"children\"}),` prop, you will get a warning in the developer\nconsole about needing a \"key\" prop. We'll get to that later.`]}),`\n`,(0,n.jsxs)(e.p,{children:[\"Tip: You'll use \",(0,n.jsx)(e.code,{children:\"createElement\"}),\" for the \",(0,n.jsx)(e.code,{children:\"span\"}),` elements, but to get the\nspace between them, you'll need to use a string (`,(0,n.jsx)(e.code,{children:\"' '\"}),`) to tell React to create\na `,(0,n.jsx)(e.a,{href:\"https://developer.mozilla.org/en-US/docs/Web/API/Text\",children:(0,n.jsx)(e.code,{children:\"textNode\"})}),\".\"]}),`\n`,(0,n.jsxs)(e.ul,{children:[`\n`,(0,n.jsx)(e.li,{children:(0,n.jsxs)(e.a,{href:\"https://react.dev/reference/react/createElement#createelement\",children:[\"\\u{1F4DC} \",(0,n.jsx)(e.code,{children:\"createElement\"})]})}),`\n`]})]})}function h(t={}){let{wrapper:e}=t.components||{};return e?(0,n.jsx)(e,{...t,children:(0,n.jsx)(d,{...t})}):d(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 x(_);})();\n;return Component;",[489],"https://www.epicreact.dev/tutorials/get-started-with-react/nesting-elements",{"_9":460,"_461":491,"_463":492},"/app/02.02.problem/test/",[465],{"_9":460,"_461":494},"/app/02.02.problem/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/02.raw-react/02.problem.nesting?view=editor&title=Nesting+Elements+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_20":51,"_142":347,"_438":497,"_22":52,"_24":53,"_440":498,"_455":499,"_458":501,"_466":504,"_469":506,"_267":317,"_269":317,"_9":285,"_483":-5},"02.solution.nesting","var Component=(()=>{var l=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var h=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),w=(t,e)=>{for(var n in e)s(t,n,{get:e[n],enumerable:!0})},c=(t,e,n,i)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of g(e))!f.call(t,r)&&r!==n&&s(t,r,{get:()=>e[r],enumerable:!(i=m(e,r))||i.enumerable});return t};var _=(t,e,n)=>(n=t!=null?l(x(t)):{},c(e||!t||!t.__esModule?s(n,\"default\",{value:t,enumerable:!0}):n,t)),j=t=>c(s({},\"__esModule\",{value:!0}),t);var d=h((b,a)=>{a.exports=_jsx_runtime});var v={};w(v,{default:()=>p,frontmatter:()=>E});var o=_(d()),E=void 0;function u(t){let e={h1:\"h1\",p:\"p\",strong:\"strong\",...t.components},{EpicVideo:n}=e;return n||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.h1,{children:\"Nesting Elements\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/nesting-elements/solution\"}),`\n`,(0,o.jsxs)(e.p,{children:[`\\u{1F468}\\u200D\\u{1F4BC} Great! Now we've got a nice way to nest our React elements so we can build\ncomplex structures in our generated HTML. Let's go `,(0,o.jsx)(e.strong,{children:\"even deeper\"}),\"!\"]})]})}function p(t={}){let{wrapper:e}=t.components||{};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(u,{...t})}):u(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 j(v);})();\n;return Component;",[500],"https://www.epicreact.dev/tutorials/get-started-with-react/nesting-elements/solution",{"_9":460,"_461":502,"_463":503},"/app/02.02.solution/test/",[465],{"_9":460,"_461":505},"/app/02.02.solution/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/02.raw-react/02.solution.nesting?view=editor&title=Nesting+Elements+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_269":296,"_266":508,"_285":519},{"_20":55,"_142":349,"_438":509,"_22":56,"_24":57,"_440":510,"_455":511,"_458":513,"_466":516,"_469":518,"_267":317,"_269":296,"_9":266,"_471":59},"03.problem.deep-nesting","var Component=(()=>{var h=Object.create;var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var y=(a,e)=>()=>(e||a((e={exports:{}}).exports,e),e.exports),f=(a,e)=>{for(var s in e)l(a,s,{get:e[s],enumerable:!0})},o=(a,e,s,t)=>{if(e&&typeof e==\"object\"||typeof e==\"function\")for(let r of m(e))!v.call(a,r)&&r!==s&&l(a,r,{get:()=>e[r],enumerable:!(t=b(e,r))||t.enumerable});return a};var g=(a,e,s)=>(s=a!=null?h(u(a)):{},o(e||!a||!a.__esModule?l(s,\"default\",{value:a,enumerable:!0}):s,a)),x=a=>o(l({},\"__esModule\",{value:!0}),a);var i=y((j,c)=>{c.exports=_jsx_runtime});var N={};f(N,{default:()=>p,frontmatter:()=>k});var n=g(i()),k=void 0;function d(a){let e={code:\"code\",h1:\"h1\",p:\"p\",pre:\"pre\",span:\"span\",...a.components},{EpicVideo:s}=e;return s||w(\"EpicVideo\",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.h1,{children:\"Deep Nesting Elements\"}),`\n`,(0,n.jsx)(s,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/deep-nesting-elements\"}),`\n`,(0,n.jsx)(e.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Just to make sure we really understand how to nest this stuff. Try to create\nthis using React's APIs:`}),`\n`,(0,n.jsx)(e.pre,{\"data-line-numbers\":\"true\",\"data-lang\":\"html\",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(--base08)\"},children:\"div\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"container\"}),'\"',\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"p\"}),\">Here's Sam's favorite food:\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[\"\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"ul\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"class\"}),\"=\",'\"',(0,n.jsx)(e.span,{style:{color:\"var(--base0B)\"},children:\"sams-food\"}),'\"',\">\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"4\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">Green eggs\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"5\",children:[\"\t\t<\",(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"li\"}),\">Ham\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"6\",children:[\"\t\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"7\",children:[\"\",`\n`]})]})})]})}function p(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function w(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return x(N);})();\n;return Component;",[512],"https://www.epicreact.dev/tutorials/get-started-with-react/deep-nesting-elements",{"_9":460,"_461":514,"_463":515},"/app/02.03.problem/test/",[465],{"_9":460,"_461":517},"/app/02.03.problem/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/02.raw-react/03.problem.deep-nesting?view=editor&title=Deep+Nesting+Elements+%28problem%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",{"_20":59,"_142":349,"_438":520,"_22":60,"_24":61,"_440":521,"_455":522,"_458":524,"_466":527,"_469":529,"_267":317,"_269":296,"_9":285,"_483":-5},"03.solution.deep-nesting","var Component=(()=>{var m=Object.create;var i=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var w=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),g=(e,t)=>{for(var n in t)i(e,n,{get:t[n],enumerable:!0})},c=(e,t,n,s)=>{if(t&&typeof t==\"object\"||typeof t==\"function\")for(let r of h(t))!x.call(e,r)&&r!==n&&i(e,r,{get:()=>t[r],enumerable:!(s=f(t,r))||s.enumerable});return e};var _=(e,t,n)=>(n=e!=null?m(l(e)):{},c(t||!e||!e.__esModule?i(n,\"default\",{value:e,enumerable:!0}):n,e)),j=e=>c(i({},\"__esModule\",{value:!0}),e);var d=w((D,a)=>{a.exports=_jsx_runtime});var b={};g(b,{default:()=>u,frontmatter:()=>E});var o=_(d()),E=void 0;function p(e){let t={h1:\"h1\",p:\"p\",...e.components},{EpicVideo:n}=t;return n||M(\"EpicVideo\",!0),(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:\"Deep Nesting Elements\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/tutorials/get-started-with-react/deep-nesting-elements/solution\"}),`\n`,(0,o.jsx)(t.p,{children:\"\\u{1F468}\\u200D\\u{1F4BC} Great job! We can go as deep as we want with this stuff!\"})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(e)}function M(e,t){throw new Error(\"Expected \"+(t?\"component\":\"object\")+\" `\"+e+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return j(b);})();\n;return Component;",[523],"https://www.epicreact.dev/tutorials/get-started-with-react/deep-nesting-elements/solution",{"_9":460,"_461":525,"_463":526},"/app/02.03.solution/test/",[465],{"_9":460,"_461":528},"/app/02.03.solution/","https://stackblitz.com/github/epicweb-dev/get-started-with-react/tree/main/exercises/02.raw-react/03.solution.deep-nesting?view=editor&title=Deep+Nesting+Elements+%28solution%29&hidedevtools=1&terminalHeight=0&hideNavigation=1&file=index.html",[531,536,541],{"_20":39,"_142":345,"_438":453,"_22":40,"_24":41,"_440":454,"_455":532,"_458":533,"_466":535,"_469":470,"_267":317,"_269":268,"_9":266,"_471":43},[457],{"_9":460,"_461":462,"_463":534},[465],{"_9":460,"_461":468},{"_20":47,"_142":347,"_438":486,"_22":48,"_24":49,"_440":487,"_455":537,"_458":538,"_466":540,"_469":495,"_267":317,"_269":317,"_9":266,"_471":51},[489],{"_9":460,"_461":491,"_463":539},[465],{"_9":460,"_461":494},{"_20":55,"_142":349,"_438":509,"_22":56,"_24":57,"_440":510,"_455":542,"_458":543,"_466":545,"_469":518,"_267":317,"_269":296,"_9":266,"_471":59},[512],{"_9":460,"_461":514,"_463":544},[465],{"_9":460,"_461":517},[547,552,557],{"_20":43,"_142":345,"_438":473,"_22":44,"_24":45,"_440":474,"_455":548,"_458":549,"_466":551,"_469":482,"_267":317,"_269":268,"_9":285,"_483":-5},[476],{"_9":460,"_461":478,"_463":550},[465],{"_9":460,"_461":481},{"_20":51,"_142":347,"_438":497,"_22":52,"_24":53,"_440":498,"_455":553,"_458":554,"_466":556,"_469":506,"_267":317,"_269":317,"_9":285,"_483":-5},[500],{"_9":460,"_461":502,"_463":555},[465],{"_9":460,"_461":505},{"_20":59,"_142":349,"_438":520,"_22":60,"_24":61,"_440":521,"_455":558,"_458":559,"_466":561,"_469":529,"_267":317,"_269":296,"_9":285,"_483":-5},[523],{"_9":460,"_461":525,"_463":560},[465],{"_9":460,"_461":528},"exerciseFormEmbedUrl","https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234=Get%20Started%20with%20React%20%F0%9F%8F%83%E2%80%8D%E2%9E%A1%EF%B8%8F&entry.428900931=Raw%20React%20APIs","epicVideoInfosPromise",["P",565],"exerciseFinished",{"_568":569,"_24":570},"file","/myapp/workshop-content/exercises/02.raw-react/FINISHED.mdx","exercises/02.raw-react/FINISHED.mdx","prevStepLink",{"_573":574,"_575":576},"to","/exercise/02/03/solution","aria-label","Deep Nesting Elements (solution)","nextStepLink",{"_573":579,"_575":365},"/exercise/03","actionData","errors"]

02. Raw React APIs/Elaboration