React Fundamentals & Modern JavaScript

12.08.2020, 09:00-17:00

This workshop is made together with React GraphQL Academy and City of Amsterdam.

Learning objectives

  • Learn React principles, such as the React composition model and the one-way explicit data flow, to leverage React’s full potential.
  • Understand what it is “thinking in React” and “lifting state up”
  • Comprehend how modern React works using hooks.
  • Understand how to use a declarative Routing the right way.


  • Modern JavaScript
    • Modern JavaScript for React – ES6 and beyond
    • Arrow Functions, Class syntax, Template strings (literals)
    • Destructuring
    • Default parameters, REST operator, Spread operator
    • Let and Const vs Var
    • REST + Spread properties
    • Iterators and functional programming in JS
    • Modules
    • Promises
    • ES6 exercise using TDD
  • Thinking in React
    • The Imperative to Declarative Shift
    • React key concepts
      • Props & State
        • useState hook
        • Lifting state up
      • One-way explicit data flow
    • Introduction to the React composition model
      • Virtual DOM and JSX
      • React Components, Elements, and Instances
      •  JSX and React.createElement
    • Developer tools
  • Routing and Data Fetching
    • React Router
      • Declarative routing
      • Implementing a master-detail web application
    • Data Fetching with useEffect hook

You need to be comfortable writing JavaScript and HTML to do this exercise. The exercise uses the following ES6 & ES5 features:- Module system (import/ export)
– Arrow functions
– and Array.filter

You need to have node and npm installed on your computer.