React Fundamentals & Modern JavaScript

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.

Curriculum

• 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
– Array.map and Array.filter

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