DoctorDerek

// Export default const in JavaScript and TypeScript
const Banana = () => (<div>🍌</div>)

export default Banana // Has to be on a separate line

DoctorDerek

// Default exports in JavaScript and TypeScript
function Banana() {
  return <div>🍌</div>
}

const price = 1.33

// In this example, price is a named export:
export { Banana as default, price }

DoctorDerek

// Named exports in JavaScript and TypeScript
function Banana() {
  return <div>🍌</div>
}

const price = 1.33

export { Banana, price }

// These are equivalent to the export syntax above: 

DoctorDerek

type ReactNode =
  | ReactElement
  | string
  | number
  | ReactFragment
  | ReactPortal
  | boolean
  | null
  | undefined

DoctorDerek

import { ReactNode } from "react"

type ILayout = {
  pageInfo?: { name: string; description: string }
  children: ReactNode
}

export default ILayout

DoctorDerek

import { ReactNode } from "react"

export default interface ILayout {
  pageInfo?: { name: string; description: string }
  children: ReactNode
}

DoctorDerek

import React from "react"

interface ILayout {
  pageInfo?: { name: string; description: string }
  children:
    | JSX.Element[]
    | JSX.Element
    | React.ReactElement
    | React.ReactElement[]
    | string

DoctorDerek

const CardComponent = ({ name, ...props }) => <div>name</div>
// That format is equivalent to including the following code:
const { name } = props
// As in the above example, there could be other stuff in props.

DoctorDerek

function ChildComponent(props) {
  // There could be other props that we didn't destructure here.
  const { firstName, lastName } = props
  return (
    <span>
      {firstName} {lastName}
    </span>
  )
}

DoctorDerek

{
  "extends": [
    "prettier"
  ]
}