Skip to content

TypeScript JSX Primer: A Short Tutorial for React Learners

This tutorial distills the TypeScript React and JSX guidance into a quick reference for JavaScript learners moving into TypeScript.

1) JSX Element Types

Use JSX.Element or React.ReactNode where appropriate.

function Banner(): JSX.Element {
  return <h1>Welcome</h1>
}

2) Typing Props

type ButtonProps = {
  label: string
  onClick: () => void
}

function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>
}

3) Typing Children

type PanelProps = {
  children: React.ReactNode
}

function Panel({ children }: PanelProps) {
  return <section>{children}</section>
}

4) Typing Events

function SearchBox() {
  const [value, setValue] = React.useState("")
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
  }
  return <input value={value} onChange={onChange} />
}

5) Reference Checklist

Prefer inference where possible.
Use React event types for DOM handlers.
Keep prop types explicit for public components.

References

Further Reading

Share on Share on