Workshop: React using TypeScript

React is a JavaScript library for creating high-performing, maintainable JavaScript applications.

Being a declarative user interface library that is un-opinionated about the rest of your application it is easy to reason about it is simpler to learn and master the basics than a full application framework like Angular. Also thanks to the simple nature of React, the patterns and lessons you will learn are transferable to other libraries and frameworks.

This workshop's aim is to help you understand not just React, but the parts of the ecosystem it often touches. We will also

Jake started using React in ~2015 to try to build high performing trading application using web technologies, he loved the approach and has been using React for projects ever since. Jake is currently the Tech Lead at Seven West Media Australia helping build 7news.com.au, one of Australia’s biggest news site using TypeScript, React and Server Side rendering. He also has been doing training for many years, as a tech lead, an ex Readify consultant or at conferences.

Day 1: Fundamentals

  • JavaScript and TypeScript fundamentals
    • React uses a lot of native JavaScript features, even if you have been using JS for a while there will probably be a few things you will take away from this.
    • Closures & scopes - Hooks rely heavily on closures
    • Promises & async / await
    • TypeScript main features explained
  • Introducing React and the Virtual DOM
    • Why React?
    • React's Architecture
    • Advantages
  • Components
    • Props
    • State
    • Lifecycle
    • Hooks
  • Developer experience
    • Dev Tools
    • Hot Reload
  • React with TypeScript
  • Functional patterns and immutability
  • State management patterns
    • Vanilla React state
    • Redux

Day 2: Real world React

  • Architecting a React application
    • Application structure
  • What's next for React
    • Async rendering
    • Data loading
  • Routing and Single Page Applications (SPA’s)
  • Automated testing
  • Optimising app performance
  • WebPack
    • Production configuration
    • Bundling
    • Code splitting/lazy loading

Pre-requisites:

  • Understanding of JavaScript fundamentals, ideally ES2015

Who should attend:

This workshop is for you if you:

  • Want to learn what all the fuss is about React
  • Improve your JavaScript skills, this workshop will touch on many JavaScript patterns and features
  • Take your React understanding to the next level
  • You want to understand how to use TypeScript with React

Computer setup:

Participants need to bring a laptop with the following installed: