Brainstorm the main content (workshop + exercise)

JS

First Workshop (Max Xue + Michael)

• brief description of where is it used

  • es6 vs es5 , interesting history (1 slide brief history)

    • comes up in interviews

• console.log

• language structures and features

  • basic syntax, operators/boolean/control flow/loops/keywords

• objects and arrays

• functions + arrow functions

• first class functions

• web environment e.g. DOM

• script tags

• add things

• remove elements

• query

• edit classes in the style

Second Workshop

• event listeners

• fetch + promises/async + await

• npm and node

• package json dependencies

• bundling (parcel)

• esmodules

EXERCISES

if they need more html/css help

• Henry ask leads about HTML/CSS

• Henry make announcement asking which trainees have learnt js/new to programming.

React

• node jsx. Looking at the react packages to see what react is actually doing.

  • root html tag

  • cdn

  • create component/creaete element

  • jsx

• A look into how react uses JS

• End goal → something similar to creating a react app

• What compilation and transpiling is

• Basically create React from scratch

  • create a basic component without .jsx

• Targets to combat against the misconception that react is its own language

• Why React? - question to expand upon
  

• Start with node, npm react app → show them what react is doing??

DEF:

• ettiquette + style → naming Pascal case (prettier)

• Components + props

• use state

• use effect

• demo making a form

• mui

bonus: autoformatter

• good vscode extension

Backend (Mongo + express) React

• streams next time? the fe + be work tgt

backend → workshop bonus

Delegate

Who does what

CATEGORY

BUSINESS WITHOUT NOTICE