Convert React Components

React Function Component

React Component without Props

• <Footer />: rename footer.jsx to footer.tsx

footer.tsx
tsx
const Footer = () => <footer>Malcolm Kee ©</footer>;
render(<Footer />);

footer.tsx
tsx
const Footer = () => <footer>Malcolm Kee ©</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 />