1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2628,1086],{41073:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/[...id]",function(){return r(77806)}])},91086:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return u}});var s=r(85893),n=r(88238),a=r(75501),i=r(73742),o=r(95787);let l=e=>(e/100).toLocaleString("en-US",{style:"percent"});function c(e){let{discount:t}=e,r=(0,i.Z)({productId:"subscription"});return t.countryCode?(0,s.jsxs)("div",{className:"mx-auto text-center bg-brand-yellow text-brand-charcoal relative p-2",children:[(0,s.jsx)("span",{className:"scale-[1.5] inline-block mr-2",children:(0,o.m)(t.countryCode)})," ","We noticed youâre in ",t.country,". Get"," ",l(t.percentOff)," off a Fireship Pro subscription with code"," ",(0,s.jsx)("a",{className:"underline",href:r,children:t.code}),"."]}):null}function d(){let e=(0,a.Z)();if(e.loading)return null;let t=null;return"url"===e.best?t=null:"ppp"===e.best&&e.ppp&&(t=(0,s.jsx)(c,{discount:e.ppp})),t}function u(){return(0,n.O_)()?(0,s.jsx)(d,{}):null}},73742:function(e,t,r){"use strict";r.d(t,{Z:function(){return l}});var s=r(67294),n=r(11163),a=r(97836),i=r(75501),o=r(33811);function l(e){let{productId:t,quantity:r,s:l,pppEnabled:c=!0}=e,d=(0,n.useRouter)(),u=(0,i.Z)(),h=d.query.s||d.query.from||d.query.utm_source||l||null,[m,x]=s.useState(h);s.useEffect(()=>{null===h&&x((0,o.Z)())},[h]);let g="".concat(a.FH,"api/checkout?product_id=").concat(t);if(r&&(g+="&quantity=".concat(r)),m&&(g+="&source=".concat(m)),(null==u?void 0:u.loading)===!1){var p,f;"ppp"===u.best&&c&&(g+="&code=".concat(null===(p=u.ppp)||void 0===p?void 0:p.code)),"url"===u.best&&(g+="&code=".concat(null===(f=u.url)||void 0===f?void 0:f.code))}return g}},75501:function(e,t,r){"use strict";r.d(t,{Z:function(){return o}});var s=r(10777);let n=async()=>{let e=await fetch("https://fireship.dev/api/ppp");if(!e.ok)throw Error("There was an error fetching the PPP discount.");return e.json()};var a=r(11163);let i=async e=>{let t=await fetch("/api/get-promotion-code",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({code:e})});if(!t.ok)throw Error("There was an error fetching the PPP discount.");let r=await t.json();if(200!==r.status)throw Error("There was an error fetching the PPP discount.");return r.data};function o(){let{discount:e,loading:t}=function(){let{isLoading:e,data:t}=(0,s.a)({queryKey:["ppp"],queryFn:n});return e?{loading:!0,discount:null}:t&&0!==Object.keys(t).length?{loading:!1,discount:{type:"ppp",code:t.code,percentOff:t.percentOff,countryCode:t.countryCode,country:t.country}}:{loading:!1,discount:null}}(),{discount:r,loading:o}=function(){let e=(0,a.useRouter)().query.code,{isLoading:t,data:r}=(0,s.a)({queryKey:["url-discount",e],queryFn:async()=>e?i(e):null});return t?{loading:!0,discount:null}:r?{loading:!1,discount:{type:"url",code:e,percentOff:r.percentOff,...r.limitTo&&{limitTo:r.limitTo}}}:{loading:!1,discount:null}}();if(t||o)return{ppp:null,url:null,best:null,loading:!0};let l=null;return e&&!r&&(l="ppp"),r&&!e&&(l="url"),e&&r&&(l=e.percentOff>r.percentOff?"ppp":"url"),{ppp:e,url:r,best:l,loading:!1}}},5145:function(e,t,r){"use strict";r.d(t,{Z:function(){return l}});var s=r(67294),n=r(33811),a=r(11163),i=r(58971),o=r.n(i);function l(){let e=(0,a.useRouter)();(0,s.useEffect)(()=>{let t=(0,n.Z)();if(t&&!t.includes("fireship.dev")&&!t.includes("react.gg")&&!t.includes("__"))return;let r=null;e.query.s?r=e.query.s:e.query.utm_source?r=e.query.utm_source:e.query.from?r=e.query.from:!document.referrer||document.referrer.includes("fireship.dev")||document.referrer.includes("react.gg")||(r=new URL(document.referrer).host),r&&o().set("fireshipdotdev_src",r)},[e.query])}},77806:function(e,t,r){"use strict";r.r(t),r.d(t,{__N_SSG:function(){return T},default:function(){return L}});var s=r(85893),n=r(67294),a=r(14522),i=r(33665),o=r(24705);let l={sduduzo_g:"/images/bytes/sduduzo_g.jpeg",flybayer:"/images/bytes/flybayer.jpeg",johnhawly:"/images/bytes/johnhawly.jpeg",garrettgreen:"/images/bytes/garrettgreen.jpeg",mhashim6_:"/images/bytes/mhashim6_.jpeg",aspittel:"/images/bytes/aspittel.jpeg",graysonhicks:"/images/bytes/graysonhicks.jpeg",mitchellbwright:"/images/bytes/mitchellbwright.jpeg",thefinnomenon:"/images/bytes/thefinnomenon.jpeg"}
1,c=[{name:"Sdu",handle:"sduduzo_g",text:"This is the first ever newsletter that I open a music playlist for and maximize my browser window just to read it in peace. Kudos to @uidotdev for great weekly content.",id:"1368960422708207617"},{name:"Brandon Bayer",handle:"flybayer",text:"The Bytes newsletter is a work of art! Itâs the only dev newsletter Iâm subscribed too. They somehow take semi boring stuff and infuse it with just the right amount of comedy to make you chuckle.",id:"1371569644151189505"},{name:"John Hawley",handle:"johnhawly",text:"Bytes has been my favorite newsletter since its inception. Itâs my favorite thing I look forward to on Mondays. Goes great with a hot cup of coffee!",id:"1295394100800348161"},{name:"Garrett Green",handle:"garrettgreen",text:"I subscribe to A LOT of dev (especially JS/TS/Node) newsletters and Bytes by @uidotdev is always such a welcomed, enjoyable change of pace to most (funny, lighthearted, etc) but still comprehensive/useful.",id:"1295722238382092290"},{name:"Muhammad",handle:"mhashim6_",text:"Literally the only newsletter Iâm waiting for every week.",id:"1296867490866368515"},{name:"Grayson Hicks",handle:"graysonhicks",text:"Bytes is the developer newsletter I most look forward to each week. Great balance of content and context! Thanks @uidotdev.",id:"1295456519312609282"},{name:"Mitchell Wright",handle:"mitchellbwright",text:"I know Iâve said it before, but @tylermcginnis doesnât miss with the Bytes email. If youâre a developer, you really need to subscribe",id:"1428028877129936899"},{name:"Ali Spittel",handle:"aspittel",text:"Can I just say that I giggle every time I get the @uidotdev email each week? You should definitely subscribe.",id:"1458468420828106755"},{name:"Chris Finn",handle:"thefinnomenon",text:"Every JavaScript programmer should be subscribed to the newsletter from @uidotdev. Not only do they manage to succinctly cover the hot news in the JavaScript world for the week but it they manage to add a refreshing humor to it all.",id:"1295842745534361602"}],d=e=>{let{handle:t,id:r,text:n,name:a}=e,o=l[t];return(0,s.jsxs)("a",{className:"tweet bg-brand-white dark:bg-brand-charcoal shadow dark:shadow-none hover:brightness-110 p-6 rounded-lg relative",href:"https://twitter.com/".concat(t,"/status/").concat(r),children:[(0,s.jsx)(i.Z,{id:"fa-twitter",className:"fill-brand-blue absolute right-4 top-4",size:20}),(0,s.jsxs)("div",{className:"flex gap-2 items-center",children:[(0,s.jsx)("img",{className:"w-10 aspect-square rounded-full",alt:"Avatar for @".concat(t),src:o}),(0,s.jsxs)("div",{children:[(0,s.jsx)("p",{className:"text-lg leading-none",children:a}),(0,s.jsxs)("p",{className:"text-sm opacity-50",children:["@",t]})]})]}),(0,s.jsx)("p",{className:"text-sm pt-6 opacity-80",children:n})]})};function u(){return(0,s.jsxs)("div",{className:"bytes-pitch max-w-[600px] px-2 mx-auto relative",children:[(0,s.jsx)("hr",{className:"bg-brand-yellow h-[100px] w-[4px] mx-auto my-[80px] rounded-full border-none"}),(0,s.jsxs)("div",{className:"text-center",children:[(0,s.jsx)("h3",{className:"font-black text-[calc(1rem + 2vw)] mx-0 mt-12 text-center text-4xl mb-8",children:"Before you leave"}),(0,s.jsxs)("p",{children:["I know,"," ",(0,s.jsx)("i",{className:"text-brand-pink font-black",children:"another newsletter pitch"})," ","- but hear me out. Most JavaScript newsletters are terrible. Whenâs the last time you actually looked forward to getting one? Even worse, whenâs the last time you actually ",(0,s.jsx)("strong",{children:"read"})," one? We wanted to change that."]}),(0,s.jsxs)("p",{className:"my-8",children:["We call it ",(0,s.jsx)("a",{href:"https://bytes.dev?s=uidotdev",children:"Bytes"}),", but others call it"," ",(0,s.jsx)("a",{href:"https://twitter.com/uidotdev/timelines/1428028877129936899",children:"their favorite newsletter"}),"."]}),(0,s.jsx)(o.Z,{})]}),(0,s.jsx)("div",{className:"grid gap-8 mx-2 lg:-mx-40 mt-10 grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))]",children:c.map(e=>(0,s.jsx)(d,{...e},e.text))})]})}var h=r(89706),m=r(13828),x=r(91086);function g(){return(0,s.jsxs)("section",{id:"reactgg-pitch",className:"max-w-[720px] mx-auto mt-14",children:[(0,s.jsxs)("div",{className:"relative overflow-hidden",children:[(0,s.jsx)("div",{className:"absolute w-full h-full overflow-hidden z-0",children:(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 712 572",className:"overflow-visible w-full",role:"img","aria-labelledby":"board-01-title board-01-desc",children:[(0,s.jsx)("title",{id:"board-01-title",children:"react.gg"}),(0,s.jsx)("desc",{id:"board-01-desc",children:"The interactive way to master modern React"}),(0,s.jsx)("g",{id:"d",children:(0,s.jsx)("path",{fill:"none",stroke:"#818074",strokeMiterlimit:"10",strokeWidth:"34",d:"M543.35 126.57c123.31 1.07 104.52 103.78 29.24 149.02s-428.36 40.94-493.61.05C13.74 234.76 12.3 59.01 149.54 30.91c137.24-28.1 474.82-2.81 519.82 51.2 45 54.01 43.39 247.05-150.6 266.38-193.64 19.3-303.63-2.59-383.88 1.57-87.75 4.54-116.27 91-116.27 170.01v696.21"})}),(0,s.jsx)("g",{id:"e",children:(0,s.jsx)("path",{fill:"none",stroke:"#231f20",strokeMiterlimit:"10",strokeWidth:"32",d:"M543.35 126.57c123.31 1.07 104.52 103.78 29.24 149.02s-428.36 40.94-493.61.05C13.74 234.76 12.3 59.01 149.54 30.91c137.24-28.1 474.82-2.81 519.82 51.2 45 54.01 43.39 247.05-150.6 266.38-193.64 19.3-303.63-2.59-383.88 1.57-87.75 4.54-116.27 91-116.27 170.01v696.21"})}),(0,s.jsx)("g",{id:"g",children:(0,s.jsx)("path",{fill:"none",stroke:"#f6f1d7",strokeMiterlimit:"10",strokeWidth:"25",d:"M543.35 126.57c123.31 1.07 104.52 103.78 29.24 149.02s-428.36 40.94-493.61.05C13.74 234.76 12.3 59.01 149.54 30.91c137.24-28.1 474.82-2.81 519.82 51.2 45 54.01 43.39 247.05-150.6 266.38-193.64 19.3-303.63-2.59-383.88 1.57-87.75 4.54-116.27 91-116.27 170.01v696.21"})}),(0,s.jsx)("g",{id:"h",children:(0,s.jsx)("path",{fill:"none",stroke:"#231f20",strokeDasharray:"0 0 2 40",strokeMiterlimit:"10",strokeWidth:"25",d:"M543.35 126.57c123.31 1.07 104.52 103.78 29.24 149.02s-428.36 40.94-493.61.05C13.74 234.76 12.3 59.01 149.54 30.91c137.24-28.1 474.82-2.81 519.82 51.2 45 54.01 43.39 247.05-150.6 266.38-193.64 19.3-303.63-2.59-383.88 1.57-87.75 4.54-116.27 91-116.27 170.01v696.21"})}),(0,s.jsxs)("g",{id:"j",children:[(0,s.jsx)("path",{fill:"#0ba65b",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:"2.15",d:"m542.66 103.7 9.48 23.13-9.48 23.13h-18.47V103.7h18.47z"}),(0,s.jsxs)("g",{id:"k",children:[(0,s.jsx)("g",{id:"l",children:(0,s.jsx)("ellipse",{cx:"158.34",cy:"299.24",fill:"#231f20",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",rx:"10.19",ry:"5.87"})}),(0,s.jsxs)("g",{id:"m",fill:"#f088a0",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",children:[(0,s.jsx)("path",{d:"M168.53 297.66c0 3.06-4.56 5.54-10.19 5.54s-10.19-2.48-10.19-5.54v-4.14s5.97.67 10.19.67 10.19-.67 10.19-.67v4.14Z"}),(0,s.jsx)("ellipse",{cx:"158.34",cy:"292.8",rx:"10.19",ry:"5.87"})]})]}),(0,s.jsxs)("g",{id:"n",children:[(0,s.jsx)("g",{id:"o",children:(0,s.jsx)("ellipse",{cx:"552.14",cy:"40.73",fill:"#231f20",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",rx:"10.19",ry:"5.87"})}),(0,s.jsxs)("g",{id:"p",fill:"#12b2e2",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",children:[(0,s.jsx)("path",{d:"M562.33 39.15c0 3.06-4.56 5.54-10.19 5.54s-10.19-2.48-10.19-5.54v-4.14s5.97.67 10.19.67 10.19-.67 10.19-.67v4.14Z"}),(0,s.jsx)("ellipse",{cx:"552.14",cy:"34.3",rx:"10.19",ry:"5.87"})]})]}),(0,s.jsxs)("g",{id:"q",children:[(0,s.jsx)("g",{id:"r",children:(0,s.jsx)("ellipse",{cx:"468.88",cy:"354.08",fill:"#231f20",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",rx:"10.19",ry:"5.87"})}),(0,s.jsxs)("g",{id:"s",fill:"#f9b728",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",children:[(0,s.jsx)("path",{d:"M479.07 352.5c0 3.06-4.56 5.54-10.19 5.54s-10.19-2.48-10.19-5.54v-4.14s5.97.67 10.19.67 10.19-.67 10.19-.67v4.14Z"}),(0,s.jsx)("ellipse",{cx:"468.88",cy:"347.64",rx:"10.19",ry:"5.87"})]})]}),(0,s.jsxs)("g",{id:"t",children:[(0,s.jsx)("g",{id:"u",children:(0,s.jsx)("ellipse",{cx:"18.6",cy:"553.56",fill:"#231f20",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",rx:"10.19",ry:"5.87"})}),(0,s.jsxs)("g",{id:"v",fill:"#7b5ea4",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:".53",children:[(0,s.jsx)("path",{d:"M28.79 551.98c0 3.06-4.56 5.54-10.19 5.54s-10.19-2.48-10.19-5.54v-4.14s5.97.67 10.19.67 10.19-.67 10.19-.67v4.14Z"}
1),(0,s.jsx)("ellipse",{cx:"18.6",cy:"547.12",rx:"10.19",ry:"5.87"})]})]}),(0,s.jsxs)("g",{children:[(0,s.jsx)("g",{fill:"currentColor",children:(0,s.jsx)("path",{d:"M185.99 105.99c13.15 0 19.77 6.18 16.79 18.46-2.18 8.79-6.83 12.21-16.42 13.3l-.15.51c7.49 1.02 10.03 3.49 9.52 11.12-.07 3.56-.51 8.5-.51 11.12h-18.53c-3.2 0-3.85-1.16-3.56-5.81 1.02-9.59.65-11.48-3.2-11.48-1.45 0-2.03 0-3.42.07-1.6 6.9-2.83 13.01-3.42 17.22h-22.53c2.11-7.85 4.14-15.62 7.05-27.25 2.91-11.56 4.8-19.4 6.54-27.25h31.83Zm-5.23 20.13c1.38-5.67-.22-7.27-4.07-7.27-.87 0-2.69.07-4.43.14-1.02 4.29-2.11 8.65-3.12 12.79 1.45.07 3.27.07 5.38.07 3.34 0 5.16-1.67 6.25-5.74ZM257.14 105.99c-.51 1.74-1.31 4.8-1.96 7.27-.65 2.62-1.45 5.89-1.82 7.7-7.56-.14-15.62-.14-21.95-.14l-1.31 5.38c7.41 0 15.19-.07 21.44-.29-.8 3.05-2.47 9.52-3.27 12.94-6.03-.22-13.88-.36-21.22-.36l-1.38 5.6c6.47 0 15.04-.07 22.02-.15-.65 2.11-1.53 5.52-2.18 8.43-.73 2.76-1.53 5.96-1.96 8.14h-44.48c2.11-7.63 4.22-15.62 7.05-27.25 2.91-11.56 4.87-19.77 6.54-27.25h44.48ZM309.7 105.99c-.44 7.27-2.18 40.7-1.96 54.5h-24.2c.51-2.11 1.16-5.6 1.82-9.81h-10.97c-1.45 4.14-2.62 7.63-3.2 9.81h-23.47c6.83-13.73 21.73-47.38 24.56-54.5h37.43Zm-22.67 32.34c.58-4.94 1.09-10.1 1.45-14.68.07-2.98.36-6.54.65-9.3h-.36c-1.16 2.76-2.54 6.25-4 9.37-1.96 4.58-4 9.67-5.81 14.61h8.07ZM347.48 127.21c1.31-5.23.07-6.98-3.34-6.98-3.63.07-5.89 2.03-8.28 11.85-2.4 9.52-.87 12.28 2.98 12.28 3.2 0 5.16-2.69 6.18-6.76.22-.8.36-1.74.58-2.69 3.49.07 7.19.07 10.83.07s7.27 0 10.83-.07c-.22 1.6-.58 3.12-.94 4.51-4.14 16.5-11.48 22.02-30.01 22.02-21.58 0-28.12-9.96-22.89-30.67 4.72-19.11 14.03-25.73 32.85-25.73 21.07 0 26.53 7.7 23.76 19.19-.44 1.6-.94 3.34-1.6 5.23-3.56-.15-7.19-.15-10.76-.15s-7.27 0-10.76.15c.22-.8.44-1.6.58-2.25ZM420.96 105.99c-.73 2.54-1.74 6.54-2.62 10.1-.94 3.49-1.96 7.78-2.54 10.54-3.34-.07-6.61-.15-9.81-.15-3.85 15.77-7.41 30.52-8.14 34.08-3.2-.22-8.5-.22-12.28-.22s-8.94 0-12.28.22c1.09-3.56 4.87-18.31 8.79-34.08-3.2.07-6.54.07-9.88.15.8-2.76 1.82-7.05 2.76-10.54.87-3.56 1.89-7.56 2.4-10.1h43.6Z"})}),(0,s.jsx)("g",{fill:"#f088a0",children:(0,s.jsx)("path",{d:"M430.17 151.32c-3.26-1.25-4.67-3.62-4.67-6.84 0-5.31 3.82-8.29 11.11-8.29.89 0 8.25.04 13.64.04-.04.64-.04 3.46 0 4.35-1.49 0-4.15-.16-6.64-.28v.24c3.14.89 4.35 2.37 4.35 5.11 0 3.94-3.26 6.64-11.35 6.64-1.69 0-3.14-.12-4.39-.4-.68.76-1.01 1.53-1.01 2.21 0 .85.72 1.25 1.97 1.25 3.94 0 7.24-.32 9.86-.32 4.83 0 7.04 1.53 7.04 5.23 0 4.02-2.9 6.44-13.24 6.44-10.99 0-12.52-1.81-12.52-4.23 0-1.89 1.49-3.02 4.19-3.74v-.12c-1.81-.52-2.46-1.61-2.46-2.86 0-2.05 1.89-3.54 4.1-4.35v-.08Zm1.97 7.73c-.52 0-1.01 0-1.45-.04-.76.52-1.21 1.05-1.21 1.69 0 1.57 1.45 2.29 7.49 2.29 5.71 0 7.97-.84 7.97-2.62 0-1.17-.8-1.65-3.06-1.65-2.94 0-7 .32-9.74.32Zm10.91-14.57c0-2.53-1.85-4.35-6.36-4.35s-6.28 1.89-6.28 4.31 1.85 4.06 6.28 4.06 6.36-1.57 6.36-4.02ZM458.99 151.32c-3.26-1.25-4.67-3.62-4.67-6.84 0-5.31 3.82-8.29 11.11-8.29.89 0 8.25.04 13.64.04-.04.64-.04 3.46 0 4.35-1.49 0-4.15-.16-6.64-.28v.24c3.14.89 4.35 2.37 4.35 5.11 0 3.94-3.26 6.64-11.35 6.64-1.69 0-3.14-.12-4.39-.4-.68.76-1.01 1.53-1.01 2.21 0 .85.72 1.25 1.97 1.25 3.94 0 7.24-.32 9.86-.32 4.83 0 7.04 1.53 7.04 5.23 0 4.02-2.9 6.44-13.24 6.44-10.99 0-12.52-1.81-12.52-4.23 0-1.89 1.49-3.02 4.19-3.74v-.12c-1.81-.52-2.46-1.61-2.46-2.86 0-2.05 1.89-3.54 4.1-4.35v-.08Zm1.97 7.73c-.52 0-1.01 0-1.45-.04-.76.52-1.21 1.05-1.21 1.69 0 1.57 1.45 2.29 7.49 2.29 5.71 0 7.97-.84 7.97-2.62 0-1.17-.8-1.65-3.06-1.65-2.94 0-7 .32-9.74.32Zm10.91-14.57c0-2.53-1.85-4.35-6.36-4.35s-6.28 1.89-6.28 4.31 1.85 4.06 6.28 4.06 6.36-1.57 6.36-4.02Z"})}),(0,s.jsx)("circle",{cx:"412.43",cy:"156.03",r:"4.38",fill:"#f088a0"})]}),(0,s.jsxs)("text",{fill:"currentColor",fontFamily:"Outfit-Regular, Outfit",fontSize:"23.24",transform:"translate(194.61 209.98)",children:[(0,s.jsxs)("tspan",{x:"0",y:"0",children:["The interactive way to"," "]}),(0,s.jsx)("tspan",{x:"2.36",y:"29.05",children:"master modern React"})]})]})]})}),(0,s.jsx)("div",{className:"relative z-1 before:content-[''] before:block before:aspect-[712/450]",children:(0,s.jsxs)("div",{className:"w-[70%] max-w-[420px] mx-auto translate-x-[-5%] text-lg md:text-xl",children:[(0,s.jsxs)("p",{className:"mt-0 mr-[-20%]",children:["Sick of confusing and outdated React courses? If so, check out"," ",(0,s.jsx)("a",{href:"https://react.gg",children:"react.gg"}),"."]}),(0,s.jsx)("p",{className:"mt-4 mr-[-20%]",children:"It's our take on a modern, interactive React course built by developers who have been using and teaching React since 2014."}),(0,s.jsx)("p",{className:"text-center",children:(0,s.jsx)("a",{href:"https://react.gg",className:"shrink-0 px-8 py-4 mt-8 inl
1ine-block bg-brand-yellow rounded-full uppercase text-md border border-brand-charcoal cursor-pointer !text-brand-charcoal !font-bold shadow-[1px_2px_0] shadow-brand-charcoal",children:"Learn more"})})]})})]}),(0,s.jsx)("div",{className:"relative overflow-hidden mt-[-2.5rem] md:mt-[-4.5rem] pointer-events-none",children:(0,s.jsx)("div",{className:"overflow-hidden aspect-[712/220]",children:(0,s.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 712 572",className:"w-full",children:[(0,s.jsx)("g",{id:"d",children:(0,s.jsx)("path",{fill:"none",stroke:"#818074",strokeMiterlimit:"10",strokeWidth:"34",d:"M18.64-37.98v149.54C19 215 119 188 162 174s78.7-37.44 277 9C703.18 244.87 734.35 50.58 641.01 30.01"})}),(0,s.jsx)("g",{id:"e",children:(0,s.jsx)("path",{fill:"none",stroke:"#231f20",strokeMiterlimit:"10",strokeWidth:"32",d:"M18.64-37.98v149.54C19 215 119 188 162 174s78.7-37.44 277 9C703.18 244.87 734.35 50.58 641.01 30.01"})}),(0,s.jsx)("g",{id:"g",children:(0,s.jsx)("path",{fill:"none",stroke:"#f6f1d7",strokeMiterlimit:"10",strokeWidth:"25",d:"M18.64-37.98v149.54C19 215 119 188 162 174s78.7-37.44 277 9C703.18 244.87 734.35 50.58 641.01 30.01"})}),(0,s.jsx)("g",{id:"h",children:(0,s.jsx)("path",{fill:"none",stroke:"#231f20",strokeDasharray:"0 0 2 40",strokeMiterlimit:"10",strokeWidth:"25",d:"M18.64-37.98c0 49.26-.14 149.48 0 149.54C19 215 119 188 162 174s78.7-37.44 277 9C704.04 245.07 734.55 49.3 640.09 29.81"})}),(0,s.jsx)("g",{id:"j",children:(0,s.jsx)("path",{fill:"#12b2e2",stroke:"#231f20",strokeLinejoin:"round",strokeWidth:"2.15",d:"m630.45 55.14-9.48-23.13 9.48-23.13h18.47v46.26h-18.47z"})})]})})})]})}var p=r(51526),f=r(3303),b=r(73935);function w(e){let{handleClose:t}=e,[r,a]=(0,n.useState)(null);return((0,n.useEffect)(()=>{a(document.body)},[]),r)?(0,b.createPortal)((0,s.jsx)("div",{onClick:function(e){e.target===e.currentTarget&&t()},className:"overlay w-[100dvw] h-[100dvh] fixed top-0 left-0 z-50 flex place-items-center bg-[rgba(123,94,164,.8)]",children:(0,s.jsxs)("dialog",{ref:e=>{e&&e.focus()},role:"dialog","aria-labelledby":"dialogTitle","aria-describedby":"dialogDesc",className:"w-10/12 max-w-[500px] p-6 block bg-brand-beige rounded-lg border border-brand-charcoal !shadow-[.4em_.4em_0] shadow-brand-charcoal",children:[(0,s.jsx)("button",{onClick:t,className:"absolute right-3 top-2 text-xl",title:"close",children:"â"}),(0,s.jsx)("img",{src:"/images/react-gg-logo-sticker.svg",width:"222",height:"206",alt:"react.gg",className:"w-2/4 mx-auto aspect-[4/1.5]"}),(0,s.jsx)("p",{id:"dialogTitle",children:"react.gg is our take on a modern, interactive React course built by developers who have been using and teaching React since 2014."}),(0,s.jsxs)("p",{className:"mt-4",children:["When building react.gg, our goal was to redefine what an online course could be."," "]}),(0,s.jsxs)("p",{className:"mt-4",children:["In doing so, along we creating our own custom course platform, we created"," ",(0,s.jsx)("a",{className:"text-brand-blue underline",href:"https://react.gg/visualized",children:"interactive visuals"}),","," ",(0,s.jsx)("a",{className:"text-brand-blue underline",href:"https://fireship.dev/c/react/why-react",children:"engaging content"}),", a real-world"," ",(0,s.jsx)("a",{className:"text-brand-blue underline",href:"https://www.npmjs.com/package/@uidotdev/usehooks",children:"hooks library"})," ","you'll recreate yourself, a"," ",(0,s.jsx)("a",{className:"text-brand-blue underline",href:"https://fireship.dev/c/react/password-toggle-challenge",children:'"Leetcode" for React'})," ","challenge experience, over 50+ React interview questions, and much more."]}),(0,s.jsx)("p",{className:"mt-4",children:"It truly is a unique learning experience and we couldn't be happier with how it turned out."}),(0,s.jsxs)("p",{className:"mt-4",children:["If you need more convincing,"," ",(0,s.jsx)("a",{className:"text-brand-blue underline",href:"https://react.gg/reviews",children:"here are the reviews"}),"."]}),(0,s.jsx)("p",{className:"text-center mt-2",children:(0,s.jsx)("a",{href:"https://react.gg",className:"shrink-0 px-8 py-4 mt-4 inline-block bg-brand-yellow rounded-full uppercase text-center text-md border border-brand-charcoal cursor-pointer !text-brand-charcoal !font-bold shadow-[1px_2px_0] shadow-brand-charcoal",children:"Learn More"})})]})}),r):null}let y={damping:15,stiffness:180,mass:.15};function j(){return"true"===localStorage.getItem("popout-dismissed")}
1function v(){let[e,t]=(0,n.useState)(!1),[r,a]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{function e(){let e=window.pageYOffset||document.documentElement.scrollTop,r=window.innerHeight,s=e/(document.documentElement.scrollHeight-r)*100,n=j();s>60&&s<92&&!n?t(!0):t(!1)}function r(){j()&&t(!1)}return r(),window.addEventListener("storage",r),window.addEventListener("local-storage",r),window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("storage",r),window.removeEventListener("local-storage",r)}},[]),(0,n.useEffect)(()=>{},[]),(0,s.jsxs)(p.M,{children:[e&&(0,s.jsxs)(f.E.aside,{initial:{x:"-100%"},animate:{x:0},transition:{type:"spring",...y},tabIndex:0,role:"alert",className:"group fixed z-10 left-6 bottom-6 w-[270px] h-[140px] hidden lg:block rounded-r-lg border border-brand-charcoal bg-brand-yellow rounded-l-md shadow-[.2em_.2em_0_rgba(0,0,0,.2)] text-brand-charcoal",children:[(0,s.jsxs)("div",{className:"absolute z-[1] w-[85%] h-full py-2 px-6 flex flex-col gap-2 items-center justify-center bg-brand-yellow rounded-l-md border-r border-brand-charcoal shadow-[.2em_0_0_rgba(0,0,0,.2)] text-center leading-tight",children:[(0,s.jsx)("img",{src:"/images/react-gg-logo-sticker.svg",width:"222",height:"206",alt:"react.gg",className:"w-9/12 my-0"}),(0,s.jsx)("p",{children:"Would you like more info about react.gg?"})]}),(0,s.jsxs)("div",{className:"absolute z-0 w-auto h-[90%] top-[5%] right-[30px] p-2 pl-4 flex flex-col gap-2 justify-center items-stretch bg-brand-beige rounded-md border border-brand-charcoal text-left shadow-[.2em_0_0_rgba(0,0,0,.2)] group-hover:translate-x-[85%] group-focus-within:translate-x-[85%] transition-all",children:[(0,s.jsx)("button",{id:"",className:"px-2 rounded-md border-2 border-[#ccc] hover:border-brand-green",onClick:()=>a(!0),children:"H*ck yes!"}),(0,s.jsx)("button",{id:"",onClick:e=>{let r=e.target;null==r||r.blur(),setTimeout(()=>{t(!1),localStorage.setItem("popout-dismissed","true"),window.dispatchEvent(new Event("local-storage"))},80)},className:"px-2 rounded-md border-2 border-[#ccc] hover:border-brand-red",children:"No, thanks"})]})]},"popout"),r&&(0,s.jsx)(w,{handleClose:()=>a(!1)})]})}function k(){return(0,s.jsx)("section",{id:"querygg-pitch",className:"max-w-[720px] mx-auto mt-14 flex justify-center",children:(0,s.jsxs)("div",{className:"max-w-[600px] mx-4 bg-brand-beige rounded-md border-[10px] border-brand-charcoal text-brand-charcoal text-lg md:text-xl",children:[(0,s.jsx)("img",{src:"/images/QueryGGPitch.svg",width:"1200",height:"620",alt:"Query.gg: The Official React Query Course. Master React Query with Mystifying Ease."}),(0,s.jsxs)("div",{className:"p-6 pb-8 max-w-[450px] mx-auto",children:[(0,s.jsxs)("p",{className:"mt-0",children:["After close to a year of work, weâre very tired â but also very excited to announce that "," ",(0,s.jsx)("a",{href:"https://query.gg",className:"text-brand-purple font-semibold underline",children:"query.gg"})," ","is now available!"]}),(0,s.jsx)("p",{className:"mt-4",children:"Itâs our take on a modern, interactive React Query course built in close collaboration with the React Query team."}),(0,s.jsx)("p",{className:"text-center",children:(0,s.jsx)("a",{href:"https://query.gg",className:"shrink-0 px-6 py-3 mt-8 inline-block bg-brand-yellow rounded-full uppercase text-md border border-brand-charcoal cursor-pointer !text-brand-charcoal !font-bold shadow-[1px_2px_0] shadow-brand-charcoal md:text-lg",children:"Join now"})})]})]})})}function N(e){let{handleClose:t}=e,[r,a]=(0,n.useState)(null);return((0,n.useEffect)(()=>{a(document.body)},[]),r)?(0,b.createPortal)((0,s.jsx)("div",{onClick:function(e){e.target===e.currentTarget&&t()},className:"overlay w-[100dvw] h-[100dvh] fixed top-0 left-0 z-50 flex place-items-center bg-[rgba(123,94,164,.8)]",children:(0,s.jsxs)("dialog",{ref:e=>{e&&e.focus()},role:"dialog","aria-labelledby":"dialogTitle","aria-describedby":"dialogDesc",className:"w-10/12 max-w-[550px] p-6 block bg-brand-beige rounded-lg border border-brand-charcoal !shadow-[.4em_.4em_0] shadow-brand-charcoal",children:[(0,s.jsx)("button",{onClick:t,className:"absolute right-3 top-2 text-xl",title:"close",children:"â"}),(0,s.jsx)("img",{src:"/images/QueryGGLogo.svg",width:"200",height:"50",alt:"query.gg",className:"w-2/4 mx-auto aspect-[4/1.5]"}),(0,s.jsx)("p",{id:"dialogTitle",children:"After close to a year of work, weâre very tired â but also very excited to announce that query.gg is now available!"}),(0,s.jsx)("p",{className:"mt-4",children:"query.gg is our take on a modern, interactive React Query course built in close collaboration with the React Query team."}),(0,s.jsxs)("p",{className:"mt-4",children:["Here's what Tanner Linsley, the creator of React Query,"," ",(0,s.jsx)("a",{style:{color:"var(--brand-purple)"},href:"https://twitter.com/tannerlinsley/status/1780619102840582401?ck_subscriber_id=2694153201",children:"had to say"})," ","about the course."]}
1),(0,s.jsx)("p",{className:"mt-4",children:"âTrust me that thereâs no unwarranted shill when I say that Iâve never seen tech education quality quite like this new Query course. The @uidotdev team are geniuses and @TkDodo is quite literally our planetâs leading expert on all things Query. If you want to learn Query, this is 100% the best way. If you already use Query (I do), @Tkdodo will inevitably \uD83E\uDD2F your \uD83E\uDDE0 with power user skills (like he did with me).â"}),(0,s.jsx)("p",{className:"text-center mt-2",children:(0,s.jsx)("a",{href:"https://query.gg",className:"shrink-0 px-6 py-3 mt-4 inline-block bg-brand-yellow rounded-full uppercase text-center text-md border border-brand-charcoal cursor-pointer !text-brand-charcoal !font-bold shadow-[1px_2px_0] shadow-brand-charcoal",children:"Join now"})})]})}),r):null}let _={damping:15,stiffness:180,mass:.15};function E(){return"true"===localStorage.getItem("popout-dismissed")}function M(){let[e,t]=(0,n.useState)(!1),[r,a]=(0,n.useState)(!1);return(0,n.useEffect)(()=>{function e(){let e=window.pageYOffset||document.documentElement.scrollTop,r=window.innerHeight,s=e/(document.documentElement.scrollHeight-r)*100,n=E();s>60&&s<92&&!n?t(!0):t(!1)}function r(){E()&&t(!1)}return r(),window.addEventListener("storage",r),window.addEventListener("local-storage",r),window.addEventListener("scroll",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("storage",r),window.removeEventListener("local-storage",r)}},[]),(0,n.useEffect)(()=>{},[]),(0,s.jsxs)(p.M,{children:[e&&(0,s.jsxs)(f.E.aside,{initial:{x:"-100%"},animate:{x:0},transition:{type:"spring",..._},tabIndex:0,role:"alert",className:"group fixed z-10 left-6 bottom-6 w-[270px] h-[140px] hidden lg:block rounded-r-lg border border-brand-charcoal bg-brand-beige rounded-l-md shadow-[.2em_.2em_0_rgba(0,0,0,.2)] text-brand-charcoal",children:[(0,s.jsxs)("div",{className:"absolute z-[1] w-[85%] h-full py-2 px-6 flex flex-col gap-2 items-center justify-center bg-brand-beige rounded-l-md border-r border-brand-charcoal shadow-[.2em_0_0_rgba(0,0,0,.2)] text-center leading-tight",children:[(0,s.jsx)("img",{src:"/images/QueryGGLogo.svg",width:"200",height:"50",alt:"query.gg",className:"w-9/12 my-0"}),(0,s.jsx)("p",{children:"Would you like more info about query.gg?"})]}),(0,s.jsxs)("div",{className:"absolute z-0 w-auto h-[90%] top-[5%] right-[30px] p-2 pl-4 flex flex-col gap-2 justify-center items-stretch bg-brand-charcoal rounded-md border border-brand-beige text-left text-brand-beige shadow-[.2em_0_0_rgba(0,0,0,.2)] group-hover:translate-x-[85%] group-focus-within:translate-x-[85%] transition-all",children:[(0,s.jsx)("button",{id:"",className:"px-2 rounded-md border border-brand-beige hover:border-brand-green",onClick:()=>a(!0),children:"H*ck yes!"}),(0,s.jsx)("button",{id:"",onClick:e=>{let r=e.target;null==r||r.blur(),setTimeout(()=>{t(!1),localStorage.setItem("popout-dismissed","true"),window.dispatchEvent(new Event("local-storage"))},80)},className:"px-2 rounded-md border border-brand-beige hover:border-brand-red",children:"No, thanks"})]})]},"popout"),r&&(0,s.jsx)(N,{handleClose:()=>a(!1)})]})}var q=r(5145);function I(e){let t,r,{body:n,title:a,course:i}=e;(0,q.Z)();let o=(null==i?void 0:i.courseId)==="react",l=(null==i?void 0:i.courseId)==="query";return t=o?(0,s.jsx)(g,{}):l?(0,s.jsx)(k,{}):(0,s.jsx)(u,{}),r="Why React Query?"===a?(0,s.jsx)("img",{src:"/images/why-react-query-header.svg",alt:"Why React Query?"}):a,(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(x.default,{}),(0,s.jsx)(m.Z,{}),(0,s.jsxs)("main",{className:"px-2 sm:px-6",children:[(0,s.jsx)("section",{children:(0,s.jsx)("div",{className:"container has-[img]:max-w-[900px] mx-auto mb-8 md:mb-2 px-[1rem] leading-[1.15]",children:(0,s.jsx)("h1",{className:"font-display text-[clamp(1.7rem,6vw,4.1rem)] text-center mb-0 pt-20 text-balance",children:r})})}),(0,s.jsx)("div",{className:"relative xl:grid xl:grid-cols-1 xl:justify-items-center gap-4 container mx-auto md:p-8 min-w-0",children:(0,s.jsx)("section",{className:"words relative",children:(0,s.jsx)("main",{className:"post-content relative",children:n})})}),t]}),o&&(0,s.jsx)(v,{}),l&&(0,s.jsx)(M,{}),(0,s.jsx)(h.Z,{})]})}var C=r(97369),T=!0;function L(e){let{slug:t,title:r,content:n,course:i,description:o,image:l}=e,c=(0,a.o)(n,{},!0);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(C.Z,{title:r,de
1scription:o,imageSlug:l,slug:t}),(0,s.jsx)(I,{title:r,body:c,course:i})]})}},33811:function(e,t,r){"use strict";r.d(t,{Z:function(){return a}});var s=r(58971),n=r.n(s);function a(){return n().get("uidotdev_src")}}},function(e){e.O(0,[2013,4617,7765,7536,5675,9826,334,5787,4522,2888,9774,179],function(){return e(e.s=41073)}),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.