DoctorDerek

{
  "files.autoSave": "onFocusChange",
  "editor.fontLigatures": true,
  "editor.fontFamily": "Fira Code SemiBold, Consolas, 'Courier New', monospace",
  "editor.fontSize": 20,
  "editor.wordWrap": "wordWrapColumn",
  "editor.tabSize": 2,
  "prettier.requireConfig": false,
  "prettier.semi": false,
  "editor.codeActionsOnSave": { "source.fixAll": true },

DoctorDerek

import React from "react"

import DisplayAllProps from "./DisplayAllProps"
import ChildComponent from "./ChildComponent"

const ParentComponent = (props) => (
  <section>
    <h1>ParentComponent's props:</h1>
    <DisplayAllProps {...props}></DisplayAllProps>
    <ChildComponent {...props}></ChildComponent>

DoctorDerek

// Every symbol created with Symbol() is unique.
console.log(Symbol() === Symbol()) // false
console.log(Symbol("✨") === Symbol("✨")) // false

// Calling Symbol.for() makes a global symbol.
console.log(Symbol.for("✨") === Symbol.for("✨")) // true

// You can check for a symbol using typeof.
console.log(typeof Symbol()) // "symbol"

DoctorDerek

DoctorDerek

const uniqueObjectsOneLiner = [
  ...new Set(objectsArray.map((o) => JSON.stringify(o))),
].map((string) => JSON.parse(string))
console.log(`${uniqueObjectsOneLiner.length} objects`)
// Output: 2 objects
console.log(...uniqueObjectsOneLiner)
// [ { id: 1, emoji: "🎸" }, { id: 2, emoji: "🎷" } ]

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