React Workshop

Tags: react workshop

Title

React Workshop

Abstract

React is a JavaScript library for creating high-performing, maintainable JavaScript applications and brings a fresh approach to thinking into the JavaScript community.

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.

Aaron started using React in its v0.8 days after having worked with a number of other web frameworks, and immediately liked what he saw. From its drive towards componentisation to data management it’s been a great tool for building application dashboards, public websites and native applications. Aaron has introduced it to a number of different projects across a variety of industries through his career.

Day 1: React fundamentals

  • Introducing React and the Virtual DOM
    • Why React?
    • React’s Architecture
    • Advantages
  • Components
    • Props
    • State
    • Lifecycle
    • Styling
  • Developer experience
    • Dev Tools
    • Hot Reload
  • React with TypeScript
  • Functional patterns and immutability
  • State management patterns
    • Container/Smart components
    • Hooks
    • Redux
  • Error Handling
    • Error Boundaries
  • Routing and Single Page Applications (SPA’s)

Day 2: Real world React

  • Application/source control structure
  • Automated testing
  • Optimising app performance
  • webpack
    • Production configuration
    • Bundling
    • Code splitting/lazy loading
  • Integrating with a web server

Pre-requisites:

  • Understanding of JavaScript fundamentals
  • Participants need to bring a laptop
  • Latest Node LTS
  • Git
  • VSCode or other text editor

Duration: 2 days

Audience Profile

  • 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

Notes

This is a hands on workshop with a guided exercise that the students can follow along with, or alternatively they are welcome to build their own project.

I have been delivering this workshop for the past 4 years as part of the NDC Sydney conference.

Additional Resources