Things we reckon should be included

(Brainstorming)

1. Prototyping @Joshi Ha (Unlicensed) get back to us

• Low (Pen and paper)

• High (Figma) - recreating spotify/instagram

• integrate activities

2. (offline) JS → since ppl have done 1531, it isnt good to repeat (help session)

• Key syntax – short video

• console.log

• Small explanation of javascript types

• arrow fns

• npm + node

• typescript

• arrow fns

• revise html css

• exercises - just on confluence

  • quick exercises

3. React

• typescript

• Small explanation of javascript types

• 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

• Event handlers

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

https://github.com/jedwed/trainee-squid-game-activity HOMEWORK

• More hooks

  • memo

• Styled components + libraries like MUI @Patrick Moore (Unlicensed)

  • Form - if can be succint

    • mui

    • styled component

• Fetch/async/await (HTTP) @Michael Vo (Unlicensed)

  • JSON?

  • relevant in grabbing from databases or websites

  • cat facts api

  • pokemon api @Henry Guo (Unlicensed)

• // Routing (Browser Route library)

  • demo

  • setup along the way

activities in the workshop

Group them together into 3 grps

1. Prototyping @Winnie Zhang (Unlicensed) @Merry Rosalie (Unlicensed)

2. (Optional) JS backup: @Henry Guo (Unlicensed)

3. React @Patrick Moore (Unlicensed) @Henry Guo (Unlicensed) @Liam Smith (Unlicensed)

4. React @Michael Vo (Unlicensed) @Henry Guo (Unlicensed) @Patrick Moore (Unlicensed)

Who does what

1. Prototyping @Winnie Zhang (Unlicensed) @Merry Rosalie (Unlicensed)

   1. Wk 2 1-3pm Thu

2. (Optional) JS @Joshi Ha (Unlicensed) backup: @Henry Guo (Unlicensed)

   1. Wk2 Weekend

3. React @Patrick Moore (Unlicensed) @Henry Guo (Unlicensed)

   1. Wk 3 1-3pm Thu

4. React @Michael Vo (Unlicensed) @Henry Guo (Unlicensed) @Patrick Moore (Unlicensed)

   1. Wk4 1-3pm Thu

Next wk meeting Sun 11am

1. asap release JS @Henry Guo (Unlicensed)

Expectations

• Slide shows

• Demos