Refreshing Next Generation JavaScript

  • let & const:
  • arrow functions:
  • export & imports:
    • default vs. named exports
    • default = choose the name
    • named = comes from the file but alias allowed
    • import [name] from [location], import * from [location], import { named_const } from [location]
  • classes: blueprints for objects
  • classes, properties, methods: es7 next gen syntax
  • spread & rest operator: spread = split up array elements or obj props rest = merge list of function args into an array
  • destructuring: pull out ‘single’ items and store in variable
    • array destructuring:
    • object destructuring: {name} = { name: ‘max’: age: 90} // max
  • reference & primitives:
    • reference: arrays / objects = updates the pointer to the variable
    • copy by using the spread operator {…otherObject}
  • array functions:
    • filter, map, reduce, some, every, forEach, find, findIndex, concat, slice, splice

Understanding the base features and syntax

  • intro:
  • build workflow:
  • create react app:
  • folder structure:
  • component basics:
  • understanding jsx:
  • jsx restrictions:
  • functional component:
  • components & reusing:
  • outputting dynamic content:
  • props:
  • ‘children’ prop:
  • state:
  • props & state:
  • handling events
  • event listeners:
  • naming function components:
  • useState()
  • stateless vs stateful:
    • stateful = smart, container, stateful componenets
    • stateless = dumb, presentation, stateless components
  • method refs:
  • two way binding:
  • styling
  • inline styles: