T2 React Workshop - Planning Document

Section 1: Typescript - 15-20 minutes

• type Keyword

• Primitive typescript types

  • number

  • string

  • boolean

  • object

  • void

  • null

  • undefined

• Additional typescript types

  • any

  • unknown

  • never

• Composite typescript types

  • Arrays with []

  • Javascript objects with {}

  • Composition of types with & and |

• Optionality

  • ? keyword

• Typescript shortcuts

  • Record

  • Partial and Required

  • Omit

Section 2: React Basics

• What is React?

  • Frontend library for creating reusable UI components

• How do we make a react project?

  • Terminal → npx create-react-app [APP_NAME] --template typescript

• What is a React Component?

  • A piece of an application, often reusable

  • Defined as a function, taking in props and returning JSX

  • Takes in Props

• What is the DOM?

•  

• Key layouts

  • ettiquette + style → naming Pascal case (prettier)

  • vs code extensions

    • prettier

    • eslint

    • rainbow spaces

  • components

• props - activity

  • props type

  • Button takes in a prop

• Hooks, give e.g. as Use state/effect

  • Conditional styling

  • Use state

    • state is not dealt well with react (use context is option but not great)

    • Traffic light button

  • Use effect

    • make on every rerender

    • Traffic light button - change every second

    • syntax:

      • props: {x}

      • [a, setA] = useState(x)

      • useEffect(() => setA(whatever), [x])