Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • What is React?

    • Frontend library for creating reusable UI components

  • How do we make a react project?

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

  • 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])