Convert React Components

What you'll learn

  • convert React components from JavaScript to TypeScript
  • use type definitions from React
  • annotate React Context

React Function Component

React Component without Props

  • <Footer />: rename footer.jsx to footer.tsx
footer.tsxtsx
const Footer = () => <footer>Malcolm Kee &copy;</footer>;
render(<Footer />);

React Component with Props

  • <Spinner />

Using React.ReactNode

  • <Jumbotron />
  • <Navbar />

Using Union Types for props

  • <Alert />

Using JSX.IntrinsicElements

  • <Table />
  • <PanelBody />, <PanelFooter />, <PanelHeading />

Typing React.forwardRef

  • <Button />

React Class Component

  • <ErrorBoundary />

React Context

  • <FieldContext />

Issue on this page? Report here