'}),` with a fragment and inspect the DOM to notice that\nthe elements are both rendered as direct children of `,(0,n.jsx)(e.code,{children:\"root\"}),\".\"]}),`\n`,(0,n.jsx)(\"callout-info\",{class:\"aside\",children:(0,n.jsxs)(e.p,{children:[`\\u{1F4B0} TIP: Fragments are common enough that there's a syntax shortcut for them.\nYou can open with `,(0,n.jsx)(e.code,{children:\"<>\"}),\" and close with \",(0,n.jsx)(e.code,{children:\"\"}),\", so:\"]})}),`\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(--base08)\"},children:\"element\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" <\",(0,n.jsx)(e.span,{style:{color:\"var(--base0A)\"},children:\"React.Fragment\"}),\">this is in a fragment\",`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"2\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base03)\"},children:\"// is the same as:\"}),`\n`]}),(0,n.jsxs)(e.span,{className:\"codeblock-line\",\"data-line-number\":\"3\",children:[(0,n.jsx)(e.span,{style:{color:\"var(--base08)\"},children:\"element\"}),\" \",(0,n.jsx)(e.span,{style:{color:\"var(--base0E)\"},children:\"=\"}),\" <>this is in a fragment\",`\n`]})]})}),`\n`,(0,n.jsxs)(e.p,{children:[\"\\u{1F468}\\u200D\\u{1F4BC} We want to get rid of the \",(0,n.jsx)(e.code,{children:'

'}),` we have in there, but\nwe need to keep the `,(0,n.jsx)(e.code,{children:\"

\"}),\" and \",(0,n.jsx)(e.code,{children:\"

\"}),` is\nneeded at all. Might help if you look at what this looks like using\n`,(0,n.jsx)(e.code,{children:\"createElement\"}),` rather than JSX. As I said, understanding how JSX compiles\nto `,(0,n.jsx)(e.code,{children:\"createElement\"}),\" really helps improve your capabilities with JSX!\"]})]})}function h(a={}){let{wrapper:e}=a.components||{};return e?(0,n.jsx)(e,{...a,children:(0,n.jsx)(d,{...a})}):d(a)}function N(a,e){throw new Error(\"Expected \"+(e?\"component\":\"object\")+\" `\"+a+\"` to be defined: you likely forgot to import, pass, or provide it.\")}return w(x);})();\n;return Component;",[999],"https://www.epicreact.dev/workshops/react-fundamentals/fragments",{"_9":900,"_901":1001,"_903":1002},"/app/03.05.problem/test/",[905,906],{"_9":900,"_901":1004},"/app/03.05.problem/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/03.using-jsx/05.problem.fragments?view=editor&title=Fragments+%28problem%29",{"_20":99,"_336":635,"_878":1007,"_22":100,"_24":101,"_880":1008,"_895":1009,"_898":1011,"_907":1014,"_910":1016,"_444":456,"_446":506,"_9":443,"_924":-5},"05.solution.fragments","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),_=(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 g=(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((F,a)=>{a.exports=_jsx_runtime});var E={};_(E,{default:()=>u,frontmatter:()=>y});var o=g(d()),y=void 0;function p(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:\"Fragments\"}),`\n`,(0,o.jsx)(n,{url:\"https://www.epicreact.dev/workshops/react-fundamentals/fragments/solution\"}),`\n`,(0,o.jsx)(t.p,{children:`\\u{1F468}\\u200D\\u{1F4BC} Great! Now you can put elements side-by-side without worrying about their\nparent element.`})]})}function u(e={}){let{wrapper:t}=e.components||{};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(p,{...e})}):p(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(E);})();\n;return Component;",[1010],"https://www.epicreact.dev/workshops/react-fundamentals/fragments/solution",{"_9":900,"_901":1012,"_903":1013},"/app/03.05.solution/test/",[905,906],{"_9":900,"_901":1015},"/app/03.05.solution/","https://stackblitz.com/github/epicweb-dev/react-fundamentals/tree/main/exercises/03.using-jsx/05.solution.fragments?view=editor&title=Fragments+%28solution%29",[1018,1023,1028,1033,1038],{"_20":63,"_336":627,"_878":893,"_22":64,"_24":65,"_880":894,"_895":1019,"_898":1020,"_907":1022,"_910":911,"_444":456,"_446":445,"_9":455,"_912":67},[897],{"_9":900,"_901":902,"_903":1021},[905,906],{"_9":900,"_901":909},{"_20":71,"_336":629,"_878":927,"_22":72,"_24":73,"_880":928,"_895":1024,"_898":1025,"_907":1027,"_910":936,"_444":456,"_446":481,"_9":455,"_912":75},[930],{"_9":900,"_901":932,"_903":1026},[905,906],{"_9":900,"_901":935},{"_20":79,"_336":631,"_878":950,"_22":80,"_24":81,"_880":951,"_895":1029,"_898":1030,"_907":1032,"_910":959,"_444":456,"_446":456,"_9":455,"_912":83},[953],{"_9":900,"_901":955,"_903":1031},[905,906],{"_9":900,"_901":958},{"_20":87,"_336":633,"_878":973,"_22":88,"_24":89,"_880":974,"_895":1034,"_898":1035,"_907":1037,"_910":982,"_444":456,"_446":472,"_9":455,"_912":91},[976],{"_9":900,"_901":978,"_903":1036},[905],{"_9":900,"_901":981},{"_20":95,"_336":635,"_878":996,"_22":96,"_24":97,"_880":997,"_895":1039,"_898":1040,"_907":1042,"_910":1005,"_444":456,"_446":506,"_9":455,"_912":99},[999],{"_9":900,"_901":1001,"_903":1041},[905,906],{"_9":900,"_901":1004},[1044,1049,1054,1059,1064],{"_20":67,"_336":627,"_878":914,"_22":68,"_24":69,"_880":915,"_895":1045,"_898":1046,"_907":1048,"_910":923,"_444":456,"_446":445,"_9":443,"_924":-5},[917],{"_9":900,"_901":919,"_903":1047},[905,906],{"_9":900,"_901":922},{"_20":75,"_336":629,"_878":938,"_22":76,"_24":77,"_880":939,"_895":1050,"_898":1051,"_907":1053,"_910":947,"_444":456,"_446":481,"_9":443,"_924":-5},[941],{"_9":900,"_901":943,"_903":1052},[905,906],{"_9":900,"_901":946},{"_20":83,"_336":631,"_878":961,"_22":84,"_24":85,"_880":962,"_895":1055,"_898":1056,"_907":1058,"_910":970,"_444":456,"_446":456,"_9":443,"_924":-5},[964],{"_9":900,"_901":966,"_903":1057},[905,906],{"_9":900,"_901":969},{"_20":91,"_336":633,"_878":984,"_22":92,"_24":93,"_880":985,"_895":1060,"_898":1061,"_907":1063,"_910":993,"_444":456,"_446":472,"_9":443,"_924":-5},[987],{"_9":900,"_901":989,"_903":1062},[905],{"_9":900,"_901":992},{"_20":99,"_336":635,"_878":1007,"_22":100,"_24":101,"_880":1008,"_895":1065,"_898":1066,"_907":1068,"_910":1016,"_444":456,"_446":506,"_9":443,"_924":-5},[1010],{"_9":900,"_901":1012,"_903":1067},[905,906],{"_9":900,"_901":1015},"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=Using%20JSX","epicVideoInfosPromise",["P",1072],"exerciseFinished",{"_1075":1076,"_24":1077},"file","/myapp/workshop-content/exercises/03.using-jsx/FINISHED.mdx","exercises/03.using-jsx/FINISHED.mdx","prevStepLink",{"_1080":1081,"_1082":1083},"to","/exercise/03/05/solution","aria-label","Fragments (solution)","nextStepLink",{"_1080":1086,"_1082":659},"/exercise/04","routes/_app+/exercise+/_layout","actionData","errors"]

03. Using JSX/Elaboration