https://egghead.io/_next/static/chunks/pages/learn/react-4842a3c6ab5c08ee.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9090],{467:(e,t,a)=>{"use strict";a.d(t,{A:()=>n});var s=a(8051);a(41627);let n=e=>{let{contributors:t}=e;return t&&t[0].name?(0,s.jsxs)("div",{children:[(0,s.jsx)("h5",{className:"text-xs text-gray-500 uppercase tracking-wider font-semibold",children:"Contributors"}),(0,s.jsx)("div",{className:"text-sm mt-1",children:t.map((e,a)=>{let{name:n,type:r}=e,i=a===t.length-1,l=r?"".concat(n," (").concat(r,")").concat(i?"":", "):"".concat(n).concat(i?"":", ");return n?(0,s.jsx)("span",{className:"justify-start font-medium",children:l},n):null})})]}):null}},25612:(e,t,a)=>{"use strict";a.d(t,{A:()=>u});var s=a(8051);a(41627);var n=a(9864),r=a(467),i=a(77421),l=a.n(i),c=a(41024),o=a.n(c),d=a(1849);let h=e=>{let{state:t}=e;switch(t){case"draft":return(0,s.jsx)("div",{className:"inline-block px-3 py-1 mb-2 text-sm font-semibold bg-yellow-100 rounded-lg dark:text-gray-900",children:t});case"notes":return(0,s.jsx)("div",{className:"inline-block px-3 py-1 mb-2 text-sm font-semibold bg-green-100 rounded-lg dark:text-gray-900",children:t});default:return null}},x=e=>{let{author:t}=e,{name:a,image:n,path:r}=t,i=()=>(0,s.jsxs)(s.Fragment,{children:[n&&(0,s.jsx)(l(),{src:n,width:48,height:48,alt:a,className:"rounded-full"}),(0,s.jsxs)("div",{className:"leading-tighter",children:[(0,s.jsx)("span",{className:"text-xs uppercase",children:"author"}),(0,s.jsx)("div",{className:"font-semibold",children:a})]})]});return a?r?(0,s.jsx)(o(),{href:r,className:"inline-flex items-center space-x-2",children:(0,s.jsx)(i,{})}):(0,s.jsx)("div",{className:"inline-flex items-center space-x-2",children:(0,s.jsx)(i,{})}):null},u=e=>{let{children:t,meta:a={}}=e,{title:i,description:c,titleAppendSiteName:o=!1,url:u,ogImage:m,coverImage:p,author:j,contributors:f,state:g}=a,v=i?"https://og-image-react-egghead.now.sh/article/".concat(encodeURIComponent(i)):void 0,y=(0,d.useRouter)(),w="https://github.com/eggheadio/egghead-next/edit/main/src/pages".concat(y.pathname,"/index.mdx");return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.bV,{title:i,description:c,titleTemplate:o?void 0:"%s",openGraph:{title:i,description:c,url:u,images:m?[m]:[{url:v,alt:i}]},canonical:u}),(0,s.jsx)("div",{className:"container",children:(0,s.jsxs)("article",{className:"max-w-screen-md mx-auto mt-8 lg:mt-20 md:mt-14",children:[(0,s.jsxs)("header",{children:[g&&(0,s.jsx)(h,{state:g}),(0,s.jsx)("h1",{className:"w-full max-w-screen-md mb-8 text-3xl font-extrabold lg:text-6xl md:text-5xl sm:text-4xl lg:mb-10 leading-tighter",children:i}),j&&(0,s.jsx)(x,{author:j}),(null==p?void 0:p.url)&&(0,s.jsx)("div",{className:"mt-4",children:(0,s.jsx)(l(),{src:p.url,alt:p.alt||i,width:1280,height:720,quality:100,className:"rounded-lg"})})]}),(0,s.jsx)("main",{className:"mt-5 prose dark:prose-dark dark:prose-a:text-blue-300 prose-a:text-blue-500 sm:prose-lg lg:prose-xl max-w-none",children:(0,s.jsx)("div",{children:t})}),(0,s.jsxs)("footer",{className:"flex flex-col-reverse items-center justify-between py-10 mt-8 text-center border-t border-gray-200 sm:flex-row sm:items-start sm:text-left",children:[f&&(0,s.jsx)(r.A,{contributors:f}),(0,s.jsx)(e=>{let{className:t}=e;return(0,s.jsx)("div",{children:(0,s.jsxs)("a",{href:w,className:"flex items-center space-x-1 font-medium ".concat(t),children:[(0,s.jsx)("svg",{className:"text-blue-500",width:18,height:18,viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg",children:(0,s.jsxs)("g",{fill:"none",children:[(0,s.jsx)("path",{d:"M17.414 2.586a2 2 0 0 0-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 0 0 0-2.828z",fill:"currentColor"}),(0,s.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M2 6a2 2 0 0 1 2-2h4a1 1 0 0 1 0 2H4v10h10v-4a1 1 0 1 1 2 0v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6z",fill:"currentColor"})]})}),(0,s.jsx)("span",{children:"Edit this article on GitHub"})]})})},{className:"mb-16 sm:mb-0"})]})]})})]})}},37723:(e,t,a)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/learn/react",function(){return a(78715)}])},78715:(e,t,a)=>{"use strict";a.r(t),a.d(t,{default:()=>d,meta:()=>l});var s=a(8051),n=a(41194);a(79588);var r=a(270),i=a(25612);let l={title:"React Ultimate Guide",contributors:[{name:"Joel Hooks"},{name:"Will Johnson"}]},c=e=>{let{children:t}=e;return(0,s.jsx)(i.A,{meta:l,children:t})};function o(e){let t={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(t.h2,{id:"get-started-with-react",children:"Get Started with React!"}),"\n",(0,s.jsxs)(t.p,{children:["If you want to learn React you are going to need to learn to ",(0,s.jsx)(t.strong,{children:"think"})," in React. Your JavaScript skills will get you started, but React will use everything you know about JavaScript (or TypeScript!) and take it to the next level."]}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/learn/react/beginners",children:"React for Beginners"})}),"\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/learn/react/state-management",children:"React State Management"})}),"\n"]}),"\n",(0,s.jsx)(t.h3,{id:"react-is-just-javascript",children:"React is just JavaScript"}),"\n",(0,s.jsx)(t.p,{children:"One of the nice aspects of React is that it is just JavaScript. When you are creating react applications, you are able to use all of your core knowledge avout JavaScript and apply it to the creation of components in React."}),"\n",(0,s.jsx)(t.p,{children:"Of course, if your JavaScript fundamentals aren't quite there yet, this can be an entirely different challenge!"}),"\n",(0,s.jsxs)(t.p,{children:["We highly recommend ",(0,s.jsx)(t.a,{href:"https://kentcdodds.com/blog/javascript-to-know-for-react",children:"Kent C. Dodds's article on JavaScript for React"})," to get an idea of the ",(0,s.jsx)(t.strong,{children:"essential JavaScript"})," you'll need to be successful on your React journey."]}),"\n",(0,s.jsx)(t.h3,{id:"wtf-is-jsx",children:"WTF is JSX?"}),"\n",(0,s.jsx)(t.p,{children:"Beyond JavaScript React offers a markup language that is strikingly similar to HTML called JSX."}),"\n",(0,s.jsx)(t.p,{children:'JSX is often met with sad confusion from JavaScript developers that have been encountered some sort "HTML in JS" in the past. It\'s important to note that JSX is NOT HTML in your JS. JSX is an HTML-like abstraction that makes it simpler to create declarative component trees \uD83D\uDE05'}),"\n",(0,s.jsx)(t.p,{children:(0,s.jsx)(t.a,{href:"/collections/wtf-is-jsx-5

1dfe",children:"Chris Biscardi's WTF is JSX"})}),"\n",(0,s.jsx)(t.p,{children:"The short story with JSX is that you absolutely need to simply embrace it for what it is and get comfortable using it if you want to be successful with React. There are ways you can avoid it, but in our experience that will do very little for you when you are trying to learn React. Save it for later and just open your heart and mind to JSX!"}),"\n",(0,s.jsx)(t.h3,{id:"whats-next",children:"What's next?"}),"\n",(0,s.jsx)(t.p,{children:"If you feel comfortable with your JavaScript skills and have agreed to just accept JSX into your life, we've got an excellent Community Resource for you to explore to get started:"}),"\n",(0,s.jsx)(r.A,{slug:"the-beginner-s-guide-to-react"}),"\n",(0,s.jsxs)(t.p,{children:["If you enjoy listening to get familiar with the terms of React ",(0,s.jsx)(t.a,{href:"https://syntax.fm/show/066/the-react-episode",children:"Syntax.fm has a podcast episode"})," that dives into React and explains the core features."]}),"\n",(0,s.jsx)(t.h2,{id:"further-reading",children:"Further Reading:"}),"\n",(0,s.jsxs)(t.ul,{children:["\n",(0,s.jsx)(t.li,{children:(0,s.jsx)(t.a,{href:"/learn/react/toolkit-or-framework",children:"Is React a Toolkit or Framework?"})}),"\n"]})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,s.jsx)(c,{...e,children:(0,s.jsx)(o,{...e})})}}},e=>{e.O(0,[636,6593,8792],()=>e(e.s=37723)),_N_E=e.O()}]);