1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[583],{6866(e,t,s){s.r(t),s.d(t,{default:()=>d});var n=s(8774),o=s(4586),a=s(1732),r=s(4848);const c=[{title:"Introduction",description:"Get started with React and TypeScript using Next.js, Remix, Gatsby, or Expo.",to:"/docs/basic/setup"},{title:"Learn",description:"Typing component props, hooks, class components, defaultProps, forms and events, context, refs, portals, error boundaries, concurrent rendering, and reusable patterns.",to:"/docs/basic/getting-started/basic_type_example"},{title:"API Reference",description:"Focused references for the @types/react types you'll reach for most: ComponentProps, CSSProperties, ReactNode, and Ref.",to:"/docs/reference/ComponentProps"}],i=[{label:"Hooks",to:"/docs/basic/getting-started/hooks"},{label:"Function components",to:"/docs/basic/getting-started/function_components"},{label:"Forms and events",to:"/docs/basic/getting-started/forms_and_events"},{label:"forwardRef / Ref as a prop",to:"/docs/basic/getting-started/forward_and_create_ref"},{label:"Context",to:"/docs/basic/getting-started/context"},{label:"Useful patterns by use case",to:"/docs/basic/getting-started/patterns_by_usecase"}];function d(){const e=(0,o.A)().siteConfig;return(0,r.jsxs)(a.A,{title:"React TypeScript Cheatsheet",description:"A cheatsheet for developers using React with TypeScript",children:[(0,r.jsx)("header",{className:"hero text--center",children:(0,r.jsxs)("div",{className:"container padding-vert--xl",children:[(0,r.jsx)("h1",{className:"hero__title",children:e.title}),(0,r.jsx)("p",{className:"hero__subtitle",children:e.tagline})]})}),(0,r.jsxs)("main",{children:[(0,r.jsxs)("section",{className:"container padding-vert--xl",children:[(0,r.jsx)("h2",{className:"text--center margin-bottom--lg",children:"What's inside"}),(0,r.jsx)("div",{className:"homeSectionGrid",children:c.map(e=>(0,r.jsxs)(n.A,{to:e.to,className:"homeSectionCard",children:[(0,r.jsx)("h3",{children:e.title}),(0,r.jsx)("p",{children:e.description})]},e.title))})]}),(0,r.jsxs)("section",{className:"container padding-vert--xl",children:[(0,r.jsx)("h2",{className:"text--center margin-bottom--lg",children:"Popular topics"}),(0,r.jsx)("div",{className:"homeTopicsGrid",children:i.map(e=>(0,r.jsx)(n.A,{to:e.to,className:"homeTopicLink",children:e.label},e.to))})]})]})]})}}}]);
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.